1.4 体验交互动画 课件(共10张PPT)

体验交互动画 教学目标 1、了解Flash中控制动画的代码； 2、能制作简单的交互动画； 3、体验交互动画的魅力； 一、关键帧中的代码 1、控制动画代码 之前我们制作的动画是重复播放的，而如图“奔跑的小兔”动画播放了一次就会自动停止。观察“小兔”图层的第60关键帧，我们会发现多了一个“a”符号，这是由于在第60关键帧添加了一个“stop（）”代码。当动画执行到第60帧时，就会执行“stop（）”代码使动画停止播放。 一、关键帧中的代码 2、动作面板 在关键帧中加入代码要通过动作面板来实现。先选定“小兔”图层的第60关键帧，再打开动作面板。 动作面板的脚本窗口是输入代码的区域，动作工具箱是代码的选择区域，脚本导航器可以看到代码的存放位置。图示的动作工具箱中已列出了控制动画代码表，只要双击表中的“stop”，此代码就会进入脚本窗口。 探究学习： （1）制作“奔跑的小兔”动画。 （2）在完成“奔跑的小兔”动画的基础上，分别修改关键帧中的代码，分析和实践修改代码后的动画效果。 ①将第60帧“stop（）；”改成“gotoAndStop(30);” ②将第60帧“stop（）；”改成“gotoAndPlay(30);” ③在“小兔”图层的第1关键帧中加入“stop（）；”代码。 二、按钮中的代码 1、制作按钮 图示画面中“受控的动画”是利用保存在4个按钮中的代码来控制舞台上“小孩”影片剪辑的。单击“插入”菜单中的“新建元件”命令，选择“按钮”后进入按钮编辑区，可见到4个关键帧，根据制作需要在4个关键帧中放入不同的图形。 2、执行代码条件 代码要满足一定的条件才会执行，例如存放在关键帧中的代码是在动画运行到此帧时才执行。而按钮中的代码要在发生某种动作时才会执行。 代码中的“xh”是本动画中的“小孩”影片剪辑对象名。如代码“xh.play（）”表示令对象名为“xh”的影片剪辑进行播放。 实践学习：制作“受控的动画” Step 1、建立影片剪辑元件。 将光盘中的GIF动画导入到库，建立名为“小孩”的影片剪辑元件。 Step 2、制作动画界面。 ①将库面板中的“小孩”影片剪辑元件拖动到舞台，并选定此影片剪辑对象，在属性面板中的“实例名称”框中输入“xh”。 ②执行“窗口—公用库—按钮”命令后出现Flash自带的按钮库，将4个按钮拖动到舞台的相应位置。 Step 3、在按钮中输入代码 ①选定“播放动画”按钮后打开动作面板，输入on(press){xh.play();}代码。 ②用同样方法输入其他3个按钮中的代码。 Step 4、调试并保持动画。 三、影片剪辑中的代码 1、影片剪辑中的代码，可以控制影片剪辑本身的动画。 图示“一叶知秋”动画，树上的树叶实际上是装有代码的影片剪辑。当指针移到树叶上时，就会执行保存在影片剪辑中的代码，树叶会从树上沿曲线飘落下来。 2、实践学习：制作“一叶知秋”交互动画。 实践学习：制作“一叶知秋”交互动画 Step 1、建立“装有代码的树叶飘落”的影片剪辑元件。 ①新建“树叶”图形元件。 ②新建“树叶飘落”影片剪辑元件。 在“树叶飘落”影片剪辑编辑区，调用“树叶”图形元件，先制作引导动画，接着在开始与结末关键帧中存放“stop（）”代码。 ③制作“装有代码的树叶飘落”影片剪辑元件。 在“装有代码的树叶飘落”影片剪辑编辑区，先导入“树叶飘落”影片剪辑元件，再进入“动作”面板，在“树叶飘落”影片剪辑中输入代码“on(rollOver){play();}”。 Step 2、制作动画背景。 Step 3、新建“树叶”图层，将元件库中的“装有代码的树叶飘落”影片剪辑元件多次拖动到树叶上面。 Step 4、调试并保存动画。 感谢观看！ ... ...