项目10 ActionScript 3.0基础(教案)-《计算机动画设计——Flash》同步教学(国防科技大学出版社)

资源下载
  1. 二一教育资源

项目10 ActionScript 3.0基础(教案)-《计算机动画设计——Flash》同步教学(国防科技大学出版社)

资源简介

项目10 ActionScript 3.0基础
一、教学目标
1.掌握ActionScript语法规则;
2.会使用ActionScript编辑器;
3.会使用ActionScript控制影片剪辑。
二、课时分配
本项目共3个任务,安排4课时。
三、教学重点
本章介绍了ActionScript 3.0的开发环境、语法规则和编程方法。ActionScript是一种面向对象的编程语言,将对象作为程序的基本单位。对使用ActionScript 3.0处理影片剪辑元件,在程序中使用动态文本和输入文本对象、利用程序处理图形图像、声音和视频等进行了简单介绍。
四、教学难点
1.掌握ActionScript 3.0语法规则和编程方法。
2.学会使用ActionScript 3.0丰富的类,能够编制出复杂的动画程序。
五、教学内容
任务一 ActionScript语法简介
ActionScript 3.0是一种强大的面向对象编程语言,它拥有处理各种人机交互、数据交互的功能,合适快速地构建效果丰富的互联网应用程序,这种应用程序已经成为Web体验的重要部分。本任务重点介绍ActionScript 3.0的语法。
(一)ActionScript基本语法
(1)区分大小写
在ActionScript 3.0中是区分大小写的,大小写不同的标识符会被视为不同,例如:var a: Number和var A:Number
这里a和A是两个变量,又如:
var sunshine:MovieClip;
var sunshine:MovieClip;
(2)使用点语法
使用点语法可以访问对象的属性,通过后跟点运算符和属性名或方法名的实例名来引用类的属性或方法。例如定义一个影片剪辑movieclip,要查看movieclip的X轴坐标,可以这样写:movieclip. X;,如果要访问这个对象的play方法,可以写为movieclip. Play( );,另外,在导入包或类的时候也会使用到点语法。
(3)分号
分号用来结束语句,如果省略分号字符,那么编译器将假设每一行代码代表一条语句。在ActionScript 3.0的严格模式下,句尾不写分号编译器会报错。另外,分号可提高程序的可读性。
(4)小括号
小括号一般有如下三种用处。
①改变运算的优先顺序,小括号中的运算总是最先执行。
②可以结合逗号运算符来计算一个运算的表达式,并返回最后的结果,例如tracce((a=a++,b=b++,a+b))。
③通过小括号可向函数或方法传递一个或多个参数,gotoAndPlay(2).
(5)注释
ActionScript 3.0代码支持两种类型的注释:单行注释和多行注释。这些注释机制与C++和Java中的注释机制类似,编译器将忽略标记为注释的内容。合理使用注释可以提高程序的可读性;在调试程序时,如果不希望某段程序运行,那么可以通过把程序代码变成注释,加以屏蔽。
单行注释以两个正斜杠字符“//”开头并持续到该行的末尾。
多行注释以一个正斜杠和一个星号(/*)开头,以一个星号和一个正斜杠(*/)结尾。多行注释的使用方法为“/*被注释的内容,可以是多行*/”,注释的内容是不会执行的。
(6)关键字和保留字
关键字和保留字多是ActionScript里规定不能在代码中用作标识符的字。关键字包括词汇关键字和句法关键字,如果将词汇关键字用作标识符,则编译器会报告一个错误。表10-1列出了ActionScript 3.0词汇关键字。
句法关键字可用作标识符,但是在某些上下文中具有特殊的含义。表10-2列出了ActionScript 3.0句法关键字。还有几个供将来使用的保留字。
这些保留字不是为ActionScript 3.0保留的,但是其中的一些可能会被使用ActionScript 3.0的软件当作关键字,或者可能在未来版本的语言中作为关键字。表10-3列出了ActionScript 3.0保留关键字。
(7)常数
ActionScript 3.0用const语句创建常量。常量是无法改变的固定值。只能为常量赋值一次,而且必须在最接近常量声明的位置赋值。例如,如果将常量声明为类的成员,则只能在声明过程中或者在类结构中为常量赋值。按照惯例,ActionScript中的常量全部使用大写字母,各个单词之间用下划线“_”分隔。
(二)ActionScript 3.0语句
ActionScript 3.0使用if、for、while、do…while和for…in语句来根据某个条件执行某个动作。
(1)if语句
判断一个条件是真(true)或假(false)的语句以if开头。如果条件成立,那么ActionScript执行if语句后面的语句。如果条件不成立,那么ActionScript跳转到本代码块以外的下一条语句。Else if指定如果前面的条件是假(false)时可选的条件。
下面的语句用于测试几个条件:
if ((User Name==bill )||(PassWord==123))
{ gotoAndplay(″WelcomeMovie″); }
Else
{ gotoAngStop(″Reject″); }
(1)重复执行动作
ActionScript可以重复执行某个动作,可以按指定次数重复执行某个动作,或指定条件存在时重复执行某个动作。在ActionScript中,使用while、do…while、for、for…in创建动作循环,使用break语句终止一个循环。
①当条件存在时重复执行某动作。
使用while语句实现。While循环先计算一个测试表达式,当测试表达式的值为真(true)时,执行循环体中的代码。待循环体中的每个语句被执行后,再次计算测试表达式,直到测试表达式的值为假(flase),跳出循环。
也可以使用do…while语句创建与while循环同类的循环。在do…while循环中,表达式的计算在代码块底部进行,因而该种循环至少运行一次。
②for语句使用计数器,控制循环次数。
For循环使用计数器来控制循环运行的次数。先声明一个变量,然后写一个语句,在每次执行循环之后增加或减少该变量的值。
③循环处理电影剪辑或对象的子项。。
使用for…in语句实现该功能。子项包括其他电影剪辑、函数、对象和变量。下面的实例使用trace动作在输出窗口打印循环处理的结果。
如果希望脚本可以重复处理特定类型的子项,如仅处理电影剪辑子项,那么可以使用for…in语句和typeof操作符。For…in语句重复处理对象原型链中的对象属性。如果子对象原型是parent,那么for…in也将重复处理parent的属性。
(三)函数和对象
(1)使用预定义函数
函数是指在动画中任何地方都可以重用的ActionScript代码块。如果传递特定的值(参数)给函数,那么该函数将对这些值进行操作,并返回一个值。Flash拥有一些预定义函数,使用这些函数可以访问某些信息,完成某些任务,例如,冲突检测,获取最近一次按键的值(keycode),获取动画中设定的播放器版本号(getVersion)等。
(2)调用函数
可以从任何时间轴(包括已载入的电影剪辑)调用任一时间轴内的函数。调用函数的方法为使用函数名,并在圆括号中传递要求的参数。如果传递的参数多于函数所要求的个数,那么多余的值被忽略。
在正常模式下调用函数的步骤如下。
①使用evaluate动作,并在表达式输入框中输入函数名和要求的参数。
②在另一个时间轴调用函数,使用目标路径。
(3)创建自定义函数
Flash CS5允许用户自定义函数来执行一系列语句,对传递过来的值进行操作,并可返回值。函数定义好以后,就可以从任何时间轴(包括载入动画的时间轴)调用它。可以把函数想象为一个“黑箱”。调用函数时给它提供输入(参数),它执行某些操作后产生输出(返回值)。在自定义函数中,最好对它的输入、输出和用途做详细的注释,使用户易于理解和使用。创建自定义函数有以下步骤。
①定义函数。和变量一样,函数是附属于定义它的电影剪辑的。当一个函数被重新定义时,新的定义取代旧的定义。定义函数,使用Function动作,后跟一个函数名、要传递给函数的参数和指出该函数做什么的ActionScript语句。
②给函数传递参数。参数是函数代码处理的元素,当函数被调用时,必须把它要求的参数传递给它。该函数用传递过来的值取代函数定义中的参数。
(4)使用预定义对象
使用Flash的预定义对象可以访问某些种类的信息(如系统的日期和时间信息)。大多数预定义对象都拥有一些方法(分配对象的函数)可以通过调用这些方法,让其返回一个值或执行一种动作,例如,日期对象(Date)从系统时钟返回信息,声音对象(Sound)可以控制动画中的声音元素。
有些预定义对象拥有一些属性,可以读取这些属性的值。例如,按键对象(Key)拥有代表键盘按键的常数。每个对象都有自己的特点和能力,可以在动画中使用。
电影剪辑实例用ActionScript对象表示,用户可以像调用其他ActionScript对象的方法一样调用预定义电影剪辑的方法。
任务二 ActionScript编辑器的使用
Flash CS5提供了一个非常有用的ActionScript编辑器,利用ActionScript编辑器可以很方便的输入和编辑ActionScript语句。本任务重点介绍ActionScript编辑器的使用方法。
(一)ActionScript编辑器的启动
(1)打开Flash CS5,显示欢迎界面,新建Flash文件。
(2)启动ActionScript编辑器。在Flash CS5中选择菜单栏中的“窗口”→“动作”命令(快捷键F9),即打开ActionScript编辑器。
ActionScript编辑器有4个部分组成。
①脚本面板:这个区域相当于一个文本编辑器,在这里可以输入脚本代码。而且,这个区域是“上下文敏感”的,也就是说,当在上面的工作区中选中了不同的界面元素(比如某个按钮、某一帧等),就会显示和界面元素相对应的脚本。
②脚本面板按钮:脚本编辑相关的工具栏,调试程序设置端点就需要使用这里面的按钮。
③行为列表:该区域列出了ActionScript所将提供的脚本命令,主要供不太熟悉ActionScript的用户使用。双击条目,或者将命令条目拖放到右边的脚本面板中即可向脚本中添加命令。
④脚本浏览器:这里列出了当前工作的项目中含有脚本程序的界面元素的列表,通过它可以快速浏览脚本,大大方便了程序的编写。
(二)ActionScript编辑器参数设置
无论是在动作面板还是脚本窗口中编辑ActionScript代码,都可以通过设置参数来配置输入的ActionScript代码的格式。
要设置ActionScript 3.0的首选参数,需要先打开首选参数窗口。执行以下操作:选择“编辑”→“首选参数”,打开“首选参数”,各参数功能如下所示。
(1)“编辑”:自动右大括号:填入左大括号“{”的后Enter键,ActionScript 3.0会自动填充右大括号“}”;自动缩进:自动调整缩进距离,使代码阅读更顺畅;制表符大小:调整制表符大小;代码提示:在Flash CS5版本中,把代码提示加入到ActionScript代码编辑区的工具栏中,省略了代码提示的显示时间设置,此处默认为0s。
(2)“字体”:设置代码的字体和大小。
(3)“样式”:设置字体的样式,一般不允许用户修改。
还有一些其他的功能如“导入”、“导出”和“语法颜色”,均可对ActionScript代码进行一些简单的编辑。
任务三 使用ActionScript控制影片剪辑
事件是推动Flash程序运行的灵魂,可以说,没有事件就没有Flash程序,正是因为有了丰富的事件,Flash程序的交互才能够得以实现。开发Flash程序时,程序员需要预先估计程序应该处理哪些事件,以及如何处理这些事件。例如对一个按钮,是否需要处理用户单击按钮所触发的事件,如果需要按钮对用户的更多操作作出反应,就需要添加相应的事件处理代码。
(一)鼠标和键盘事件
鼠标事件是应用最多的事件,当鼠标状态发生改变时,Flash相应的做出反应,以实现交互性。
(1)鼠标按下
如果某个界面元素(比如一个按钮或者一个影片剪辑的实例)的代码中含有鼠标按下on(press)这样的事件处理代码,那么当用户在这个界面元素按下鼠标时,on(press)后面的大括号中的代码就会被执行。
(2)鼠标释放
这个事件在鼠标释放on(release)的时候发生,并且通常都是在on(press)之后发生,有press才能有release。
(3)在外部释放鼠标
当用户在某个按钮或者影片剪辑实例上按下鼠标(注意:是按下鼠标按钮不放),然后拖动鼠标指针,在这个按钮或者影片剪辑实例外面再释放鼠标,这时就会发生release Outside事件。可以在这个按钮或者影片剪辑的事件处理代码中添加on(releaseOutside)来捕获并处理这个事件。
(4)鼠标悬停
当鼠标指针停留在某个界面元素上面时,rollOver 事件就会发生。这个事件典型的应用是用来制作指向某个按钮或者影片剪辑实例时产生的反馈效果,如按钮颜色发生变化、弹出菜单或者执行其他的一些操作。
(5)鼠标移出
这个事件和rollOver是相对的,很显然,当鼠标指针在一个界面元素上方运动时产生rollOver事件,那么鼠标指针移出这个界面对象的时候就会产生rollOut事件的处理和iherollOver事件的处理经常是成对出现的,如果想捕捉rollOver事件,在on(rollOver)中弹出了一个菜单隐藏起来,否则菜单就会一直显示在界面上。
(6)拖动掠过
拖动操作很简单,就是鼠标在某个对象上按下以后不释放,然后拖动鼠标。dragOver事件就是当鼠标指针处于拖动状态时,经过某个对象时发生的事件。
(7)拖动移出
拖动移出事件dragOut和dragOver恰好相反,是相当于鼠标处于拖动状态下时从一个对象上移动出去时发生的事件。
(8)键盘事件
当需要捕捉用户的按钮操作时需要使用这个事件,需要捕获用户按下方向键左键的操作时可以使用On(keypress″″)。
(二)鼠标和键盘事件实例
前面简要介绍了几种常用的鼠标事件,下面就通过一个完整的例子来综合运用一下这些事件。
首先建立一个场景,向其中添加三个影片剪辑实例,名称分别为hand?mc、message?txt、eventTrapper?btn和dragtest?mc,hand?mc用来替换鼠标,message?txt是一个动态文本,显示反馈信息,eventTrapper?btn是按钮实例,用来捕捉各种鼠标事件,dragTest?mc则用来演示拖动事件的处理。
(1)自定义鼠标
经常需要在Flash程序中使用自定义的鼠标指针,在下面这个例子中,将把鼠标指针换成自定义的外形。进入主场景,选择第一帧,在脚本面板中输入以下代码 。
Stop( );
Mouse.hide( );
startDrag(″hand?mc″、true);
Message?txt.text=″开始鼠标事件试验″
第一句代码是stop(),也就是让影片播放到这里停下来等待用户的操作,Mouse.hide()隐藏鼠标指针,紧接着startDrag开始对影片剪辑实例hang?mc的操作,由于前面已经将鼠标指针隐藏,因此这个命令现在的作用相当于将鼠标指针替换为一个图标。在这个例子中,使用startDrag命令的目的是模拟鼠标指针替换的效果,因此应当设置这个参数为ture。
(2)捕捉并处理事件
选中影片剪辑实例eventTrapper?btn,进入脚本面板,在这里可以编写一系列的事件处理代码。前面介绍了多个和鼠标相关的事件,这里就将其中一个捕获,注意观察它们之间的异同。
on(rollover){
message?txt.text=″鼠标浮动事件″;}
on(rollover){
message?txt.text=″鼠标移出事件″;}
on(press){
message?txt.text=″鼠标单击事件″;}
on(dragOut){
Message?txt.text=″鼠标在当前对象上按下左键后拖出″;}
on(release){
Message?txt.text=″鼠标释放事件″;}
以上几个是比较简单的事件,下面再来处理稍微复杂一些的事件。
选择影片剪辑实例dragTest?mc,然后在代码面板中输入下列代码。
On(dragover){
this._alpha= this._alpha?10;}
当用户按下鼠标左键并在dragTest?mc上拖动时,这个事件内部的代码就会被执行。this变量在前面已经了解过,它的作用就是引用当前的对象(也就是dragTest?mc),_alpha是它的一个属性,代表透明度,这里通过一个简单的运算来逐次降低其透明度,最终的效果类似于图像被橡皮擦掉一样。
选择按钮eventTrapper?btn,为其添加下列代码。
On(releaseoutside){
EvenTrapper?btn._x=_root._xmouse;
eventTrapper?btn._y=_root._ymouse;}
这段代码可以实现拖放效果,当用户在eventTrapper?btn上按下鼠标左键并拖动,鼠标在eventTrapper?btn外面释放时,releaseOutside事件就会发生,在这个事件中,将eventTrapper_btn的位置(通过_x和_y坐标来定义)设置为当前鼠标释放时鼠标所处的坐标位置,按钮就会移动。
上面的例子是通过鼠标拖动的方式移动物体,下面试着用键盘来实现,选择eventTrapper?btn,为其添加下列代码。
on(keypress″″){
eventTrapper_btn._x=eventTrapper_btn._x_6}
on(keypress″″){
eventTrapper_btn._x=eventTrapper_btn.x+6}
on(keypress″″){
eventTrapper_btn._y=eventTrapper_btn._y_6}
on(keypress″″){
eventTrapper_btn._y=eventTrapper_btn._y+6}
这4个事件的作用很明显,当用户按下鼠标左键时(发生keypress事件),将eventTrapper_btn._x的值减少6个单位。
(三)影片剪辑和按钮
从前面的实例可以看出,影片剪辑的实例也可以拥有自身的事件处理代码。但是在使用影片剪辑实例事件时必须注意以下几个问题。
影片剪辑实例虽然可以捕捉这样的事件,但是在这些事件的处理中不能直接引用其他的对象。可以在这个事件的处理中修改影片剪辑实例dragTest_mc的透明度,但是不要指望在其中简单地加上message?txt.text=″″这样的代码就能修改舞台显示的内容。在执行过程中,这样的代码是不会有效果的,而且Flash不会报错,这经常会让初学者感到晕头转向。解决的方法有两个,一是用按钮代替影片剪辑,二是对上面的代码进行修改,改成_root.message_txt.text=″″,这样程序就能够执行。_root是Flash提供的一个内置对象,通过它可以准确地定位界面上的元素。
总体来说,按钮能实现的功能,影片剪辑都能实现的功能按钮则未必能够实现。由于按钮是程序界面使用极其频繁的元素,提供专门的按钮类型可以提高设计的效率。
六、上机实战
【例10-1】雪花飘飘
(1)新建一Flash文档,命名为“雪花飘飘.fla”,并打开文档属性对话框,将尺寸设置为550像素*400像素,背景颜色为黑色。
(2)新建一图形元件,命名为“雪花”,在该元件的舞台上绘制图形。
(3)新建一影片剪辑元件,命名为“雪”,将“雪花”元件拖入舞台,在图层1的第10帧和第20帧处插入关键帧。
(4)选择图层1第1帧,选择“雪花”实例,打开“属性面板”,设置“色彩效果”样式选项中的透明度Alpha值设为0。
(5)选择图层1第10帧,选择“雪花”实例,将其向下拖动一新位置。
(6)选择图层1第20帧,选择“雪花”实例,将其向下拖动一新位置,并打开“属性面板”,设置“色彩效果”样式选项中的透明度Alpha值设为0。
(7)选择图层1第1帧和第10帧,分别在鼠标右键弹出的快捷菜单中选择创建传统补间。
(8)执行“文件”→“导入”→“导入到库”,将素材“房子”和“树”导入到库。
(9)新建一影片剪辑元件,将图片“房子”拖入舞台,选择“套索工具”中的“魔术棒”,去除房子图片的背景。
(10)新建一影片剪辑元件,将图片“树”拖入舞台,选择“套索工具”中的“魔术棒”,去除树图片的背景。
(11)返回场景1,将图层1名称改为“背景”,打开库面板,将元件树和房子拖入舞台,设置合适的位置和大小。
(12)新建图层2,打开库面板,将“雪花”影片剪辑元件拖入舞台任意位置。在第2帧插入关键帧。
(13)选择图层2第1帧,在鼠标右键弹出的快捷菜单中选择“动作”,打开动作面板,输入以下代码。
a=random(100);
while (Number(a)<=100) {
a =Number(a)+1;
setProperty ("/snow",_x,random(500));
setProperty ("/snow",_y,random(400));
setProperty ("/snow",_xscale,random(50));
setProperty ("/snow",_yscale,random(50));
setProperty ("/snow",_rotation,random(360));
duplicateMovieClip ("/snow","snow_"adda,a);
}
(14)选择图层1和图层2的第50帧,分别插入帧。
(15)保存并测试动画,“雪花飘飘”动画效果如图10-10所示。
PAGE

展开更多......

收起↑

资源预览