随着现代网络技术的出现,最近的进步在时间旅行,我们不仅可以在电影4 d模型这个星系,但我们可以用后效果和Webflow来应对我们的侧鼠标位置在一个web页面。我们将讨论这个从一开始,如果你没有接触过电影4 d,或如果你在Adobe After Effects建立技能,或者如果你是刚刚开始web设计和开发,我们要确保通过过程的每一步。我们会做这五部分:我们将创建动画电影4 d,我们使它作为一个图像序列的影响后,我们将使用后的bodymovin扩展影响出口,我们会把出口文件放到Webflow,我们会建立一个互动响应我们的鼠标。
听起来很多,,但我们会经历这一切很快。花费的时间太长,Grimur可能选择编辑部分似乎继续…
这就是为什么《星际迷航》第一次接触另外僵尸风格。至于效果之后,这一事实是与电影4 d光,意味着我们可以建立非常复杂的场景和渲染使用Adobe媒体编码器,得到我们的图像序列。这就是他们的关键。我们将使用这个序列来创建我们的洛蒂动画。Airbnb创建洛蒂整合影视特效动画直接进入网络。这就是我们要做的。
好吧,电影4 d:这是我们的第一步。我们可以开始后的效果。只是文件,新的电影4 d。让我们给这一个名字,星系。回车。现在,虽然这是加载,这是一个很好的时间来提,它已经加载。这是电影4 d,在我们开始之前,让我们改变一些渲染设置。我们将进入编辑渲染设置,让我们改变我们的宽度为1000像素,和一个400像素的高度。现在,您的窗口可能会有所不同。它可能有一个不同的长宽比,你可能会看到如果是大小的不同,你可能会看到黑暗的酒吧在底部和顶部,在这里。 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.
好了,开始的时候了。我们不会使用任何原语;相反,我们只使用一个光。所以我们要添加一个光,如果我们现在渲染,默认情况下,这是我们的光显示。我们这里一般设置。如果我们现在渲染,按渲染视图,我们看到了什么?什么都没有。这就是预期,因为虽然有光,没有什么光照亮。例如,如果我们添加一个多维数据集,让我们添加一个多维数据集,让我们移动它,你可以看到光线影响,多维数据集。当我们移动立方体时,我们可以看到光影响我们的多维数据集。 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.
现在,我们可以改变这个光看起来的方式。例如,如果我们进入设置,如果我们点击编辑,我们有他们所谓的辉光编辑器。和发光编辑器让我们修改每个元素在这个镜头光晕,在这个镜头的效果。所以,第一个元素,这看起来很不错。我们可能要改变一点凉爽,像一个蓝色的。看起来不错。进入每个元素,也许这是按原样好,三个元素,和改变这个温暖的东西,像一个红色或橙色。看起来很好。让我们打好,并呈现,这是一个很漂亮的明星。
我们还会影响其他的事情,比如规模。让我们改变规模降至5%,因为会有大量的恒星。让我们也看看这个选项,发光的距离。让我们确保的检查。这意味着如果远或比例不同,它的亮度,发光,将减少。所以,所有这些选项启用我们渲染。这是一个明星。不是很银河。我们可以让它银河。这里是如何做到这一点。 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.
现在,仍有一些变化。例如,我们可以去模式,对象,并采取5%规模可能降至3%,这可能是一个很好的基础。这是看起来好多了。好的,现在让我们把一个巨星在中间看起来我们银河系的中心。我们可以抓住我们的灯,假设701号,复制,命令C,粘贴,命令V,现在我们有一个额外的明星。让我们动起来,明星。顺便说一下,明星不再是零,它不再是在这个星系分组,这是这一个,我们可以说,星系的中心。,我们可以做这个,而不是3的规模,我们做100。看看看起来像什么。按原样我们渲染它,现在的定位,我们想移动到中心。 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.
这里我们要做的是有点不同的,我们要让这些小得多。这样做,让我们进入我们的模式,让我们进入对象,并改变最初的规模,规模开始,只有1%。现在如果我们使我们应该看到远处一堆小恒星,这给了我们额外的深度,额外的现实主义,它看起来很好。星系,我们叫小恒星,崩溃,现在我们有两个大的对象,我们星系和较小的恒星。你可以缩小,看看这看起来就像在不同的观点。看起来不错,但缩小我们失去一些现实主义。让我们创建一个相机对象。创建一个相机对象,你可以缩小,实际上看看相机我们刚刚创建的对象。这是相机。看到相机所看到的,我们会选择这个小目标图标,这个小十字。 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.
让我们旋转。让我们动画明星。让我们动画星系。所以,我们的小恒星,所以我们可以同时激活它们,让我们把这些小恒星星系的孩子。和星系崩溃。现在,如果我们移动播放头,什么也不会发生。我们希望这个动画从0到帧90。所以在帧0,让我们创建一个关键帧,选择与星系,我们点击这里来记录活动对象。我们将创建我们的第一个关键帧,然后我们将会一直到最后,90帧。我们将使用旋转工具,我们就旋转。 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.
,我们要做的就是使用后效果呈现出来。这部分是非常快。它是有趣的效果和电影4 d后之间的集成,因为现在我们得救了,之后我们可以切换到效果,我们的星系出现在这里。我们可以拖动,在创建一个新的星系组成正确的下面,放手,和我们有一个新成分的确切数字帧,当我们旋转的不正确的观点。我们可以看到一些东西,但这并不完全正确。我们正在寻找的是一个预览,每个星星的位置,但我们想要的是改变我们的渲染器从软件标准。这是最后一次。当我们这样做,我们将会看到星星。
现在,如果我们想要改变吗?如果我们想改变例如这些镜头的颜色效果。我们可以切换到电影4 d,可以打开我们的星系,我们可以选择我们的主要灯,这些灯在这个组的小明星,让我们进去,点击编辑,我们改变颜色。例如,我们可能想让它更少的水鸭和小蓝,做一下。打好了。打好了。保存。当我们切换到影响后,这一变化几乎立即更新。也许在主要的光色,这是大光中心,星系的中心,也许我们也想改变这种情况。让我们去编辑和影响它的颜色,让我们做同样的事情,让我们热身元素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.
那么,我们如何把这变成一个图像序列?这是相当简单的,我们去组成,加入Adobe媒体编码器Q,当负载,我们正在寻找三个不同的东西。第一件事是,它是一个JPG序列,所以我们希望选择JPG格式。我们要确保它是JPG序列,但是现在我们要忽略第二部分和包含的基本设置。然后我们要选择输出文件,这是每一个JPG格式,每个序列的JPG,将被保存。让我们创建一个新文件夹称为星系JPG序列,我们再回车,渲染。这就是图像序列。
我们如何使用它呢?更重要的是,我们如何在一个图像序列使用bodymovin ?我们切换到后效果和保存我们的项目。让我们去文件,保存、另存为,我们将称之为星系的例子。让我们关闭这个成分,因为我们要创建一个新的。这是如何。让我们抓住我们的例子星系文件夹,我们将进入JPG序列我们就在片刻前,创建命令在Mac或Windows上的控制选择,我们拖我们的图像序列,所有91个图像,就在这里,为我们的项目。他们加载正确的,与此同时,我们可以把它们拖到这个空白区域,层区域。和放手。现在,这是有趣的。 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.
好了,现在我们已经出口文件。让我们把它在web页面。,为此,我们将去资产,我们将上传我们刚才做的。我们不保存它作为星系,JSON,我们会开放,将配置和完成后我们可以在洛蒂动画和预览。我们马上就把它拖到我们的项目中,对动画占位符。现在,如果我们现在去预览,您将看到动画剧本与预期完全一致,但是有大约5像素空间的底部。根据洛蒂如何解释这个动画,我们可能需要选择洛蒂动画和添加一些负利润,让我们做5个像素。如果我们再次呈现,情况看上去很好。现在,让我们出去的预览模式,因为会放在我们的网页。
现在让我们进入最后一步,我们设置交互本身。我们可以从交互。我们将创建一个页面触发。当鼠标移动视窗,我们希望这个动画的进步。我们选择这个选项。我们将扮演一个鼠标动画,在鼠标移动,我们要玩这个鼠标动画。现在我们将创建一个新的,我们称之为星系旋转。鼠标移动有两种方法,有向上和向下的轴,然后还有x左和右。x是我们寻求控制。我们将添加一个新的行动,我们要确保没有其他被选中时,我们不希望段落,标题,只是洛蒂动画。 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.
现在,我们得到的是一个反效果。当我们搬到左边,逆时针旋转的星系。当我们向右顺时针旋转。我们可以翻转。我们可以把我们的动画的两端,我们只是点击和拖动第一个100年,最后一个0。我们只是翻转。如果我们现在启用实时预览,它完全按预期工作。所以,让我们去预览模式,就是这样。当我们搬到左边,我们向右移动,星系。现在,我们可以回到预览模式,影响平滑或阻尼值是50%,但我们可以切换到85%左右,这意味着当我们移动鼠标,它就会迎头赶上。 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.
