交互式动画基础.ppt

第10章 交互式动画基础,Flash中的交互功能是由事件、目标和动作组成的。如果将现实生活中的开门看作一个交互过程，那么其中潜在的逻辑关系如下：（1）事件：即开门行为发生的原因，这里指人走到房门口。（2）目标：即开门行为发生的对象，这里指门。,10.1 Flash中的交互功能,（3）动作：即开门行为发生的内容，这里指用钥匙开门。在Flash 8中，创建交互式动画就是要设置在某种事件下对某个对象执行某个动作。其中，事件指用户单击按钮或影片剪辑实例、用户按下键盘等操作；动作指使播放的动画停止、使停止的动画重新播放等操作。,10.1.1 事件按照触发方式的不同，事件可以分为两种类型：一种是基于时间的，如当动画播放到某一时刻时，事件就会被触发，即通常所说的“帧事件”；另一种是基于动作的，如单击鼠标、单击按钮或影片剪辑实例、按下键盘等，即通常所说的“用户触发事件”。1帧事件帧事件指当动画播放到某一帧时的事件。例如要使动画播放到第20帧时停止播放，可以在第20帧中添加一个帧事件，其响应动作为“stop”，操作步骤如下：,（1）选择“窗口”“动作”命令，打开动作面板，如图10.1.1所示。（2）在时间轴中选中第20帧，按“F6”键插入关键帧，然后在动作工具箱中选择“全局函数”“时间轴控制”“stop”命令，双击鼠标左键，将其添加至脚本输入区，如图10.1.2所示。注意：只有关键帧才能设置事件。（3）按“Ctrl+Enter”键，测试动画效果。,脚本输入区,图10.1.1 动作面板,图10.1.2 添加stop动作,在Flash 8中，用户还可以单击“脚本助手”按钮，将动作面板切换至脚本助手模式，在不太了解ActionScript的情况下创建脚本。例如要控制一个包含两个场景的动画，当播放到“场景1”的第4帧时，开始播放“场景2”，然后在“场景2”播放结束后继续从“场景1”的第5帧开始播放，直至“场景1”播放完毕后结束动画，用户可以定义两个帧事件，操作步骤如下：（1）选择“窗口”“动作”命令，打开动作面板，如图10.1.1所示。,（2）单击“脚本助手”按钮，将动作面板切换至脚本助手模式，如图10.1.3所示。（3）选中“场景1”的第4帧，按“F6”键插入关键帧，在动作工具箱中选择“全局函数”“时间轴控制”“goto”命令，双击鼠标左键，将其添加至脚本输入区，如图10.1.4所示。,图10.1.3 脚本助手模式下的动作面板 图10.1.4 添加goto动作,（4）在“场景”下拉列表中选择“场景2”选项，在“帧”下拉列表中输入数字“4”。（5）单击工作界面中的“编辑场景”按钮，在弹出的下拉菜单中选择“场景2”选项（见图10.1.5），切换至场景2的编辑窗口。,图10.1.5 选择“场景2”选项,（6）选中“场景2”的最后一帧，按“F6”键插入关键帧，在动作工具箱中选择“全局函数”“时间轴控制”“goto”命令，双击鼠标左键，将其添加至脚本输入区。（7）在“场景”下拉列表中选择“场景1”选项，在“帧”下拉列表中输入数字“5”。（8）按“Ctrl+Enter”键，测试动画效果。2用户触发事件用户触发事件包括鼠标事件、键盘事件和影片剪辑事件3种，通过它们对单击鼠标或按下键盘等动作做出响应，下面简单介绍一些用户触发事件。,（1）press：当将鼠标指针移到按钮上时，单击鼠标左键发生动作。（2）keyPress：当按下指定键时发生动作。（3）keyUp：当释放某键时发生动作。（4）keyDown：当按下某键时发生动作。（5）release：当将鼠标指针移到按钮上时，单击并释放鼠标左键发生动作。（6）releaseOutside：当在按钮上按下鼠标左键，然后将鼠标指针移至按钮外释放时发生动作。,（7）rollOver：当将鼠标指针放置在按钮上时发生动作。（8）rollOut：当将鼠标指针从按钮上移过时发生动作。（9）dragOver：当在按钮上按下鼠标左键，然后将鼠标指针移至按钮外后，又移至按钮上时发生动作。（10）dragOut：当在按钮上按下鼠标左键，然后将鼠标指针移至按钮外时发生动作。（11）mouseMove：当移动鼠标时发生动作。（12）mouseDown：当单击鼠标左键时发生动作。,（13）mouseUp：当释放鼠标左键时发生动作。（14）load：当加载影片剪辑元件到场景中时发生动作。（15）unload：当从场景中卸载影片剪辑元件时发生动作。（16）enterFrame：当加入帧时发生动作。（17）data：当“LoadVariables”或“LoadMovie”收到数据变量时发生动作。,10.1.2 目标在Flash 8中，事件主要控制当前影片、其他影片和外部应用程序3个目标，其中当前影片为默认目标。1控制当前影片在当前影片中，如果将press鼠标事件分配给某按钮实例，以实现单击该按钮时，移动到第5帧并开始播放的效果，可以执行下列操作：（1）选中一个按钮实例。,（2）在动作工具箱中选择“全局函数”“影片剪辑控制”“on”命令，双击鼠标左键，将其添加至脚本输入区，如图10.1.6所示。（3）取消选中“释放”复选框，然后选中“按”复选框，设定鼠标事件为“press”，如图10.1.7所示。,图10.1.6 添加on动作 图10.1.7 设定鼠标事件为“press”,（4）在动作工具箱中选择“全局函数”“时间轴控制”“goto”命令，双击鼠标左键，将其添加至脚本输入区，如图10.1.8所示。（5）默认场景为“当前场景”，在“帧”下拉列表中输入数字“5”，如图10.1.9所示。,图10.1.8 添加goto动作 图10.1.9 设置帧数,（6）按“Ctrl+Enter”键，测试动画效果。2控制其他影片如果将goto鼠标事件分配给某影片剪辑实例，以实现加载该影片剪辑时，移动到场景3的第5帧并开始播放的效果，可以执行下列操作：（1）选中一个影片剪辑实例。,（2）在动作工具箱中选择“全局函数”“时间轴控制”“goto”命令，双击鼠标左键，将其添加至脚本输入区，如图10.1.10所示。（3）将鼠标指针置于脚本输入区的第1行中，单击鼠标左键，动作面板如图10.1.11所示，可以看到事件，即行为发生的原因是“加载”，这里采取默认。,图10.1.10 添加goto动作 图10.1.11 设定事件为“加载”,（4）将鼠标指针置于脚本输入区的第2行中，单击鼠标左键，显示goto动作的参数设置区，如图10.1.12所示。（5）在“场景”下拉列表中选择“场景3”选项，在“帧”下拉列表中输入数字“5”，如图10.1.13所示。,图10.1.12 显示goto动作的参数设置区 图10.1.13 设置goto动作的参数,（6）按“Ctrl+Enter”键，测试动画效果。3外部应用程序在Flash 8中，有4个动作的目标可以是外部应用程序，它们是getURL，fscommand，load和unload。外部应用程序可以是浏览器应用程序、Flash投影程序或Web服务器等，其中，最为常见的外部应用程序是浏览器应用程序，利用它可以打开指定的URL地址中的内容，下面介绍如何以浏览器为目标创建交互行为，操作步骤如下：,（1）选中一个影片剪辑实例。（2）在动作工具箱中选择“全局函数”“浏览器/网络”“getURL”命令，双击鼠标左键，将其添加至脚本输入区，如图10.1.14所示。（3）在“URL”文本框中输入“http:/”，指定URL地址，如图10.1.15所示。,图10.1.14 添加getURL动作 图10.1.15 指定URL地址,（4）按“Ctrl+Enter”键，测试动画效果。10.1.3 动作动作是ActionScript脚本语言的灵魂和编程的核心，用于控制动画播放过程中相应的程序流程和播放状态。例如stop，play，goto等都是动作，分别用于控制动画过程中的停止、播放、播放位置的转移等。,在Flash 8中，除了可以在动作工具箱中选择动作命令外，还可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择最后一级子命令（见图10.1.16），然后单击鼠标左键，将其添加到脚本输入区。提示：在创建交互动画时，一个事件可以触发多个动作，且多个动作可以在不同的目标上同时执行。,图10.1.16 选择最后一级的子命令,Flash 8内置了数百条动作语句，通过它们可以实现非常强大的交互功能，下面介绍几种常见的动作语句，包括其参数和脚本范例。注意：在Flash 8中，大多数动作语句都带有参数，用户必须正确设置这些参数才能保证动作的正确性。10.2.1 play和stop语句play和stop语句在Flash中用于控制动画的播放和停止，是Flash中最基本的语句。,10.2 常见动作语句,1play语句play语句用于使动画从它的当前帧开始播放。如果要添加play语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“时间轴控制”“play”命令。（1）参数：play语句没有参数。（2）脚本范例：以下脚本展示了一个鼠标事件，它使动画从当前位置开始播放。on(release)play();,2stop语句stop语句用于停止动画的播放。如果要添加stop语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“时间轴控制”“stop”命令。（1）参数：stop语句没有参数。（2）脚本范例：以下脚本展示了一个鼠标事件，它使动画停止播放。on(release)stop();,10.2.2 toggleHighQuality语句toggleHighQuality语句用于在播放过程中以消除锯齿效果显示动画，启动该功能，将提高视觉质量，但会减慢播放速度。如果要添加toggleHighQuality语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“否决的”“动作”“toggleHighQuality”命令。注意：toggleHighQuality语句不影响单个目标，它影响当前在Flash Player中播放的整个动画。,（1）参数：toggleHighQuality语句没有参数。（2）脚本范例：以下脚本展示了一个鼠标事件，它使当前在Flash Player中播放的整个动画以消除锯齿效果显示。on(press)toggleHighQuality();,10.2.3 stopAllSounds语句stopAllSounds语句用于停止当前在Flash Player中播放的所有声音，该语句并不影响动画的视觉效果。如果要添加stopAllSounds语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“时间轴控制”“stopAllSounds”命令。（1）参数：stopAllSounds语句没有参数。（2）脚本范例：以下脚本展示了一个鼠标事件，它使当前在Flash Player中播放的所有声音停止。on(release)stopAllSounds();,10.2.4 gotoAndPlay和gotoAndStop语句gotoAndPlay和gotoAndStop语句用于指定播放指针的位置，并在该处播放或停止播放动画。1gotoAndPlay语句gotoAndPlay语句用于指定播放指针的位置，并从该处播放动画。如果要添加gotoAndPlay语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“时间轴控制”“goto”命令（见图10.2.1），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.2所示。,图10.2.1 选择goto命令 图10.2.2 添加goto语句,（1）参数：由图10.2.2中可以看到gotoAndPlay语句有“转到并播放”、“转到并停止”、“场景”、“类型”和“帧”5个参数，下面分别进行介绍。1）“转到并播放”：用于设置从指定的帧开始播放动画。2）“转到并停止”：用于设置在指定的帧停止动画。3）“场景”：用于选择gotoAndPlay语句的目标场景，可以是当前场景、当前场景的前一个场景、当前场景的下一个场景或其他场景。,4）“类型”：用于选择帧的表达方式，可以是帧编号、帧标签、表达式、下一帧或前一帧。5）“帧”：在所选类型的基础上指定帧。（2）脚本范例：以下脚本展示了一个鼠标事件，它使播放指针转到当前场景的第15帧并开始播放动画。on(release)gotoAndPlay(15);,2gotoAndStop语句gotoAndStop语句用于指定播放指针的位置，并将动画停止在该帧。如果要添加gotoAndStop语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“时间轴控制”“goto”命令，单击鼠标左键，将其添加到脚本输入区（见图10.2.3），然后选中“转到并停止”单选按钮，如图10.2.4所示。,图10.2.3 添加goto语句 图10.2.4 选中“转到并停止”单选按钮,（1）参数：gotoAndStop语句的参数与gotoAndPlay语句的参数相同，这里就不再赘述。（2）实际应用：以下脚本展示了一个鼠标事件，它使播放指针转到场景2的第5帧并停止动画的播放。on(release)gotoAndStop(“场景 2”,5);,10.2.5 getURL语句getURL语句用于将指定的URL加载到浏览器窗口，或者将变量数据发送给指定的URL。如果要添加getURL语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“浏览器/网络”“getURL”命令（见图10.2.5），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.6所示。,图10.2.5 选择getURL命令 图10.2.6 添加getURL语句,（1）参数：由图10.2.6中可以看到getURL语句有“URL”、“窗口”和“变量”3个参数，下面分别进行介绍。1）“URL”：用于设置链接网页的地址，可以用相对路径或绝对路径表示。2）“窗口”：用于设置链接网页的打开方式，有“_self”，“_blank”，“_parent”和“_top”4个选项。其中，若选择“_self”选项，则在当前窗口中打开链接；若选择“_blank”选项，则在一个新窗口中打开链接；若选择“_parent”选项，则在当前窗口的父窗口中打开链接；若选择“_top”选项，则在最上层窗口中打开链接。,3）“变量”：用于设置是否发送变量及其发送方式，有“不发送”、“用GET方式发送”和“用POST方式发送”3个选项。其中，若选择“不发送”选项，则不发送变量，是打开URL的最佳方法；若选择“用GET方式发送”选项，可以发送字符串形式的变量；若选择“用POST方式发送”选项，可以发送一个或多个变量。,（2）脚本范例：以下脚本展示了一个鼠标事件，它用于在当前窗口的父窗口中打开URL为“http:/”的网页。on(release)getURL(“http:/”,“_parent”),10.2.6 ifFrameLoaded语句ifFrameLoaded语句是一个条件语句，即只有在满足某些条件的情况下才能被执行。ifFrameLoaded语句的逻辑关系为：如果某帧被加载，则执行相应动作；如果某帧未被加载，则忽略相应动作。如果要添加ifFrameLoaded语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“否决的”“动作”“ifFrameLoaded”命令（见图10.2.7），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.8所示。,图10.2.7 选择ifFrameLoaded命令 图10.2.8 添加ifFrameLoaded语句,（1）参数：由图10.2.8中可以看到ifFrameLoaded语句有“场景”、“类型”和“帧”3个参数，下面分别进行介绍。1）“场景”：用于选择ifFrameLoaded语句的目标场景，可以是当前场景或其他场景。2）“类型”：用于选择帧的表达方式，可以是帧编号、帧标签或表达式。3）“帧”：在所选类型的基础上指定帧。,（2）脚本范例：以下脚本展示了如何在第1帧上加载检测器，它用于检测标签为“Start”的帧是否被加载，如果已被加载，则执行gotoAndPlay动作，从而使动画从该帧继续播放；如果未被加载，则忽略执行gotoAndPlay动作，继续播放动画的第2帧。ifFrameLoaded(“Start”)gotoAndPlay(“Start”);,10.2.7 loadMovie和unloadMovie语句loadMovie和unloadMovie语句用于加载或卸载一个或多个后缀名为.swf的文件。1loadMovie语句loadMovie语句用于加载后缀名为.swf的文件。如果要添加loadMovie语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“浏览器/网络”“loadMovie”命令（见图10.2.9），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.10所示。,图10.2.9 选择loadMovie命令 图10.2.10 添加loadMovie语句,（1）参数：由图10.2.10中可以看到loadMovie语句有“URL”、“位置”和“变量”3个参数，下面分别进行介绍。1）“URL”：用于指定.swf文件的目录路径，可以是一个相对路径，例如behaviors.swf，也可以是一个绝对路径，例如C:My Documentsbehaviors.swf。2）“位置”：用于指定目标影片剪辑的目录路径。,3）“变量”：用于设置是否发送变量及其发送方式，有“不发送”、“用GET方式发送”和“用POST方式发送”3个选项。（2）脚本范例：以下脚本展示了一个鼠标事件，它使behaviors.swf文件加载到名称为“aaa”的影片剪辑实例上。on(release)loadMovie(“behaviors.swf”,“_root.aaa”);,2unloadMovie语句unloadMovie语句用于卸载后缀名为.swf的文件。如果要添加unloadMovie语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“浏览器/网络”“unloadMovie”命令（见图10.2.11），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.12所示。,图10.2.11 选择unloadMovie命令 图10.2.12 添加unloadMovie语句,（1）参数：由图10.2.12中可以看到unloadMovie语句只有“位置”一个参数，它用于指定目标影片剪辑的目录路径。（2）脚本范例：以下脚本展示了一个鼠标事件，它用于将加载到“aaa”影片剪辑实例上的.swf文件卸载掉。on(release)unloadMovie(“_root.aaa”);,10.2.8 tellTarget语句tellTarget语句用于控制其他影片剪辑、变量或者动画等。如果要添加tellTarget语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“浏览器/网络”“tellTarget”命令（见图10.2.13），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.14所示。（1）参数：由图10.2.14中可以看到tellTarget语句只有“目标”一个参数，它用于指定tellTarget语句作用的目标。,图10.2.13 选择tellTarget命令 图10.2.14 添加tellTarget语句,（2）脚本范例：以下脚本展示了一个鼠标事件，它使动画从名称为“Button1”的影片剪辑实例跳转至标签为“down”的帧，并且停止动画的播放。on(release)tellTarget(“/Button1”)gotoAndStop(“down”);,10.2.9 duplicateMovieClip和removeMovieClip语句duplicateMovieClip和removeMovieClip语句用于在动画播放期间，动态地复制或删除影片剪辑实例。1duplicateMovieClip语句duplicateMovieClip语句用于在动画播放期间，动态地复制影片剪辑实例。如果要添加duplicateMovieClip语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“影片剪辑控制”“duplicateMovieClip”命令（见图10.2.15），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.16所示。,图10.2.15 选择duplicateMovieClip命令 图10.2.16 添加duplicateMovieClip语句,注意：不论复制动作触发时原影片剪辑实例正处在哪一帧，复制的影片剪辑实例总是从第1帧开始播放。（1）参数：由图10.2.16中可以看到duplicateMovieClip语句有“目标”、“新名称”和“深度”3个参数，下面分别进行介绍。1）“目标”：用于设置要复制影片剪辑实例的目录路径。2）“新名称”：用于设置影片剪辑实例副本的名称，它将继承原影片剪辑实例的相对路径，因此用户无须输入目录路径，而只需输入名称即可。,3）“深度”：用于设置影片剪辑实例副本在动画中的先后顺序，若其值为0，则复制出的影片剪辑副本将代替原影片剪辑实例。（2）脚本范例：以下脚本展示了一个鼠标事件，它用来复制名为MMC的影片剪辑实例，并将副本命名为MMCD，同时用它替换原影片剪辑实例MMC。on(release)duplicateMovieClip(“/MMC”,“MMCD”,0);,2removeMovieClip语句removeMovieClip语句用于在动画播放期间，动态地删除影片剪辑实例。如果要添加removeMovieClip语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“影片剪辑控制”“duplicateMovieClip”命令（见图10.2.17），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.18所示。,图10.2.17 选择removeMovieClip命令 图10.2.18 添加removeMovieClip语句,（1）参数：由图10.2.18可以看到removeMovieClip语句只有“目标”一个参数，用于设置要删除影片剪辑实例的目录路径。（2）脚本范例：以下脚本展示了一个鼠标事件，用来删除名为MMC的影片剪辑实例。on(release)removeMovieClip(“/MMC”);,10.2.10 setProperty语句setProperty语句用于在动画播放过程中调整影片剪辑实例的大小、旋转、位置、名称和透明度等属性。如果要添加setProperty语句，可以单击“将新项目添加到脚本中”按钮，在弹出的下拉菜单中选择“全局函数”“影片剪辑控制”“duplicateMovieClip”命令（见图10.2.19），然后单击鼠标左键，将其添加到脚本输入区，如图10.2.20所示。,图10.2.19 选择setProperty命令 图10.2.20 添加setProperty语句,（1）参数：由图10.2.20中可以看到setProperty语句有“属性”、“目标”和“值”3个参数，下面分别进行介绍。1）“属性”：用于设置要调整的属性，其选项和功能如表10.1所示。,表10.1 各属性选项和功能,3）“值”：为所选的属性设置值。（2）脚本范例：以下脚本展示了一个鼠标事件，用来将名为MMC的影片剪辑实例的透明度设置为50%。on(release)setProperty(“/MMC”,_Alpha,“50”);,前面介绍了交互式动画的一些基础知识，这一节将创建3个交互式动画的实例，帮助用户更好地理解和掌握Flash动画中的交互功能。10.3.1 粒子运动创建“粒子运动”实例的操作步骤如下：（1）选择“文件”“新建”命令，创建一个新的动画文件。,10.3 创建交互式动画,（2）选择“修改”“文档”命令，弹出“文档属性”对话框，设置“尺寸”为“550 px400 px”，“背景颜色”为“黑色”，单击“确定”按钮。（3）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“粒子”，在“类型”选项区中选中“影片剪辑”单选按钮，如图10.3.1所示。,图10.3.1“创建新元件”对话框,（4）单击“确定”按钮，进入该元件的编辑窗口。选择工具箱中的椭圆工具，在属性面板中设置笔触颜色为“无”，填充颜色为“白色”，按住“Shift”键，在舞台的中心位置绘制一个圆形，如图10.3.2所示。（5）选中第4帧，按“F5”键插入帧，如图10.3.3所示。,图10.3.2 绘制圆形 图10.3.3 插入帧,（6）单击时间轴面板中的“插入图层”按钮，插入“图层2”。（7）分别选中第2帧和第3帧，按“F6”键插入关键帧，如图10.3.4所示。（8）选择“窗口”“动作”命令，打开动作面板，如图10.3.5所示。（9）选中第1帧，在动作面板中输入以下代码：ran=random(100)+random(10);setProperty(“”,_x,550);setProperty(“”,_y,random(400);setProperty(“”,_xscale,ran);setProperty(“”,_yscale,ran);setProperty(“”,_alpha,random(50)+50);,图10.3.4 插入关键帧 图10.3.5 动作面板,（10）选中第2帧，在动作面板中输入以下代码：setProperty(“”,_x,getProperty(“”,_x)-ran/9);（11）选中第3帧，在动作面板中输入以下代码：if(getProperty(“”,_x)0)gotoAndPlay(1);else gotoAndPlay(2);（12）单击“场景1”图标，返回到主场景。,（13）选择“窗口”“库”命令，打开库面板，从中拖动“粒子”元件到舞台的中心位置。（14）选中“粒子”实例，在属性面板的“实例名称”文本框中输入“st”，如图10.3.6所示。,图10.3.6 输入实例名称,（15）单击时间轴面板中的“插入图层”按钮，插入“图层2”。（16）选中“图层2”的第1帧，在动作面板中输入以下代码：startDrag(“/star0”,true);starnum=100;while(starnum0)duplicateMovieClip(“/st”,“st”（17）按“Ctrl+Enter”键，测试动画效果，如图10.3.7所示。,图10.3.7 效果图,10.3.2 秋叶飘飘创建“秋叶飘飘”实例的操作步骤如下：（1）选择“文件”“新建”命令，创建一个新的动画文件。（2）选择“修改”“文档”命令，弹出“文档属性”对话框，设置“尺寸”为“550 px400 px”，“背景颜色”为“#FFCC66”，单击“确定”按钮。（3）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“叶子”，在“类型”选项区中选中“图形”单选按钮。,（4）单击“确定”按钮，进入该元件的编辑窗口，在舞台的中心位置绘制一片叶子，如图10.3.8所示。（5）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“飘”，在“类型”选项区中选中“影片剪辑”单选按钮，单击“确定”按钮，进入该元件的编辑窗口。（6）选择“窗口”“库”命令，打开库面板，从中拖动“叶子”元件到舞台的中心位置。（7）分别选中第20，40和60帧，按“F6”键插入关键帧，如图10.3.9所示。,图10.3.8 绘制叶子 图10.3.9 插入关键帧,（8）选中第20帧中的叶子，按“Ctrl+T”键打开变形面板，选中“倾斜”单选按钮，在“垂直倾斜”文本框中输入数值“180”（见图10.3.10），按Enter键将其旋转，如图10.3.11所示。,图10.3.10 设置垂直倾斜参数 图10.3.11 垂直倾斜第20帧中的叶子,（9）选中第40帧中的叶子，按“Ctrl+T”键打开变形面板，选中“旋转”单选按钮，并在其文本框中输入数值“180”（见图10.3.12），按“Enter”键将其旋转，如图10.3.13所示。,图10.3.12 设置旋转参数 图10.3.13 旋转第40帧中的叶子,（10）分别选中第1，20和40帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，创建运动补间动画，如图10.3.14所示。,图10.3.14 创建运动补间动画,（11）选中第119帧中的任意一帧，在属性面板中设置“缓动”为“100”，“旋转”为“自动”，更改叶子在运动时的速度和旋转属性，如图10.3.15所示。,图10.3.15 更改叶子的运动属性,（12）重复第（11）步的操作，设置叶子在其他两个帧段中的运动属性。（13）单击“场景1”图标，返回到主场景。（14）从库面板中拖动“飘”元件到舞台的中心位置，然后选中“飘”实例，在属性面板的“实例名称”文本框中输入“mc”，如图10.3.16所示。（15）单击时间轴面板中的“插入图层”按钮，插入“图层2”，如图10.3.17所示。（16）选择“窗口”“动作”命令，打开动作面板，如图10.3.18所示。,图10.3.16 输入实例名称,图10.3.17 插入图层 图10.3.18 动作面板,（17）选中“图层2”的第1帧，在动作面板中输入以下代码：_root.ranspeed=0.1;movstyle=function()if(this._x590)this._x=0;if(this._y410)this._y=-10;this._x+=this.speedtype*_root.ranspeed;this._y+=this.speedtype*0.6;,for(i=1;i=20;i+)mc.duplicateMovieClip(m+i,i);_rootm+i.gotoAndPlay(Math.ceil(Math.random()*180);_rootm+i._x=Math.random()*600;_rootm+i._y=Math.random()*400;_rootm+i._alpha=i*5+20;_rootm+i._xscale=i*20;_rootm+i._yscale=i*20;_rootm+i.speedtype=i/3;_rootm+i.onEnterFrame=movstyle;,_root.onEnterFrame=function()if(_root.timem=50)_root.ranspeed=(Math.random()-0.5)*0.8;_root.timem=0;else _root.timem+;（18）按“Ctrl+Enter”键，测试动画效果，如图10.3.19所示。,图10.3.19 效果图,10.3.3 双蝶飞舞创建“双蝶飞舞”实例的操作步骤如下：（1）选择“文件”“新建”命令，创建一个新的动画文件。（2）选择“修改”“文档”命令，弹出“文档属性”对话框，设置“尺寸”为“550 px400 px”，“背景颜色”为“#FFCC66”，单击“确定”按钮。,（3）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“蝴蝶”，在“类型”选项区中选中“影片剪辑”单选按钮。（4）单击“确定”按钮，进入该元件的编辑窗口，在舞台的中心位置绘制一只蝴蝶，如图10.3.20所示。,图10.3.20 绘制蝴蝶,（5）按“Ctrl+F8”键，弹出“创建新元件”对话框，在“名称”文本框中输入“空”，在“类型”选项区中选中“影片剪辑”单选按钮，单击“确定”按钮，进入该元件的编辑窗口，不做任何编辑。（6）单击“场景1”图标，返回到主场景。（7）选择“文件”“导入”“导入到舞台”命令，弹出“导入”对话框，导入一幅图像到舞台的中心位置，如图10.3.21所示。,图10.3.21 导入图像,（8）单击时间轴面板中的“插入图层”按钮，插入“图层2”。（9）选中“图层2”的第1帧，从库面板中拖动“蝴蝶”元件到舞台中，然后选中“蝴蝶”实例，在属性面板的“实例名称”文本框中输入“fly1”。,（10）重复第（9）步的操作，再次拖动“蝴蝶”元件到舞台中（见图10.3.22），并在属性面板的“实例名称”文本框中输入“fly2”。（11）选中“图层2”，单击时间轴面板中的“插入图层”按钮，插入“图层3”。（12）重复第（9）步的操作，拖动两次“空”元件到舞台中（见图10.3.23），并在属性面板的“实例名称”文本框中依次输入“transp1”和“transp2”。,图10.3.22 拖入“蝴蝶”元件 图10.3.23 拖入“空”元件,（13）选中“图层3”，单击时间轴面板中的“插入图层”按钮，插入“图层4”。（14）选择“窗口”“动作”命令，打开动作面板，如图10.3.24所示。,图10.3.24 动作面板,（15）选中“图层4”的第1帧，在动作面板中输入以下代码：probability=30;scene_width=500;scene_height=300;speed=0.03;MovieClip.prototype.smoothMove=function(speed,targetx,targety)this._x+=speed*(targetx-this._x);this._y+=speed*(targety-this._y);,MovieClip.prototype.rotateTo=function(targetx,targety)var diffX=targetx-this._x;var diffY=targety-this._y;this._rotation=Math.atan2(diffY,diffX)*180/Math.PI;_root.transp1.onEnterFrame=function()if(random(probability)=0)target1X=random(scene_width);target1Y=random(scene_height);,this._visible=0;this.smoothMove(speed,target1X,target1Y);_root.fly1.onEnterFrame=function()this.smoothMove(speed,transp1._x,_root.transp1._y);this.rotateTo(_root.transp1._x,_root.transp1._y);,_root.transp2.onEnterFrame=function()if(random(probability)=0)target2X=random(scene_width);target2Y=random(scene_height);this._visible=0;this.smoothMove(speed,target2X,target2Y);,_root.fly2.onEnterFrame=function()this.smoothMove(speed,transp2._x,_root.transp2._y);this.rotateTo(_root.transp2._x,_root.transp2._y);（16）按“Ctrl+Enter”键，测试动画效果，如图10.3.25所示。,本章主要介绍了ActionScript的有关知识，包括Flash中的交互功能、常见动作语句以及交互式动画的创建。通过本章的学习，用户应该了解事件、目标和动作的概念和功能，并能制作简单的交互式动画。,本章小结,一、填空题1Flash中的交互功能是由事件、_和动作组成的。2_是ActionScript脚本语言的灵魂和编程的核心。,习 题 十,二、选择题1按照触发方式的不同，事件可以分为（）。（A）帧事件（B）鼠标事件（C）键盘事件（D）用户触发事