Flash 二维动画设计 教育技术学专业 陇东学院信息工程学院 2018年12月6日.

Presentation on theme: "Flash 二维动画设计 教育技术学专业 陇东学院信息工程学院 2018年12月6日."— Presentation transcript:

1 Flash 二维动画设计 教育技术学专业 陇东学院信息工程学院 2018年12月6日

2 第8单元 交互式动画 教学目的和要求 理解交互式动画 掌握动作面板的组成与使用方法 学会为帧、按钮和影片剪辑添加动作 掌握函数的使用方法
第8单元 交互式动画 教学目的和要求 理解交互式动画 掌握动作面板的组成与使用方法 学会为帧、按钮和影片剪辑添加动作 掌握函数的使用方法 陇东学院信息工程学院 2018年12月6日

3 第8单元 交互式动画 教学重点和难点 为帧、按钮和影片剪辑添加动作 函数的使用方法 陇东学院信息工程学院 2018年12月6日

4 第8单元 交互式动画 主要内容 认识动作面板和交互式动画 设置按钮动作 设置帧动作 设置影片剪辑动作 控制动画 陇东学院信息工程学院
第8单元 交互式动画 主要内容 认识动作面板和交互式动画 设置按钮动作 设置帧动作 设置影片剪辑动作 控制动画 陇东学院信息工程学院 2018年12月6日

5 8.1 交互动画及动作面板概述 Flash是一个功能强大的动画制作软件，用户不仅可以利用它制作简单的逐帧动画和补间动画，还可以使用其自带的动作脚本语言，创建复杂的交互式动画。 陇东学院信息工程学院 2018年12月6日

6 交互动画的概述 Flash的交互动画是指在作品播放时支持事件响应和交互功能的一种动画，也就是说，动画播放时能够受到某种控制，而不是像普通动画一样从头到尾进行播放。 陇东学院信息工程学院 2018年12月6日

7 认识“动作”面版 在Flash 8 中，用户可以通过动作面板来创建与编辑脚本。用户可以在标准模式和专家模式两种不同的编辑模式中创建和编辑对象或帧的动作。 用户可以使用以下两种方法打开动作面板： （1）在菜单“窗口-动作”命令，即可打开动作面板，如图8.1.1所示。 （2）用鼠标右键在舞台中的按钮、影片剪辑实例或关键帧上单击，在弹出的快捷菜单中选择“动作”命令，也可以打开动作面板。 陇东学院信息工程学院 2018年12月6日

8 认识“动作”面版 图 “动作”面板 陇东学院信息工程学院 2018年12月6日

9 8.1.3 使用动作面板 使用“动作”面板添加动作的步骤如下： （1）单击“动作”工具箱中某个类别，显示该类别中的动作。
使用动作面板 使用“动作”面板添加动作的步骤如下： （1）单击“动作”工具箱中某个类别，显示该类别中的动作。 （2）双击选中的动作，或者将其拖放到脚本窗格中，即可在脚本窗格中添加该动作。如图8.1.2所示。 陇东学院信息工程学院 2018年12月6日

10 使用动作面板 图 在窗格中添加动作 陇东学院信息工程学院 2018年12月6日

11 8.1.4 使用“动作”面板选项菜单 在动作面板中，单击右上角的“”按钮，将打开“动作”面板，如图8.1.3所示。其中有许多菜单选项。
使用“动作”面板选项菜单 在动作面板中，单击右上角的“”按钮，将打开“动作”面板，如图8.1.3所示。其中有许多菜单选项。 图 “动作”面板选项菜单 陇东学院信息工程学院 2018年12月6日

12 设置“动作”面板的参数 （1）从“动作”面板的选项菜单中选择“首选参数”命令。或选择“编辑”菜单里的“首选参数”命令，然后单击“ActionScript”选项卡，如图8.1.12所示。 （2）从弹出的“首选参数”对话框里设置任意首选参数。 陇东学院信息工程学院 2018年12月6日

13 设置“动作”面板的参数 图 首选参数对话框 陇东学院信息工程学院 2018年12月6日

14 使用代码提示 （1）从“动作”面板的右上角的选项菜单中选择“首选参数”，然后在“ActionScript”选项卡上，选择“代码提示”。 （2）单击脚本窗格上方的“显示代码提示”按钮“”。 （3）从“动作”面板的选项菜单中选择“显示代码提示”。 陇东学院信息工程学院 2018年12月6日

15 8.2.1 为关键帧添加动作 （1）新建一个文件。 （2）在层“图层1”的第10帧和第20帧处插入关键帧，并在舞台上添加一些内容。
为关键帧添加动作 （1）新建一个文件。 （2）在层“图层1”的第10帧和第20帧处插入关键帧，并在舞台上添加一些内容。 （3）将添加了动作的帧放在一个独立的层上是一种很好的习惯。在层“图层1”之上添加一个层动作专门放置带有程序的帧。 陇东学院信息工程学院 2018年12月6日

16 8.2.1 为关键帧添加动作 （4）在层动作的第10帧和第20帧处插入关键帧。
为关键帧添加动作 （4）在层动作的第10帧和第20帧处插入关键帧。 （5）选中第20帧，在菜单中选择“窗口-动作”命令将弹出动作面板。 （6）将“动作”域展开，在单击“影片剪辑”将其展开。 （7）双击语句goto向动作编辑框中添加语句gotoAndPlay（1）。 （8）再将参数面板中Frame文本框的内容设为10。 当为帧添加了一条语句后，包含有动作的帧上面会出现一个“a”字母。 陇东学院信息工程学院 2018年12月6日

17 为按钮添加动作 为按钮添加动作的方法与为帧添加动作的方法相同，但是，为按钮添加动作时，必须将动作套在on处理函数中，并添加触发该动作的鼠标或键盘事件。将“on”处理函数拖放到脚本窗格中后，在弹出的下拉列表里选择一个事件即可，如图8.2.1所示。 陇东学院信息工程学院 2018年12月6日

18 为按钮添加动作 图 on处理函数弹出的下拉列表 陇东学院信息工程学院 2018年12月6日

19 8.2.2 为按钮添加动作 下面是用于Flash按钮的基于鼠标动作的事件处理“on”处理函数具体解释：
为按钮添加动作 下面是用于Flash按钮的基于鼠标动作的事件处理“on”处理函数具体解释： 按下on(Press) ：指在鼠标指针经过按钮时按下鼠标。 释放on(Release) ： 指在鼠标指针经过按钮时释放鼠标按钮。 外部释放on（Release Outside）：指当鼠标指针在按钮之内时按下按钮后，将鼠标指针移到按钮之外，此时释放鼠标。 滑过on（Roll Over）：指鼠标指针滑过按钮。 陇东学院信息工程学院 2018年12月6日

20 为按钮添加动作 外部释放on（Release Outside）：指当鼠标指针在按钮之内时按下按钮后，将鼠标指针移到按钮之外，此时释放鼠标。 滑过on（Roll Over）：指鼠标指针滑过按钮。 滑离on（Roll Out）：指鼠标指针移出按钮区域。 拖过on（Drag Over）：指在鼠标指针移过按钮时按下鼠标，然后移出此按钮，再移回此按钮拖离。 拖离on（Drag Out）：指在鼠标指针滑过按钮时按下鼠标，然后滑出此按钮区域。 按键on(Key Press) ：指按下指定的key。 陇东学院信息工程学院 2018年12月6日

21 8.2.2 为按钮添加动作 （1）选中按钮，选择“窗口”菜单里“动作”打开它。 （2）要指定动作，请执行以下操作之一：
为按钮添加动作 （1）选中按钮，选择“窗口”菜单里“动作”打开它。 （2）要指定动作，请执行以下操作之一： 单击“动作”工具箱中的文件夹，双击某个动作将其添加到脚本窗格中。 把动作从“动作”工具箱拖到脚本窗格中。 单击按钮，然后从弹出的菜单中选择一项动作。 （3）在面板顶部的参数文本框中，输入动作的参数。 （4）重复步骤2和步骤3，根据需要指定其它动作。 陇东学院信息工程学院 2018年12月6日

22 为影片剪辑添加动作 在 Flash 8中，用户可以使用为帧，按钮添加动作的方法来为影片剪辑添加动作。此时必须将动作套在onClipEvent处理函数中，并添加触发动作的剪辑事件，将onClipEvent处理函数拖入脚本窗格之后，用户可以从弹出的下拉列表里选择响应事件，如图8.2.2所示。 陇东学院信息工程学院 2018年12月6日

23 图8.2.2 onClipEvent处理函数弹出的下拉列表
为影片剪辑添加动作 图 onClipEvent处理函数弹出的下拉列表 陇东学院信息工程学院 2018年12月6日

24 为影片剪辑添加动作 在影片剪辑的“动作”面板中输入“OnClipEvent”,在随之出现的代码提示列表中列出了影片剪辑能够响应的事件。这些事件如下表8.2.1所示： 表 影片剪辑能够响应的事件 陇东学院信息工程学院 2018年12月6日

25 8.3.1 时间轴控制语句 时间轴控制语句是最基本的动作语句,用于控制播放头所在的位置。该语句位于“动作”窗口的全局函数\时间轴控制目录下。
时间轴控制语句 时间轴控制语句是最基本的动作语句,用于控制播放头所在的位置。该语句位于“动作”窗口的全局函数\时间轴控制目录下。 1．gotoAndPlay：用于将播放头转到场景中指定的帧,并从该帧开始播放。 2．gotoAndStop：用于将播放头转到场景中指定的位置帧并停止播放。使用方法与gotoAndPlay命令基本相同。 陇东学院信息工程学院 2018年12月6日

26 8.3.1 时间轴控制语句 3．nextFrame/prevFrame：将播放头跳转到下/上一帧并停止。
时间轴控制语句 3．nextFrame/prevFrame：将播放头跳转到下/上一帧并停止。 4．nextScene/prevScene：将播放头跳转到下/上一个场景并停止。 5．stop：停止当前正在播放的SWF文件。 6．play：在时间轴中向前移动播放头。 7．stopAllSounds：在不停止播放头的情况下停止SWF文件中当前正在播放的所有声音。但是对于同步方式不同的声音来说，当播放头移动过所在的帧时，可能会恢复播放。 陇东学院信息工程学院 2018年12月6日

27 浏览器/网络语句 1．fscommand：该函数用于使SWF文件与Flash Player或Wed浏览器进行通信。还可以将消息传递给Macromedia Director、VB、VC++和其他可承载Activex空件的程序。 2．getURL：用于将特定URL的文档加载到窗口中，或将变量传递到位于所定义URL的另一个应用程序。 3．loadMovie：该函数用于在播放原始SWF文件的同时将SWF文件或JPEG文件加载到Flash Player 中。 陇东学院信息工程学院 2018年12月6日

28 8.3.2 浏览器/网络语句 4．unloadMovie：该函数用于删除用loadMovie函数调用的SWF文件。
浏览器/网络语句 4．unloadMovie：该函数用于删除用loadMovie函数调用的SWF文件。 5．loadMovieNnm：该函数用于在播放原来加载的SWF文件的同时，将SWF文件或JPFG文件加载到Flash Player中的某个级别。 6．loadVariablesNum：该函数用于从外部文件中读取数据，并设置Flash Player级别中变量的值。例如文本文件、CGI脚本、ASP、PHP或Perl脚本生成的文本中读取数据，并设置Flash Player级别中变量的值。 陇东学院信息工程学院 2018年12月6日

29 8.3.3 影片剪辑控制语句 1．on：用于当发生“鼠标事件”或者“按键事件”时，执行事件后面大括号的语句。
影片剪辑控制语句 1．on：用于当发生“鼠标事件”或者“按键事件”时，执行事件后面大括号的语句。 2．duplicateMovieClip：用于在动画播放时创建影片剪辑实例。应用该语句示例如下： 3．getProperty:用于返回实例的指定属性值。 4．onClipEvent：事件处理函数；触发为特定影片剪辑实例定义的动作。 5．removeMovieClip：删除原来使用 duplicateMovieClip() 创建的指定影片剪辑。 陇东学院信息工程学院 2018年12月6日

30 8.3.3 影片剪辑控制语句 6．setProperty：用于更改影片剪辑的透明度、X/Y坐标等属性值。
影片剪辑控制语句 6．setProperty：用于更改影片剪辑的透明度、X/Y坐标等属性值。 7．StartDrag：用于拖动动画的影片剪辑或按钮，移动时，影片剪辑或按钮会随着鼠标光标的位置移动。 8．stopDrag：用于释放当前鼠标拖动的对象。 9．targetPath：用于返回包含指定影片剪辑的目标路径的字符串。10．updateAfterEvent：用于在完成指定的影片剪辑后，更新显示内容。 陇东学院信息工程学院 2018年12月6日

31 认识函数 子程序是任何一组为特定的任务保留的代码，子程序有益于代码在多个事件处理器中的重复使用，Flash动作脚本中，子程序被称为函数。 函数一般使用在表达式中，所有的函数都必须在函数名之后跟一对小括号。函数可以没有参数，也可以有一个或多个参数。 在Flash中，用户不仅可以调用系统自带的内置函数，还可以自已定义函数。 陇东学院信息工程学院 2018年12月6日

32 内置函数的使用 内置函数也称预定义函数，是ActionScript在内部集成的函数，用户可以直接调用这些函数。如果要调用在MovieClip中定义的函数，则必须要写明函数的路径。 在“动作”面板的动作编辑区被直接输入函数时，只要写出正确的函数名称并给予响应的参数即可。此时如果写如了正确的函数名，就会有代码提示功能，提示用户该函数后面的参数类型。如图8.4.1所示 我们平常所说的动作工具箱中的就是Flash自带的预定义函数。如图8.4.2所示 陇东学院信息工程学院 2018年12月6日

33 8.4.2 内置函数的使用 图 8.4.2 Flash自 带的预定义函数 图 8.4.1 动作编辑区 陇东学院信息工程学院
内置函数的使用 图 Flash自 带的预定义函数 图 动作编辑区 陇东学院信息工程学院 2018年12月6日

34 创建自定义函数 1．定义和调用函数 用户可以在任何位置定义所需的函数，显而易见，自定义函数都必须要先定义后调用。定义函数的格式如下： function 函数名 （参数，······） 陇东学院信息工程学院 2018年12月6日

35 8.4.3 创建自定义函数 函数的命名规则如下： 函数名必须以英文字母开头，而不能以数字或者其他特殊的符号开头。
创建自定义函数 函数的命名规则如下： 函数名必须以英文字母开头，而不能以数字或者其他特殊的符号开头。 定义函数时应根据实际需要混合使用大小写字母和数字。 不能使用ActionScript中的关键字对象或者属性作为函数名，如果名称相同则可能造成冲突。 每个函数名都以两个或者3个字母的缩写开始。 函数名不能包含控制或者据点，但是名称中间可用下划线。 陇东学院信息工程学院 2018年12月6日

36 8.4.3 创建自定义函数 2．向函数传递值 来看下面的一段代码：
创建自定义函数 2．向函数传递值 来看下面的一段代码： function myAction(frameName，movieName) { gotoAndplay(frameName); stopAllSounds（）; loadMovie(movieName，myMovieClip); } 陇东学院信息工程学院 2018年12月6日

37 创建自定义函数 2．向函数传递值 在这段函数中myAction后面的括号内增加了两个参数，相互之间用逗号隔开，代表函数调用时接收实际值的位置，而调用函数的代码如下： on (release){ myAction ("myFrame"，"夜曲.swf";) 在myAction后面的括号内输入一个帧的名称，一个外部影片的路径。那么这两个就是向函数传递的值，这样函数就可以基于这两个值来完成用户指定的任务。 陇东学院信息工程学院 2018年12月6日

38 函数的作用域 变量的作用域是指识别（定义）变量的区域和可以引用变量的区域。而类似的，函数也有一个作用域，即在多大的范围内该函数是可以调用的，一般来说，局部函数（在函数中定义的函数）只有在定义它的函数体内才能被调用。 陇东学院信息工程学院 2018年12月6日

39 8.5 交互式动画应用实例 8.5.1 实例一：鼠标跟随 1．创建电影文件。 2．创建影片剪辑元件。 3．为9个影片剪辑实例添加代码。
8.5 交互式动画应用实例 实例一：鼠标跟随 1．创建电影文件。 2．创建影片剪辑元件。 3．为9个影片剪辑实例添加代码。 4．保存并测试电影文件。 陇东学院信息工程学院 2018年12月6日

40 8.5 交互式动画应用实例 8.5.2 实例二：飞舞的随机数 1．创建电影文件。 2．创建影片剪辑元件“ball”。
8.5 交互式动画应用实例 实例二：飞舞的随机数 1．创建电影文件。 2．创建影片剪辑元件“ball”。 3 ．创建影片剪辑元“move”。 4．编辑主场景。 5．保存并测试电影文件。 陇东学院信息工程学院 2018年12月6日

41 8.5 交互式动画应用实例 8.5.3 实例三：可爱的时钟 1．创建电影文件。 2．创建“背景”图形元件。
8.5 交互式动画应用实例 实例三：可爱的时钟 1．创建电影文件。 2．创建“背景”图形元件。 3．创建“秒针”、“分针”、“时针”影片剪辑元件。 4．编辑主场景。 5．添加动作语句。 6．保存并测试电影文件。 陇东学院信息工程学院 2018年12月6日