《网页动画设计与制作Flash MX 2004 教学课件 ppt 作者 陈永东 项目7-一般动画的设计》由会员分享，可在线阅读，更多相关《网页动画设计与制作Flash MX 2004 教学课件 ppt 作者 陈永东 项目7-一般动画的设计（26页珍藏版）》请在金锄头文库上搜索。
1、网页动画设计与制作Flash,项目七 一般动画的设计,项目七 一般动画的设计,【项目背景】 小张在进入一家网络公司一段时间后，已经能够使用网页动画设计软件的基本功能。现在，公司经理要求他为电子商务网站设计一些常用的一般动画，包括依次显示公司名称的动画、产品图片沿某个路径运动的动画、形状变化的动画、望远镜动画等。,【项目分析】,1常用的一般动画设计方法分哪几种？ 2应该在什么场合选取哪种类型的动画设计方法？,【任务分解】,任务1：设计逐帧动画。 任务2：设计渐变动画。 任务3：设计引导层动画。 任务4：设计遮罩动画。,任务1 设计逐帧动画,读懂时间轴上动画的表示方式。 创建逐帧动画。 了解时间轴
2、按钮。 使用绘图纸方式扩展观察方式。,1读懂时间轴上动画的表示方式,（1）补间动作：用起始关键帧处的一个黑色圆点指示，而中间的补间帧有一个浅蓝色背景的黑色箭头。 （2）补间形状：用起始关键帧处的一个黑色圆点指示，而中间的帧有一个浅绿色背景的黑色箭头。 （3）虚线标记，表示补间是断的或不完整的。 （4）单个关键帧：用一个黑色圆点表示。单个关键帧后面的浅灰色帧包含无变化的相同内容，并带有一条黑线，而在整个范围的最后一帧还有一个空心小矩形。 （5）出现一个小a标记，表明已利用“动作”面板为该帧分配了一个帧动作。 （6）出现红色小旗标记，表明该帧包含一个标签或注释。 （7）出现金色的锚记，表明该帧是一
3、个命名锚记。,2创建逐帧动画,（1）单击层名称使之成为活动层，然后在动画开始播放的层中选择一个帧。 （2）如果该帧不是关键帧，可执行“插入”“时间轴”“关键帧”命令，使之成为一个关键帧。 （3）在序列的第一个帧上创建插图。此时，可以使用绘画工具，也可以从剪贴板中粘贴图形，或导入一个文件。 （4）单击同一行中右侧的下一帧，然后执行“插入”“时间轴”“关键帧”命令，或者右键单击它，然后从快捷菜单中选择“插入关键帧”。这将添加一个新的关键帧，其内容和第一个关键帧一样。 （5）在舞台中改变该帧的内容，设计动画接下来的变化或新增的信息。 （6）为了完成逐帧动画序列，可重复第 4 步和第 5 步，直到创建
4、了所需的动作。 （7）如果要测试动画序列，可执行“控制”“播放”命令，或单击“控制器”上的“播放”按钮。,3了解时间轴按钮,4使用绘图纸方式扩展观察方式1,（1）在舞台上同时查看动画的几个帧：可以单击“绘图纸外观”按钮。在起始绘图纸外观和结束绘图纸外观标记（在时间轴标题中）之间的所有帧被重叠为“文件”窗口中的一个帧,4使用绘图纸方式扩展观察方式2,（2）控制绘图纸外观显示：要控制绘图纸外观显示，可执行以下操作之一。 将具有绘图纸外观的帧显示为轮廓：可单击“绘图纸外观轮廓”按钮。 更改任一绘图纸外观标记的位置：将它的指针拖到一个新的位置。 编辑绘图纸外观标记之间的所有帧：单击“编辑多个帧”按钮。
5、 （3）更改绘图纸外观标记的显示：更改绘图纸外观标记的显示的方法如下。 单击“修改绘图纸标记”按钮，出现一个菜单，然后可从菜单中选择其中一个选项。,任务2 设计渐变动画,了解补间动画的类型。 使用“属性”面板的相关选项创建补间动画。 使用“创建补间动画”命令创建补间动画。 使用“补间形状”创建动画。 掌握在补间形状中使用形状提示的方法。,1了解补间动画的类型,“补间动画”也称“渐变动画”，主要用于补间实例、组和类型属性的变化，即它能自动补全两个关键帧之间各帧的画面。 Flash可以补间实例、组和类型的位置、大小、旋转和倾斜。 另外，Flash可以补间实例和类型的颜色、创建渐变的颜色切换或使实例
6、淡入淡出。补间动画主要有两大类。 （1）以同一个实例的位置、大小、旋转、倾斜及颜色的变化的动画为主，又称“补间动作”或“运动渐变动画”。这种类型的动画还可以利用引导层创建按指定路径运动的动画，该问题将在下一个任务中讨论。 （2）以两个不同实例间形状的变化的动画为主，又称“补间形状”，或“形状渐变动画”。,2使用“属性”面板的相关选项创建补间动画1,（1）单击层名称使之成为活动层，然后在动画开始播放的层中选择一个空白关键帧。 （2）创建补间动画的第一个帧，可以执行以下操作之一。 用钢笔、椭圆、矩形、铅笔或刷子工具创建一个图形对象，然后把它转换为一个元件。 在舞台中创建一个实例、组或文本块。 将元
7、件的实例从“库”面板中拖出。 （3）在动画要结束的地方创建第二个关键帧，然后选择结束帧（在时间轴上紧贴着第二个关键帧的左侧）。 （4）在第二个关键帧，对项目执行以下操作之一，以更改结束帧中的实例、组或文本块。 将项目移动到新的位置。 修改该项目的大小、旋转或倾斜。 修改该项目的颜色（仅限实例或文本块）。,2使用“属性”面板的相关选项创建补间动画2,（5）单击补间帧范围内的任何帧，然后从”属性”面板（可执行“窗口”“属性”命令打开）中的“补间”下拉式列表框中选择“动作”，或者可以右键单击第一个关键帧，然后在快捷菜单中执行“创建补间动画”命令。,（6）如果在第 4 步中修改了项目的大小，则选择“缩
8、放”来补间所选项目的大小。 （7）拖动“简易”旁边的箭头或输入一个值，以调整补间帧之间的变化速率。,2使用“属性”面板的相关选项创建补间动画3,（8）要在补间时旋转所选的项目，可从“旋转”下拉式列表框中选择一个选项 （9）如果使用运动路径，可选择“调整到路径”，以将补间元素的基线调整到运动路径。 （10）在“属性”面板中选择“同步”选项，使图形元件实例的动画和主时间轴同步。 （11）如果使用运动路径，则选择“对齐”以根据其注册点将补间元素附加到运动路径。,3使用“创建补间动画”命令创建补间动画,（1）选择一个空白关键帧，然后在舞台中绘制一个对象，或将元件的实例从“库”面板中拖出。注意：要创建补
9、间，在层中只能有一个项目。 （2）执行“插入”“时间轴”“创建补间动画”命令。 如果在第 1 步中绘制一个对象， Flash 会自动将该对象转换为一个元件并给它分配一个名称“补间1”。 （3）单击希望动画结束的帧，然后执行“插入”“时间轴”“帧”命令。 （4）将舞台中的对象、实例或文本块移动到所需的位置。如果要补间元素的缩放比例，可调整该元素的大小。如果要补间元素的旋转，可调整该元素的旋转。完成调整后，取消选择该对象，在帧范围的结束处会自动添加一个关键帧。 （5）设置“扩大值”、“旋转”、“调整到路径”、“同步”、“对齐”等相关选项，方法可参考前面的方法。,4使用“补间形状”创建动画,（1）单
10、击层名称使之成为活动层，然后在动画开始播放的地方创建或选择一个关键帧。 （2）在序列的第一个帧上创建或放置插图。要获得最佳效果，帧应当只包含一个项目（图形对象或分离的组、位图、实例或文本块）。 （3）在时间轴中选择关键帧。 （4）执行“窗口”“属性”命令，打开“属性”面板。 （5）从“属性”面板中，从“补间”下拉式列表框中选择“形状”。 （6）拖动“简易”旁边的箭头或输入一个值，以调整补间帧之间的变化速率。 （7）选择一个“混合”选项。 “分布式”选项：创建的动画中间形状比较平滑和不规则。 “角形”选项：创建的动画中间形状会保留有明显的角和直线。 （8）在第一个关键帧后创建第二个关键帧，中间的
11、帧数为所需的数量。 （9）在第二个关键帧选定的情况下，选择在第一个关键帧中放置的插图，执行以下操作之一。,5掌握在补间形状中使用形状提示的方法,（1）选择补间形状序列中的第一个关键帧。 （2）执行“修改”“形状”“添加形状提示”命令，或使用快捷键Ctrl+Shift+H。起始形状提示会在该形状的某处显示为一个带有字母 a 的红色圆圈。 （3）将形状提示移动到要标记的点。 （4）选择补间序列中的最后一个关键帧。结束形状提示会在该形状的某处显示为一个带有字母 a 的绿色圆圈。 （5）将形状提示移动到结束形状中与您标记的第一点对应的点。 （6）再次播放动画，看看形状提示是如何更改补间形状的。移动形状
12、提示，对补间进行微调。 （7）重复这个过程，添加其他的形状提示。将出现新的提示，所带的字母紧接之前字母的顺序（b、c 等等）。,任务3 设计引导层动画,创建引导层动画。 链接层和运动引导层。 断开层和运动引导层的链接。,1创建引导层动画,（1）照前面学过的方法创建有补间动画的动画序列。如一个沿直线运动的小球。 （2）执行以下操作之一。 选择包含动画的层，然后执行“插入”“时间轴”“运动引导层”命令。 右键单击包含动画的层，然后从快捷菜单中执行“添加引导层”命令。 选择包含动画的层，然后单击时间轴左下角的第二个按钮。 （3）使用“钢笔”、“铅笔”、“直线”、“圆形”、“矩形”或“刷子”工具绘制所
13、需的路径。 （4）单击原动画序列所在层（如图层1），单击黑色箭头工具，将中心与线条在第一帧中的起点和最后一帧中的终点对齐。 （5）如果要隐藏运动引导层和线条，以便在工作时只有对象的移动是可见的，可单击运动引导层上的“眼睛”列。,2链接层和运动引导层,将现有层拖到运动引导层的下面，该层在运动引导层下面以缩进形式显示，该层上的所有对象自动与运动路径对齐。 在运动引导层下面创建一个新层，在该层上补间的对象自动沿着运动路径补间。 在运动引导层下面选择一个层，执行“修改”“时间轴”“图层属性”命令，出现“图层属性”对话框；然后在“图层属性”对话框中选择“被引导” 。,3断开层和运动引导层的链接,（1）选
14、择要断开链接的层。 （2）执行以下其中一项操作。 拖动运动引导层上面的层。 执行“修改”“时间轴”“图层属性”命令，然后在“图层属性”对话框中选择“正常”作为图层类型,任务4 设计遮罩动画,添加遮罩层。 建立与取消层与遮罩层的链接。,1添加遮罩层,（1）选择或创建一个层，其中包含出现在遮罩中的对象，已导入一幅明星图片（如“1938剧照.jpg”），并占了30帧的位置。 （2）选择该层，然后执行“插入”“时间轴”“图层”命令，或单击时间轴上的“插入新图层”按钮，以在其上创建一个新层。这一层将被当作遮罩层，遮罩层总是遮住紧贴其下的层，因此要确保在正确的地方创建遮罩层。 （3）在第（2）步中新建的层
15、上放置填充形状、文字或元件的实例。 （4）右键单击时间轴中的遮罩层名称，然后从快捷菜单中选择“遮罩层”，出现被遮罩后的效果。 该层转换为遮罩层后，将用一个遮罩层图标来表示。紧贴它下面的层将链接到遮罩层，其内容会透过遮罩上的填充区域显示出来。被遮罩的层的名称将以缩进形式显示，其图标将更改为一个被遮罩的层的图标。 （5）播放或测试动画。,2建立与取消层与遮罩层的链接,（1）建立层与遮罩层间的链接：要在创建遮罩层后遮住其他的层，可执行以下操作之一。 将现有的层直接拖到遮罩层下面。 在遮罩层下面的任何地方创建一个新层。 执行“修改”“时间轴”“图层属性”命令，然后在“图层属性”对话框中选择“被遮罩”选
16、项。 （2）断开层和遮罩层的链接：要断开层和遮罩层的链接，可以选择要断开链接的层，然后执行以下其中一项操作。 将层拖到遮罩层的上面。 执行“修改”“时间轴”“层属性”命令，然后选择“正常”选项。,项目小结,任何一个复杂的动画都是由一段段简单的动画构成的，所以你对本项目中涉及的一般的动画的种类及设计方法一定要熟练掌握。 逐帧动画并没有让计算机软件发挥什么利用，它只是把一帧简单地边起来；补间动作对于运动、形状等动画还是很有用的；补间形状对于从一个图形变换到另一个图形的动画是最适合的；引导层动画显然是对需要沿某个规定的曲线路径运动的动画而设计的；遮罩层动画把一层的某些地方遮住，其用法是最灵活的。 总之，应该充分熟悉这些基本的动画设计方法，然后根据实际动画的需要，将各种方法综合起来，以实现较复杂动画的各种功能。,
