1、第5章 经典实例：绘制飞翔的天鹅, 5.1 要点分析 5.2 绘制飞翔的天鹅5.2.1 掌握帧的基本操作5.2.2 绘制天鹅5.2.3 使用逐帧动画让天鹅“飞”起来5.2.4 查看鹅飞翔效果 5.3 导出Flash作品5.3.1 导出SWF动画影片5.3.2 导出GIF动画图像5.3.3 导出所选内容, 5.2 绘制飞翔的天鹅,帧是Flash动画中最基本的单元，Flash中应用的元素都位于帧上，当播放头移动到某帧时，该帧的内容就显示在舞台中。帧的前后顺序将关系到帧中内容在影片播放中出现的顺序。 1选择帧 用户要编辑帧，则必须先选择帧。在不同情况下可采用不同的方法选择帧。 选择单个帧：将鼠标指针
2、移动到时间轴中需要选择的帧上方，单击鼠标左键即可选择该帧。 同时选择多个不相连的帧：选择一帧后，按住Ctrl键的同时单击要选择的帧即可选择不连续的多个帧，如图5-1所示。蓝色单元格显示的就是选中的不连续的帧。, 5.2.1 掌握帧的基本操作,图5-1 选择多个不相连的帧, 5.1 要点分析,同时选择多个相连的帧：选择一帧后，按住Shift键的同时按住鼠标左键不放，在时间轴上拖动选中要选择的多个相连的帧(或者单击要选择的帧的第一帧和最后一帧)，如图5-2所示。,图5-2 选择多个相连的帧,2插入帧 在编辑动画的过程中，根据动画制作的需要，在很多时候都需要在已有帧的基础上再插入新的帧，根据帧类型的
3、不同插入帧的方法也有所不同。用户可以在时间轴上插入任意多个普通帧、关键帧和空白关键帧，方法有以下几种。 1) 菜单命令 在时间轴上单击需要插入帧的位置，然后在菜单栏中选择“插入”|“时间轴”命 令，并从展开的子菜单中选择需要的帧命令即可，如图5-3所示。 2) 快捷菜单 在时间轴上右击需要插入帧的位置，从弹出的快捷菜单中选择需要的帧命令即可，如图5-4所示。 3) 快捷键 在时间轴上单击需要插入帧的位置，按F5键可以插入普通帧；按F6键可以插入关键帧；按F7键可以插入空白关键帧。,图5-3 展开“时间轴”子菜单,图5-4 在“时间轴”面板中右击某帧,3复制和粘贴帧 在创作动画过程中，经常要用到
4、一些相同的帧。如果对帧进行复制和粘贴操作，就可以得到内容完全相同的帧，从而在一定程度上提高工作效率，避免重复操作。 步骤1 在“时间轴”面板中的第1帧上绘制一个图形，然后右击该帧，从弹出的快捷菜单中选择“复制帧”命令，如图5-5所示。 步骤2 在时间轴上选择目标帧，这里选择第10帧，然后在菜单栏中选择“编辑” |“时间轴”|“粘贴帧”命令，如图5-6所示。 步骤3 复制粘贴帧后的效果如图5-7所示，单击第10帧，可以选中该帧在舞台中对应的图形。,图5-5 选择“复制帧”命令,图5-6 选择“粘贴帧”命令,图5-7 查看复制粘贴帧后的效果,4删除帧 在创建动画的过程中，如果发现文档中某几帧是错误
5、或无意义的，可以将其删除，方法是选择需要删除的帧(一个或者多个帧)并右击，从弹出的快捷菜单中选择“删除帧”命令，如图5-8所示。 5清除帧 清除帧就是清除关键帧中所有的内容，但是可以保留帧所在的位置，方法是选择需要清除的帧，并在菜单栏中选择“编辑”|“时间轴”|“清除帧”命令，如图5-9所示。,图5-8 选择“删除帧”命令,图5-9 选择“清除帧”命令,6移动帧 在动画创作过程中，有时需要重新调整时间轴上某帧的位置，具体操作方法如下。,步骤1 在时间轴上选择要移动的帧，然后在菜单栏中选择“编辑”|“时间轴”| “剪切帧”命令，如图5-10所示。 步骤2 在要移动到的帧位置处右击，从弹出的快捷菜
6、单中选择“粘贴帧”命令，效果如图5-11所示。,图5-10 选择“剪切帧”命令,图5-11 查看移动帧后的效果,下面开始绘制天鹅图形，具体操作步骤如下。 步骤1 选择“文件”|“新建”命令，打开“新建文档”对话框，新建一个Flash文 档，其大小为550像素400像素，背景为“蓝色”(#00CCFF)，如图5-13所示。 步骤2 在工具箱中单击“刷子工具”图标 ，并在“属性”面板中单击“填充颜色”按钮，打开调色板，设置填充颜色为“白色”，保持其他参数为默认值，如图5-14所示。 步骤3 在“时间轴”面板中选择第1帧，然后在舞台中心位置绘制天鹅图形，如 图5-15所示。, 5.2.2 绘制天鹅,
7、步骤4 使用工具箱中的钢笔工具在舞台中绘制三角形，如图5-16所示。,图5-13 “新建文档”对话框,图5-14 设置刷子工具参数,图5-15 绘制天鹅轮廓,图5-16 绘制三角形图形,图5-17 给三角形上色,图5-18 移动三角形位置,步骤7 在工具箱中单击“椭圆工具”图标，并在“属性”面板中设置笔触颜色为 “无”，填充颜色为“黑色”，接着在舞台中绘制一个小圆作为天鹅的眼睛，如图5-19所 示。 步骤8 在工具箱中单击“文本工具”图标，然后在“属性”面板中设置文本字体为“黑体”，颜色为“白色”，大小为“20.0点”，接着在舞台上创建一个静态文本，并输 入“1”，如图5-20所示。,步骤5
8、在工具箱中单击“颜料桶工具”图标，并在“属性”面板中设置填充颜色 为“黄色”(#CC9900)，接着在舞台中填充三角形，如图5-17所示。 步骤6 选择三角形边框线，并按Delete键删除，再将图形移到天鹅头部，效果如 图5-18所示。,图5-19 绘制天鹅眼睛,图5-20 输入数字,逐帧动画是在时间轴上以关键帧的形式逐帧绘制内容而形成的动画。它按照一帧一帧的顺序来播放动画，因此逐帧动画具有非常大的灵活性，几乎可以表现任何想要表现的内容。下面就使用逐帧动画让天鹅“飞”起来吧，具体操作步骤如下。 步骤1 在时间轴上右击第2帧，在弹出的快捷菜单中选择“插入关键帧”命令，插入一个关键帧，如图5-21
9、所示。 步骤2 这时可以发现舞台中的内容与第一帧完全相同。然后使用工具箱中的选择工具对该图形略作调整，接着在舞台中修改文本序号为2，最终效果如图5-22所示。, 5.2.3 使用逐帧动画让天鹅“飞”起来,图5-21 选择“插入关键帧”命令,图5-22 调整图形,步骤3 重复之前的步骤，分别在317帧上插入关键帧，然后对每一帧上的图形略作调整，并修改每帧对应的序号，如图5-23所示。,图5-23 制作317帧上的图形,步骤4 为了便于定位和编辑逐帧动画，可以在“时间轴”面板中单击“绘图纸外 观”图标，这样即可在舞台上查看前两个或更多帧上图形的外观，以确保实例中每一帧上图形的位置和大小符合逻辑，如
10、图5-24所示。 步骤5 若单击“绘图纸外观轮廓”图标，可以在舞台上查看前两个或更多帧上图形的外观轮廓，如图5-25所示。 步骤6 若单击“编辑多个帧”图标，则可以在舞台上查看前两个或更多帧上图形的完整形状，如图5-26所示。 步骤7 若要查看所有帧中的图形，可以单击“修改标记”图标，在弹出的菜单中选择“标记整个范围”命令，如图5-27所示。,图5-25 查看多个帧中图形的外观轮廓,图5-24 查看多个帧中图形的外观,图5-26 查看多个帧中的完整图形,图5-27 选择“标记整个范围”命令,图5-28 查看所有帧中图形的外观轮廓,逐帧动画设置完成后，下面来查看设置的动画效果，具体操作步骤如下。
11、 步骤1 在菜单栏中选择“窗口”|“工具栏”|“控制器”命令，如图5-29所示。 步骤2 打开“控制器”面板，单击“播放”图标，制作的动画如图5-30所示。 步骤3 播放完成后将会停在最后一帧，这时可以通过单击“转到第一帧”图标，回到动画开始状态，如图5-31所示。 步骤4 在“控制器”面板中单击“前进一帧”图标，进入第2帧，查看该帧上的图 形，如图5-32所示。, 5.2.4 播放天鹅飞翔效果,步骤8 再单击“绘图纸外观”图标、“绘图纸外观轮廓”图标或者“编辑多个帧”图标，就可以查看所有帧上图形的外观了，如图5-28所示是17个帧上图形的外观轮廓。,图5-29 选择“控制器”命令,图5-30
12、 查看设置的动画效果,图5-31 单击“转到第一帧”图标,图5-32 单击“前进一帧”图标,动画制作完毕之后，用户可以将其导出以得到单独格式的Flash作品，方便以后自由使用。在Flash程序中，可以将制作的动画以影片、图像的形式导出，或是导出部分选中的内容。,图5-33 单击“停止”图标,步骤5 如果作品比较大，播放时间比较长，在播放过程中有些动画效果没看清楚就播放过去了，这时可以单击“停止”图标，停止播放，如图5-33所示。接着单击“前进一帧”图标或“后退一帧”图标逐帧控制动画播放。,将Flash动画文件以SWF格式导出的操作步骤如下。 步骤1 在Flash CS6菜单栏中，选择“文件”|
13、“导出”|“导出影片”命令，如图5-34所示。 步骤2 弹出“导出影片”对话框，选择文件存放位置，然后在“文件名”文本框中输入相应的名称，再单击“保存”按钮，如图5-35所示。, 5.3.1 导出SWF动画影片, 5.3 导出Flash作品,图5-35 “导出影片”对话框,如果用户想要将动画中的某个图像以图片形式导出并保存，具体操作步骤如下。 步骤1 在Flash CS6菜单栏中，选择“文件”|“导出”|“导出图像”命令，如图5-36所示。 步骤2 弹出“导出图像”对话框，选择文件存放位置，在“文件名”文本框中输入名称，在“保存类型”下拉列表中选择图片类型，这里选择“GIF图像(*.gif)”
14、，再单 击“保存”按钮，如图5-37所示。 步骤3 弹出“导出GIF”对话框，设置图片的尺寸、分辨率、包含(设置导出图像的内容)、颜色、交错、透明、平滑、抖动纯色等选项，最后单击“确定”按钮即可，如图5-38所示。, 5.3.2 导出GIF动画图像,图5-34 选择“导出影片”命令,图5-37 “导出图像”对话框,图5-36 选择“导出图像”命令,图5-38 “导出GIF”对话框,如果只想导出动画的部分内容，可以通过下述操作实现。, 5.3.3 导出所选内容,步骤1 在Flash作品中选择要导出的内容，然后在菜单栏中选择“文件”|“导出” |“导出所选内容”命令，如图5-40所示。 步骤2 弹出“导出图像”对话框，选择文件存放位置，然后在“文件名”文本框中输入相应的名称，再单击“保存”按钮，这样可以将选中的内容导出为FXG格式的文件，如图5-41所示。,图5-40 选择“导出所选内容”命令,图5-41 “导出图像”对话框,
