鼠标件动画制作与思考.docVIP

?鼠标事件动画的制作与思考 ??? ??? 教学目的：通过本节教学了解和掌握按钮、as语句的基本功能及运用，并用其原理制作出奇特而巧妙的鼠标事件动画。 　　教学对象：本教材是针对有一定动画制作基础和对属性面板及工具箱有所了解的朋友们编制的，因此省略了一些步骤，还望谅解。 ??? 教学要点：按钮、as、鼠标事件。 ? ??? 　　?制作步骤 ???? 作前准备：准备好一张梅花枝图片和一朵透明的梅花和一张透明的脸谱图片，在制图软件（如ps、fw）加工后放置在指定的文件夹待用。 ??? （一）花开满枝 ??　1.启动FLASH8?软件。 ??? 2.确立文档属性 设置动画尺寸为550*400，帧频为12，背景颜色任意，其它默认,点击确定，进入场景1工作区。如图1所示： 图1 ??? 3.创建图形元件 ??? （1）选择“插入－新建元件”，建立一个名为“梅花枝”的图形元件，点击确定，进入元件编辑区。将准备好的梅花枝透明图片(或有背景的位图),导入到工作区。规格要略小于场景（带背景的位图同场景）。全居中。待用。如图2所示： 图2 ??? （2）选择“插入－新建元件”，建立一个名为“梅花”的图形元件，点击确定，进入元件编辑区。将准备好的梅花透明图片导入到工作区，全居中。待用。如图3所示： 图3 ??? 4.创建按钮元件 ??? 选择“插入－新建元件”，建立一个名为“按钮梅花”的按钮元件，点击确定，进入元件编辑区。点击第1帧（弹起），从库中拖出梅花元件到编辑区，全居中。在第3帧（按下）处插入关键帧。如图4所示： 图4 ??? 5.创建影片剪辑 ??? 选择“插入－新建元件”，建立一个名为“梅花开”的影片剪辑元件，点击确定，进入元件编辑区。从库中拖出按钮梅花元件到编辑区，全居中。选择“右键按钮梅花－动作”，打开动作面板，在as编辑区输入如下语句： on (press) {startDrag ();} on (release, releaseOutside) {stopDrag ();} ??? 6.组织编辑场景 ??? 返回场景1，添加三个图层，共四个图层。自下而上分别命名为背景、梅花枝、梅花开和文本。 ??? （1）选择背景图层第一帧，导入或制作一个背景，规格为550*400，全居中，上锁。 ??? （2）选择梅花枝图层第一帧，从库中拖出梅花枝元件至工作区，调整好其规格、状态、位置（如果是透明的话），上锁。 ??? （3）选择梅花开图层第一帧，从库中拖出梅花开影片元件至工作区，放到适当的位置。然后再拖出若干（本实例共十朵），放置在第一朵梅花的位置上，并与其完全重合。上锁。 ??? （4）选择文本图层第一帧，在适当的位置上输入相关的文本内容。上锁。 ??? 此环节完成后的画面如图5所示： 图5 ??? 7.该作业完成后的时间轴如图6所示： ? 图6 ????8.测试存盘。 ? ??? （二）不要碰我 ??? 1.启动FLASH8?软件。 ??? 2.确立文档属性 设置动画尺寸为550*400，帧频为12，背景颜色任意，其它默认,点击确定。如图7所示： 图7 ??? 3.创建图形元件 ??? 选择“插入－新建元件”，建立一个名为“脸谱”的图形元件，点击确定，进入元件编辑区。将准备好的脸谱透明图片导入到工作区。全居中。如图8所示： 图8 ? ??? 4.创建影片剪辑 ??? 选择“插入－新建元件”，建立一个名为“烦”的影片剪辑元件，点击确定，进入元件编辑区。从库中拖出脸谱元件到工作区。全居中。在第30帧插入关键帧，再在第10帧插入关键帧，选择属性面板中的颜色，变换脸谱颜色，其参数如图9所示： ? 图9 ? 点击第1帧，创建此区域间的补间动画；在第20帧处插入关键帧，点击第20帧，创建第20－30帧区域间的补间动画。如图10所示： ? ? 图10 ? ??? 5.创建按钮元件 ??? 选择“插入－新建元件”，建立一个名为“按钮烦”的按钮元件，点击确定，进入元件编辑区。点击第1帧（弹起），从库中拖出烦影片剪辑元件到编辑区，全居中。然后在第4帧（点击）处插入关键帧，用矩形工具托一个略大于脸谱的无边矩形，全居中。如图11所示： ? 图11 ? ??? 6.组织编辑场景 ??? 返回场景1，添加三个图层，共四个图层。自下而上分别命名为背景、烦按钮、as和文本。 ??? （1）选择背景图层第一帧，导入或制作一个背景，规格为550*400，全居中，上锁。 ??? （2）选择烦按钮图层第一帧，从库中拖出烦按钮元件至工作区，全居中。选择“右键烦按钮实例－动作”，打开动作面板，在as编辑区输入如下语句： on (rollOver) {//当鼠标滑过的时候，开始运行程序；play();} 在第2帧处插入关键帧，将烦按钮实例移动到其它位置；在第3帧