With the advent of modern web technologies,
and recent advancements in time travel, not only can we model this galaxy in Cinema 4D,
but we can use After Effects and Webflow to make it respond to our lateral mouse position
right inside a web page. And, we’ll cover this from the very beginning,
so if you never explored cinema 4D, or if you’re building skills in Adobe After Effects,
or if you’re just getting started designing and developing for the web, we’ll make sure
to go through every step of the process. And, we’ll do this in five parts: we’ll
create the animation in Cinema 4D, we’ll render it as an image sequence in After Effects,
we’ll use the bodymovin extension for After Effects to export it, we’ll drop that exported
file into Webflow, and we’ll set up an interaction so it responds to our mouse. It sounds like a lot, and it is, but we’ll
go through all this fairly quickly. Takes too long, Grimur might choose to edit
out parts that seem to go on… That’s why Star Trek first contact reimagined
the zombie genre. As for After Effects, the fact that comes
with Cinema 4D Light, means we can build really complex scenes and render them using Adobe
Media Encoder that gets us our image sequence. And, that’s they key. We’ll use that sequence to create our Lottie
animation. Airbnb created Lottie to integrate After Effects
animations right into the web. That’s what we’ll be doing in this video. Okay, Cinema 4D: this is our first step. And, we can start in After Effects. Just file, new, Cinema 4D. Let’s give this a name, Galaxy. Hit enter. Now, while this is loading, it’s a good
time to mention -- and it’s already loaded. This is Cinema 4D, and before we get started,
let’s change some render settings. We’ll go into edit render settings, and
let’s change our width to 1,000 pixels, and a height of 400 pixels. Now, your viewport may be different. It may have a different aspect ratio, you
might see if it’s sized differently, you might see darker bars on the bottom and top,
right here. We’ve just resized our so it corresponds
to that aspect ratio, that 1,000 x 400 aspect ratio, that 10:4 5:2 aspect ratio. Okay, time to get started. We’re not going to use any primitives for
this; instead, we’ll just use a light. So we’re going to add one light, and if
we render right now, by default, this is how our light shows up. We have the general settings here. If we render right now, by pressing render
view, what do we see? Nothing. And, that’s expected, because while there’s
a light there, there’s nothing for that light to illuminate. For instance, if we add a cube, let’s add
a cube here, and let’s move it back, you can see the light is affecting that cube. As we move the cube around, we can see the
light affecting our cube. Now, we’ll remove that cube, and we have
our light again, again if we render, let’s hit command R on Mac, or control R on a windows
as a shortcut, and you can see there’s nothing there, that’s expected. Let’s change that. And there are a few ways to have visible light
in Cinema 4D. One way is to use volumetric light. So with our light selected, you can change
visible light, this is under General, change the visible light to volumetric. If you render now, you can see the light,
but the really impressive part is if we put some type of primitive there, let’s do a
cube again, move this cube to the side, it should cast shadows. So, when that light hits that cube, that cube
is casting shadows. That’s volumetric light, and it’s pretty
interesting to work with, but it’s not what we’re using here. So we’ll select our light, change visible
light to none, and instead click lens. And, what lens lets us do is it lets us add
lens effects, or lens flares, and we can do that by switching glow to any of these presets,
like wide angle, or high eight. In this case, we’ll use star two. And if we render now, command R, or control
R on Windows, that’s what we can see. We have a visible light. This is a good starting point. Now, we can change the way this light looks. For instance, if we go into settings here,
if we click edit, we have what they call glow editor. And the glow editor let’s us modify each
element inside this lens flare, inside this lens effect. So, element number one, this looks pretty
good. We might want to change it to something a
little cooler, like a blue. That looks good. And go into each element, maybe this is okay
as-is, element three, and change this to something warmer, like a red or orange. That looks pretty good. Let’s hit okay, and render, that’s a pretty
good looking star. And we can also affect other things, like
scale. Let’s change the scale down to 5 percent
because there’s going to be a ton of stars. Let’s also look at this option right here,
glow distance scale. Let’s make sure that’s checked. That means if something’s farther away or
scaled differently, it’s brightness, it’s glow, will be decreased. So, with all these options enabled let’s
hit render. That’s one star. Not very galactic. We can make it galactic. And here’s how we can do that. Let’s use an array. The array option is right up here, we’ll
click that. And what happens when we render now? Still nothing. We still have the tiny star. We have to make that light a child of the
array. So let’s grab the light, click and drag,
and drag it into the array. And now, that array is duplicating, it’s
setting up copies for our light. So now we have seven copies, that means in
addition to our original, we have eight total stars. Still not enough for a galaxy. Let’s do something much higher like seven
hundred. And, that looks pretty good. If we render as-is, will it look like a galaxy? Not so much. Looks a little more like a portal, but this
is a good start, because in a galaxy the stars are randomized. It’s not a perfect ring. Instead, there’s randomization. So what we can do is right-click our array,
we can convert the current state, this current state, everything we see here, to an object. And that object is going to also be called
array. And if we open that up, we see individual
instances for every single star. Let’s turn off, let’s uncheck the original
array and collapse that. And this we’ll call Galaxy. Okay, let’s randomize our stars. Let’s select the top one, and then scroll
all the way down, hold down shift, select the bottom one, now all 700, 701 of our stars
are selected. And we can randomize their position, and we
can randomize their scale. Let’s go into tools, arrange objects, randomize. And, we can move them, this’ll be the range
in which something will move. So we can say, one hundred fifty centimeters
along our x-axis. Let’s value the first one as x, the second
one as y, the third one as z. X-axis is our left and right axis, so if we
hit enter, we’ll see everythings been randomized, but only one way, only in one direction, along
the x-axis, or, two directions along the x-axis. Let’s do the same thing along the y, but
let’s make it a little bit less, let’s do 30 centimeters so we get a little variation
along the y-axis, that’s up and down. Looking a little better. Maybe 50 centimeters for that one. That looks pretty good. And another 150 for the z-axis. This is our depth axis. And, that looks a lot better. If we render this as-is right now, if we render,
it doesn’t quite look right, though. Let’s affect scale, because in a galaxy,
not every point is identical. Points tend to cluster, there tend to be different
sizes of stars, different brightness levels. So, let’s do that. Let’s change our scale to 200, 200, 200. Render now. That’s looking a lot better. Now, there are still some changes. For instance, we can go to mode, and object,
and take that 5 percent scale maybe down to 3 percent, that might be a good base scale. That’s looking a lot better. Okay, now let’s put one giant star in the
middle so it looks like a center to our galaxy. And we can grab any of our lights, let’s
say number 701, copy, command C, paste, command V, and now we have an extra star. Let’s move that star. By the way that star is no longer in this
null, it’s no longer in this galaxy grouping, that’s this one right here, we can say,
Center of Galaxy. And, we can make this one instead of a scale
of 3, let’s do 100. And see what that looks like. Let’s render it as-is, and right now that’s
positioned over here, we’ll want to move that to the center. So we’re going to set our x position to
0, we’ll set our y position to 0, and we’ll set our z position to 0. Now if we render, we can see that star right
at the center. In fact, let’s affect that scaling, maybe
a little larger, maybe 200 percent. Let’s see what that looks like. That looks pretty good. 150 might be a nice compromise. There it is. Now, one more thing we can do to add a little
more granularity, some realism to this galaxy, we can take our first galaxy object, copy
and paste it, and then randomize yet again. Let’s grab our top one, and grab our bottom
while we’re holding down shift to select all of these, that’s looking good, the selection
has been made, let’s go into randomize. We can click this shortcut right here or just
go back up to tools, we’ll do it this way, and let’s randomize it again. Let’s move it even farther. Let’s do 400, here we can keep it at 50,
400. And scale, we can reset those to 100. And what we’re going to do here is a little
different, we’re going to make these a lot smaller. And, to do that, let’s go into our mode,
let’s go into object, and change the initial scale, the starting scale, to only 1 percent. Now if we render we should see a bunch of
smaller stars in the distance, this gives us extra depth, extra realism, and it looks
pretty good. Now, that galaxy we’ll call that Smaller
Stars, collapse that, now we have two big objects, we have Galaxy and Smaller Stars. You can zoom out and see what this looks like
in different views. That looks pretty good, but zoomed out we
lose a little bit of of that realism. Let’s create a camera object. Create a camera object, you can zoom out and
actually take a look at the camera object we just created. That’s the camera. To see what the camera sees, we’ll select
this little target icon, this little crosshair. Click that, now we’re looking at what the
camera sees. And, with the camera selected, let’s go
in and zoom a little more. Let’s go in a little bit closer. And, we’ll decrease our focal length, so
right now it’s a 36 millimeter lense, let’s change that to 24, so we have a little bit
of a winder field of view. Let’s render. That’s looking pretty good. So, let’s rotate this. Let’s animate our stars. Let’s animate our galaxy. So, our smaller stars, so we can animate them
at the same time, let’s drag those smaller stars to be a child of Galaxy. And collapse Galaxy. Now, if we move our playhead, nothing happens. We want this to animate as we go from frame
0 to frame 90. So at frame 0, let’s create a keyframe,
with Galaxy selected, let’s click right here to record active objects. We’ll create our first keyframe, then we’ll
move all the way to the end, frame 90. We’ll use our rotate tool right here, and
we'll just rotate. Let’s rotate about 90 degrees maybe, maybe
50 degrees is enough, and we’ll create a keyframe. If we click and drag the playhead, our galaxy
rotates. If we render any of these frames, it looks
pretty good. Now, we might want the center of the galaxy
to be a little closer to the center of the camera. We can do that with our camera selected, we
can move up that angle, that downward angle from -18 to maybe -12, or -13. Render that, and now the center of the galaxy
is closer to the center of the shot. Maybe -14. That’s looking pretty good. So, as our galaxy rotates, the camera remains
pointed to the center of the project. That’ s looking pretty good. Last step before we move on, let’s go to
file, and we’ll save our project. That’s part one in Cinema 4D. And, what we’ll do here is use After Effects
to render this out. And this part is pretty quick. And, it’s the interesting thing about the
integration between After Effects and Cinema 4D, because now that we’ve saved, we can
just switch over to After Effects, and our galaxy appears right there. We can drag that galaxy in to create a new
composition right down here, let go, and we have a new composition with the exact number
of frames, and as we rotate it’s kind of not the right view. We can see something, but it's not quite right. What we’re looking at is a preview, the
position of each of the stars, but what we want is to change our renderer from software
to standard. This is final. And when we do that, we’ll see our stars. Now, what happens if we want to make a change? What happens if we want to change for instance
the color on these lens effects. Well, we can switch over to Cinema 4D, we
can open our galaxy, we can select all of our major lights, these are all the lights
inside this group that are not the smaller stars, and let’s go in and hit edit, and
we change that color. For instance, we might want to make it less
teal and a little bluer, let’s do that. Hit okay. Hit okay. Save. And, when we switch over to After Effects,
that change is updated almost immediately. Maybe the color on the major light, this is
the big light at the center, the center of the galaxy, maybe we want to change that too. Let’s go to edit, and affect its color,
let's do the same thing over here, and let's warm up element 3. This was the red center, we can make it a
little warmer, little redder, hit okay. Okay. And save. If we take a look after switching to After
Effects, we can see we have that warmer center which loads right up. So, how do we turn this into an image sequence? Well it’s fairly straightforward, we go
to composition, add to Adobe Media Encoder Q, and when that loads up, we’re looking
for three different things. The first thing is that it’s a JPG sequence,
so the format option we’ll want to choose JPG. We’ll want to make sure it’s JPG sequence
here, but for now we’re going to ignore the second part and go with the basic settings
that are included. And then we’ll want to select our output
file, this is where each of the JPGs, each JPG of the sequence, will be saved. Let’s create a new folder called Galaxy
JPG Sequence, and we’ll hit enter again, and render. So that’s the image sequence .
How do we use it? More importantly, how do we use bodymovin
on an image sequence? Well let’s switch back over to After Effects
and let’s save our project. Let’s go to file, save, save as, and we’ll
call it Example Galaxy. Let’s close this composition, because we’re
going to create a new one in just a moment. And here’s how. Let’s grab our Example Galaxy folder, we’ll
go into that JPG sequence we created just a moment ago, command A on Mac or control
A on Windows to select all, and let’s just drag our image sequence, all 91 images, right
in here, into our project bin. They load right up, and with that, we can
just drag them right down to this blank area here, the layers area. And let go. Now, this is what's interesting. We can create a single composition using the
dimensions from any of these, since they’re all the same size, and we’ll create a still
duration of one frame, just one at the end, all other values are 0. This means each frame, each JPG will take
up one frame. And, we’re going to sequence the layers
with no overlap. Let’s hit okay. That image sequence is laid out right here. So, how do we use bodymovin? We just use bodymovin. Let’s go to window, extensions, bodymovin. Now, it might not show up right away. Sometimes this takes a moment, but when it
does, there it is, we can hit selected, we’ll make sure to select this for render, we’ll
go into the settings, and in the settings there are a couple things to look at. Assets, let’s open that up. We want to enable compression. Let’s do something like 40 for right now,
but we can tweak this and render it later if we want to increase that image quality
or decrease the image quality based on the result. We’re wanting to manage, we’re wanting
to find that perfect balance between image size, file size, and image quality. So, let’s also include in JSON, we’re
going to include these JPGs, these compressed JPGs in the JSON file. Hit save, confirm the destination, galaxy,
and render. Okay, now we’ve exported the file. Let’s place it inside our web page. And to do that, we’ll go over to assets,
and we’ll upload what we just did. We saved it as Galaxy, not JSON, we’ll hit
open, and that’s going to configure and when it’s done we can just hover over it
and preview that Lottie animation. And, we’ll just drag it right into our project,
right into animation placeholder. Now if we go to preview right now, you’ll
see the animation plays exactly as expected, but there’s about five pixels at the bottom
of empty space. Depending on how Lottie interprets this animation,
we may need to select our Lottie animation and add some negative margin, let’s do -5
pixels. If we render again, things look pretty good. Now, let’s go out of preview mode because
that’s going to get placed inside our webpage. Now let’s move onto the final step, where
we set up the interaction itself. And we can do that from over in interactions. And we’ll create a page trigger. When the mouse moves in the viewport, we want
this animation to progress. So let’s choose this option right here. And we’re going to play a mouse animation,
on mouse move, we’re going to play this mouse animation. We’ll create a new one right now, and we’ll
call it Galaxy Rotate. And there are two ways the mouse moves, there’s
the y-axis which is up and down, and then there's the x which is left and right. The x is what we’re looking to control. We’re just going to add a new action here,
we’re going to make sure that nothing else is selected, we don’t want the paragraph,
the heading, just the Lottie animation. We’ll create a new action right here, click
the little plus, and go down to Lottie. When the mouse is all the way to the left,
we want our animation to be at frame 0. When the mouse is all the way to the right,
at 100 percent, we want it to be at the end. Now, sometimes if we go too far to the end,
it can get a bit finicky, so we’ll pull that back down to 99. That looks pretty good. And if we turn on live preview, just enable
live preview, we can see it rotates exactly as expected. Now, what we’re getting is an inverted effect. As we move to the left, the galaxy rotates
counterclockwise. When we move to the right it rotates clockwise. We could flip that. We could just drag our animations to the opposite
sides, we’re just clicking and dragging the first one to 100 and the last one to 0. We’re just flipping those. And, if we enable live preview now, it works
exactly as expected. So, let’s go to preview mode, and that’s
it. As we move to the left, as we move to the
right, the galaxy follows. Now, we can go back out of preview mode and
affect smoothing or damping, and that value is at 50 percent, but we could switch to 85
percent or so, which means as we move our mouse, it’s going to catch up. The animation will smoothly approach the current
mouse position. But that’s it. Now, how does this contrast with other ways
of using 3D for the web? Because with modern web technologies, there
are technologies like WebGL that can render primitives and shadows, and textures, in real-time,
in many cases with small file sizes. But, when we get into more advanced lens effects,
physically accurate renders, shading, advanced depth of field, thats where prerendering works
great. It’s where an image sequence can ensure
things look consistent on all devices. It’s also great if you’re making something
that can’t be represented in 3D space, like if you’re converting an existing video to
an image sequence. But, for us, in this example, we just created
something in Cinema 4D from scratch, and we made it into an image sequence, exported that
using bodymovin, imported that into Webflow, and we set up the interaction to respond based
on the position of our mouse. And that’s using a mouse-based trigger to
control an image sequence, or video, with After Effects and Webflow.
