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.
