搜索
Flash制作教程（12）——Flash个人简历制作教学目的：1、逐步生成Flash元件的方法；2、Action的合理使用；3、Flash中逐帧运行的制作；4、在浏览器中运行Flash实例。教学重点：1、stop与goto动作的安排和设置；2、getURL动作及在浏览器中打开Flash实例。教学过程：1、观看范例：打开教师指定位置中的“ex23.exe”文件观看。2、修改影片属性：新建一个Flash文件，打开“修改”菜单并选择“影片”，在弹出的“影片属性”对话框中将“宽”和“高”设置为：700×460，“帧频”为“12fps”，“背景颜色”设为“灰色（#999999）”（如图12-1）。单击“确定”返回“场景1”；（图12-1）3、第1帧显示内容制作：（1）先来看一看第一帧我们要显示的内容有哪些。如图12-24所示。我们发现在“时间轴”的第一帧中有3个图层，分别为“背景”、“按钮”和“文字”，其中“文字”层上显示的是四个按钮上的文字；（2）“背景”层的制作：第一步：将“图层1”改名为“背景”；第二步：选中“工具”面板上的“矩形工具”，并将“描绘颜色”设置为“无色”、“填充颜色”设置为“蓝色（#0000FF）”后，在场景1上绘制出一个宽和高分别为700和60、坐标位置为0和0（如图12-2）的矩形（如图12-3）；（图12-2）（图12-3）第三步：选中“工具”面板上的“线条工具”，将“描绘颜色”设置为“淡蓝色（#0099FF）”，在场景1上绘制出一条宽度为700、X轴为0的水平线；第四步：用“箭头工具”选中水平线，然后按住键盘上的“Ctrl”键，用鼠标将水平线向下拖动几个像素，复制一条水平线（如图12-4）；*注意：此时在鼠标指针的旁边有一个“+”号，这表示是复制，否则是不会有复制效果的！（图12-4）第五步：重复第四步，多复制出几个水平线，使效果如图12-5所示。（图12-5）*技巧：复制多条水平线有一种好方法，可以一次选中多条水平线，然后采用第四步的方法，这样可以一次复制更多的水平线，增加工作的效率；第六步：选中所有的水平线，将水平线移动到第二步绘制的矩形上（如图12-6）；（图12-6）第七步：用“箭头工具”在场景1上画出一个矩形，选中“背景”图层上所有的对象。通过“编辑”菜单中的“复制”和“粘贴”，在场景1中复制出一个完全一样的背景图案，并将复制出来的背景图案的X轴和Y轴设置为0和400（如图12-7和图12-8）；（图12-7）（图12-8）第八步：在不选中任何对象的状态下，将鼠标移动到场景1下面一个矩形图案的最上端的中间位置，当鼠标指针为“”时，按住鼠标左键并向下拉，使图形出现一个弧边（如图12-9）；（图12-9）第九步：用鼠标分别点击中间多出的水平线并依次删除，效果如图12-10所示；（图12-10）第十步：选择“工具”面板上的“文本工具”，在场景１上输入“FLASH个人简历”，并设置大小为“84”，其中“FLASH”的字体设置为“ArialBlack”，“个人简历”的字体设置为“隶书”，将此文本对象“相对舞台”水平垂直居中（如图12-11）；（图12-11）第十一步：在文本对象选中的状态下，打开“修改”菜单，选择“分解组件”选项将文本打散。然后再执行一次“分解组件”，将文本分解为图像（如图12-12）；（图12-12）第十二步：选择“工具”面板上的“墨水瓶工具”，并设置“描绘颜色”为“淡灰色（#CCCCCC）”，依次单击每一个字，给文字的每个部分描绘出淡灰色的边框（如图12-13）；（图12-13）第十三步：选择“箭头工具”，依次选中每个文字的颜色填充部分，并删除掉文字的填充颜色，如果不能选中颜色填充部分，则将舞台放大到400%后，就可以很容易地选定了。效果如图12-14所示。（图12-14）至此，“背景”图层制作完毕。（3）“按钮”层的制作第一步：新建一个图层，并取名为“按钮”。为了使接下来在“按钮”层的操作不致影响到“背景”层，可以将“背景”层锁定（如图12-15）；（图12-15）第二步：选中“按钮”层的第一帧，在舞台上画出一个“描绘高度”为2、“描绘颜色”为“白色（#FFFFFF）”、“填充颜色”为“灰色（#999999）”、“圆角矩形半径”为10的圆角矩形（如图12-16）；（图12-16）第三步：双击圆角矩形，选中圆角矩形的填充部分和边框部分。*注意：如果只是单击圆角矩形，则只能选中圆角矩形的填充部分，而它的边框却没有选中，所以这里要双击圆角矩形，将之全部选中；选好后，打开“插入”菜单，选择“转换为元件”，在弹出的“转换为元件”对话框中，设置“作用”为“按钮”、“名称”为“圆角按钮”（如图12-17）。单击“确定”返回场景1；（图12-17）第四步：再次双击“圆角按钮”按钮元件，进入按钮的编辑状态。在时间轴的“鼠标经过”帧和“DOWN”帧各添加一个关键帧（如图12-18）；（图12-18）第五步：单击圆角矩形，选中“圆角按钮”的填充部分，并打开“编辑”菜单选择“复制”，然后锁定“图层1”。再在“圆角按钮”的时间轴上添加一个图层，即“图层2”。在“图层2”的“鼠标经过”帧添加一个关键帧（如图12-19）；（图12-19）第六步：选择“图层2”的“鼠标经过”帧，在“编辑”菜单中选中“粘贴到当前位置”，即将在第五步中复制的“圆角按钮”填充部分覆盖到了按钮上，再在“属性”上将这个圆角矩形的填充颜色设置为“淡灰色（#CCCCCC）”（如图12-20）；（图12-20）；第七步：选中“图层2”上“鼠标经过”帧上的圆角矩形，将之转换为名称为“按钮动画”的“影片剪辑”元件（如图12-21）。再次双击“按钮动画”元件，进入“按钮动画”元件的编辑状态；（图12-21）第八步：先在“图层1”的第6帧插入一个关键帧，然后选中第一帧，在“属性”面板中将“中间”过渡设置为“形状”，再将第一帧中的圆角矩形缩小到中间位置。最后在第7帧和第8帧插入关键帧后，再把第7帧中的圆角矩形删除，并在第8帧加上“stop()”动作，如图12-22所示；（图12-22）第九步：点击“位置栏”上的“场景1”回到场景1，此时在舞台上已经有了一个按钮元件。键击“F11”打开“库”面板，再拖动三个“圆角按钮”元件到场景１上，然后利用“排列”面板将场景1上的四个按钮进行排列，效果如图12-23所示。（图12-23）（4）“文字”层的制作新建一个图层，并取名为“文字”，在该层的第一帧，用“文本工具”输入四个文本对象“关于我”、“我的简历”、“我的作品”、“与我联系”，设置文本的字体和大小，并分别放在四个圆角按钮上，如图12-24所示。（图12-24）（5）至此，第一帧内容全部制作完毕，按下Ctrl+Enter组合键可以调试已经完成的部分。在制作后面的部分之前，先做下面的操作：第一步：新建两个图层，分别取名为“弹出”和“action”；第二步：在“action”图层的第一帧加上“stop()”动作；第三步：分别在“背景”、“按钮”、“文字”和“action”四个图层的第5层插入帧；第四步：锁定“背景”、“按钮”、“文字”和“action”四个图层。此时“时间轴”如图12-25所示。（图12-25）4、制作“弹出”图层的第2帧：此过程的制作思路是：在“弹出”图层的第2帧放入作品中“关于我”部分的动画，效果是当单击“关于我”按钮时，执行第2帧中的动画。第一步：在“弹出”图层的第2帧插入关键帧，并利用“线条工具”在舞台上作出若干条“描绘高度”为“１”的“白色”水平线（如图12-26）；（图12-26）第二步：选中“矩形工具”，在已有的水平线上绘制出一个矩形，并把矩形的下面一个边拉成弧形，最后删除矩形外面的水平线突出的部分，形成如图12-27所示的效果；（图12-27）第三步：选中带有圆弧的矩形及所有在内的水平线，选中“插入”菜单的“转换为元件”，将之转换为名称为“弹出矩形”的“图形”元件（如图12-28）；（图12-28）第四步：再次选中“插入”菜单的“转换为元件”选项，转换为名称为“关于我动画”的“影片剪辑”元件；（图12-29）*注意：第三步将圆弧矩形转换为“图形”，是为了后面制作其余几个关键帧做好准备工作，第四步才是制作“弹出”图层第2帧的步骤。但如果第三步不做的话，将会给后面的制作带来繁琐的操作步骤。第五步：用鼠标双击圆弧矩形，进入“关于我动画”影片剪辑元件的编辑状态。在“图层1”的第6帧和第7帧分别插入关键帧，然后选中第1帧，在“属性”面板中将“中间”过渡设置为“移动”，并将第1帧中的圆角矩形调整缩小到中间的位置，将第7帧中的圆角矩形稍微缩小一点，如图12-30所示。按下回车键，可以看见圆角矩形由小放大，然后有一个回缩的过程；（如图12-30）第六步：新建“图层2”，在“图层2”的第7帧插入关键帧，然后用“文本工具”在舞台上输入“关于我”和自己的一些优点，如“热爱生活”、“勤奋好学”、“脚踏实地”、“乐于助人”之类，并利用“排列”面板，将文字对象排列整齐（如图12-31）；（图12-31）第七步：用鼠标点击“图层2”的第7帧，选中该帧上的所有对象，打开“插入”菜单选择“转换为元件”，将这些文字对象转换为名称为“关于我文字动画”的“影片剪辑”元件。单击“确定”返回；（图12-32）第八步：双击文字部分，进入“关于我文字动画”影片剪辑元件的编辑状态。因为我们要制作出文字由透明到不透明的效果，但此时我们发现文字仍然是几个单独的对象，无法设置为透明效果，所以这里我们再次选中所有文字对象，并转换为名称为“关于我文字”的“图形”元件（如图12-33）。单击“确定返回”（如图12-34）；（图12-33）（图12-34）第九步：在第5帧插入关键帧；第十步：选择第1帧，在“属性”面板中将“中间”过渡设置为“移动”，再选中“关于我文字”图形元件，将“属性”面板的“颜色”选项设置为“Alpha”，值为“0%”；第十一步：选中第5帧，给该帧加上“stop()”动作，使动画运行到此停止（如图12-35）；（图12-35）第十二步：返回“关于我动画”编辑状态，在“图层1”的第6帧也加上“stop()”动作（如图12-36）；（图12-36）；回到“场景１”。至此，“弹出”图层的第2帧就已经完成，但要得到点击舞台上的“关于我”按钮即可观看动画的效果还没有完成。最后一步：释放“按钮”图层，选中“关于我”按钮，打开“动作”面板，添加“goto”语句，如图12-37进行设置。按下“Ctrl+Enter”组合键，在运行界面点击“关于我”按钮观看动画效果。（图12-37）*技巧：为何在添加动作时设置“转到并停止”？这是因为如果设置“转到并播放”，则运行时，单击“关于我”按钮后，会先跳到第2帧，并且立即依次执行第3帧及后面的帧，这样一来，第2帧上的动画就不能播放完毕了，也就不能得到预期的效果了。所以这边选择“转到并停止”，让第2帧上的动画播放完毕。此刻，“场景1”的时间轴显示如图12-38所示。（图12-38）5、制作“弹出”图层的第3帧：“弹出”图层的第3帧和第2帧的制作步骤相似，只不过不同的是，当单击“我的简历”按钮时，跳转到第3帧，显示“我的简历”内容的动画效果，具体步骤就不再赘述了。文本内容可以参考如下图12-39所示。（图12-39）6、制作“弹出”图层的第4帧：第4帧要显示的是“我的作品”，可以通过按钮链接到前面所制作的几个实例。第一步：利用前面“弹出”图层第2、3帧的制作方法，在第4帧上先插入关键帧，然后自行制作出下图12-40所示效果；（图12-40）第二步：按下“Ctrl+Enter”，测试实例。如果前面一步的操作没有什么错误的话，则当在实例中用鼠标按下“我的作品”按钮时，会先出现一个圆弧矩形由小放大的效果，然后是“我的作品”四个字由透明状态逐渐全部显现出来。现在在“库”面板中可以看到（如图12-41）所有用到的元件；（图12-41）第三步：进入“作品文字动画”影片剪辑元件的的编辑状态，即“我的作品”四个字由透明状态到全部显现的动画编辑状态，如图12-42所