中职教材二维动画公开课

Flashcc二维动画基础第10章ActionScript3.0编程基础

学习目标熟悉并掌握动作面板的操作熟悉并掌握代码片段的添加和修改常用的影片剪辑（movieClip类）方法和属性重点难点gotoAndPlay()、play()、stop()方法的使用preFrame()、nextFrame()方法的使用事件监听的语法和使用控制影片的停止播放和时间轴的跳转通过语法改变实例对象的属性第10章ActionScript3.0编程基础

学习内容：10.1控制影片停止播放10.2时间轴导航10.3改变影片剪辑属性10.4知识拓展10.5本章小结与重点回顾10.6课后实训10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动案例综述本实例主要通过播放和停止按钮控制人物走路。主要应用到影片剪辑（MovieClip类）的stop()方法和play()方法来实现。10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动案例分析本实例主要通过在动作面板中添加代码实现播放停止的功能，具体操作步骤如下所示：（1） 新建文档，并保存。（2） 导入背景素材并覆盖舞台（3） 导入角色跑步素材并对实例命名（4） 制作播放和停止按钮（5） 添加播放按钮控制代码（6） 添加停止按钮控制代码（7） 测试并发布影片10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤处理背景素材在弹出对话框中，将素材文件中“背景.jpg”导入到舞台10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤导入角色跑步素材并对实例命名10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤制作播放和停止按钮10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤放置按钮10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤添加播放按钮控制代码10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤代码如下：bofang.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(5);}10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动操作步骤代码说明： bofang.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);整个语句的含义是表示为bofang按钮添加了事件监听（addEventListener），监听的事件为“鼠标点击”事件（MouseEvent.CLICK），当监听到时间发生后，则执行fl_ClickToGoToAndPlayFromFrame函数。 functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void。这个语句表示对fl_ClickToGoToAndPlayFromFrame函数的定义。 fl_ClickToGoToAndPlayFromFrame函数执行语句为gotoAndPlay(5);表示跳转到第5帧并播放。默认设置为第5帧。10.1控制影片停止播放

10.1.1课堂案例—按钮控制人物运动举一反三将上面的实例进行一些变化，控制影片剪辑的停止和播放10.1控制影片停止播放

10.1.2动作面板在AS3.0中只运行代码写在时间轴的关键帧上或者外部类中，本书中的代码都书写在时间轴的关键帧上。无论是自己书写代码还是通过代码片段进行添加，都需要使用“动作面板”。10.1控制影片停止播放

10.1.4事件监听【代码片段】面板可以较为方便的为编程人员添加一些常见功能代码，为不熟悉ActionScript3.0编程语言的用户提供了制作简单交换动画的捷径。10.1控制影片停止播放

10.1.4事件监听所谓的事件就是一个对象，例如当点击按钮时，就会创建一个鼠标点击事件，加载一个影片时，就会创建一个加载事件。在Actionscript3.0编程中通过用户触发事件，程序执行事件触发后的程序，来实现人机之间的交换。例如上面实例中，用户点击“停止”按钮，创建了一个鼠标点击事件，然后执行停止播放的程序，实现时间轴的停止。完成整个事件监听过程如下：以点击按钮，时间轴代码播放的代码为例说明起过程。bofang.addEventListener(MouseEvent.CLICK,clickbofang)functionclickbofang(event:MouseEvent):void{ play();}10.1控制影片停止播放

10.1.4事件监听1、确定触发事件的对象触发事件的对象是事件监听的目标对象。例如按钮人物跑步实例中，“bofang”即是事件的目标。10.1控制影片停止播放

10.1.4事件监听2、注册事件侦听注册事件监听主要使用addEventListener()方法。常用的格式为：触发事件的对象.addEventListener(事件类型.事件名称,函数名称);说明：（1）触发事件的对象即是确定的事件监听的目标对象（2）addEventListener()是注册事件监听的方法，其中主要包括两个参数，一个是事件类型，如鼠标点击事件、鼠标移动、进入帧等一些交互事件。另一个参数为函数名称，这个函数的函数就是针对某个特定事件定义的一个响应函数(方法)，主要功能就是响应事件后所需要执行的操作。bofang.addEventListener(MouseEvent.CLICK,clickbofang)语句表示为“bofang”这个实例添加事件监听，监听的事件类型为MouseEvent.CLICK（鼠标点击事件），响应函数的名称为clickbofang10.1控制影片停止播放

10.1.4事件监听3、执行事件响应函数计算机中的“函数”，是一段可以重复使用的ActionScript代码。

函数的创建用“function”语句来完成。事件监听的响应函数如下：function函数名(事件参数){函数体}

点击播放按钮进程播放时间轴的响应函数代码如下：

functionclickbofang(event:MouseEvent):void{ play();}10.1控制影片停止播放

10.1.4事件监听3、执行事件响应函数计算机中的“函数”，是一段可以重复使用的ActionScript代码。

函数的创建用“function”语句来完成。事件监听的响应函数如下：function函数名(事件参数){函数体}

点击播放按钮进程播放时间轴的响应函数代码如下：

functionclickbofang(event:MouseEvent):void{ play();}10.1控制影片停止播放

10.1.5

play（）方法与stop()方法应用play()和stop()方法是影片剪辑（MovieClip）类定义的方法。把库中的影片剪辑元件拖放到舞台上，在属性面板中对这个元件命名（实例化），在ActionScript3.0的编程中即可调用影片剪辑（MovieClip）类定义的方法。play()方法表示在时间轴上向前移动播放头。stop()方法表示停止当前正在播放的影片。此动作最通常的用法是用按钮控制影片剪辑。10.2时间轴导航

10.2.1课堂案例—电子相册制作案例综述本实例主要通过上一页、下一页、第一页、最后一页按钮来对导入的电子相册进行播放。主要应用到影片剪辑（MovieClip类）的gotoAndstop()方法、nextframe()方法和nextframe()方法来实现。10.2时间轴导航

10.2.1课堂案例—电子相册制作案例分析本实例主要通过在动作面板中添加代码实现播放停止的功能，具体操作步骤如下所示：（1） 新建文档，并保存。（2） 导入背景图片素材（3） 设置遮罩效果（4） 制作导航按钮（5） 对按钮进行实例化命名（6） 添加导航按钮控制代码（7） 添加帧停止代码（8） 测试并发布影片10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤处理背景素材10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤设置遮罩

图片覆盖整个舞台，可以为相册设计一种相册边框，使用遮罩动画来完成10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤创建按钮10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤对按钮进行实例化命名10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤帧停止动作10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤 添加第一页按钮控制代码zuihouyiye.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndStopAtFrame_3);functionfl_ClickToGoToAndStopAtFrame_3(event:MouseEvent):void{ gotoAndStop(10);}10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤添加上一页按钮控制代码shangyiye.addEventListener(MouseEvent.CLICK,fl_ClickToGoToPreviousFrame);functionfl_ClickToGoToPreviousFrame(event:MouseEvent):void{ prevFrame();}10.2时间轴导航

10.2.1课堂案例—电子相册制作操作步骤添加下一页按钮控制代码xiayiye.addEventListener(MouseEvent.CLICK,fl_ClickToGoToNextFrame);functionfl_ClickToGoToNextFrame(event:MouseEvent):void{ nextFrame();}10.2时间轴导航

10.2.1课堂案例—电子相册制作举一反三电子相册实例中实现了图片的导航切换，但图片之间没有过渡效果。可以将每个图片转换为影片剪辑10.2时间轴导航

10.2.2时间轴导航方法调用10.2时间轴导航

10.2.2时间轴导航方法调用（1）在此帧处停止为时间轴添加代码，选择时间轴上需要再此帧处停止的关键帧，双击“在此帧处停止”的代码片段，则在动画面板中添加代码“stop()”，执行停止播放命令。读者选择该帧后，可直接在动作面板上输入stop()命令。10.2时间轴导航

10.2.2时间轴导航方法调用mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndStopAtFrame);functionfl_ClickToGoToAndStopAtFrame(event:MouseEvent):void{ gotoAndStop(5);}10.2时间轴导航

10.2.2时间轴导航方法调用（3）单击以转到下一帧/上一帧并停止此代码针对按钮或者影片剪辑实例对象。选择进行交互的对象，双击代码片段窗口中的“单击以转到下一帧并停止”,或者“单击以转到上一帧并停止”例如对mc实例元件添加“单击以转到下一帧并停止”代码，则在动作面板中添加代码如下：mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToNextFrame);functionfl_ClickToGoToNextFrame(event:MouseEvent):void{ nextFrame();}10.2时间轴导航

10.2.2时间轴导航方法调用（4）单击以转到下一场景并播放/单击以转到前一场景并播放当Flash动画为多场景动画时，可以实现多场景的切换。场景添加可以执行【插入】—【场景】操作，即可实现插入场景。单击指定的元件实例会将播放头移动到时间轴中的下一场景并在此场景中继续回放。代码如下：mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToNextScene);functionfl_ClickToGoToNextScene(event:MouseEvent):void{ MovieClip(this.root).nextScene();}nextScene();方法主要实现转到下一场景命令10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车案例综述案例分析操作步骤举一反三10.3.2设置影片的属性10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车案例综述旋转的文本可以使用补间动画来完成，本实例中主要通过修改影片剪辑的旋转属性来设置完成。10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车案例分析本实例主要通过在动作面板中添加代码实现影片剪辑风车的旋转，主要通过修改实例对象的旋转属性来实现的。具体操作步骤如下所示：（1） 新建文档，并保存。（2） 导入背景图片素材（3） 导入风车图片素材并处理（4） 制作风车旋转动画（5） 将风车元件放置在舞台上并修改属性（6） 测试并发布影片10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车操作步骤导入风车素材10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车操作步骤制作风车旋转动画10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车操作步骤制作风车旋转动画mc.addEventListener(Event.Enter_FRAME,fl_RotateContinuously_2);functionfl_RotateContinuously_2(event:Event){ mc.rotation+=10;}10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车操作步骤（1）本实例触发Enter_FRAME事件，表示进入帧，当程序进入到添加代码的关键帧即触发了事件，执行fl_RotateContinuously_2函数。（2）fl_RotateContinuously_2函数主要执行mc.rotation+=10;语句，表示将mc实例选择10°。所编写代码的默认旋转方向为顺时针。如果要将旋转方向更改为逆时针，将以下数字10更改为负值。要更改元件实例的旋转速度，可将以数字10更改为希望元件实例在每帧中的旋转度数。度数越高，旋转越快。（3）上面代码事件触发一次旋转10°，而当动画不断触发Enter_FRAME事件时，则形成连续的旋转动画。10.3改变影片剪辑属性

10.3.1课堂案例—转动的风车举一反三利用上面的操作步骤可以实现对象的旋转，同理制作下面的实例效果。10.3改变影片剪辑属性

10.3.2设置影片的属性10.3改变影片剪辑属性

10.3.2设置影片的属性（1）用键盘箭头移动通过触发键盘事件，实现用键盘箭头移动指定的元件实例。要增加或减少移动量，用您希望每次按键时元件实例移动的像素数替换下面的数字5。（2）水平移动通过将所指定元件实例的x属性减少或增加指定的像素数可将其向左或右移动。代码如下：mc.x+=100;说明: 此代码默认情况下会将元件实例移动到右侧。 要将元件实例向左移动，将以下数字100更改为负值。 要更改元件实例移动的距离，将以下数字100更改为希望元件实例移动的像素数。10.3改变影片剪辑属性

10.3.2设置影片的属性（3）垂直移动通过将元件实例的y属性减少或增加指定的像素数将其向上或向下移动。代码如下：mc.y+=100;说明: 所编写代码的默认移动方向为下。 要将符号实例向上移动，请将以下数字100更改为负值。 要更改元件实例移动的距离，将以下数字100更改为希望元件实例移动的像素数。10.3改变影片剪辑属性

10.3.2设置影片的属性（4）旋转一次通过更新元件实例的旋转属性，将其旋转指定的度数。设置影片剪辑rotation属性，改变其数值来实现实例元件的选择。代码如下：mc.rotation+=45;说明: 所编写代码的默认旋转方向为顺时针。 要将元件实例逆时针旋转，将以下数字45更改为负值。 要更改元件实例的旋转量，将以下数值45更改为希望的旋转度数。10.3改变影片剪辑属性

10.3.2设置影片的属性（5）不断旋转通过在Enter_FRAME事件中更新元件实例的旋转属性使其不断旋转。代码如下：mc.addEventListener(Event.Enter_FRAME,fl_RotateContinuously);functionfl_RotateContinuously(event:Event){ mc.rotation+=10;}10.3改变影片剪辑属性

10.3.2设置影片的属性（6）水平移动/垂直移动通过在Enter_FRAME事件中减少或增加元件实例的x属性，使其在舞台上向左或向右移动。增加或减少y的属性，可以实现元件在舞台上向上或者向下运动。mc.addEventListener(Event.Enter_FRAME,fl_AnimateHorizontally);functionfl_AnimateHorizontally(event:Event){ mc.x+=10;//水平移动或

mc.y+=10;//垂直移动}10.3改变影片剪辑属性

10.3.2设置影片的属性（7）淡入/淡出影片剪辑通过在Enter_FRAME事件中增加元件实例的Alpha属性值对其进行淡入，减少Alpha的属性值来实现淡出直到它完全显示。淡入代码如下：mc.addEventListener(Event.Enter_FRAME,fl_FadeSymbolIn);mc.alpha=0;functionfl_FadeSymbolIn(event:Event){ mc.alpha+=0.01; if(mc.alpha>=1) { mc.removeEventListener(Event.Enter_FRAME,fl_FadeSymbolIn); }}10.4知识拓展

Movieclip类常用的方法和属性1、常用的属性 alpha:Number指示指定对象的Alpha透明度值。 mask:DisplayObject调用显示对象被指定的mask对象遮罩。 mouseX:Number[read-only]指示鼠标位置的x坐标，以像素为单位。 mouseY:Number[read-only]指示鼠标位置的y坐标，以像素为单位。 name:String指示DisplayObject的实例名称。 rotation:Number指示DisplayObject实例距其原始方向的旋转程度，以度为单位。10.4知识拓展

Movieclip类常用的方法和属性1、常用的属性 scaleX:Number指示从注册点开始应用的对象的水平缩放比例（百分比）。 scaleY:Number指示从对象注册点开始应用的对象的垂直缩放比例（百分比）。 visible:Boolean显示对象是否可见。 width:Number指示显示对象的宽度，以像素为单位。