项目3-交互动画的制作

1、项目3 交互动画的制 作 教学目标 熟悉ActionScript 3.0的基本语法 掌握ActionScript 3.0的条件判断制语句 掌握ActionScript 3.0的事件和函数 掌握按钮对时间轴的控制 掌握影片剪辑的控制 掌握滑杆控制物体 任务1 东莞地图简介的制作 案例效果 隐形按钮的制作； 动态按钮的制作； 使用按钮控制影片剪辑实例。 案例分析 本案例的实现思路：首先制作与地图上镇区图 形一致的隐形按钮，该按钮在普通状态下是透 明的，只有当鼠标经过按钮时，按钮的状态才 发生改变；然后，将镇区的文字介绍放置在不 同的帧当中；最后，添加脚本实现单击按钮跳 转到对应的帧。 相关知识 使

2、用使用ActionScript 3.0实现按钮控制影片剪实现按钮控制影片剪 辑实例辑实例 在帧上添加代码 play_btn.onpress=function() animation_mc.play(); 在按钮上添加代码 on(press) animation_mc.play(); 相关知识 2.使用使用ActionScript 3.0实现按钮控制影片剪辑实例实现按钮控制影片剪辑实例 只能在帧上输入代码 function playMovie():void animation_mc.play(); play_btn.addEventListener( MouseEvent.CLICK, play

3、Movie); 相关知识 3.函数函数 使用ActionScript编写程序时，常常需要将某些 相对独立的功能封装起来，提供给程序在需要的 时候调用，从而提高程序的灵活性与重用性。我 们把这种封装起来的代码称为函数。 函数的定义函数的定义 function addData(a:int, b:int):void var sum = a + b; trace(“a + b = ” + sum); 函数的调用函数的调用 在ActionScript 3.0中，函数的调用有两种不同的情况：第 一种情况，调用的函数有参数，需要先写明函数名称，然 后在函数名后的小括号里填入参数；第二种情况，调用的 函数没有

4、参数，直接写好函数名，然后加上小括号，保持 小括号里为空。 相关知识 4. 添加事件添加事件 在ActionScript中事件的处理分为侦听和响 应两个步骤。侦听的任务交给addEventListener() 方法，由它负责侦听特定对象的特定事件，响应 的任务交给“事件处理器”函数，由它对事件的 发生做出响应。 function jump (e:MouseEvent):void /时间轴跳转代码 btn1.addEventListener(MouseEvent.CLICK, jump); 相关知识 5.常用时间轴控制命令常用时间轴控制命令 gotoAndPlay(场景,帧) 作用：跳转并播放。

5、跳转到指定场景的指定帧，并从该帧 开始播放，如果没有指定场景，则将跳转到当前场景的指 定帧。 gotoAndStop(场景,帧) 作用：跳转并停止播放。跳转到指定场中的指定帧，并从 该帧停止播放，如果没有指定场景，则将跳转到当前场景 的指定帧。 play() 作用：指定影片继续播放。当某个影片在某一帧停止了， 想接着继续播放，则可用play()语句实现。 stop() 作用：停止当前影片的播放。 立健亭 立健亭价格 立健亭批发 相关知识 5.常用时间轴控制命令常用时间轴控制命令 nextFrame() 作用：将播放头转到下一帧并停止，如果当前帧是最后一 帧，则播放头不移动。 prevFrame

6、() 作用：将播放头转到前一帧并停止，如果当前帧是第1帧 ，则播放头不移动。 nextScene() 作用：跳至下一场景并停止。 prevScene() 作用：跳至前一场景并停止。 相关知识 5.条件语句条件语句 （1）if语句语句 if语句是对条件表达式（如ab）进行判断，根 据判断结果执行不同的程序分支。if语句有3种不同 的形式。 if(条件表达式) /语句 if(条件表达式) /语句 else /语句 if(条件表达式) /语句 else if(条件表达式) /语句 else /语句 相关知识 5.条件语句条件语句 （2）switch语句语句 switch语句是对变量（如字符串变量s或

7、整数变量i） 进行判断，根据变量的不同取值执行不同的程序分支。 switch(变量) case 值1: /语句1 break; case值2: /语句2 break; case值N: /语句N break; default: /语句N+1 相关知识 6.隐形按钮的制作隐形按钮的制作 隐形按钮是指该按钮在动画中是隐蔽的、透明的， 表面上看到的是按钮所覆盖的下方图像，但当鼠标经 过或点击按钮时，依然可以有按钮的状态变化和功能。 方法一（没有按钮的状态变化）： 1. 新建按钮元件，进入按钮元件编辑区； 2. “弹起”、“指针经过”、“按下”三帧均为空帧； 3. “点击”帧插入关键帧，绘制出响应区域。

8、 方法二（有按钮的状态变化）： 1. 新建按钮元件，进入按钮元件编辑区； 2. “弹起”帧为空帧； 3. “指针经过”、“按下”这两帧中分别插入关键帧，制作这两个状 态下的图形或影片剪辑； 4. “点击”帧为空帧。 相关知识 7.动态按钮的制作动态按钮的制作 制作缩放的动态按钮制作缩放的动态按钮 第一步：制作按钮拉伸的形状补间动画； 第二步：制作隐形按钮； 第三步：添加脚本控制。 相关知识 7.动态按钮的制作动态按钮的制作 制作透明度变化的动态按钮制作透明度变化的动态按钮 第一步：制作按钮底图； 第二步：制作半透明方块渐变动画； 第三步：制作隐形按钮； 第四步：添加脚本控制。 案例实现 1.制

9、作隐形按钮中“指针经过”状态所需的影片剪辑。 时间轴“背景”图层 凤岗镇图形绘制 “凤岗剪辑”影片剪辑的时间轴 案例实现 制作隐形按钮 按钮和文本制作 案例实现 3.添加ActionScript脚本 function fenggang(e:MouseEvent):void gotoAndStop(fenggang); function gostart(e:MouseEvent):void gotoAndStop(home); /此处继续添加其余按钮对应的函数 stop(); fenggang_btn.addEventListener(MouseEvent.CLICK, fenggang); g

10、oback_btn.addEventListener(MouseEvent.CLICK, gostart); /此处继续添加其余按钮的侦听器代码 案例拓展 制作以缩略图方式展示图片的交互动画，当鼠标经过缩略 图的时候，底部出现不同颜色的横条拉伸动画，当鼠标移开缩 略图，横条收缩。 任务2 影片剪辑的控制 案例效果 影片剪辑的控制方法； 通过按钮控制实现影片剪辑的播放、暂停、上下 左右的位置移动。 案例分析 本案例的实现思路：首先制作一个由4张图片 循环播放的影片剪辑，为该影片剪辑设计遮罩 效果；制作5个按钮分别对应上移、下移、左 移、右移、播放控制功能；在脚本中对每一个 按钮添加侦听器，负责侦

11、听鼠标的单击事件， 为不同按钮的单击事件编写函数，实现对影片 剪辑的响应控制。 相关知识 影片剪辑的理解影片剪辑的理解 影片剪辑就是一个迷你型的Flash影片，它 拥有自己的时间轴和舞台，放在主影片里， 就好像电视上的“画中画”效果，大画面是 主影片，小画面是影片剪辑，相互独立播放 各自的节目。 影片剪辑还可以包含其他的影 片剪辑，称为嵌套剪辑。 相关知识 2. 影片剪辑的实例名影片剪辑的实例名 实例名称是影片剪辑在舞台上的唯一标识， 使用ActionScript脚本控制影片剪辑之前，必 须先为每一个放在舞台上的影片剪辑命名， 即实例名称。另外，如果影片剪辑只是单纯 用于做动画，不涉及Acti

12、onScript对它的控制， 就可以忽略实例名称。 相关知识 3. 影片剪辑的属性影片剪辑的属性 影片剪辑的一些属性可以通过属性面板、信 息面板等进行设置，但通过这种方式设置的属性 必须在影片播放前完成，且在影片播放过程中不 可改变。影片剪辑还有一些属性是可以用 ActionScript读取甚至修改的。 案例实现 1. 制作图片展示影片剪辑元件。 pictures影片剪辑的时间轴 案例实现 2. 制作按钮元件。 stop按钮弹起stop按钮指针经过 stop按钮的时间轴 案例实现 3. 制作主影片。 主影片的时间轴 案例拓展 制作光谱的控制动画。可以通过左侧两个按钮控制光谱的 透明度，中间按钮

13、控制光谱的播放和暂停，右侧两个按钮控制 光谱的放大与缩小。 任务3 滑杆控制物体的制作 案例效果 滑杆控制人物行走速度的方法 滑片向下拖动，人物的行走速度加快 滑片向上移动，人物的行走速度减慢，直至为0 案例分析 本案例的实现思路：将人物、滑片制作成影片 剪辑，在滑片影片剪辑实例上添加2个侦听器 ，分别侦听鼠标在滑片上按下和松开的动作。 当鼠标按下事件发生时，调用对应函数控制滑 片只能在垂直方向上下移动一定的距离范围； 当鼠标释放事件发生时，调用对应函数控制滑 片停止移动。在主时间轴上添加侦听器，用于 侦听ENTER_FRAME事件，当进入帧事件发生 时，调用相应函数根据滑片实例当前的位置决

14、定人物影片剪辑实例的移动速度，并修改速度 文本框的数值。 相关知识 帧事件帧事件 帧事件（eventFrame）是指当播放头进入到新帧的时 候发生的事件。如果播放头不移动或者只有一帧，将 会继续以帧频调度该事件。 相关知识 2. 鼠标拖动技术鼠标拖动技术 在ActionScript 3.0中，影片剪辑元件可以直 接调用startDrag()函数实现鼠标拖动效果，调 用stopDrag()函数停止鼠标拖动。 相关知识 3.动态改变文本内容与样式动态改变文本内容与样式 从Flash Professional CS5开始，增加了新文 本引擎文本布局框架 (TLF)。TLF 支持更为丰 富的文本布局功能和对文本属性的精细控制，与 以前的传统文本相比，TLF对文本的控制功能更 为强大。如果想要在FLA文件中使用TLF文本， 需要在发布FLA文件时指定使用 ActionScript 3.