FLASH个人简历制作.doc

课题：Flash制作教程（12）Flash个人简历制作教学目的：1、逐步生成Flash元件的方法；2、Action的合理使用；3、Flash中逐帧运行的制作；4、在浏览器中运行Flash实例。教学重点：1、stop与goto动作的安排和设置；2、getURL动作及在浏览器中打开Flash实例。教学过程：1、 观看范例：打开教师指定位置中的“ex23.exe”文件观看。2、 修改影片属性：新建一个Flash文件，打开“修改”菜单并选择“影片”，在弹出的“影片属性”对话框中将“宽”和“高”设置为：700460，“帧频”为“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”的字体设置为“Arial Black”，“个人简历”的字体设置为“隶书”，将此文本对象“相对舞台”水平垂直居中（如图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所示；（图12-42）第四步：新建“图层2”。在“图层2”的第5帧插入关键帧，用“文本工具”在“图层2”的第5帧输入“影片场景切换”（如图12-43）；（图12-43）第五步：选中“影片场景切换”文本对象，在“插入”菜单中转换为名称为“作品1”的按钮元件（如图12-44）；（图12-44）第六步：双击“影片场景切换”文字进入按钮元件的编辑状态（如图12-45）；（图12-45）第七步：在“作品1”按钮元件的“鼠标经过”帧、“down”帧和“反映区”帧都分别插入关键帧，全部继承“Up”帧的对象和状态（如图12-46）；（图12-46）第八步：选中“反应区”帧，在文字“影片场景切换”上覆盖一个没有边框的矩形后（如图12-47），再删除“反应区”帧中的“影片场景切换”文字，即在“反应区”帧中只保留一个大小和原来的文本一致的矩形（如图12-48）；（图12-47）（图12-48）*技巧：按钮元件“反应区”帧中的对象在Flash实例播放状态时是不会显示出来的，这边加一个矩形的目的是为了使按钮的接触面积增大而已。大家可以试试看，如果在“反应区”帧中不放置这个矩形，最终的效果怎样。第九步：将“鼠标经过”帧和“Down”帧中文字改变颜色，即不要和“Up”帧中的颜色一致即可；第十步：按下“Ctrl+Enter”键，观看前面制作的效果；第十一步：用同样的方法再制作“作品2”和“作品3”两个按钮，显示文本分别为“水中倒影”和“个人主页Logo”。在“作品文字动画”影片剪辑编辑状态中显示如图12-49所示；（图12-49）第十二步：选中“作品1”按钮（显示文本是“影片场景切换”），打开“动作”面板，给按钮添加动作“ActionBrowse/networkgetURL”，在右边窗口的“URL：”后面输入要链接到的flash外部动画“影片场景切换.swf”；“窗口：”选项中选择“_blank”，表示在一个空白的浏览器窗口中打开要播放的动画文件。如图12-50所示；（图12-50）第十三步：用同样的方法，给“作品2”（显示文本为“水中倒影”）和“作品”（显示文本为“个人主页Logo”）两个按钮元件分别加上动作，如图12-51和图12-52所示；（图12-51）（图12-52）*注意：此处链接的三个外部Flash动画文件是我们前面制作好的。图中的URL代表外部动画文件的相对路径，本例中的三个动画文件是在同一个目录下，但如果文件“影片场景切换.swf”是在一个目录名为“soft”的目录下，那么这个路径就要被改为“soft/影片场景切换.swf”了； Flash可以链接外部动画文件，“影片场景切换.swf”、“水中倒影.swf”和“个人主页Logo制作.swf”三个动画文件我们是用“getURL”动作来设置在浏览器中打开的。“getURL”动作还可以链接到网上的资源，如“getURL（）”可以链接到“继光高级中学”网站首页； 这里还可以用“loadMovie”动作在当前的动画文件中导入一个新的动画，有兴趣的同学可以自行尝试，不清楚的地方可以询问任课老师； 除了外部Flash动画文件以外，大家还可以在“动作”面板中搜索一遍，看如何链接其它外部非Flash动画文件，如可执行文件的链接等。 第十四步：给“场景1”的“我的作品”按钮添加跳转到第4帧的动作。按下“Ctrl+Enter”组合键，观看效果。单击“我的作品”按钮，再分别选择三个作品，可以在浏览器中打开相应的动画文件。“弹出”图层的第4帧制作完毕。7、 制作“弹出”图层的第5帧：“弹出”图层的第5帧的制作方法与第4帧相同，具体步骤就不赘述了。不同的地方在：“Email”按钮的链接动作是“getURL（mailto:. ）”，引号中的叉号为制作者的电子邮箱地址；“主页”按钮的链接动作是“getURL（）”。最后保存文件：A:Flash个人简历.fla。8、 制作后期说明：实例中所用到的元件如图12-53所示。现在，这个Flash动画文件已经制作完毕，在这个动画的制作过程中，大家也许会很辛苦，但却可以学到Flash软件中很多的操作方法和技能。我们最终将本教材中制作的所有作品都基本集合到了最后这个作品中，这也算是有了一个圆满的结束吧！大家在以后制作Flash动画的时候会感觉到，Flash软件的功能虽然很强大，但制作的关键还是制作者的构思，只要具有优秀的创造思维能力，就可以制作出完美的动画作品。（图12-53）