第14章简单动画制作

返回总目录第14章简单动画制作14.2©2007第14章简单动画制作•了解动画•掌握制作逐帧动画的方法•掌握制作补间动画的方法•掌握制作交互动画的方法教学目的14.3©2007第14章简单动画制作动画简述逐帧动画补间动画本章内容交互动画14.4©2007第14章简单动画制作动画的类型关于帧动画简述14.1动画简述14.5©2007第14章简单动画制作动画的类型逐帧动画：制作好每一帧画面，然后生成动画效果，传统的动画都是这样做出来的。补间动画：制作好若干关键帧的画面，由Flash通过计算生成中间各帧，使得画面从一个关键帧过渡到另一个关键帧。过渡动画又分为运动过渡动画和变形过渡动画14.6©2007第14章简单动画制作关于帧（1）选择“修改”→“文档”命令，打开“文档属性”对话框。（2）在“文档属性”对话框中，设置动画大小为450px×350px。单击“确定”按钮，关闭“文档属性”对话框，这时在时间轴面板中会自动创建一个空白关键帧。14.7©2007第14章简单动画制作关于帧（3）选择“插入”→“时间轴”→“图层”命令，新建一个“图层2”，这个“图层2”位于当前状态。（4）单击工具栏中的矩形工具，在场景中绘制一个矩形，这时就创建了一个关键帧，时间轴上的白色小圆点也将变为黑色。14.8©2007第14章简单动画制作关于帧（5）选中绘制的矩形，然后选择“修改”→“组合”命令，组合图形。（6）在第20帧上右击，从弹出的快捷菜单中选择“插入关键帧”命令，这时将在该帧插入一个关键帧。14.9©2007第14章简单动画制作关于帧（7）单击第20帧，然后将选中的矩形随意移动一个位置。（8）在第1帧上右击，从弹出的快捷菜单中选择“复制帧”命令，复制选中的帧。（9）在第40帧上右击，从弹出的快捷菜单中选择“插入空白关键帧”命令，创建一个空白帧。（10）再次在第40帧上右击，从弹出的快捷菜单中选择“粘贴帧”命令，将复制在Windows剪贴板中的帧粘贴到该帧，这时将又形成一个关键帧。14.10©2007第14章简单动画制作关于帧（11）在“图层2”时间轴的第1帧上右击，从弹出的快捷菜单中选择“创建补间动画”命令，再在第20帧上右击，从弹出的快捷菜单中选择“创建补间动画”命令，这样即可创建从第1帧到第20帧的动画。（12）用同样的方法制作第20帧到第40帧之间的动画。14.11©2007第14章简单动画制作关于帧（13）在“图层1”上单击第l帧，然后选择“文件”→“导入”→“导入到舞台”命令，弹出“导入”对话框。选择一幅图像，将其导入舞台作为动画的背景，这时的时间轴面板如图所示。14.12©2007第14章简单动画制作关于帧（14）在“图层1”的第40帧上右击，从弹出的快捷菜单中选择“插入帧”命令，这时将把第1个关键帧扩展到2～40帧，此时的时间轴面板如图所示14.13©2007第14章简单动画制作创建逐帧动画创建逐帧动画实例逐帧动画14.2逐帧动画14.14©2007第14章简单动画制作创建逐帧动画（1）在时间轴面板中选择合适的层或创建一个新层。（2）选择第1个关键帧，如果选择的帧不是关键帧，可以选择“插入”→“时间轴”→“关键帧”命令，使它成为关键帧。（3）使用工具栏中的各种工具或导入文件，在舞台中制作动画第1帧的动画内容。（4）在时间轴面板单击相同层的当前帧右边一帧的单元格，然后选择“插入”→“时间轴”→“空白关键帧”命令，插入一个空白关键帧。（5）在场景中绘制图形，作为第2个关键帧。（6）重复上面两个步骤，一帧一帧地增加新的关键帧，直到完成全部动画所需的帧。（7）选择“控制”→“播放”命令或“控制”→“测试影片”命令，播放动画。14.15©2007第14章简单动画制作创建逐帧动画实例（1）新建一个Flash文件，设置文档属性为400px×300px。（2）单击工具栏中的文本工具，并在属性面板中设置文字的大小为96，单击“切换粗体”按钮和“居中”按钮。（3）在舞台中输入数字5，如图所示。14.16©2007第14章简单动画制作创建逐帧动画实例（4）单击第2帧，然后选择“插入”→“时间轴”→“关键帧”命令，插入一个关键帧，在舞台中输入4。（5）重复上一步，创建数字3、2、1和文字GO。（6）选择“控制”→“测试影片”命令，测试制作的电影，如图所示为电影中的一帧。（7）选择“文件”→“保存”命令，保存文件；或选择“文件”→“导出影片”命令，导出影片。14.17©2007第14章简单动画制作运动补间动画形状补间动画补间动画14.3补间动画14.18©2007第14章简单动画制作运动补间动画（1）选择一个空白帧，在场景中绘制一个图形对象，或创建一个元件实例。（2）选择“插入”→“创建补间动画”命令，将绘制的图形对象转换成图形元件，Flash自动将其命名为“补间1”。（3）在时间轴的另一帧（动画停止帧）右击，从弹出的快捷菜单中选择“插入帧”命令，增加多个帧，这时时间轴面板中帧区域为虚线，如图所示。创建运动补间动画14.19©2007第14章简单动画制作运动补间动画（4）单击动画的最后一帧，并把场景中的对象移动到动画的目标位置，这时动画的最后一帧将自动成为关键帧，在时间轴的帧区域将显示为箭头，如图所示。创建运动补间动画14.20©2007第14章简单动画制作运动补间动画（5）要设置动画运动过程的渐变属性，可以在运动补间动画的箭头跨越的任意帧上单击，然后选择“窗口”→“属性”命令，打开关键帧的属性面板，如图所示。创建运动补间动画14.21©2007第14章简单动画制作运动补间动画（1）创建一个运动过渡动画。（2）选择“插入”→“时间轴”→“运动引导层”命令，创建一个运动引导层。（3）使用铅笔、椭圆、矩形或笔刷工具画出一条路径。（4）在起始帧，把对象移到路径起始点；在结束帧，把对象移到路径结束点。（5）如果要在运动时保持对象与路径的相对方向不变，可以单击时间轴面板中运动过渡动画箭头跨越的蓝色背景的任意帧。然后在属性面板中选中“调整到路径”复选框。创建按指定路径运动的动画14.22©2007第14章简单动画制作形状补间动画（6）在“混合”下拉列表框中可以进行如下设置：•“分布式”：在此种方式下，可以使动画过程中新创建的中间过渡帧的图形比较平滑。•“角形”：在此种方式下，创建的过渡帧中的图形更多地保留了原来图形的尖角或直线的特征。如果关键帧中图形没有尖角，则这两种方式无区别。（7）调节“缓动”滑动杆，设置变形的加速度。如果把“缓动”中的滑块向下移（为负），在变形的过程中，开始变化比较缓慢，而后变化速度会加快；如果将其上移（为正），开始变化比较快，而后变化速度会减慢。滑块越接近两端，这种效果越明显。如果滑块处于中间位置，变形过程将以匀速进行。创建形状补间动画14.23©2007第14章简单动画制作形状补间动画（1）在时间轴面板单击层名称，使其成为当前层，然后选择一个空白的关键帧作为动画的开始帧。（2）单击工具栏中的绘图或文本工具，任意创建一个图形，作为形状补间的第1帧图形。（3）在开始帧后面的若干帧处插入一个空白关键帧，把它作为变形的第2个关键帧，这一帧一定要与起始帧在同一层上。（4）在第2个关键帧中创建变形后的图形。（5）在时间轴面板单击第1个关键帧，然后在属性面板的“补间”下拉列表框中选择“形状”选项，如图所示。创建形状补间动画14.24©2007第14章简单动画制作形状补间动画（8）设置完毕，在时间轴面板中可以看到从起始帧将出现一个箭头，背景变为浅绿色，如图所示。创建形状补间动画14.25©2007第14章简单动画制作形状补间动画如果将变形线索按照逆时针方向从图形的左上角位置开始，则变形效果更好。要使用变形线索，其操作步骤如下：（1）打开一个变形动画，选择变形动画的第1个关键帧。（2）选择“修改”→“形状”→“添加形状提示”命令，这时在舞台中将出现一个红颜色的圆圈，圆圈里面有一个字母a。（3）将圆圈移到希望标记的位置。（4）选择变形动画的最后一个关键帧，可以看到在最后一帧的图形上也有一个红色的圆圈，圆圈中的字母也是a。（5）把这个圆圈移到相应的位置，圆圈将变为绿色。这时如果单击第4帧，可以看到标记的小圆圈变为黄色。（6）播放动画，可以看到在起始关键帧中标记的点，变形后该点是在结束帧中标记的位置。（7）重复以上步骤，根据需要添加其他变形线索关键点。使用变形线索14.26©2007第14章简单动画制作交互按钮组件的使用ActionScript简介交互动画14.4交互动画14.27©2007第14章简单动画制作交互按钮（1）单击“文件”→“新建”命令，新建影片文件。（2）单击“插入”→“新建元件”命令，出现“创建新元件”对话框。在“名称”文本框中输入元件名，在“类型”区内选中“按钮”单选按钮。创建文字按钮14.28©2007第14章简单动画制作交互按钮（3）单击“确定”按钮，进入按钮元件动作编辑窗口。单击时间轴上的“弹起”帧，然后单击工具箱中的“文本”工具，并在“属性”面板中设置字体为ArialBlack，字号为80，颜色为蓝色，然后在舞台上输入文本button。创建文字按钮14.29©2007第14章简单动画制作交互按钮（4）分别单击“指针经过”帧和“按下”帧，按F6键，复制“弹起”帧中的内容。（5）单击“指针经过”帧，利用工具箱中的“箭头”工具选定文本，然后将文本颜色改为黑色，如图所示。创建文字按钮14.30©2007第14章简单动画制作交互按钮（6）选定改为黑色的文本，按Ctrl+C组合键复制该文本，然后单击“按下”帧，再按Ctrl+V组合键进行粘贴，如图所示。创建文字按钮14.31©2007第14章简单动画制作交互按钮（7）选定黑色的文本，然后单击“修改”→“排列”→“移到底层”命令，并将该文本移到蓝色文本的下面，调整两者的位置，形成如图所示的阴影效果。创建文字按钮14.32©2007第14章简单动画制作交互按钮（8）右击“点击”帧，从弹出的快捷菜单中选择“插入空白关键帧”命令，然后利用工具箱中的“矩形”工具，绘制一个按钮感应鼠标指针的范围，如图所示。创建文字按钮（9）单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。单击“窗口”→“库”命令打开“库”面板，将button按钮元件拖到舞台上，创建一个实例。14.33©2007第14章简单动画制作交互按钮（1）单击“文件”→“新建”命令，新建影片文件。（2）单击“插入”→“新建元件”命令，弹出“创建新元件”对话框。在“名称”文本框中输入“确定”，在“类型”区内选中“按钮”单选按钮，单击“确定”按钮，进入“确定”按钮元件编辑窗口。（3）单击工具箱中的“矩形”工具，设置填充颜色为白黑渐变色，然后绘制一个矩形，如图所示。创建图形按钮14.34©2007第14章简单动画制作交互按钮（4）单击工具箱中的“箭头”工具，选定整个矩形，单击“修改”→“组合”命令，将其组合为一个整体。（5）分别右击“指针经过”帧和“按下”帧，从弹出的快捷菜单中选择“插入关键帧”命令，将“弹起”帧的矩形复制到这两个帧中。（6）右击时间轴上的“图层1”图层，从弹出的快捷菜单中选择“插入图层”命令，在“图层1”上新建“图层2”。（7）单击“图层1”上的“指针经过”帧，按Ctrl+C键复制矩形，然后单击“图层2”上的“指针经过”帧，按Ctrl+Shift+V组合键将圆形粘贴到当前位置。图14-23“缩放和旋转”对话框（8）选定粘贴后的图形，单击“修改”→“变形”→“缩放和旋转”命令，出现如图所示的“缩放和旋转”对话框。创建图形按钮14.35©2007第14章简单动画制作交互按钮（9）在“缩放”文本框中输入75，在“旋转”文本框中输入180，单击“确定”按钮，如图所示。创建图形按钮14.36©2007第14章简单动画制作交互按钮（10）分别右击“图层2”的“指针经过”帧和“按下”帧，从弹出的快捷菜单中选择“插入关键帧”命令。（11）右击时间轴上的“图层2”图层，从弹出的快捷菜