第7章基础交互动画制作.docx

第7章基础交互动画制作.docx

《第7章基础交互动画制作.docx》由会员分享，可在线阅读，更多相关《第7章基础交互动画制作.docx（36页珍藏版）》请在冰豆网上搜索。

第7章基础交互动画制作

第七章基础交互式动画制作

如果Flash仅能够作出令人匪夷所思的动画，而不能在观众与电影之间形成一种交互关系，那么Flash将至少失去一半的魅力。

幸运的是，Flash以其强大的交互功能，在用户和电影之间架起一座桥梁。

它使我们的互联网生活更加丰富多彩。

每一个交互电影都必须使访问者参与在内。

使用键盘、鼠标或者二者兼用，访问者可以跳到电影的不同部分、移动电影中的对象、对话框中输入信息或者执行多种交互操作。

怎样创建交互电影？

可以设定一系列的动作指令来指定事件发生。

能够触发动作的事件即可以是电影中的某一帧，也可以是电影中的一个按钮或是键盘上的某一键。

简单的说，用户所要做的就是告诉Flash当事件发生时执行哪个动作。

ActionScript就是Flash的脚本语言，用脚本语言编写的程序嵌入Flash动画后可以实现上面提到的各种功能。

本课将深入介绍FlashCS3的脚本编程语言ActionScript3.0，它丰富了Flash世界，使得Flash动画功能得到了无限的扩展，并且使动画具有了交互性，为用户提供了灵活参与和主动控制的空间，提高了用户的参与性与动画的交互性。

第一部分学习要求

一应知目标

1.了解ActionScript语言的概念和用途

2.了解变量与函数的命名和定义

3.了解Flash编程基础知识

4.了解实现交互式动画的方法

二应会目标

1.掌握编程的基本知识

2.掌握脚本的基本函数

3.掌握交互式动画的制作方法

4.掌握影片剪辑元件属性的控制

三预备知识

1.掌握动画制作的基本方法

2.熟悉图形元件的绘制和导入外部元件

3.熟悉动画制作的流程

4.了解一门基本的编程语言

四课时安排

项目

学时

教学方式（参考）

1

预习

课余

预习本课相关的知识，并能完成本次课的项目实例操作

2

课堂讲解

2学时

1.讲解交互式动画的含义

2.讲解ActionScript3.0的基础知识

3.讲解使用“动作”面板编写脚本

4.讲解常用的基本编程语句

3

实训练习

2学时

1.参考课堂上教师讲解的操作步骤，完实践训练中的项目内容

2.有实力的同学继续完成职岗演练中的项目内容

第二部分课堂讲解

7.1ActionScript3.0简介

ActionScript是由FlashPlayer中的ActionScript虚拟机（AVM）来执行的。

ActionScript代码通常被编译器编译成“字节码格式”（一种由计算机编写且能够为计算机所理解的编程语言），如AdobeFlashCS3Professional或Adobe®Flex™Builder™的内置编译器或Adobe®Flex™SDK和Flex™DataServices中提供的编译器。

字节码嵌入SWF文件中，SWF文件由运行时环境FlashPlayer执行。

ActionScript3.0的脚本编写功能超越了ActionScript的早期版本。

它旨在方便创建拥有大型数据集和面向对象的可重用代码库的高度复杂应用程序。

虽然ActionScript3.0对于在AdobeFlashPlayer9中运行的内容并不是必需的，但它使用新型的虚拟机AVM2实现了性能的改善。

ActionScript3.0代码的执行速度可以比旧式ActionScript代码快10倍。

ActionScript3.0提供了可靠的编程模型，具备面向对象编程的基本知识的开发人员对此模型会感到似曾相识。

ActionScript3.0中的一些主要功能包括：

◆一个新增的ActionScript虚拟机，称为AVM2，它使用全新的字节码指令集，可使性能显著提高

◆一个更为先进的编译器代码库，它更为严格地遵循ECMAScript（ECMA262）标准，并且相对于早期的编译器版本，可执行更深入的优化

◆一个扩展并改进的应用程序编程接口（API），拥有对对象的低级控制和真正意义上的面向对象的模型

◆一种基于即将发布的ECMAScript（ECMA-262）第4版草案语言规范的核心语言

◆一个基于文档对象模型（DOM）第3级事件规范的事件模型。

7.2ActionScript3.0编程基础

ActionScript3.0是面向对象的脚本语言，具有数据类型、变量和常数、函数、语句、操作符、条件和循环结构、对象等基本的编程概念。

7.2.1ActionScript3.0中数据的本质及重要性

数据是一切编程语言的基石。

在ActionScript中，我们非常熟悉的所有数值，比如MOvieClip的帧数、舞台的大小及视频流播放的状态，都是通过数据来描述的。

我们给数据起了各种各样的名字，这些名字就是通常所说的变量（Variable），通过变量来调用数据。

变量怎样与数据发生联系呢？

“一切都是对象”，ActionScript3和Java、C＃一样，是纯粹的面向对象语言，所以ActionScript里面的一切数据都是对象。

我们通过变量来操作对象，变量和对象是怎样联系？

变量持有引用（Reference），而引用则只想要操作的对象。

因此，实际上我们是通过引用来操作对象。

举一个比较简单的比喻：

引用好比是一个遥控器，变量是遥控器的名字，引用可以直接遥控到要操作的内存中的对象。

我们对引用的操作，实际上就相当于操作内存中的对象。

varyaokong：

Array=newArray（1,2,3）;

请先看以下这行代码，然后我们再解释一下真正的实现过程：

首先，用var这个关键字告诉FlashPlayer要建立一个名字叫“yaokong”的遥控器。

“：

”后面跟着“Array（数组）”，意思是说这个遥控器的类型是专门用来操作数组的。

注意：

这个时候遥控器还不能工作，因为FlashPlayer还没有告诉它能遥控哪个数组对象。

然后用new这个关键字，告诉FlashPlayer要建立一个对象。

用“Array（）”告诉FlashPlayer对象类型是数组，用“（1，2，3）”告诉FlashPlayer这个数组包含3个数：

1，2，3。

最后用“＝”告诉FlashPlayer，这个名字叫yaokong的遥控器来遥控这个新的数组对象。

这样，对象，引用，变量三者就有机的联系起来了。

7.2.2ActionScript3.0的数据类型

数据类型是对不同种类信息的表达方式。

ActionScript3.0支持的数据类型分为：

基元数据类型和复杂数据类型。

◆基元数据类型：

是语言的基本构成单元，比如：

数字、文字、条件真假等。

ActionScript3中预定义的基元数据类型一共有：

Boolean、int、Number、String和uint。

其中，int、Number和uint是处理数字的；int是用来处理整数的；Number是用来处理很长又有小数点的数字；uint处理很大的正整数；String是处理文字的，成为字符串；Boolean，又称布尔值，用来标识真假。

这种类型的数据只有两个，一共是真（true）,一共是假（false）。

◆复杂数据类型：

是相对于基元数据类型而言的。

ActionScript3中经常用到的复杂数据类型有：

Array、Date、Error、Function、RegExp、XML和XMLList，我们自己定义的类也全部属于复杂数据类型。

7.2.3变量的声明和使用

1.变量的声明

在ActionScript3中，声明变量的格式如下：

var变量名：

数据类型；

var变量名：

数据类型＝值；

var是一个关键字，用来声明变量。

变量的数据类型是写在冒号后。

其次，如果要赋值，那么值的数据类型必须和变量的数据类型一致。

//错误的例子

i;//没有加var关键字，即没有声明变量，出错

i＝3;//没有加var关键字，出错

varj：

int=“StringValue”;//声明变量的数据类型为int，却赋予了一共字符串的值，出错

//正确的例子

vari：

int;//声明了一个int型变量，但没有赋值，只好使用默认值

vark：

int=100;//声明了一个int型变量，并赋值为100

varh;//声明变量h，但未指定类型，默认为untyped

varg：

*;//声明变量g，效果同上行

ActionScript3每行结尾不加上分号不会导致报错，但是为了代码标准化，应当加上。

而且某些ActionScriptIDE（开发环境）在写代码时就会将这种情况报错。

2.变量的命名

命名规则不仅仅是为了让编写的代码符合语法，更重要的是增强自己代码的可读性。

要做到自己看的清楚，别人看的明白。

◆尽量使用有含义的英文单词作为变量名（例如：

一个变量名为address，这个变量的存储就应该是地址。

）

◆变量名采用骆驼命名法（骆驼式命名法是指混合使用大小写字母来构成变量和函数的名字。

首字母小写，第二词的首字母大写）

◆变量名不能是ActionScript内部定义的保留字和关键字，ActionScript保留一些单词，专门用于本语言中，不能用于变量、函数名等的定义，常用的关键字有：

Break，for，new，var，Continue，function，return，void，Delete，if，this，while，Else，in，typeof，with，set，get，with，try，true，false，class，else，each，include，null，is，in，typeof，const

7.2.4ActionScript3中常用的数据类型

在ActionScript3中，经常要用到的数据类型主要有：

所有的基元数据类型（Boolean、int、uint、Number、String）和两种复杂数据类型（Array、Object）。

1.字符串（String）

字符串是一对用双引号包括起来的字母、数字、特殊字符的组合，如“HelloWorld！

”、“动画制作”等等。

引号内的字符是区分大小写的，字符串型数据能进行字符串连接运算。

如下语句：

“Iama”+“student.”//结果是：

“Iamastudent.”

2.布尔值（Boolean）

是用来表示真假的数据类型。

它只有两个值：

true（真）和false（假），如果值声明一个布尔类型的变量，没有给它赋值，默认是false。

（注意：

在之前的版本中默认是undefined）

3.数字（int、uint、Number）

在ActionScript3中表示数字值的数据类型很少，只有3种：

int、uint和Number。

其中int和uint是整形数值，专门用来处理整数，Number是用来处理浮点数。

int是有符号32位整型数，数值范围是：

－2147483648（负的2的31次方）～2147483648（正的2的31次方）

uint是没有符号的32位整型数，数值范围是0～4294967295，也就是0～232－1。

注意：

int、uint和Number的区别

能使用整数值时优先使用int和uint，整数值有正负之分时，请使用int。

只处理正整数，优先使用uint，处理和颜色相关的数值时，使用uint。

碰到或可能碰到小数点时用Number。

Number是64位浮点值。

4.数组（Array）

数组是可以做为数据的容器，它能包含更多的数据，每一个元素（数据中的一部分）都被附于一个索引。

数组的声明方式有以下几种：

vara：

Array//声明一个数组变量a，但还没有告诉a这个引用指向谁。

Trace得到null

varb：

Array＝[]//直接声明一个空数组b。

trace得到空白的显示，但不再是null了

varc：

Array＝newArray（）;//效果同b的方法

vard：

Array＝[1,2,3,4];//直接使用[]操作符，建立一个含有整数1,2,3,4的数组

vare：

Array=newArray（1,2,3,4）;//使用Array类来进行和d同样的操作

varf：

Array＝newArray（5）;//声明一个长度为5的空数组，此时每个数组元素都为空

访问数组中的元素，只需要知道元素的位置，就可以使用数组运算符（[]）来访问它。

比如d[0]、d[1]，索引0代表第一个元素，第二个元素的索引值为1，其余依次类推。

5.对象（Object）

对象数据类型包含大量复杂的信息，是ActionScript所有数据结构的基石，是面向对象编程思想的载体。

对象是属性的集合，每个属性都有名字和值。

属性值可以是任何一种FashCS3支持的数据类型，甚至是对象类型。

对象及其属性的设定需要使用（.）操作符。

点语法（·）用于设置对象或影片剪辑的属性和方法，它也用于标识指向影片剪辑或变量的目标路径。

一个点语法表达式以对象或影片剪辑的名字开始，后面跟着一个点，以属性、方法或者变量来结束，在这两组之间可以插入路径。

比如：

_x表示一个影片剪辑实例在X轴的位置，而newmc._x就是指出影片剪辑实例newmc的X轴位置。

又如：

在对象名的后面紧跟相应方法来指示对象做某一操作。

例如：

MC.play（）；//播放影片剪辑

7.2.5运算符、表达式及运用

编程语言必须要清楚描述如何进行数据运算，因此我们必须通过某种表达方式告诉电脑进行什么样的数据运算。

1.赋值运算符：

＝

2.算术运算符：

+、-、*、/、％（模）

3.算术赋值运算符：

+=、-=、*=、/=、%=，等价关系见表7-1

表7-1算术赋值运算符等价表达式表

运算符

运算符例子

等价表达式

+=

a+=b

a=a+b

-=

a-=b

a=a-b

*=

A*=b

a=a*b

/=

a/=b

a=a/b

%=

a%=b

a=a%b

4.关系运算符：

==、!

=、>=、<=、>、<

操作比较简单，不做多讲，注意其返回值为布尔值

5.逻辑运算符：

&&、||、!

逻辑运算符比较好理解，只包括3个运算符：

✧逻辑与（&&）：

当两边表达式都为true时，返回值为true

✧逻辑或（||）：

当两边表达式有一个值为true

✧逻辑非（!

）：

只有一个运算对象，在右边，其布尔值取反

7.2.6流程控制语句

程序流程是程序执行的方向，是语句执行的先后顺序。

ActionScript3中有三种结构的控制流程：

顺序、条件和循环。

任何复杂的程序都可有由这三种结构组成，这三种结构可以相互包含，嵌套使用。

1.顺序结构

顺序结构是程序最基本、最简单的结构，在分支结构和循环结构中也包含顺序结构。

在顺序结构中，程序按照语句出现的先后顺序依次执行，直到到达最后的语句。

顺序机构示意图如图7-1所示。

图7-1顺序结构示意图图7-2分支结构示意图

2.分之结构

分支结构是程序依据预先设定的条件成立与否，决定执行哪个分支，分支结构由if条件语句实现，分支结构也是也成条件结构。

分支结构的示意图如图7-2所示。

整个if条件语句的语法格式是：

if（条件）

{

代码段1

}elseif（条件2）

{

代码段2

}

……

else

{

代码段n

}

在if条件结构中，else选项可要也可不要。

当程序执行到if语句时，首先判断条件1是否成立，如果成立，则执行代码段1，然后退出条件结构，执行条件结构后面的语句；如果条件1不成立，依次判断条件2是否成立，如果成立，执行代码段2，退出条件结构，如果不成立，继续判断设定的其他条件；当设定的所有条件都不成立时，执行else后面的代码段n。

条件语句可嵌套使用，可就是上述代码段还可以再包含条件语句，此项功能使得用户能设计出更复杂条件的程序，只要用户愿意，完全可按照自己的要求来选择条件嵌套的层数。

3.循环结构

循环结构是程序依据预先设定的条件是否成立，反复执行相同的代码段，当条件不成立时，退出循环。

循环结构主要是用for语句和while语句实现。

循环结构示意图如图7-3所示。

图7－3循环结构示意图

◆for循环

for循环比较灵活，应用最为广泛，其循环结构如下：

for（初始化；循环条件；步进）

{

循环体

}

其中步进是指每一次循环时，对循环变量所做的变化。

例如，以下代码是计算result的结果是10！

＝3628800

varresult：

int＝1；

for（vari：

int＝1；i<=10；i++）

{

result=result*i;

}

◆while循环

while的中文意思就是“当……的时候”，所以while循环表示：

当条件满足表达式的时候再执行循环体。

它的结构如下：

while（循环条件）

{

循环体

}

使用前例for循环的实现的程序如下：

varresult：

int＝1；

vari：

int=1；

while（i<=10）

{

result=result*i;

i++；

}

无论是for循环还是while循环，设计时要注意死循环，所谓死循环就是用来作为判断的条件始终成立，程序将不停的循环，不能正常退出，导致异常情况发生；循环变量的边界值是最容易出错的，如循环变量的初值或终值设定不对，使得程序多循环或少循环，从而发生不可预料的结果。

以上两点在编程时要特别小心。

另外还有其它的循环语句如for…in，foreach…in，还有break、continue和switch的用法，对于初学者用的比较少，这里不再赘述，对编程感兴趣的同学可以参考网上的相关资料。

7.3“动作”面板的使用

若要创建嵌入到FLA文件中的脚本，可以直接将ActionScript输入到动作面板中。

执行“窗口”→“动作”或者按下F9，打开动作窗口，如图7-4所示。

图7-4“动作”面板

动作面板由三个窗格构成：

动作工具箱

（按类别对ActionScript元素进行分组）、脚本导航器

（使您可以快速地在Flash文档中的脚本间导航）和“脚本”窗格

（您可以在其中键入ActionScript代码）。

另外

处是面板选项菜单。

1.动作工具箱

要将ActionScript元素插入到“脚本”窗格中，可以双击该元素，或直接将它拖动到“脚本”窗格中。

动作工具箱将项目分类，并且还提供按字母顺序排列的索引。

2.脚本导航器

单击脚本导航器中的某一项目；与该项目关联的脚本将显示在“脚本”窗格中，并且播放头将移到时间轴上的相应位置。

双击脚本导航器中的某一项目可固定脚本（将其锁定在当前位置）。

3.“脚本”窗格

如果同时打开多个外部文件，文件名将显示在沿“脚本”窗口顶部排列的选项卡上。

在“脚本”窗口中，可以使用以下功能：

“添加”（+）菜单（类似动作工具箱）、查找和替换、语法检查、语法着色、自动套用格式、代码提示、代码注释、代码折叠、调试选项（仅限ActionScript文件）和自动换行。

使用“脚本”窗口还可以显示行号和隐藏字符。

“脚本”窗口不具有代码帮助功能，比如脚本导航器、“脚本助手”模式和行为。

这些功能只有在创建FLA文件时才有用，对创建外部脚本文件则没有帮助。

4.面板选项菜单

包含适用于动作面板的命令和首选参数。

例如，您可以设置行号和自动换行，访问ActionScript首选参数以及导入或导出脚本。

5.动作面板和脚本窗口中的工具

使用动作面板和“脚本”窗口的工具栏可以访问代码帮助功能，这些功能有助于简化在ActionScript中进行的编码工作。

根据您正在使用的是动作面板还是“脚本”窗口，工具会有所不同。

具体功能见表7-2。

表7-2动作面板和脚本窗口中的工具一览表

将新项目添加到脚本中

显示语言元素，这些元素也显示在“动作”工具箱中。

选择要添加到脚本中的项目。

查找

查找并替换脚本中的文本。

插入目标路径

帮助您为脚本中的某个动作设置绝对或相对目标路径。

语法检查

检查当前脚本中的语法错误。

语法错误列在输出面板中

自动套用格式

设置您的脚本的格式以实现正确的编码语法和更好的可读性。

在“首选参数”对话框中设置自动套用格式首选参数，从“编辑”菜单或通过“动作面板”菜单可访问此对话框。

显示代码提示

如果已经关闭了自动代码提示，可使用“显示代码提示”来显示您正在处理的代码行的代码提示。

调试选项

（仅限动作面板）设置和删除断点，以便在调试时可以逐行执行脚本中的每一行。

折叠成对大括号

对出现在当前包含插入点的成对大括号或小括号间的代码进行折叠。

折叠所选

折叠当前所选的代码块。

展开全部

展开当前脚本中所有折叠的代码。

应用块注释

将注释标记添加到所选代码块的开头和结尾。

应用行注释

在插入点处或所选多行代码中每一行的开头处添加单行注释标记。

删除注释

从当前行或当前选择内容的所有行中删除注释标记。

显示/隐藏工具箱

显示或隐藏“动作”工具箱。

脚本助手

（仅限动作面板）在“脚本助手”模式中，将显示一个用户界面，用于输入创建脚本所需的元素。

帮助

显示“脚本”窗格中所选ActionScript元素的参考信息。

面板菜单

包含适用于动作面板的命令和首选参数。

例如，您可以设置行号和自动换行，访问ActionScript首选参数以及导入或导出脚本。

6.使用代码提示

在“动作”面板或“脚本”窗口中工作时，软件可以检测到正在输入的动作并显示代码提示。

有两种类型的代码提示：

包含该动作的完整语法的工具提示和列出可能的ActionScript元素（如方法或属性名）的弹出菜单（有时被称为某种形式的代码完成）。

默认情况下启用代码提示。

通过设置首选参数，可以禁用代码提示或确定它们出现的速度。

如果在首选参数中禁用了代码提示，则仍可通过手动方式为特定命令显示代码提示。

首选参数设置：

◆在动作面板或“脚本”窗口中，选择“编辑”>“首选参数”（Windows）或“Flash”>“首选参数”（Macintosh），在“类别”列表中单击“ActionScript”，然后启用或禁用“代码提示”。

◆在面板菜单

（位于动作面板的右上角）中选择“首选项”，然后在ActionScript首选参数中启用或禁用“代码提示”。

7.4给对象添加动作

“动作”面板中可以为帧、按钮和影片剪辑设置动作，下面详细讲述三种添加动作的方法。

7.4.1给帧添加动作

给关键帧指定一个动作，以使电影在到达那一帧时做些事情，也是控制时间轴的动作。

常见的就是对时间轴的控制，对时间轴的控制一般使用play（）（播放）、GotoAndPlay（）（跳转到某一帧播放）、stop（）（停止）、GotoAndStop（）（跳转到某一帧停止）语句。

项目实例7-1：

让一个动画播放到最后一帧停止（到本教材的配套教学网站上下载实例素材和效果动画）

（1）打开实例源文件“庆祝国庆.fla”，在现有源文件的基础上再添加一个图层，命名为动作，如图7-6的

所示。

（2）选中动作图层中的最后一帧，按下F6创建关键帧

。

（3）然后执行“窗口”→“动作”或按下F9，打开动作窗口。

（4）然后双击动作工具箱中“全局函数”→“时间轴控制”