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