Tutorial 5.10: Using Frame by Frame  Layers for Animation (Pro Only)

教程 5.10：使用逐帧图层制作动画（仅限专业版）

(资料图片仅供参考)

Moho offers additional features that make frame by frame animation much easier.  In this tutorial you’ll create a similar inchworm animation using the new Frame by  Frame Animation Layer features found in Moho.

There are two different ways that you can create frame by frame animation layers: 

• After you create a switch layer and place a vector layer inside of it, doubleclick the switch layer to open the Layer Settings dialog. Select the Switch tab,  and check the Frame-by-frame drawing option. Now the Switch Layer knows  that it is being used for frame by frame animation.

• Or, from the menu in the Layers window, choose Frame by Frame to create a  new Frame by Frame layer. This accomplishes the above method in a single  step. Moho creates a new switch layer, sets it up for frame by frame animation,  and places the first vector layer inside of it. You’ll use this method in the tutorial  that follows. 

To complete this tutorial, follow these steps: 

1. Choose File > New to create a new Moho project. 

2. In the Layers palette, choose Frame By Frame to create a new Frame by Frame  layer. Name the new layer Inchworm. When this layer is selected, all of the  drawing tools become available. You will not need to expand the Inchworm  layer and draw on the individual frames while you are working in a Frame by  Frame Animation layer. You’ll also see some new controls above the timeline.  From left to right, these controls are used to Add a frame, Delete a frame, or  Duplicate a frame. You can also enter a frame by frame advance interval, if  desired, to represent the number of frames that you want to advance in the  timeline each time you add a new frame.

Moho 提供了使逐帧动画更容易的附加功能。在本教程中，您将使用 Moho 中新的逐帧动画层功能创建类似的尺蠖动画。

有两种不同的方法可以逐帧创建动画层：

• 创建切换层并在其中放置矢量图层后，双击切换层以打开“层设置”对话框。选择切换选项卡，然后检查逐帧绘图选项。现在 Switch Layer 知道它正在用于逐帧动画。

• 或者，从“图层”窗口的菜单中，选择逐帧创建一个新的逐帧图层。这一步完成了上述方法。 Moho 创建一个新的切换层，为逐帧动画设置它，并将第一个矢量图层放置在其中。您将在后面的教程中使用此方法。

要完成本教程，请执行以下步骤：

1. 选择 File > New 创建一个新的 Moho 项目。

2.在“图层”面板中，选择逐帧创建一个新的逐帧图层。将新图层命名为 Inchworm。选择此图层后，所有绘图工具都可用。当您在逐帧动画层中工作时，您不需要展开 Inchworm 层并在各个帧上绘图。您还会在时间线上方看到一些新控件。从左到右，这些控件用于添加框架、删除框架或复制框架。如果需要，您还可以逐帧输入前进间隔，以表示每次添加新帧时要在时间轴中前进的帧数。

Frame by Frame controls in the timeline toolbar: Add frame, Delete frame, duplicate  frame, and advance interval.

时间线工具栏中的逐帧控件：添加帧、删除帧、复制帧和前进间隔。

You can use shortcuts to accomplish the same functions as the  Frame by Frame controls in the timeline toolbar. Press F5 to add  a new frame/layer, Shift+F5 to delete one, and F6 to duplicate the  current frame/layer and advance to the next frame.

您可以使用快捷键来完成与时间线工具栏中的逐帧控件相同的功能。 按 F5 添加新帧/图层，Shift+F5 删除一个，按 F6 复制当前帧/图层并前进到下一帧。

选择斑点画笔。 将画笔半径设置为 0.13。

4. From the Style window, select a medium green for a fill color, and a dark green  for the stroke color. Set the stroke width to 10.

4. 从样式窗口中，选择中绿色作为填充颜色，然后选择深绿色

为描边颜色。 将笔画宽度设置为 10。

选择绿色填充颜色，深绿色笔触颜色，并将笔触宽度设置为 10

5. On Frame 0 (Layer 1), draw an inchworm that is almost flat to the ground.

5. 在第 0 帧（第 1 层）上，绘制几乎与地面平齐的尺蠖。

6. Press F5 to create a new frame/layer to the Inchworm switch layer. This will also  advance the time by one frame 

7. Turn on the Onion Skin feature by clicking the Enable Onion Skins button in the  toolbar area above the timeline. This will allow you to see the outline of the  previous frame.

6. 按 F5 为 Inchworm 开关层创建一个新的框架/层。 这也会将时间提前一帧

7. 通过单击时间线上方工具栏区域中的启用洋葱皮按钮打开洋葱皮功能。 这将允许您查看前一帧的轮廓。

启用洋葱皮，以便您可以看到上一层的轮廓。

8. Now on Frame 1 (Layer 2) draw another inchworm that is raised in the middle,  remembering to also consider that its length is shorter due to volume. The  second frame should look something like the following figure.

8. 现在在第 1 帧（第 2 层）上绘制另一个在中间凸起的尺蠖，记住还要考虑到由于体积，它的长度更短。 第二帧应该如下图所示。

9. Press F5 again and draw another version of the inchworm that has its middle  raised a little more. Repeat this a few more times, drawing successive  inchworms on Frame 2 (Layer 3), Frame 3 (Layer 4), and Frame 4 (Layer 5). The  examples of each are shown below.

9. 再次按 F5 并绘制另一个版本的尺蠖，它的中部稍微抬高了一点。 再重复几次，在第 2 帧（第 3 层）、第 3 帧（第 4 层）和第 4 帧（第 5 层）上绘制连续的尺蠖。 每个示例如下所示。

10. In frames 5 through 8, you will create frames that move the inchworm back  toward the flat to ground position. Again, press F5 as you advance through  Frame 5 (Layer 6), Frame 6 (Layer 7), Frame 7 (Layer 8) and Frame 8 (Layer 9).  Examples of each layer are shown below.

10. 在第 5 到 8 帧中，您将创建将尺蠖移回平地位置的帧。 再次按 F5 键，在您前进通过第 5 帧（第 6 层）、第 6 帧（第 7 层）、第 7 帧（第 8 层）和第 8 帧（第 9 层）。 每层的示例如下所示。

If you expand the Inchworm layer at this point, you will see  Layers 1 through 9 in the Inchworm Frame by Frame Animation  layer. After looking at the layers, collapse the Inchworm layer again  and keep it selected for the following steps.

如果此时展开 Inchworm 层，您将在 Inchworm 逐帧动画层中看到第 1 层到第 9 层。 查看图层后，再次折叠 Inchworm 图层并在以下步骤中保持选中状态。

11. Now you can go back with the Freehand tool and add the details to the layers  that are already there. Select the Freehand tool from the Draw tools. Verify that  the following options are selected: 

ƒ Auto Weld: On 

ƒ Trim Start: Checked 

ƒ Trim End: Checked 

ƒ Auto Close: Unchecked

ƒ Auto Fill: Unchecked 

ƒ Auto Stroke: Checked 

ƒ Merge Strokes: Checked

11. 现在您可以使用手绘工具返回并将细节添加到已经存在的图层中。 从绘图工具中选择手绘工具。 验证是否选择了以下选项：

自动焊接：开

修剪开始：选中

修剪结束：选中

自动关闭：未选中

自动填充：未选中

自动行程：选中

合并笔划：选中

12. Return to Frame 0 in the timeline and add your details to the layer, similar to the  following figure.

12. 返回到时间轴中的第 0 帧，并将您的详细信息添加到图层，类似于下图。

13. Now move to Frame 1 to add similar details in that layer. Continue on, adding  the details to the remaining frames in the Inchworm Frame by Frame layer  (make sure to include the last layer, Layer 9, which appears on Frame 8). 

If you find the onion skin outlines too distracting, you can turn  them off in the toolbar above the timeline. 

14. Now you can use any of Moho’s standard retiming tools to change the timing  if it moves too fast for you. For this project, choose Animation > Rescale  Keyframes. In the Rescale Keyframes dialog, check the Rescale entire  document option, and then enter 16 in the New End Frame field. This will cause  the animation to move at half its current speed.

13. 现在移动到第 1 帧，在该层添加类似的细节。 继续，将细节添加到 Inchworm 逐帧图层中的剩余帧（确保包括最后一层，第 9 层，它出现在第 8 帧上）。

如果您发现洋葱皮轮廓过于分散注意力，您可以在时间线上方的工具栏中将其关闭。

14. 现在您可以使用 Moho 的任何标准重定时工具来更改时间，如果它对您来说移动得太快。 对于此项目，选择“动画”>“重新缩放关键帧”。 在“重新缩放关键帧”对话框中，选中“重新缩放整个文档”选项，然后在“新结束帧”字段中输入 16。 这将导致动画以当前速度的一半移动。

15. Now click Frame 18 to make it the current frame. Choose Animation > Add  Keyframe. Moho will ask you if you want to add keyframes to the sublayers too.  Choose Yes.

15. 现在单击第 18 帧，使其成为当前帧。 选择“动画”>“添加关键帧”。 Moho 会询问您是否也想向子图层添加关键帧。 选择是。

在第 18 帧向 Inchworm 图层和子图层添加关键帧。

Now select the keyframe at Frame 18. Right-click again and choose Cycle. The  default option is Absolute and it is set to cycle back to frame 1. Instead, change  the value so it cycles back to frame 0. Then exit the dialog

现在选择第 18 帧处的关键帧。再次右键单击并选择循环。 默认选项是绝对，它设置为循环回到第 1 帧。改为更改值，使其循环回到第 0 帧。然后退出对话框

17. Press the Play button to watch your Inchworm crawling on the screen. Your  inchworm animation should be similar to the following. 

18. Save the project under a filename of your choosing. A finished version of the  project is included in your User Content folder as Tutorial 5.10 finished.moho.

17. 按播放按钮观看您的尺蠖在屏幕上爬行。 您的尺蠖动画应该类似于以下内容。

18. 以您选择的文件名保存项目。 该项目的完成版本作为 Tutorial 5.10 finished.moho 包含在您的用户内容文件夹中。