中职动画设计软件应用（Flash CC）第十章电子课件高教版.ppt

《中职动画设计软件应用（Flash CC）第十章电子课件高教版.ppt》由会员分享，可在线阅读，更多相关《中职动画设计软件应用（Flash CC）第十章电子课件高教版.ppt（59页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF中职 动画设计软件应用（Flash CC）第十章电子课件 高教版Flash cc 二维动画基础第10章ActionScript 3.0 编程基础学习目标学习目标l熟悉并掌握动作面板的操作l熟悉并掌握代码片段的添加和修改l常用的影片剪辑（movieClip类）方法和属性重点难点重点难点lgotoAndPlay()、play()、stop()方法的使用lpreFrame()、nextFrame()方法的使用l事件监听的语法和使用l控制影片的停止播放和时间轴的跳转l通过语法改变实例对象的属性第10章ActionScript 3.0 编程基础学习内容：10.1控制影片停止播放10.2时间轴导航1

2、0.3改变影片剪辑属性10.4 知识拓展10.5本章小结与重点回顾10.6课后实训10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l案例综述 本实例主要通过播放和停止按钮控制人物走路。主要应用到影片剪辑（MovieClip类）的stop()方法和play()方法来实现。10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l案例分析本实例主要通过在动作面板中添加代码实现播放停止的功能，具体操作步骤如下所示：（1）新建文档，并保存。（2）导入背景素材并覆盖舞台（3）导入角色跑步素材并对实例命名（4）制作播放和停止按钮（5）添加播放按钮控制代码（6）添加停止按钮控制代码（7）测试

3、并发布影片10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤处理背景素材在弹出对话框中，将素材文件中“背景.jpg”导入到舞台10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤导入角色跑步素材并对实例命名10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤制作播放和停止按钮10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤放置按钮10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤添加播放按钮控制代码10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤代码如下：bofang.add

4、EventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):voidgotoAndPlay(5);10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l操作步骤代码说明：bofang.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);整个语句的含义是表示为bofang按钮添加了事件监听（addEventListener），监听

5、的事件为“鼠标点击”事件（MouseEvent.CLICK），当监听到时间发生后，则执行fl_ClickToGoToAndPlayFromFrame函数。function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void。这个语句表示对fl_ClickToGoToAndPlayFromFrame函数的定义。fl_ClickToGoToAndPlayFromFrame函数执行语句为gotoAndPlay(5);表示跳转到第5帧并播放。默认设置为第5帧。10.1控制影片停止播放10.1.1课堂案例按钮控制人物运动l举一反三将上面的实例进行一

6、些变化，控制影片剪辑的停止和播放10.1控制影片停止播放10.1.2动作面板 在AS3.0中只运行代码写在时间轴的关键帧上或者外部类中，本书中的代码都书写在时间轴的关键帧上。无论是自己书写代码还是通过代码片段进行添加，都需要使用“动作面板”。10.1控制影片停止播放10.1.4事件监听 【代码片段】面板可以较为方便的为编程人员添加一些常见功能代码，为不熟悉ActionScript3.0编程语言的用户提供了制作简单交换动画的捷径。10.1控制影片停止播放10.1.4事件监听 所谓的事件就是一个对象，例如当点击按钮时，就会创建一个鼠标点击事件，加载一个影片时，就会创建一个加载事件。在Actions

7、cript 3.0编程中通过用户触发事件，程序执行事件触发后的程序，来实现人机之间的交换。例如上面实例中，用户点击“停止”按钮，创建了一个鼠标点击事件，然后执行停止播放的程序，实现时间轴的停止。完成整个事件监听过程如下：以点击按钮，时间轴代码播放的代码为例说明起过程。bofang.addEventListener(MouseEvent.CLICK,clickbofang)function clickbofang(event:MouseEvent):void play();10.1控制影片停止播放10.1.4事件监听 1、确定触发事件的对象 触发事件的对象是事件监听的目标对象。例如按钮人物跑步实

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

9、addEventListener(MouseEvent.CLICK,clickbofang)语句表示为“bofang”这个实例添加事件监听，监听的事件类型为MouseEvent.CLICK（鼠标点击事件），响应函数的名称为clickbofang10.1控制影片停止播放10.1.4事件监听 3、执行事件响应函数计算机中的“函数”，是一段可以重复使用的ActionScript代码。函数的创建用“function”语句来完成。事件监听的响应函数如下：function 函数名(事件参数)函数体点击播放按钮进程播放时间轴的响应函数代码如下：function clickbofang(event:Mouse

10、Event):void play();10.1控制影片停止播放10.1.4事件监听 3、执行事件响应函数计算机中的“函数”，是一段可以重复使用的ActionScript代码。函数的创建用“function”语句来完成。事件监听的响应函数如下：function 函数名(事件参数)函数体点击播放按钮进程播放时间轴的响应函数代码如下：function clickbofang(event:MouseEvent):void play();10.1控制影片停止播放10.1.5play（）方法与stop()方法应用 play()和stop()方法是影片剪辑（MovieClip）类定义的方法。把库中的影片剪辑

11、元件拖放到舞台上，在属性面板中对这个元件命名（实例化），在ActionScript3.0的编程中即可调用影片剪辑（MovieClip）类定义的方法。play()方法表示在时间轴上向前移动播放头。stop()方法表示停止当前正在播放的影片。此动作最通常的用法是用按钮控制影片剪辑。10.2时间轴导航10.2.1课堂案例电子相册制作l案例综述 本实例主要通过上一页、下一页、第一页、最后一页按钮来对导入的电子相册进行播放。主要应用到影片剪辑（MovieClip类）的gotoAndstop()方法、nextframe()方法和nextframe()方法来实现。10.2时间轴导航10.2.1课堂案例电子相

12、册制作l案例分析本实例主要通过在动作面板中添加代码实现播放停止的功能，具体操作步骤如下所示：（1）新建文档，并保存。（2）导入背景图片素材（3）设置遮罩效果（4）制作导航按钮（5）对按钮进行实例化命名（6）添加导航按钮控制代码（7）添加帧停止代码（8）测试并发布影片10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤处理背景素材10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤设置遮罩 图片覆盖整个舞台，可以为相册设计一种相册边框，使用遮罩动画来完成10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤创建按钮10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤

13、对按钮进行实例化命名10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤帧停止动作10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤添加第一页按钮控制代码zuihouyiye.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndStopAtFrame_3);function fl_ClickToGoToAndStopAtFrame_3(event:MouseEvent):voidgotoAndStop(10);10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤添加上一页按钮控制代码shangyiye.addEvent

14、Listener(MouseEvent.CLICK,fl_ClickToGoToPreviousFrame);function fl_ClickToGoToPreviousFrame(event:MouseEvent):voidprevFrame();10.2时间轴导航10.2.1课堂案例电子相册制作l操作步骤添加下一页按钮控制代码xiayiye.addEventListener(MouseEvent.CLICK,fl_ClickToGoToNextFrame);function fl_ClickToGoToNextFrame(event:MouseEvent):voidnextFrame()

15、;10.2时间轴导航10.2.1课堂案例电子相册制作l举一反三 电子相册实例中实现了图片的导航切换，但图片之间没有过渡效果。可以将每个图片转换为影片剪辑10.2时间轴导航10.2.2时间轴导航方法调用10.2时间轴导航10.2.2时间轴导航方法调用（1）在此帧处停止 为时间轴添加代码，选择时间轴上需要再此帧处停止的关键帧，双击“在此帧处停止”的代码片段，则在动画面板中添加代码“stop()”，执行停止播放命令。读者选择该帧后，可直接在动作面板上输入stop()命令。10.2时间轴导航10.2.2时间轴导航方法调用mc.addEventListener(MouseEvent.CLICK,fl_C

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

17、oToNextFrame);function fl_ClickToGoToNextFrame(event:MouseEvent):voidnextFrame();10.2时间轴导航10.2.2时间轴导航方法调用（4）单击以转到下一场景并播放/单击以转到前一场景并播放当Flash动画为多场景动画时，可以实现多场景的切换。场景添加可以执行【插入】【场景】操作，即可实现插入场景。单击指定的元件实例会将播放头移动到时间轴中的下一场景并在此场景中继续回放。代码如下：mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToNextScene);function

18、 fl_ClickToGoToNextScene(event:MouseEvent):voidMovieClip(this.root).nextScene();nextScene();方法主要实现转到下一场景命令10.3改变影片剪辑属性10.3.1课堂案例转动的风车l案例综述l案例分析l操作步骤l举一反三10.3.2设置影片的属性10.3改变影片剪辑属性10.3.1课堂案例转动的风车l案例综述 旋转的文本可以使用补间动画来完成，本实例中主要通过修改影片剪辑的旋转属性来设置完成。10.3改变影片剪辑属性10.3.1课堂案例转动的风车l案例分析本实例主要通过在动作面板中添加代码实现影片剪辑风车的旋

19、转，主要通过修改实例对象的旋转属性来实现的。具体操作步骤如下所示：（1）新建文档，并保存。（2）导入背景图片素材（3）导入风车图片素材并处理（4）制作风车旋转动画（5）将风车元件放置在舞台上并修改属性（6）测试并发布影片10.3改变影片剪辑属性10.3.1课堂案例转动的风车l操作步骤导入风车素材10.3改变影片剪辑属性10.3.1课堂案例转动的风车l操作步骤制作风车旋转动画10.3改变影片剪辑属性10.3.1课堂案例转动的风车l操作步骤制作风车旋转动画mc.addEventListener(Event.Enter_FRAME,fl_RotateContinuously_2);function

20、fl_RotateContinuously_2(event:Event)mc.rotation+=10;10.3改变影片剪辑属性10.3.1课堂案例转动的风车l操作步骤（1）本实例触发Enter_FRAME 事件，表示进入帧，当程序进入到添加代码的关键帧即触发了事件，执行fl_RotateContinuously_2函数。（2）fl_RotateContinuously_2函数主要执行mc.rotation+=10;语句，表示将mc实例选择10。所编写代码的默认旋转方向为顺时针。如果要将旋转方向更改为逆时针，将以下数字 10 更改为负值。要更改元件实例的旋转速度，可将以数字 10 更改为希望元

21、件实例在每帧中的旋转度数。度数越高，旋转越快。（3）上面代码事件触发一次旋转10，而当动画不断触发 Enter_FRAME 事件时，则形成连续的旋转动画。10.3改变影片剪辑属性10.3.1课堂案例转动的风车l举一反三 利用上面的操作步骤可以实现对象的旋转，同理制作下面的实例效果。10.3改变影片剪辑属性10.3.2设置影片的属性10.3改变影片剪辑属性10.3.2设置影片的属性（1）用键盘箭头移动通过触发键盘事件，实现用键盘箭头移动指定的元件实例。要增加或减少移动量，用您希望每次按键时元件实例移动的像素数替换下面的数字 5。（2）水平移动通过将所指定元件实例的 x 属性减少或增加指定的像素数

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

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

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

25、 mc.y+=10;/垂直移动10.3改变影片剪辑属性10.3.2设置影片的属性（7）淡入/淡出影片剪辑通过在 Enter_FRAME 事件中增加元件实例的 Alpha 属性值对其进行淡入，减少Alpha的属性值来实现淡出直到它完全显示。淡入代码如下：mc.addEventListener(Event.Enter_FRAME,fl_FadeSymbolIn);mc.alpha=0;function fl_FadeSymbolIn(event:Event)mc.alpha+=0.01;if(mc.alpha=1)mc.removeEventListener(Event.Enter_FRAME,f

26、l_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.

27、4知识拓展Movieclip类常用的方法和属性1、常用的属性scaleX:Number指示从注册点开始应用的对象的水平缩放比例（百分比）。scaleY:Number 指示从对象注册点开始应用的对象的垂直缩放比例（百分比）。visible:Boolean 显示对象是否可见。width:Number 指示显示对象的宽度，以像素为单位。height:Number 指示显示对象的高度，以像素为单位。x:Number 本地坐标的 x 坐标。y:Number 本地坐标的 y 坐标。10.4知识拓展Movieclip类常用的方法和属性2、常用的方法addChild(child:DisplayObject):

28、将一个 DisplayObject 子实例添加到该 DisplayObjectContainer 实例中。gotoAndPlay(frame:Object,scene:String=null)从指定帧开始播放 SWF 文件。gotoAndStop(frame:Object,scene:String=null)将播放头移到影片剪辑的指定帧并停在那里。nextFrame()将播放头转到下一帧并停止。nextScene()将播放头移动到 MovieClip 实例的下一场景。play()在影片剪辑的时间轴中移动播放头。prevFrame()将播放头转到前一帧并停止。prevScene()将播放头移动到

29、 MovieClip 实例的前一场景。10.5本章小结与重点回顾本章主要结合Flash CC软件中的动作面板和代码片段，制作简单的时间轴控制动画。熟悉并掌握如何利用代码片段窗口添加基本常用的代码。掌握事件监听的代码添加过程，了解时间轴导航代码中常用的方法。如gotoAndPlay()、play()、stop()、preFrame()、nextFrame()方法的使用。5710.6课后实训课堂实例1短片的开始按钮和replay按钮的控制 下面以铅笔写字为例，为其添加播放和重播的按钮控制。在第1帧时，时间轴停止，需要添加“在此帧处停止”代码片段，为“play”按钮添加“单击此转到帧并播放代码”，转到第2帧开始播放。在动画结束帧，添加“在此帧处停止”代码片段，为“replay”按钮添加“单击此转到帧并播放代码”，转到第1帧开始播放。5810.6课后实训课堂实例2影片的淡入 本实例为影片剪辑实例制作淡入的动画效果。将影片剪辑放置在舞台上，在代码片段中添加“淡入影片剪辑”，即实现了影片剪辑淡入效果。59