flashcs6教程5

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