flashcs6教学教程7.ppt

《flashcs6教学教程7.ppt》由会员分享，可在线阅读，更多相关《flashcs6教学教程7.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第7章 经典实例：绘制行驶的火车, 7.1 要点分析 7.2 创建火车头元件 7.3 绘制火车厢 7.3.1 绘制火车厢 7.3.2 设置火车厢渐隐渐显 7.4 制作火车车轨 7.5 让火车行驶起来, 7.2 创建火车头元件,创建元件既可以创建一个空元件，然后在元件编辑模式下制作或导入内容，也可以在舞台上选定对象后，将其转换成元件。本节以绘制火车头为例进行介绍，先绘制出火车头图形，然后将其转换为元件，具体操作步骤如下。 步骤1 在Flash窗口中新建“火车.fla”文档，然后在工具箱中单击“矩形工具”图标，接着在“属性”面板中设置笔触颜色为“#000000”，填充颜色为“无”，笔触大小为1，如

2、图7-1所示。 步骤2 在舞台中绘制矩形，接着使用选择工具调整矩形边框，使四条边框向外凸出，如图7-2所示。 步骤3 假设矩形是火车头前盖的右视图，需要将其倾斜，方法是选中矩形，然后按Ctrl+T组合键打开“变形”面板，接着在面板中选中“倾斜”单选按钮，并设置水平倾斜角度为30，垂直倾斜角度为15，倾斜后的效果如图7-3所示。 步骤4 在“时间轴”面板中新建图层2，然后绘制一个矩形，并使用选择工具调整其形状，接着在“变形”面板中设置其倾斜角度，再移动其位置，使其一条边与图层1中的大矩形部分重合，如图7-4所示。 步骤5 在工具箱中单击“线条工具”图标，然后在“属性”面板中设置笔触颜色为“#00

3、0000”，笔触大小为1，接着在第二个矩形中绘制一条斜线，并使用选择工具调出小弧度，完成火车前盖挡风玻璃的制作，如图7-5所示。, 7.1 要点分析,图7-1 新建“火车.fla”文档,图7-2 调整矩形边框,图7-3 调整矩形倾斜角度,图7-4 制作另一个倾斜的矩形图形,图7-5 绘制一条斜线,步骤6 在“时间轴”面板中新建图层3，并隐藏图层1和图层2，然后使用矩形工具在舞台中绘制矩形，并使用选择工具调整其外观，接着在“变形”面板中选中“倾斜”单选按钮，并设置水平倾斜角度为30，垂直倾斜角度为15，结果如图7-6所示。 步骤7 在“时间轴”面板中取消隐藏图层1，然后移动新绘制的矩形使其靠近图

4、层1中的矩形，如图7-7所示。,步骤8 将新矩形看作火车头的顶盖，使用选择工具调整矩形的边框，使两个矩形具有立体效果，如图7-8所示。 步骤9 在“时间轴”面板中新建图层4，然后以火车头顶盖矩形的右上角为起点，使用线条工具绘制垂直直线，以火车头前盖矩形右下角为起点，绘制斜线交于垂直直线，如图7-9所示。再使用选择工具调整斜线弧度。,图7-6 制作倾斜矩形,图7-7 调整新绘制的矩形的位置,步骤10 使用矩形工具绘制矩形，然后使用选择工具调整矩形上下边框线的弧度，将其看作火车头上的简易门如图7-10所示。 步骤11 选中新绘制的矩形，按Ctrl+C组合键复制矩形，按Ctrl+V组合键粘贴矩形，然

5、后将复制的矩形调小，并将其看作火车头门上的玻璃窗置于大矩形中间，接着选中两个矩形，并打开“变形”面板，在“变形”面板中选中“倾斜”单选按钮，并设置“水平倾斜”为1，垂直倾斜为-8，如图7-11所示。 步骤12 在工具箱中单击“橡皮擦工具”图标，并设置橡皮擦形状，接着将火车头顶盖和前盖相交处的线条擦除，如图7-12所示。 步骤13 使用选择工具选中所有图形，然后使用任意变形工具将图形等比例缩小，如图7-13所示。,图7-8 使用选择工具调整新矩形的边框,图7-9 使用线条工具绘制线条,图7-10 绘制火车头上的简易门图形,图7-11 绘制火车头门上的玻璃窗,图7-12 使用橡皮擦工具擦除线条,图

6、7-13 使用任意变形工具缩小图形,步骤14 由于这里要绘制的是动车组列车的火车头，右视图看到的前盖应该是上宽下窄，因此需要调整前盖矩形的下边框线宽度，方法是使用选择工具先将缩小后的图形向舞台右上方移动，接着拖到前盖矩形(即在图层2中绘制的倾斜距形)右下角，让矩形下边框变短，效果如图7-14所示。 步骤15 在“时间轴”面板中新建图层5，然后使用椭圆工具绘制椭圆，并打开“变形”面板，接着选中“旋转”单选按钮，并设置旋转角度为“18”，再将其移动到前盖矩形的下边框上，使前盖矩形左右两侧的边框线看起来像是椭圆图形的两条切线，如图7-15所示。,步骤16 使用选择工具调整前盖矩形下边框线的弧度。接着

7、使用线条工具再绘制一条斜线，效果如图7-16所示。,图7-14 调整前盖矩形下边框线宽度,图7-15 绘制椭圆,步骤17 使用选择工具调整新绘制的斜线的弧度，然后使用橡皮擦工具擦除两弧线之间的椭圆图形的边框线，效果如图7-17所示。,步骤18 在“时间轴”面板中新建图层6，并隐藏图层5，然后在工具箱中单击“矩形工具”图标，并在“属性”面板中设置样式为“虚线”，接着在舞台中绘制矩形，并在“变形”面板中设置其水平倾斜角度为-15，垂直倾斜角度为-5，如图7-18所示。 步骤19 使用选择工具移动虚线矩形，并调整边框外形。然后取消隐藏图层5，并调整火车头左侧底部的弧线，将其连接到虚线矩形的右下角，接

8、着从该点出发，绘制斜线段至前盖矩形的右下角，再调整线段弧度，如图7-19所示。 步骤20 使用矩形工具再绘制一个虚线矩形，然后在“变形”面板中设置其大小和倾斜角度，接着移动其位置，使其上边框线与第一个虚线矩形的下边框线重合，制作火车头尖头下方的阴影部分，如图7-20所示。,图7-16 调整前盖矩形下边框线的弧度,图7-17 使用选择工具调整新斜线的弧度,图7-18 绘制虚线矩形,图7-19 移动虚线矩形位置,图7-20 制作火车头尖头下方的阴影部分,步骤21 延长火车头门右侧的垂直线，然后以第二个虚线矩形右下角为起点，沿底部边框线方向向垂直线画线段，绘制火车头左侧底边部分。再使用橡皮擦工具擦除

9、垂直线多余部分，效果如图7-21所示。 步骤22使用矩形工具绘制矩形，并使用选择工具调整矩形左、上、右三条边框线外形，然后删除矩形下边框线，选中另三条边框线，接着在“变形”面板中选中“旋转”单选按钮，并设置旋转角度为“-18”，再将其移动到火车头左侧第二条底边线上方，制作火车头左侧的车轮，如图7-22所示。 步骤23 在“时间轴”面板中新建图层7，然后使用线条工具绘制一个倾斜着的三角形，接着使用选择工具调整其形状，制作火车头上面的车灯，如图7-23所示。 步骤24 复制绘制的车灯图形，然后在“变形”面板中设置作为右车灯的图形垂直倾斜180，接着在车头顶盖中调整两灯的位置和大小，如图7-24所示

10、。,图7-21 绘制火车头左侧底边部分,图7-22 制作火车头左侧的车轮,图7-23 使用线条工具绘制三角形,图7-24 制作火车头前头的车灯,图7-25 绘制挡风玻璃上的刷子,图7-26 使用钢笔工具描图,步骤25 在工具箱中单击“线条工具”图标，设置笔触大小为3，然后在前盖挡风玻璃上绘制两条倾斜的线条代表挡风玻璃上的刷子，如图7-25所示。至此，动车组列车的火车头的轮廓基本制作完成，下面给车头填充颜色。 步骤26 在“时间轴”面板中新建图层8，并锁定其他图形。接着使用钢笔沿火车头左侧形状描图，形成封闭图形，如图7-26所示，再使用选择工具调整图形边框，使其与所描图形完全重合。,步骤27 由

11、于现在的动车组列车大都是白色的，因此在给车头上色时需要更换舞台颜色，例如换成浅灰色，方法是在“属性”面板中展开“属性”子面板，接着单击“舞台”选项右侧的颜色模块，在弹出的菜单中单击“浅灰色”(#CCCCCC)图标即可，如图7-27所示。,步骤29 使用类似方法对火车顶盖和前盖描图，并填充颜色，效果如图7-29所示。 步骤30 在“时间轴”面板中单击图层8右侧的实心方形图标，使其显示为轮廓，此时实心方形变成空心方形了。接着使用钢笔工具对门描图，如图7-30所示。 步骤31 在“时间轴”面板中单击图层8右侧的空心方形图标 ，接着换一种填充颜色(#F7F7F7)，对门图形进行填充，效果如图7-31所

12、示。 步骤32 使用类似方法，先在图层8显示为轮廓的情况下对火车头前盖上的挡风玻璃和灯以及左侧门上的玻璃窗描图，然后在“属性”面板中设置颜料桶工具的填充颜色为“蓝色”(#204DFF)，接着取消图层8显示为轮廓，分别在挡风玻璃、灯和玻璃窗图形上单击进行颜色填充，效果如图7-32所示。,步骤28 在工具箱中单击“颜料桶工具”图标，并在“属性”面板中设置填充颜色为“白色”(#FFFFFF)，接着在舞台中单击钢笔描制的图形，填充火车头左侧颜色，效果如图7-28所示。,图7-27 更换舞台颜色,图7-28 填充火车头左侧颜色,图7-29 填充火车头顶盖和前盖颜色,图7-30 使图层8显示为轮廓,图7-

13、31 填充门图形,图7-32 设置车头上的玻璃颜色,图7-33 查看火车头上色后的效果,步骤33 使用类似方法，设置火车头其他部分的颜色，最终效果如图7-33所示。 步骤34 选中火车头图形中的线条，然后使用工具箱中的“笔触颜色”工具设置线条颜色为“灰白色”(#DBDBDB)，效果如图7-34所示。,图7-34 设置图形的线条颜色,步骤35 按Ctrl+A组合键选中整个火车头图形，然后按F8键打开“转换为元件”对话框，在“名称”文本框中输入元件名称，并设置元件类型为“影片剪辑”，再单击“确定”按钮，如图7-35所示。,图7-35 “转换为元件”对话框, 7.3 绘制火车厢,火车头制作完成并保存

14、为元件后，可以将其他图层删除，然后在图层1中插入火车头元件，接着火车头绘制火车厢，具体操作步骤如下。,像绘制火车头一样，火车厢由线条、矩形、三角形等几何图形组合而成，因为与火车头相连，只需要绘制第一节火车厢的顶盖和左侧面即可，如图7-36所示。 将绘制的第一节火车厢保存为“车厢”图形元件，然后使用该元件，借助选择工具和“变形”面板，绘制其余车厢，最终效果如图7-37所示。, 7.3.1 绘制火车厢,图7-36 绘制第一节火车厢,图7-37 绘制其余火车厢,一列火车从远处驶来，列车是逐渐显示出来的。为此，下面就逐节设置火车厢的透明度，制作火车厢的渐隐渐显效果，具体操作步骤如下。, 7.3.2 设

15、置火车厢渐隐渐显,步骤1 在“火车.fla”文件窗口中按Ctrl+A组合键选中所有图形，并按Ctrl+X组合键剪切图形。 步骤2 在“时间轴”面板中选择图层1，然后按Ctrl+V组合键粘贴图形，并将粘贴的图形移动到舞台中间，接着在“时间轴”面板中删除其余图层，如图7-38所示。 步骤3 假设列车的火车头已完全显示，设置第一节火车厢的透明度为90%，方法是单击第一节车厢，然后在“属性”面板中的“色彩效果”子面板中，从“样式”下拉列表框中选择Alpha选项，如图7-39所示。,图7-38 将所有图形移动到同一图层中,图7-39 设置色彩效果,步骤4 这时在“色彩效果”子面板中将会出现“Alpha”

16、设置项，调整其值为90，如图7-40所示。 步骤5 使用类似方法，逐节设置其余火车厢的Alpha值，最后一节车厢的Alpha值设为20，如图7-41所示。,图7-40 设置第一节车厢的透明度,图7-41 设置最后一节车厢的透明度,图7-42 预览火车厢渐隐渐显效果,步骤6 按Ctrl+S组合键保存设置，再按Ctrl+Enter组合键在打开的窗口中预览设置效果，如图7-42所示。,图7-43 选择“转换为元件”命令,图7-44 “转换为元件”对话框, 7.4 制作火车车轨,大家都知道，火车需要行驶在车轨上。下面就来介绍如何制作火车车轨，具体操作步骤如下。 步骤1 在舞台中选中火车图形并右击，从弹

17、出的菜单中选择“转换为元件”命令，如图7-43所示。 步骤2 弹出“转换为元件”对话框，设置元件名称和类型，再单击“确定”按钮，如图7-44所示。,步骤3 在“属性”面板中调整舞台高度为300像素，然后在“时间轴”面板中新建图层2，接着根据列车弯曲情况绘制如图7-45所示的弧线。,步骤4 在“时间轴”面板中锁定图层1和图层2，并隐藏图层1，然后新建图层3，接着在工具箱中单击“矩形工具”图标，并在“属性”面板中设置笔触颜色为“无”，填充颜色为“褐色”(#993300)，再在舞台中绘制矩形图形(为了便于查看，这里将舞台颜色调整为白色)，如图7-46所示。,图7-45 绘制弧线,图7-46 绘制矩形

18、,步骤5 使用选择工具选中刚绘制的矩形，按Ctrl+T组合键打开“变形”面板，通过调整旋转角度和倾斜角度调整矩形图形的三维效果，结果如图7-47所示。 步骤6 向左下角移动矩形图形，使其中心点在弧线上，效果如图7-48所示。 步骤7 按Ctrl+C组合键复制矩形图形，按Ctrl+V组合键粘贴矩形图形，接着在“变形”面板中略微缩小新复制的矩形图形，并将图形旋转-3，再移动图形位置，效果如图7-49所示。 步骤8 使用类似方法继续复制调整矩形图形，并按图层2中的弧线趋势排列这些矩形，效果如图7-50所示。,图7-47 调整矩形图形的三维效果,图7-48 移动矩形图形,图7-49 调整复制的矩形图形

19、,图7-50 继续复制调整矩形,图7-51 绘制封闭长条,图7-52 选择“复制图层”命令,步骤11 解锁复制的图层，然后单击第1帧以选中该帧在舞台中对应的图形，将其沿左上方向略微移动，如图7-53所示。 步骤12 按Ctrl+T组合键打开“变形”面板，设置图形旋转角度为3，效果如图7-54所示。 步骤13 在工具箱中单击“颜料桶工具”图标，并在“属性”面板中设置填充颜色为“灰色”(#666666)，接着在舞台中填充图层4及复制图层中的图形，设置火车轨迹，效果如图7-55所示。,步骤9 在“时间轴”面板中锁定图层3，并新建图层4，然后使用线条工具在舞台中绘制如图7-51所示的封闭长条。 步骤1

20、0 在“时间轴”面板中锁定图层4并右击，从弹出的快捷菜单中选择“复制图层”命令，如图7-52所示。,图7-53 移动复制图层中的图形位置,图7-54 “变形”面板,图7-55 填充火车轨迹颜色,图7-56 按制作的轨迹调整图层3中的矩形图形,步骤14 取消锁定图层3，然后借助“变形”面板调整火车轨迹下方的矩形图形，最终效果如图7-56所示。,图7-57 “转换为元件”对话框,步骤15 选中绘制的列车轨迹图形，按F8键打开“转换为元件”对话框，在此设置元件名称和类型，再单击“确定”按钮，如图7-57所示。, 7.5 让火车行驶起来,下面使用逐帧动画制作火车由远及近行驶过来的动画，具体操作步骤如下

21、。 步骤1 由于动车组列车是白色的，这里将舞台设置成黑色的背景。 步骤2 在“时间轴”面板中将“图层4”重命名为“车轨”，“图层1”重命名为“列车”，并将其移动到“车轨”图层上方，接着使用任意变形工具调整“列车”元件实例的大小和位置，效果如图7-58所示。 步骤3 在“车轨”图层中右击第25帧，从弹出的快捷菜单中选择“插入帧”命令，如图7-59所示。 步骤4 在“列车”图层中右击第2帧，从弹出的快捷菜单中选择“插入关键帧”命令，然后按Ctrl+T组合键打开“变形”面板，借助“变形”面板略微放大列车实例，再调整其位置，效果如图7-60所示。 步骤5 在“列车”图层中的第3帧插入关键帧，然后在“变形”面板中再次放大列车实例，并调整其位置，效果如图7-61所示。,图7-58 调整列车在车轨上的位置,图7-59 选择“插入帧”命令,图7-60 编辑第2帧上的列车实例,图7-61 编辑第3帧上的列车实例,步骤6 使用类似的方法，在第425帧分别插入关键帧，并调整每帧中列车实例的大小和位置，各帧对应的效果如图7-62所示。,图7-62 编辑425帧上的列车实例,步骤7 按Ctrl+Enter组合键测试制作的动画效果，如图7-63所示。,图7-63 测试行驶的列车动画效果,