Flash基础教程与创作实例_第8章__创作建交互式动画.ppt

《Flash基础教程与创作实例_第8章__创作建交互式动画.ppt》由会员分享，可在线阅读，更多相关《Flash基础教程与创作实例_第8章__创作建交互式动画.ppt（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第8章 创建交互式动画v内容概述内容概述-v 以往在电脑制作的动画中是无法实现和观众交互的，动画只能从头到尾一直播放，观众不能控制动画的进程，无法与画面互动，但是这一切在Flash中完全改变了，用户可以使自己做的动画能够和观众进行交流互动，使得动画变得更加丰富、更加有趣。这些，就是通过Flash动作脚本来实现的。教学目标v1了解Flash 8中的交互作用的概念和定义，包括事件、目标、目标的路径和动作等。v2熟悉Flash的动作语句，掌握常用的事件处理的方法：函数方法、事件侦听器以及on()和onClipEvent()处理函数。v3熟悉goto、Stop、play、stopAllSounds等常

2、用动作语句，掌握脚本助手的使用方法，包括如何添加和删除动作及查看动作描述。第8章 创建交互式动画v8.1 Flash 8Flash 8中的交互作用中的交互作用 v8.2 FlashFlash的动作语句的动作语句 v8.3 使用脚本助手使用脚本助手 v8.4 实例操作v本章小结v课后习题八8.1 Flash 8中的交互作用中的交互作用v8.1.1 事件v8.1.2 目标v8.1.3 动作8.1.1 事件v 事件是事件是 SWF SWF 文件播放时发生的动作。文件播放时发生的动作。Flash Player Flash Player 自自动生成的事件（例如影片剪辑在舞台上第一次出现）称作系动生成的事

3、件（例如影片剪辑在舞台上第一次出现）称作系统事件，因为它不是由用户直接生成的。统事件，因为它不是由用户直接生成的。为使应用程序能够对事件做出反应，必须使用事件处理为使应用程序能够对事件做出反应，必须使用事件处理函数。事件处理函数是与特定对象和事件关联的函数。事件处理函数是与特定对象和事件关联的 ActionScript ActionScript 代码。代码。在在 SWF SWF 文件中，按钮、影片剪辑和文本字段都生成可文件中，按钮、影片剪辑和文本字段都生成可以响应的事件。以响应的事件。ActionScriptActionScript 提供三种方法来处理事件：提供三种方法来处理事件：事件处理函数

4、方法事件处理函数方法、事件侦听器以及事件侦听器以及 on()on()和和 onClipEvent()onClipEvent()处理函数处理函数。事件处理函数方法事件处理函数方法v事件处理函数方法是一种类方法，它在事件在该类的实例上发生时调用。例如，MovieClip 类定义 onPress 事件处理函数，只要按下鼠标就对影片剪辑对象调用该处理函数。v默认情况下，事件处理函数方法是未定义的：在发生特定事件时，将调用其相应的事件处理函数，但应用程序不会进一步响应该事件。要让应用程序响应该事件，需要使用 function 语句定义一个函数，然后将该函数分配给相应的事件处理函数。然后，只要发生该事件，

5、就自动调用分配给该事件处理函数的函数。v事件处理函数由以下三部分组成：事件所应用的对象、对象的事件处理函数方法的名称和分配给事件处理函数的函数。下例显示事件处理函数的基本结构：object.eventMethod=function()/此处是您的代码，对事件作出反应。事件侦听器以及事件侦听器以及 ononv事件侦听器让一个对象（称作侦听器对象）接收由其它对象（称作广播器对象）生成的事件。广播器对象注册侦听器对象以接收由该广播器生成的事件。事件的侦听器-广播器模型与事件处理函数方法不同，它允许多个代码片断互不冲突地侦听同一事件。不使用侦听器广播器模型的事件模型（如 XML.onLoad()）在不

6、同的代码片断侦听同一事件时可能会有问题；不同的代码片断在控制唯一的 XML.onLoad 回调函数引用时会产生冲突。利用侦听器广播器模型，可以轻松地为同一事件添加侦听器而不用担心代码瓶颈。使用事件侦听器创建简单焦点管理器使用事件侦听器创建简单焦点管理器:【步骤1】使用文本工具在舞台上创建一个文本字段。【步骤2】选择该文本字段，然后在属性检查器中，从“文本类型”弹出菜单中选择“输入”，然后选择“在文本周围显示边框”选项。如图8-1-1所示。图8-1-1 文本属性设置【步骤3】在第一个文本字段下创建另一个输入文本字段。确保为该文本字段未选择“在文本周围显示边框”选项。您可以继续创建输入文本字段。【

7、步骤4】选择“时间轴中的第 1 帧”，然后打开“动作”面板（“窗口”/“动作”）。如图8-1-2所示。图8-1-2 打开动作窗口【步骤5】从 Selection 类创建侦听焦点通知的对象，在“动作”面板中输入代码如图8-1-3所示。图8-1-3 在动作窗口中输入代码此代码创建一个名为 focusListener 的对象，用以定义 onSetFocus 属性并将一个函数分配给该属性。该函数采用两个参数：对不具有焦点的文本字段的引用和对具有焦点的文本字段的引用。该函数将不具有焦点的文本字段的 border 属性设置为 false，将具有焦点的文本字段的 border 属性设置为 true。要注册

8、focusListener 对象以从 Selection 对象接收事件，请向“动作”面板添加以下代码：/向广播器注册 focusListener。Selection.addListener(focusListener);【步骤6】测试应用程序（“控制”/“测试影片”），在第一个文本字段中单击，然后按下 Tab 键在各字段之间切换焦点。如图8-1-4所示。图8-1-4 测试焦点切换结果onClipEvent()onClipEvent()处理函数处理函数v onClipEvent()事件处理函数广播影片剪辑事件，而 on()事件处理函数处理按钮事件。若要将事件处理函数附加到某个按钮或影片剪辑实例，

9、先单击舞台上的该按钮或影片剪辑实例，使它获得焦点，然后再在“动作”面板中输入代码。“动作”面板的标题反映了代码将要附加到按钮或影片剪辑：“动作面板”/“按钮”或“动作面板”/“影片剪辑”。v 只能将 onClipEvent()和 on()附加到创作期间已放置于舞台上的影片剪辑实例。不能将 onClipEvent()或 on()附加到在运行时（例如，使用 attachMovie()方法）创建的影片剪辑实例上。要将事件处理函数附加到运行时创建的对象，需使用事件处理函数方法或事件侦听器。使用onClipEvent()函数拖动图标：【步骤1】新建一个元件，定义为影片剪辑。图8-1-6 新建实例【步骤2

10、】选择圆形工具，画出一个圆。【步骤3】新建一个实例，命名为sample，如图8-1-6所示。【步骤4】打开动作属性，选择onClipEvent()函数，如图8-1-7所示。图8-1-7 打开动作属性【步骤5】选择startDrag函数，如图8-1-8所示。图8-1-8 选中startDrag函数 图8-1-9 输入目标路径【步骤6】在目标栏输入刚建成的实例sample，如图8-1-9所示。【步骤7】进入“控制”/“测试影片”，可以看到当鼠标左键按下后，目标图形就会随鼠标的移动而移动。8.1.2 目标v1目标路径的概念v2绝对路径与相对路径v3关于目标路径的插入目标路径的概念 v 制作Flash

11、课件时，不仅经常需要利用Action脚本命令来控制对象的运动或设置对象的属性，也需要利用Action脚本命令来传递、交换变量值。v flash的路径与Windows的路径概念同，在Windows操作系统中，路径操作针对的是文件夹及文件，而在Flash中，路径操作主要针对的是影片剪辑及变量。在一部Flash电影中，电影是最高级别的层次，依次下来是层和实例。v Flash的Action脚本命令的传输是通过一级一级的方式来进行的，Flash这种传递层次叫级别。v我们来看一看标准的Flash的路径的格式：_level0mc1mc2mc3 上面的mc1、mc2、mc3应该是我们给各影片剪辑定义的实例名（

12、Instance Name）。如果在上述的mc3影片剪辑中有一个变量t，则访问该变量的标准路径为：_level0mc1mc2mc3t 需要强调指出的是，在Flash Action中，Flash是依据实例名来识别影片剪辑对象的，若我们要借助Action来调用对象的话，别忘了给影片剪辑定义实例名，否则，Flash将找不到对象或变量。绝对路径与相对路径 v有时我们在实际运用时，只需要以当前位置为基准，调用或访问附近级别的影片剪辑或变量。这时我们就可以将路径简写，相应的路径就变成了相对路径。v比方说代码setproperty(_root.mc1.mc2,_x,240)是在主电影的帧上安置的，则可将代码

13、写成：setproperty(mc1.mc2,_x,240)；路径省略了“_root.mc1”，是因为mc2在mc1这一级别内。同理，假想要给放置于主电影上的影片剪辑mc1内的变量j赋值100，则绝对路径为：_root.mc1.j=100；相对路径为：mc1.j=100；虽然绝对路径与相对路径都能表示Flash的路径，但课件制作应该尽可能使用绝对路径。关于目标路径的插入v【步骤1】在脚本中选择某一动作并将指针放在该动作上。v【步骤2】单击“动作”面板上的“目标路径”，出现“插入目标路径”对话框。如图8-1-10所示。v【步骤3】手动输入目标实例的路径或从可用目标的列表中选择目标。v【步骤4】选

14、择“绝对”或“相对”路径选项。如图8-1-11所示。图8-1-10 选择插入目标路径 图8-1-11 选择目标路径 8.1.3 动作v动作脚本就是 Flash 为我们提供的各种命令,运算符以及对象,使用动作脚本时必须将其附加在按钮、影片剪辑或者帧上，从而使单击按钮和按下键盘键之类的事件时触发这些脚本，以便实现所需的交互性。v“动作”面板可以创建和编辑对象或帧的 ActionScript 代码。动作面板后的显示如图8-1-12所示。v在Flash中添加动作脚本可以分为两种方式，一是为“帧”添加动作脚本，二是向“对象”添加动作脚本 图8-1-12 动作面板添加动作的步骤：【步骤1】选中需要添加动作

15、脚本的关键帧，这时“动作”面板的标题栏上显示的标题是“动作/帧”。【步骤2】单击动作面板“脚本”编辑窗口左上角【添加脚本】工具，在弹出菜单上找到相关条目里面的语句，双击即添加到了“脚本编辑”窗口中。也可以直接在“脚本编辑”窗口中输入语句。如图8-1-13所示。图8-1-13 添加stop脚本8.2 Flash的动作语句vActionScript命令可以控制动画的播放顺序、显示质量、声音效果或实现帧的跳转、接收和发送信息。vActionScript语句中动画控制语句是动画编辑中较常用的，主要有goto、Stop、play、stopAllSounds语句。vActionScript语句位于窗口底部

16、语句位于窗口底部“动作动作-帧帧”面板中，如图面板中，如图8-2-1所示。所示。v vgoto：转到指定帧并播放 vPlay：开始播放影片。vstop：停止播放影片 vstopAllSounds：停止播放所有声音。图8-2-1“动作-帧”面板 图 动作工具箱 1Goto 语句的应用 不同类型的帧其goto语句不同。在动作面板中双击goto即可展开右边的编辑框。帧动作的goto语句可以直接使用，如图8-2-3所示。按钮动作的goto选项，会生成图8-2-4所示的语句。图8-2-3 帧动作goto语句 图8-2-4 按钮动作goto语句 goto语句的选项进行说明 v场景：指定跳转的场景，即执行g

17、oto语句后跳转到指定的场景中插放。如图所示。v类型：表示跳转到的目标场景类型，如图所示。vGoto命令的使用：v【步骤1】新建一个文件，导入一张心形图片和一段影片。v【步骤2】把心形图片从库中拖出，如图8-2-7所示。v【步骤3】在第十帧插入关键帧。在“动作-帧”面板ActionScripit 1。0&2。0下的“全局函数”下的“时间轴控制”中双击goto选项，有关选项就显示在右边的框中，在“帧”文本框中输入“15”，如图8-2-8所示。图8-2-7 导入一张图片图8-2-8 goto语句有关选项v【步骤4】在时间轴控制中找到stop条目双击它，stop语句自动出现在右边的编辑框中，如图8-

18、2-9所示。v【步骤5】在第1帧和第10帧间“创建补间动画”，此时时间轴变为图8-2-10所示，字符a表示该帧设置了动作控制。v【步骤6】在第15帧插入关键帧，从库面板拖影片到场景中。按Ctrl+Enter键测试效果保存。图8-2-9 添加stop项 图8-2-10 创建补间动画2Stop和play 动画播放命令在默认状态下动画从第1帧播放到最后一帧。如果希望将动画停止在按钮帧处，并且当用户单击按钮后再继续播放动画。此时可为放置在场景中的元件或关键帧设置行为。要动画停止在按钮帧处还需设置 stop 行为。实例说明 stop 使用。操作步骤如下：【步骤1】新建一个文件，单击“窗口”/“公用库”/

19、“按钮”命令，打开“公用库”面板，在列表中选择如图所示的按钮，如图所示。图“公用库”面板 v【步骤2】选取第1帧，在“帧动作”面板中单击“全局函数”，在展开的命令中单击“时间轴”控制，双击stop语句，则与stop行为有关的语句就会出现在右边的编辑框中，如图8-2-12所示。v【步骤3】在第10帧处插入空白关键帧。从库列表中选择一个影片元件把它拖到场景中，如图8-2-13所示。图8-2-12 使用stop函数图8-2-13 拖入影片 v【步骤4】单击第1帧，选取按钮，打开“动作/按钮”面板。双击goto语句，打开右边的编辑区，把“帧”项改为“10”。如图8-2-14所示。v【步骤5】选取第10

20、帧，打开“动作/帧”面板，双击stop命令，则与之行为有关的语句就会显示在右边的框中。v【步骤6】右击第1帧从弹出的菜单中选择“创建补间动画”命令，按Ctrl+enter测试效果。图8-2-14 goto语句的编辑区3If和Else条件语句 If（条件）在此添加要执行的语句条件语句的作用：对条件进行计算以确定 SWF 文件中的下一个动作。如果条件为true，则 Flash 将运行条件后面花括号()内的语句。如果条件为 false，则 Flash 将跳过花括号内的语句，而运行花括号后面的语句。条件语句位于“条件/循环”中。双击if在对话框的右侧显示出条件语句行，在“条件”文本框中输入相应的条件即

21、可。如图8-2-15所示 图8-2-15 添加if语句 4while 语句while(条件)在此添加要循环的语句;计算条件，如果条件计算结果为 true，则在循环返回以再次计算条件之前执行一条语句或一系列语句。在条件计算结果为 false 后，跳过该语句或语句系列并结束循环。在条件文本框中输入需要的条件，即可在在对话框下面的编辑栏里显示，如图8-2-16所示。图8-2-16 添加while语句5Do.while 语句do 在此添加要循环的语句 while(条件)与 while 循环类似，不同之处是在对条件进行初始计算前执行一次语句。随后，仅当条件计算结果是 true 时执行语句。Do.whil

22、e 循环确保循环内的代码至少执行一次。尽管这也可以用 while 循环通过在 while 循环开始前放一段要执行的语句副本来实现，但很多程序员认为 do.while 循环更易于阅读。如果条件计算结果始终为 true，do.while 就会无限循环。如果进入了无限循环，则 Flash Player 会遇到问题，最终会发出警告信息，或播放器崩溃。如果知道要循环的次数，应该尽可能使用 for 循环。尽管 for 循环易于阅读和调试，但不是在所有情况下都能代替 do.while 循环。6break 语句break出现在循环（for、for.in、do.while 或 while）内或与 switch

23、语句中的特定情况相关的语句块内。当在循环中使用时，break 语句指示 Flash 跳过循环体的其余部分，停止循环动作，并执行循环语句后面的语句。当在 switch 中使用时，break 语句指示 Flash 跳过此 case 块中的其余语句，并跳到包含它的 switch 语句后面的第一个语句。在嵌套循环中，break 语句只跳过当前循环的其余部分，而不是跳出整个系列的嵌套循环。7continue 语句跳过最里层循环中所有其余的语句并开始循环的下一个迭代，就像控制正常传递到了循环结尾一样。在循环外无效。8.3 使用脚本助手v脚本助手模式可以提示您输入脚本元素，帮助您更方便地向 SWF 文件（F

24、lash.fla 文件的压缩版本，使用.swf 扩展名）或应用程序添加简单的交互功能。对于不能自如地编写脚本或者喜欢使用工具而实现轻松编码的用户来说，脚本助手模式是理想的选择。v脚本助手模式与“动作”面板配合使用，可以提示您选择选项和输入参数。例如，不用自己编写脚本，您可以从“动作”工具箱中（或使用工具栏中的“添加”(+)命令）选择一个语言元素，将其拖动到“脚本”窗格中，然后使用脚本助手模式帮助您完成脚本。8.3.1 添加和删除动作v1.添加动作v【步骤1】若要向按钮添加函数，请在工具栏上单击“添加”。如图8-3-1所示。v【步骤2】在“影片剪辑控制”选项中，选择 on 事件处理函数。如图8-

25、3-2所示。v图8-3-1 添加动作 图8-3-2 添加on函数v2.删除动作v【步骤1】从按钮中删除函数，在脚本中选中要删除的语句，如图8-3-3所示。v【步骤2】请在工具栏上单击“删除”，如图8-3-4所示。v图8-3-3 选中待删除函数 图8-3-4 删除动作8.3.2 查看动作描述【步骤1】单击“动作”工具箱中的某个类别，显示该类别中的动作，然后单击一个动作。【步骤2】在“脚本”窗格中选择一行代码。【步骤3】描述显示在“动作”面板的上方，以属性或事件名开始。如图所示。本章小结v本章介绍了Flash中的动作脚本语言的基本知识，包括脚本动作、脚本助手等，结合实例介绍了如何利用动作脚本创建交

26、换操作，为读者深入了解Flash，制作出更加丰富的动画打下基础。本章中主要介绍了以下内容：v1、ActionScript 是 Flash 脚本撰写语言，允许您向 Flash 文档添加复杂的交互性、回放控件和数据显示。可以使用“动作”面板在 Flash 创作环境内添加 ActionScript，也可以使用外部编辑器创建外部 ActionScript 文件。v2、动作是预先编写的 ActionScript 脚本，可将它们添加到某个对象，从而控制该对象。允许用户不必创建 ActionScript 代码，就可以将 ActionScript 编码的强大功能、控制能力以及灵活性添加到文档中。可以使用行为控制影片剪辑和视频及声音文件。v3、“脚本助手”将提示您输入脚本的元素，有助于您更轻松地向 Flash SWF 文件或应用程序中添加简单的交互性。对于那些不喜欢编写自己的脚本，或者那些喜欢工具所提供的简便性的用户来说，“脚本助手”模式是理想的选择。v4、在脚本助手模式下，可以添加、删除或者更改“脚本”窗格中语句的顺序；还可以在“脚本”窗格上方的文本框中输入动作的参数。使用“脚本助手”还可以查找和替换文本、查看脚本行号以及固定脚本（即单击对象或帧以外的地方时，保持“脚本”窗格中的脚本）。