1 / 116

第 7 章 创建交互动画

第 7 章 创建交互动画. 前言. 到目前为止,我们都是使用 Flash 作为创建图像和动画的工具,但是我们也能够使用 flash 将这些元素转换成动态的游戏、交互式界面的组件。为了成功地实现交互,应了解一些高级交互背后的逻辑知识。但用户不必像一位计算机程序设计员那样设计复杂的程序,而只在影片中添加一些简单的交互动作。. 前言. 所谓交互动画,是指动画浏览者可使用键盘、鼠标操作来控制动画的播放,或调转到电影的其他部分、移动对象、在表格里填写数据及执行其他各种操作。

maura
Download Presentation

第 7 章 创建交互动画

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 第7章 创建交互动画

  2. 前言 到目前为止,我们都是使用Flash作为创建图像和动画的工具,但是我们也能够使用flash将这些元素转换成动态的游戏、交互式界面的组件。为了成功地实现交互,应了解一些高级交互背后的逻辑知识。但用户不必像一位计算机程序设计员那样设计复杂的程序,而只在影片中添加一些简单的交互动作。

  3. 前言 所谓交互动画,是指动画浏览者可使用键盘、鼠标操作来控制动画的播放,或调转到电影的其他部分、移动对象、在表格里填写数据及执行其他各种操作。 Flash中,交互动画是通过动作脚本(ActionScript)语言设置动作来产生的。动作(action)是使用ActionScript编写的命令集,ActionScript是Flash的面向对象的编程语言。在最基本的情况下,动作将告诉Flash影片如何执行。它们可以是简单的(例如,告诉Flash向前跳跃并播放特定的帧),也可以是复杂的(例如进行计算,然后根据结果执行某些操作)。

  4. 本章学习要点 在创建交互动画时,最关键的步骤是设置指定事件在发生时要执行的动作。事件就是触发动作执行的信号。在Flash 8中,播放头到达某个特定的帧时、或者用户单击了鼠标、或按下了键盘,都会根据相应的事件的设置,产生特定的动画效果。 本章学习要点: • 了解和使用ActionScript • 使用基本动作添加交互作用

  5. 本章主要内容 • 7.1 ActionScript简介 • 7.2 ActionScript语法规则 • 7.3 ActionScript基础 • 7.4编写和调试脚本 • 7.5事件与动作 • 7.6 动作脚本的提高

  6. 第7章 创建交互动画 7.1 ActionScript简介 ActionScript是面向对象的脚本程序语言。它的结构与JavaScript相似,都是采用面向对象的编程思想,但两者之间也存在着明显的区别。在Flash 8中,ActionScript代码并不是任何地方都可以使用,应该将ActionScript代码添加到关键帧(Keyframe)、按钮(Button)或影片剪辑(Movie Clips)中,并分别称之为帧动作、按钮动作及影片剪辑动作。在Flash 8中,利用ActionScript可实现交互功能,使用户对动画进行更灵活的控制。

  7. 在Flash 8中,使用ActionScript2.0编程非常方便,可以在动作-帧面板中直接输入脚本,也可以从弹出菜单或工具箱列表中直接调用语句、函数及运算符等元素。在编写过程中,输入的ActionScript2.0代码,系统会检查是否有语法错误并提示用户如何修改。 Flash 8中的ActionScript2.0具有如下特性: • 自由编写脚本模式:用户可以在动作-帧面板中直接输入脚本,也可以从弹出菜单或工具列表中直接调用语句、函数及运算符等元素。

  8. 点运算符:在Flash 8中,用户可以使用点运算符获取和设置一个对象的属性和方法,包括电影剪辑实例的变量。 • 数据类型:Flash 8的动作脚本支持字符串、数值、逻辑、对象和电影剪辑,用户能够在ActionScript中使用不同类型的信息。 • 自定义函数:用户可以根据需要自己定义带参函数,让函数返回一个值,以便在脚本中重用代码块。 • 内置预定义对象:在Flash 8中已经内置了很多已定义的类对象,可以通过这些对象构造出更多的数据对象或访问和管理某些类型的信息。

  9. 剪辑动作:可以使用onClipEvent动作直接给编辑区中的电影剪辑实例分配动作,如mouseMove、data和load等事件。剪辑动作:可以使用onClipEvent动作直接给编辑区中的电影剪辑实例分配动作,如mouseMove、data和load等事件。 • 调试器:Flash 8在的调试方面进行了改进。使用调试器可以查看和修改在测试动画模式、Flash独立播放器或浏览器中播放的动画的变量和属性值,以便容易发现动作脚本中的问题。 • 新的面向对象编程模型:Flash 8引入了几个新的语言元素,如class、extends、public、get、set、import等。这些元素采用比以前更为标准的方式来实现面向对象的编程。

  10. XML支持:使用预定义的XML对象可以把ActionScript转换为XML文档,然后传递到服务器端应用中,也可以用XML对象把XML文档载入Flash动画中并加以解释。使用预定义的XML Socket对象可以创建不间断的服务器连接,为实时应用传递XML数据。 • 提供上下文敏感帮助:Flash 8包含有动作-帧面板中可用的每个动作的上下文敏感帮助。在编写脚本的过程中,可以获得与正在使用的动作有关的信息。

  11. 第7章 创建交互动画 7.2 ActionScript语法规则 7.2.1 ActionScript术语 ActionScript根据其特定的语法规则使用专门的术语。与动作脚本相关的重要术语。 1)动作(action):指定一个动画在播放时做某些事情的一些语句。如gotoAndPlay将播放头跳转到指定的帧或场景并继续播放;getURL则用于将影片链接到指定的网页或文件。 2)事件(events):一般情况,动作被触发时才会执行,起触发作用的部分就是事件。例如,鼠标的移动、按下与释放以及按下键盘上的某个按键等都是事件。

  12. 3)类(class):是可以创建的数据类型,用于定义新的对象类型。要定义对象的类必须先创建一个构造函数。3)类(class):是可以创建的数据类型,用于定义新的对象类型。要定义对象的类必须先创建一个构造函数。 4)构造函数(constructors):用来定义类的属性和方法的函数。例如,以下代码通过创建名称为circle的构造函数来创建一个新的圆类。 function circle(x,y,radius){ this.x=x; this.y=y; this.radius = radius; }

  13. 5)常量(constants):其值始终不变的属性。例如,数字9;布尔值中的true和false;键盘的按键BACKSPACE、ENTER、TAB等。5)常量(constants):其值始终不变的属性。例如,数字9;布尔值中的true和false;键盘的按键BACKSPACE、ENTER、TAB等。 6)表达式(expressions):由运算符和操作数组成,是动作脚本语句中能够产生值的任何一部分。例如,X+3就是一个表达式。 7)函数(function):用来传递参数并能返回值的可重复使用的代码块。例如, getVersion函数返回当前正在播放影片的Flash播放器的版本。 8)参数(arguments):通过设置参数可以把值传递给函数。

  14. 9)标识符(identifiers):用于识别某个变量、属性、对象、函数或方法的名称。标识符应遵循一定的命名规则:标识符是由字母、数字、下划线“_”或美元符号“$”组成,并且第1个字符必须为字母、下划线或美元符号。例如,myData是一个合法的标识符,2_mc不是合法的标识符。9)标识符(identifiers):用于识别某个变量、属性、对象、函数或方法的名称。标识符应遵循一定的命名规则:标识符是由字母、数字、下划线“_”或美元符号“$”组成,并且第1个字符必须为字母、下划线或美元符号。例如,myData是一个合法的标识符,2_mc不是合法的标识符。 10)事件处理程序(handers):是一种用来处理和管理事件的特殊动作。例如, onClipEvent就是ActionScript的事件处理程序。 11)实例(instances):是属于某个类的对象。一个类的每个实例都包含该类的所有属性和方法。例如,所有影片剪辑都是MovieClip类的实例,都具有该类的属性。

  15. 12)实例名称(instance name):是动作脚本中用来表示影片剪辑实例的惟一名称。用户可以使用“属性”面板为实例指定实例名称。 13)属性(property):用于定义对象的特性。例如_visible用于定义影片剪辑是否可见。 14)方法(methods):指被指派给某一个对象的函数。一个函数被分配之后,它可以作为这个对象的方法被调用。 15)对象(objects):是属性的集合。每个对象都有自已的名字和值,通过对象可以访问某一类型的信息。

  16. 16)数据类型(data type):定义变量或ActionScript元素进行通信的信息的类型。在AS中,数据类型是字符串、数字、布尔值、对象、影片剪辑(Movie Clip)、未定义或空值。 17)关键字(keyword):是在AS语言中具有特殊含义的单词。关键字不能作为变量、函数等使用。 18)目标路径(target path):用于按照Movie clip实例名、变量和影片中的对象的形式传递信息。例如:menuBar.item1.selected 这是通往变量selected的目标路径,它位于MovieClip item1中,item1又位于menuBar中。 19)变量(variable):是存储位置,用于保持信息和值。变量可以用于固定的或临时的存储,可以在影片播放时进行检索,以便在脚本中使用。

  17. 7.2.2 ActionScript语法规则 ActionScript具有一定的语法规则,用户必须遵守这些语法规则才能创建正确编译和运行的动作脚本。下面介绍适用于所有ActionScript的一般语法规则。 1、点语法 在ActionScript中,点“.”用于指明与某个对象或电影剪辑相关的属性或方法。也可用于标识影片剪辑、变量、函数或对象的目标路径。点语法表达式是以对象或影片剪辑的名称开始,后跟一个点,最后是要指定的属性、方法或变量。例如,表达式“dog._x”是指影片剪辑实例dog的_x(指示影片剪辑的x轴位置)属性。

  18. 点语法还使用特殊的别名:_root 和_parent。_root是指主时间轴,使用_root创建一个绝对路径。例如,_root. MyMC.play(); 使用别名_parent引用当前对象嵌入到的影片剪辑,也可用_parent创建一个相对目标路径。 2、大括号 动作脚本事件处理函数、类定义以及函数用大括号“{}”组合在一起形成块,如下面示所示。 on (release) { myDate=new Date(); currentMonth=myDate.getMonth(); }

  19. 3、小括号(简称括号) 小括号“()”是表达式中的一个符号,具有运算符的最优先级别。在定义函数时,要将所有参数都放在括号中,如下所示: function myuser (name,age) { … } 调用函数时,要将传递的所有参数放在括号中,如下所示: myuser (“june”,18); 括号还可以用来改变ActionScript的优先级或增强ActionScript的易读性。

  20. 4、分号 ActionScript语句以分号“;”结束,如下所示: myMC_x= myMC_x+10 ; 5、字母的大小写 在ActionScript中,只有关键字区分大小写。对于其余的ActionScript,可以使用大写字母,也可以使用小写字母。例如,下面两个语句是等价的。 fly.gotoAndStop(15); FLY.gotoAndStop(15); 但是,遵守一致的大小写约定是一个好的习惯,这样,在阅读脚本代码时更易于区分函数或变量的名称。如:newDate 、myColor等。

  21. 6、关键字 在ActionScript中保留了一些标识符作为内置对象、函数等的标识。这些标识符就是关键字,用户在编写脚本代码的过程中,不能用这些关键字作为变量、函数或自定义对象的标识,而且在脚本代码中使用关键字,必须要小写。 例如:在VAR myage=20;语句中由于关键字var写成了大写,Flash在执行时会报错。

  22. 7、注释 在ActionScript中使用字符“//”来表明其后的内容为注释内容,它们在脚本编辑窗口中以灰色显示,注释语句不会影响Flash输出文件的大小,只是便于阅读和理解脚本。例如: on (press) { myDate=new Date(); // 创建新的Date对象 cu_year= myDate.getYear(); //获取当前日期中的年份 }

  23. 如果不想让某些脚本代码运行,可以将其“注释掉”。在命令行的开头添加 /*,在末尾添加 */形成注释块,如下代码所示: /* with (ball) { x+=10; _y+=10; } */

  24. 8、常量 常量是在AS中的一种术语或属性,它们具有特定的值并保持不变。在脚本中,它们全都以大写字母表示。常量包括三种AS对象:Key对象、Math对象和Number对象。 下面的脚本使用了Key对象来测试空格键是否被按下: If(Key.isdown(Key.SPACE)){ laser.shoot(1); } 空格键有一个常值,它是Key对象的一个属性。当空格被按下,下面一行的语句将被执行。 解释下面两例子: area=Math.PI*(radius*radius); duration=Number.MAX_VALUE;.

  25. 第7章 创建交互动画 7.3 ActionScript基础 7.3.1 数据类型 数据类型是描述变量或动作脚本元素可以包含的信息的种类。Flash 中内置了两种数据类型:原始数据类型和引用数据类型。原始数据类型是指字符串、数字和布尔值,它们都有一个常数值,因此可以包含它们所代表的元素的实际值。引用数据类型是指影片剪辑和对象,它们的值可能发生改变,因此它们存放对元素的实际值的引用。另外,还有两类特殊的数据类型:空值和未定义。

  26. 1、字符串 字符串是由字母、数字、标点符号等组成的字符序列。在ActionScript中应用字符串时要将其放在单引号或双引号中。例如,语句firstname =“Beijing”; 可以使用加法“+”运算符连接或合并两个字符串。ActionScript会将字符串前面或后面的空格作为该字符串的一部分。例如: firstname=”China”; greeting=”Welcome to”+firstname; 字符串变量greeting的值是:“Welcome to China”。字符串是区分大小写的。例如:“welcome”和“WELCOME”是不同的字符串。

  27. 2、数字 数字是双精度浮点数,可以使用算术运算符(如:+、-、*、/、%、++、--等)对数字进行运算,也可以使用内置的数学对象Math和Number类的方法来处理数字。例如,Math.sqrt(36); 指使用sqrt()(平方根)方法返回数字36的平方根。

  28. 3、布尔值 布尔值是true或false中的一个。在动作脚本中,布尔值经常与逻辑运算符或比较运算符一起使用,以控制程序流程。例如: onClipEvent (enterFrame) { if (userName ==false && password == false){ stop( ); } }

  29. 4、对象(Object) 对象是属性(property)的集合。每个属性都有名称和值,属性值可以是任何的Flash数据类型,甚至可以是对象数据类型,可以使对象相互包含(即嵌套)。要指定对象及其属性,可以使用点运算符。例如,以下代码中book 是desk的属性,而desk又是house的属性。 house . desk . book; 此外,可以使用内置对象来处理和访问特定种类的信息。例如,Math对象具有一些方法,这些方法可以对传递给它们的数字执行数学运算。例如: squareRoot=Math.sqrt(81);

  30. 动作脚本中MovieClip对象具有一些方法,用户可以使用这些方法控制舞台上的影片剪辑元件实例。动作脚本中MovieClip对象具有一些方法,用户可以使用这些方法控制舞台上的影片剪辑元件实例。 如:使用 play( ) 和 nextFrame( ) 方法: mc1InstanceName.play( ); mc2InstanceName.nextFrame( ); 用户可以创建自定义对象来组织 Flash 应用程序中的信息。若要使用动作脚本向应用程序添加交互操作,将需要许多不同的信息,例如,用户的密码、物体运动的速度、已加载的帧数等。

  31. 5、影片剪辑(MovieClip) 影片剪辑是Flash应用程序中可以播放动画的元件,是惟一引用图形元素的数据类型。影片剪辑类型允许使用影片剪辑类的方法控制影片剪辑元件。可以使用点运算符调用这些方法,如下所示: my_MC.play( ); my_MC.nextFrame( );

  32. 6、空值(Null) 空值数据类型只有一个null值,此值意味“没有值”,即缺少数据。null 值可以用在各种情况中。下面是一些示例: • 指示变量尚未接收到值 • 指示变量不再包含值 • 作为函数的返回值,指示函数没有返回的值 • 作为函数的参数,说明省略了一个参数 7、未定义(Undefined) 未定义的数据类型有一个值,即undefined,用于尚未分配值的变量。

  33. 7.3.2 基本命令 在Flash 8中,可用的脚本命令达上千条,每条都记住是很困难的。本节重点介绍在动画制作过程中,常用的一些命令。有兴趣的读者可以参考这方面的专著。 1、stop(停止)和play(播放)命令 在动画播放过程中如果没有特殊的说明,动画将沿着时间轴面板上的帧播放下去。使用stop命令停止正在播放的动画。当动画被停止播放之后,可以使用play命令使动画继续播放。play命令和stop命令不带任何参数,它们的语法格式分别为:stop()和play()。

  34. 2、goto(跳转)命令 goto是无条件跳转命令。在Flash中它可以不受约束地跳转到任何场景的任意一帧。goto有两种基本的跳转模式: gotoAndPlay:是指从当前帧跳转到指定的场景或帧继续播放。 gotoAndStop:是指从当前帧跳转到指定的场景或帧停止播放。 goto命令的格式为: gotoAndPlay(场景,帧)和gotoAndStop(场景,帧)。 场景:表示将跳转到的场景名称; 帧:表示将跳转到该场景的第几帧。

  35. 3、stopAllSounds命令 stopAllSounds命令是指停止动画文件中当前正在播放的所有声音。该命令没有参数,其语法为stopAllSounds()。例如:下面的代码可以应用到一个按钮,当单击此按钮时,将停止动画文件中的所有声音。 on (release) { stopAllSounds(); }

  36. 4、getURL命令 getURL命令用于设置超级链接,其语法形式如下: getURL(url [, window [,variables]]) 参数含义如下: url:用来设置链接的地址。 window:可选参数,设置链接网页的打开方式,它有四种方式:“_self”在当前窗口中打开链接,“_blank”在一个新窗口中打开链接,“_parent”在父级窗口中打开链接,“_top”在最上层的窗口中打开链接。

  37. Variables:用于设置发送变量的GET或POST方法。如果没有变量,则省略此参数。GET 方法将变量追加到URL的末尾,该方法用于发送少量的变量;POST 方法在单独的http 标头中发送变量,该方法用于发送大量的变量。 在实际运用中,getURL往往与按钮配合使用。如: on (release) { getURL(“http://www.163.com”,”_blank”); } 当按下按钮时,将在一个新的窗口中打开指定的网页。

  38. 5、fscommand命令 fscommand命令用来与外界进行沟通,还可以控制Flash Player播放器。其语法形式为: fscommand(command, parameters); lcommand:是fscommand命令可以执行的命令。 lparameters:是执行命令的参数。

  39. 6、loadMovie命令和unloadMovie命令 loadMovie命令和unloadMovie命令是一对作用相反的命令,用来实现调入和释放外部影片。它们的语法格式: (un)loadMovie ( url,level / target [,variables] ) • url: 表示要加载或卸载的SWF文件或JPEG文件的绝对或相对路径。 • target:用于指向目标影片剪辑的路径。 • level:该参数的值必须为一个整数,用来指定播放器中影片将被加载到的级别。 • variables:可选参数,用于指定发送变量所使用的HTTP方法。该参数必须是字符串GET或POST。如没有要发送的变量,则省略该参数。

  40. 7、setProperty和getProperty命令 setProperty命令用于设置影片剪辑实例的属性值。getProperty命令用于获取影片剪辑实例的属性。影片剪辑实例的属性包括大小、位置、可见性和透明度等。 setProperty命令的语法形式: setProperty(目标,属性,值) getProperty命令的语法格式: getProperty(目标,属性) • 目标:要设置其属性的影片剪辑的实例名称。 • 属性:要设置的属性。 • 值:属性的设置值。

  41. 8、duplicateMovieClip和removeMovieClip命令 使用duplicateMovieClip命令,可以在播放动画时复制一个影片剪辑。复制的影片剪辑将从第一帧开始播放。如果删除父级影片剪辑,则复制的影片剪辑也会被删除。使用 removeMovieClip命令可以删除由duplicateMovieClip命令创建的影片剪辑实例。 duplicateMovieClip命令语法格式为: duplicateMovieClip(target, newname, depth)

  42. ltarget: 要复制的影片剪辑的路径与名称。 lNewname:复制出来的新影片剪辑的唯一名称。 ldepth:已复制出来的影片剪辑的唯一深度级别。 removeMovieClip命令语法格式为: removeMovieClip(target) 其中,target指用duplicateMovieClip()命令创建的影片剪辑实例的名称。

  43. 9、startDrag和stopDrag命令 使用startDrag命令,可以在播放动画时拖动一个影片剪辑,并且可以设置对象的拖动范围。当对另一个影片剪辑应用startDrag命令时,会停止对当前对象的拖动,因为一次只能拖动一个影片剪辑。用stopDrag命令可停止当前的拖动操作。startDrag命令语法格式为: startDrag(target,[lock ,left , top , right, bottom]) ltarget: 要拖动的影片剪辑的实例名称。 llock: 一个布尔值,指定可拖动影片剪辑是锁定到鼠标位置中央 (true),还是锁定到用户首次单击该影片剪辑的位置上 (false)。此参数是可选的。

  44. left、top、right、bottom:相对于影片剪辑父级坐标的值,这些坐标值指定该影片剪辑的约束矩形范围。这些参数是可选的。left、top、right、bottom:相对于影片剪辑父级坐标的值,这些坐标值指定该影片剪辑的约束矩形范围。这些参数是可选的。 stopDrag命令语法格式为:stopDrag() 说明:该命令无参数,其作用是停止当前的拖动操作。 例如:在下面的代码中,按下按钮时,拖动影片剪辑;释放按钮,停止拖动影片剪辑。 on (press) { startDrag(this,true); } on (release) { stopDrag(); }

  45. 10、with命令 With的作用是临时改变语句所起作用的目标。Flash 8中允许用户使用 object 参数指定一个对象(比如影片剪辑),使用 statement(s) 参数计算该对象中的表达式和动作。with命令语法格式为: with (object) { statement(s); } • object:动作脚本对象或影片剪辑的一个实例。 • statement(s):包括在大括号中的一个动作或一组动作。

  46. 例如:下面的代码设置my_mc 实例的_x 和_y 属性,然后指示影片剪辑my_mc 转到第 3 帧并停止播放。 with (my_mc) { _x = 50; _y = 100; gotoAndStop(3); } 下面的代码显示不使用 with 动作如何编写上面的代码。 my_mc._x = 50; my_mc._y = 100; my_mc.gotoAndStop(3);

  47. 11、_root命令 _root命令用来指定主场景中的实例对象或变量。其语法为:_root.movieClip或_root.action。它包含两个参数,其含义如下: lmovieClip:是电影剪辑实例名称。 laction:是指定动作变量的名称。

  48. 12、tell目标命令 tell目标命令用于通知目标对象。其语法格式为“tell target(target),它包含一个参数,其含义是希望通知对象的实例名称。 13、ifFrameLoaded命令 ifFrameLoaded命令用来测试影片中指定的帧是否已经下载完毕。其语法格式为:ifFrameLoaded(场景,帧)

  49. 14、onClipEvent命令 onClipEvent命令是MovieClip的事件触发程序,对影片剪辑实例指定的事件发生时响应。其语法格式为: onClipEvent(movieEvent);{ … } movieEvent是和影片剪辑实例相联系的一个动作事件,它可以是下列值: lload:影片剪辑实例在时间轴中出现时激活事件。 lenterFrame:在播放到某一帧时激活事件。 lmouseMove:只要鼠标移动就激活事件。

  50. lmouseDown:鼠标左键按下时激活事件。 lmouseUp:鼠标左键松开时激活事件。 lkeyDown:当某一键被按下时激活事件。 lkeyUp:当某一键被松开时激活事件。 ldata:在loadVariables或loadMovie动作读入数据时激活事件。 例如:使用mouseMove事件,同时使用xmouse和ymouse属性获取鼠标当前的坐标值。 onClipEvent(mouseMove){ stageX=_root.xmouse; stageY=_root.ymouse; }

More Related