FlashCS6动画制作项目教程 教学课件 ppt 作者 郭娟 刘志杰 项目6任务1公主换装

1、动画制作项目教程,项目6 制作Flash小游戏,任务一 公主换装,本讲内容,任务描述,1,任务总结,3,任务实施,2,拓展训练,4,交互；按钮；行为；动作。,任务一 公主换装,本讲内容,一、任务描述,在交互动画中，动画播放时可以接受某种控制，观看者不再是被动的观看动画，而是能够参与其中主动选择，例如使用鼠标或键盘对动画的播放进行控制。该项目即是运用了交互动画原理制作公主换装小游戏，动画效果为：每次点击魔法棒，都会为公主换一套服装。 该任务使用同一人物不同着装的图片，利用图像处理软件去掉背景，制作成背景透明的素材图片，制作魔法棒按钮元件，当鼠标移到按钮上时出现发光效果，通过为按钮添加动作脚本，完成换装游戏。,一、任务描述,交互；按钮；动作。,一、任务描述,1. 知识技能点,2. 训练目标,能够运用图像处理软件，去掉图片背景，制作背景透明的素材图片。 能够正确设置按钮元件四个关键帧，完成交互动画制作。 初步理解和体会动作的使用。 通过画面设计和动画制作，审美能力得到进一步提升，沟通能力、制定方案和解决问题的能力进一步加强。,本讲内容,二、任务实施,二、任务实施,1. 听闻有一公主，唯独喜爱

2、易其服,（1）从网上下载。,（2）打开Photoshop软件，将图片背景去掉。,（3）裁剪图片使4张图片长宽一致。 （4）分别将四张保存成背景透明的PNG格式文件，分别命名为“换装1”、“换装2”、“换装3”、”换装4”。 （5）下载魔法棒图片，同样去掉背景，保存成背景透明的PNG格式文件，命名为“魔法棒1” 。,二、任务实施,二、任务实施,（6）利用画笔工具、图层样式等为魔法棒添加发光效果，保存成背景透明的PNG格式文件，命名为“魔法棒2” 。,二、任务实施,2.公主有这一魔棒，棒摇光现衣已变 （1）新建Flash文档，大小为550PX*400PX。 （2）按下快捷键Ctrl+F8新建按钮元件，命名“按钮”。 （3）在“弹起”帧处，按下快捷键Ctrl+R导入“魔法棒1”素材图片，调整图片大小和位置，按下快捷键Ctrl+I打开信息面板，记录下图片X和Y坐标值。,二、任务实施,（4）在“指针”帧处，按下快捷键F7创建空白关键帧，按下快捷键Ctrl+R导入“魔法棒2”素材图片，按下快捷键Ctrl+I打开信息面板，输入“魔法棒1”素材图片的X和Y坐标值，使两张图片大小和画面各部分所处的位置完

3、全一致。,二、任务实施,（5）复制“弹起”帧处关键帧，在“按下”帧处粘贴关键帧，至此完成按钮效果，初始状态为“魔法棒1”素材图片，当鼠标指向时为“魔法棒2”素材图片，当鼠标点击时为“魔法棒1”素材图片。 （6）复制“弹起”帧处关键帧，在“点击”帧处粘贴关键帧，使用矩形工具绘制矩形使之完全覆盖住魔法棒图片，至此，完成按钮起作用范围的绘制。,二、任务实施,3.公主魔棒均已在，美衣百变随我心 （1）回到场景，图层1重命名“背景”，按下快捷键Ctrl+R导入制作好的背景图片，使之完全覆盖住舞台。,（2）新建图层命名“换装”，按下快捷键Ctrl+R导入“换装1”素材图片，调整好大小和位置，按下快捷键Ctrl+I打开信息面板，记录下图片X和Y坐标值。,二、任务实施,（3）在第2帧处创建关键帧，按下快捷键Ctrl+R导入“换装2”素材图片，按下快捷键Ctrl+I打开信息面板，输入“换装1”素材图片的X和Y坐标值，使两张图片大小和画面各部分所处的位置完全一致。 （4）同理分别在第3帧和第4帧处创建关键帧，导入并排版“换装3”素材图片和“换装4”素材图片。,二、任务实施,（5）新建图层命名“按钮”，从库

4、中拖动“按钮”元件到舞台上，调整好大小和位置。,（6）选中按钮，右击在快捷菜单中选择“动作”，输入以下代码： on (release) gotoAndPlay(2); 作用是当点击按钮的时候，跳转到第二帧播放。,二、任务实施,（7）重复操作，第3帧上按钮的动作代码为： on (release) gotoAndPlay(3); 重复操作，第3帧上按钮的动作代码为： on (release) gotoAndPlay(4); 重复操作，第4帧上按钮的动作代码为： on (release) gotoAndPlay(1); （8）新建图层命名“文字”，在魔法棒旁边输入文字“请点击魔棒！”，转换为元件，自己添加滤镜效果。,二、任务实施,（9）预览动画效果，四张换装图片反复循环播放，新建图层命名“动作”，在第1帧处右击选择“动作”，输入停止动作，代码为：stop()，作用是在该帧处停止，不再继续向后播放，复制第1帧关键帧，分别粘贴到第2帧、第3帧、第4帧处。,本讲内容,三、任务总结,【知识解读】 1.什么是交互动画？ 交互动画是指在动画作品播放时支持事件响应和交互功能的一种动画，也就是说，动画播放时

5、可以接受某种控制，这种控制可以是动画播放者的某种操作，也可以是在动画制作时预先准备的操作，这种交互性提供了观众参与和控制动画播放内容的手段，使观众由被动接受变为主动选择。 Flash使用ActionScript给动画添加交互性。在简单动画中，Flash按顺序播放动画中的场景和帧，而在交互动画中，用户可以使用键盘或鼠标与动画交互。例如，可以单击动画中的按钮，然后跳转到动画的不同部分继续播放；可以移动动画中的对象；可以在表单中输入信息等等。使用ActionScript可以控制Flash动画中的对象，创建导航元素和交互元素，扩展Flash创作交互动画和网络应用的能力。,三. 任务总结,2.什么是动作？ Flash的动作脚本（ActionScript，简称AS）代码控制是Flash实现交互性的重要组成部分，最新版本是AS3.0，是一种完全的面向对象的编程语言，功能强大，类库丰富，语法类似JavaScript，多用于互动性、娱乐性、实用性开发，网页制作和RIA应用程序开发。 3.认识动作面板 在Flash中，动作脚本的编写，都是在“动作”面板的编辑环境中进行，按下快捷键F9可以调出“动作”面板，

6、面板的编辑环境由左右两部分组成，左侧部分又分为上下两个窗口。 左侧的上方是一个“动作”工具箱，单击前面的图标展开每一个条目，可以显示出对应条目下的动作脚本语句元素，双击选中的语句即可将其添加到编辑窗口。,三. 任务总结,三. 任务总结,左侧下方是一个“脚本”导航器，里面列出了Flash文件中具有关联动作脚本的帧位置和对象，单击脚本导航器中的某一项目，与该项目相关联的脚本则会出现在“脚本”窗口中，并且场景上的播放头也将移到时间轴上的对应位置上，双击脚本导航器中的某一项，则该脚本会被固定。 右侧部分是“脚本”编辑窗口，这是添加代码的区域，可以直接在“脚本”窗口中编辑动作、输入动作参数或删除动作，也可以双击“动作”工具箱中的某一项或“脚本编辑”窗口上方的“添加脚本”工具 ，向“脚本”窗口添加动作。,三. 任务总结,在“脚本”编辑窗口的上面，有一排工具图标，用于编辑脚本，在使用“动作”面板的时候，可以随时点击“脚本”编辑窗口左侧的箭头按钮，以隐藏或展开左边的窗口。将左面的窗口隐藏可以使“动作”面板更加简洁，方便脚本的编辑。,【经验共享】 1.如何制造多张按钮效果？ 按钮元件虽然只有四个关键帧，

7、但是按钮元件中可以新建图层，关键帧中可以放置元件，元件中又可以嵌套元件，由此可以制作出绚丽多彩的按钮效果，我们在网上看到的很多韩国网站，按钮大都是使用Flash制作的，以“我的相册”按钮为例，当鼠标移动到按钮上时，文字变黄色，同时白色蝴蝶飞出，周围闪烁小星星，按钮元件关键帧设置如下： （1）“弹起”关键帧：放置白色文字。 （2）“指针”关键帧：放置黄色文字。 （3）“按下”关键帧：放置白色文字。 （4）“点击”关键帧：放置矩形，大小以能够覆盖住文字为准。,三. 任务总结,三. 任务总结,在按钮元件中新建图层命名为动画，“弹起”、“按下”、“点击”关键帧处均为空白关键帧，“指针”关键帧处放置影片剪辑元件，元件内容为蝴蝶和星星动画，为了实现蝴蝶不断扇动翅膀，星星层出不穷的效果，将蝴蝶动画和星星动画分别制作成元件。 2.如何制作透明按钮？ 当一个动画需要很多按钮时，可以制作一个透明按钮反复使用，透明按钮可以随意修改大小，覆盖在任何位置，方便且实用，具体制作方法参见6.1.4拓展训练。 3.如何巧用帧标签制作跳转效果？ 要使用按钮制作跳转效果，设置动作脚本时需要指定当触发按钮时动画跳转到某一帧

8、，当该帧的位置移动时，指定的帧的数值随即发生了变化，此时，可以为帧命名即设置帧标签，通过指定跳转的帧标签，在修改动画时就无所顾忌该帧的位置了，具体制作方法参见6.1.4拓展训练。,本讲内容,四、 拓展训练,典型案例一：网页flash导航 使用Flash软件制作网站首页，使用按钮制作网站导航，导航初始效果为灰色图片，当鼠标移动到按钮上时，变为彩色图片，并且由特写镜头变化为远景镜头，同时配以按钮声音。,四、拓展训练,四、拓展训练,（1）下载四张图片，修改大小为100PX*70PX，制作出四张彩色特写镜头图片，将图片转化为灰色后再制作出四张灰色远景镜头图片，大小与彩色图片相同，共计八张素材图片。,四、拓展训练,（2）新建Flash文档，大小为520PX*220PX。 （3）创建按钮元件，命名“按钮”，制作一个透明按钮，“弹起”、“按下”、“指针”关键帧处均为空白关键帧，“点击”关键帧处绘制一个矩形。,四、拓展训练,（4）回到场景，图层1重命名为“图片1”，导入灰色素材图片1，转换为影片剪辑元件，命名“图片1”。 （5）新建图层命名为“彩色”，第2帧处创建关键帧，导入彩色素材图片1，制作彩色图

9、片由完全透明的放大图变为原始大小显示，再由原始大小显示变为放大的透明大图的动画。,四、拓展训练,（6）为了遮盖住透明大图比正常显示大出来的范围，为其添加遮罩，方法是，新建图层命名遮罩，绘制色块大小和位置同正常显示的图片，然后右击选择遮罩。,（7）新建图层命名“动物”，在图片右下方输入文字“动物”，制作四段动画，分别是红色字有右下方向下移动、白色字由上方向下移动到右下方、白色字向上移动并变透明、红色字由下方移动到图片右下方。,四、拓展训练,（8）新建图层命名“按钮”，从库中拖动“透明按钮”元件到舞台上，透明按钮以半透明蓝色显示，在发布时不显示，修改按钮大小，使之完全覆盖素材图片。 （9）新建图层命名“声音”，导入声音，库中将声音拖动到舞台上。新建图层命名“动作”，第1帧右击选择“动作”，输入停止动作脚本stop()。,四、拓展训练,（10）在动作图层第2帧创建关键帧，打开属性面板为该帧命名为s1，此时该帧上出现红旗标志，在第6帧创建关键帧，右击选择“动作”，输入停止动作脚本，第7帧创建关键帧，打开属性面板为该帧命名为s2。,四、拓展训练,（11）点击透明按钮，右击选择“动作”，输入动作制作当鼠标移动到按钮上时播放彩色图片动画效果，当鼠标移开时恢复初始状态，代码如下： on (rollOver) if (_root.link1) this.gotoAndPlay(“s1“); on (releaseOutside， rollOut) if (_root.link1) this.gotoAndPlay(“s2“); on (release) if (_root.link1) _root“item“+_root.link.gotoAndPlay(“s2“); _root.link = 1; getURL(“iframe_1.html“， “cont“); _root.button = 1; （12）同理，重复以上步骤，制作其他三幅素材图片的影片剪辑元件动画。 （13）回到场景，从库中拖动四个图片的元件到舞台上，排列好位置，输入标题文字。,欢迎交流讨论！,中国铁道出版社,

《FlashCS6动画制作项目教程 教学课件 ppt 作者 郭娟 刘志杰 项目6任务1公主换装》由会员E****分享，可在线阅读，更多相关《FlashCS6动画制作项目教程 教学课件 ppt 作者 郭娟 刘志杰 项目6任务1公主换装》请在金锄头文库上搜索。