《Flash项目实践教程》课件 07- 二维交互动画的程序设计

Part7

项目7二维交互动画的程序设计

狭路相逢勇者胜勇者相逢智者胜智者相逢德者胜德者相逢道者胜目标概述学习要求本章将介绍FlashCC中ActionScript3.0的基本概念、相关术语、基本语法及“动作”面板、“代码片断”面板的基本概念和应用方法，为应用ActionScript3.0制作动画特效和动态交互打下基础。学习目标

学习目标知识点了解理解掌握应用ActionScript简介

案例1ActionScript3.0的相关术语（动作、参数、类、构造器、数据类型、对象、属性、事件、方法、关键字、实例名的基本概念）

案例1ActionScript3.0的语法基础（ActionScript3.0的数据类型、变量、常用运算符、创建和调用函数）

案例1、案例2认识“动作”面板

案例1认识“代码片断”面板

案例2学习目标

知识导航图7-1第7章知识导航图制作“跟随鼠标移动的星星”动画效果任务7-1案例效果任务7-1制作“跟随鼠标移动的星星”动画效果案例分析制作“跟随鼠标移动的星星”动画主要应用创建新层、创建元件、类设置、Action编程等知识来完成。通过本案例的制作，能够深刻理解动画中ActionScript3.0的应用方法。“跟随鼠标移动的星星”动画效果任务7-1

制作“跟随鼠标移动的星星”动画效果制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤1执行“文件”→“新建”命令，弹出“新建文档”对话框，设置如图7-3所示。单击“确定”按钮，新建Flash文档。导入本章素材图像“素材\背景.jpg”，如图7-4所示。任务7-1制作“跟随鼠标移动的星星”动画效果图7-3“新建文档”对话框图7-4导入素材制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤2选择“插入”→“新建元件”命令，弹出“创建新元件”对话框，设置如图7-5所示。单击“确定”按钮，使用Flash中的绘图工具在舞台中绘制出星星图形，如图7-6所示。任务7-1制作“跟随鼠标移动的星星”动画效果图7-5“创建新元件”对话框图7-6绘制星星图形制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤3返回“场景1”编辑状态，在“库”面板中的star元件上单击鼠标右键，即可在弹出的菜单中选择“属性”选项，弹出“元件属性”对话框，单击“高级”，设置“类”选项为Star，如图7-7所示，单击“新建图层”按钮

，新增一个“图层2”，“时间轴”面板如图7-8所示。任务7-1制作“跟随鼠标移动的星星”动画效果图7-7设置“类”选项图7-8“时间轴”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤4打开“动作”面板，输入相应的ActionScript脚本代码，代码如下：任务7-1制作“跟随鼠标移动的星星”动画效果制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤5完成该动画的制作，执行“文件”→“保存”命令，按快捷键Ctrl+Enter，测试动画，效果见图。任务7-1制作“跟随鼠标移动的星星”动画效果“跟随鼠标移动的星星”动画效果相关知识1.ActionScript简介ActionScript1.0从Flash5开始，首次在Flash软件中引入了ActionScript1.0脚本语言，ActionScript1.0脚本语言具备ECMAScript标准的语法格式和语义解释，主要应用于帧的导航和鼠标的交互。ActionScript2.0从FlashMX版本开始引入了ActionScript2.0脚本语言，ActionScript2.0脚本语言的编写方式更加成熟，在ActionScript2.0脚本语言中引入了面向对象的编程方式，具有变量的类型检测和新的class类语法。到目前为止，ActionScript2.0脚本语言依然在Flash动画制作中广泛运用。ActionScript3.0从FlashCS3版本开始引入了全新的ActionScript3.0脚本语言，ActionScript3.0脚本语言与ActionScript1.0和2.0有着很大的差别，ActionScript3.0全面支持ECMA4的语言标准，并具有ECMAScript中的Package、命名空间等多项ActionScript2.0所不具备的特点。ActionScript是Flash的脚本程序语言，简称AS。在ActionScript语言版本方面，截止到目前为止共有3个版本任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识2.ActionScript3.0的相关术语（1）动作（Action）动作是指Flash动画播放时执行的某些操作语句。（2）参数（Parameter）参数是存储信息的容器，并被传送给语句或函数。（3）类（Class）类是影片中信息的类目。每个对象都属于一个类，并且是这个类的一个实例。（4）构造器（constructor）构造器用于创建基于类的对象函数。这种函数具有的自变量可以给出对象所属的类的专用的属性。（5）数据类型（DataType）数据类型是描述变量或动作脚本元素可以存储的信息种类。ActionScript中有两种数据类型：原始数据类型和引用数据类型。

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识

（6）对象（Object）、属性（Property）、事件（Event）、方法（Method）对象是实例化的类，是属性和方法的集合。属性是对象内部的变量。事件是对象能接收到的外部动作的集合。方法是与类关联的函数，用于完成对象的某些动作。（7）关键字（Keyword）关键字是具有特殊意义的保留字。ActionScript在语言中保留了若干关键字，用户不能使用关键字作为变量名、函数名或标签名。默认的关键字在动作面板中是深蓝色，且区分大小写。（8）实例名（InstanceName）实例名是脚本中唯一标识对象的名字。任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识3.ActionScript3.0的语法基础同其他语言一样，ActionScript也拥有自己独特的语法集，其中包括了很多基本组成元素。（1）ActionScript3.0的数据类型ActionScript中的数据类型可以划分为以下几种：①字符串型如果一个值被引号所包含，那么这个值的数据类型就是字符串。如果一个表达式涉及了字符串数据类型，它的数据类型也是字符串。②数值型数值型，即双精度浮点数，用于算术运算。③布尔型布尔值是真与假。在某些时候布尔真为1，布尔假为0；一般情况下非0为布尔真，0为布尔假。④对象对象是ActionScript中新增类型，可以使用“new”声明一个对象类型。⑤影片剪辑影片剪辑是Flash中重要的元件类型之一，也是Flash中重要的程序核心。⑥未定义值在ActionScript3.0中，要求必须为所有的变量、参数和返回值定义数据类型。如果一个函数引用了未在其他地方定义的变量，那么FlashCC在默认情况下会给出一个警告。任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果相关知识

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果（2）ActionScript3.0的变量①变量名变量名必须是一个ActionScript标识符，变量不能使用关键字或者逻辑常量（true、false）②变量类型在ActionScript3.0中声明变量时，需要使用var关键词。用“：”号定义变量类型，用“=”号给变量赋值。③变量的作用域在ActionScript3.0中，包含两种变量，分别是局部变量和全局变量，全局变量在整个动画的脚本中都有效，而局部变量则只在它自己的作用域内有效。相关知识

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-1制作“跟随鼠标移动的星星”动画效果（3）ActionScript3.0的常用运算符①数值运算符数值运算符可以执行加法、减法、乘法、除法运算等。②比较运算符比较运算符用于比较表达式的值，然后返回一个布尔值。③逻辑运算符逻辑运算符是对布尔值进行运算，返回一个布尔值。逻辑运算主要有“与”运算符（&&）、“或”运算符（||）和“非”运算符（!）。④位运算符位运算符用于内部处理浮点数，将二进制的数据进行按位操作。⑤点运算符点运算符用于访问结构的成员。（4）创建和调用函数在ActionScript3.0中，用户可以直接调用已有的内置函数，也可以创建自定义的函数，然后进行调用。任务7-1制作“跟随鼠标移动的星星”动画效果相关知识4.认识“动作”面板选择“窗口”→“动作”命令，便可以打开“动作”面板。用户可以看到面板由两部分组成。左侧部分是一个“动作”工具箱，每个动作脚本语言在该工具箱中都有一个对应条目，右侧部分是脚本窗格，这是输入代码的区域按下快捷键F9，可以切换显示与隐藏“动作”面板。“动作”面板由三个窗格构成：动作工具箱（按类别对ActionScript元素进行分组）、脚本导航器（快速地在Flash文档中的脚本间导航）和脚本窗格（可以在其中输入ActionScript代码）。工具栏中包括了创建代码时常用的“插入实例路径和名称”（在该对话框中可以选择需添加动作脚本的对象）、“查找”（可对脚本编辑窗格中的动作脚本内容查找替换）、“代码片段按钮”（打开代码片段对话框，实现常见交互功能）、“帮助按钮”（查看对动作脚本的用法、参数和相关说明等）。任务7-1制作“跟随鼠标移动的星星”动画效果相关知识4.认识“动作”面板在打开“动作”面板后，用户可以看到面板由两部分组成。左侧部分是一个“动作”工具箱，每个动作脚本语言在该工具箱中都有一个对应条目，右侧部分是脚本窗格，这是输入代码的区域。图7-9“动作”面板

制作“调用外部动画”动画效果任务7-2案例效果任务7-1制作“跟随鼠标移动的星星”动画效果案例分析制作“跟随鼠标移动的星星”动画主要应用创建新层、创建元件、类设置、Action编程等知识来完成。通过本案例的制作，能够深刻理解动画中ActionScript3.0的应用方法。“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤1执行“文件”→“新建”命令，弹出“新建文档”对话框，设置如图7-11所示。单击“确定”按钮，新建Flash文档。任务7-2制作“调用外部动画”动画效果图7-11“新建文档”对话框制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤2选择“矩形工具”，打开“属性”面板，设置填充为深蓝色，笔触无颜色，如图7-12所示。单击“确定”按钮，使用Flash中的矩形工具在舞台中绘制出矩形图形，如图7-13所示。任务7-2制作“调用外部动画”动画效果图7-13绘制矩形图7-12“属性”面板设置制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤3选择“文本工具”，打开“属性”面板，设置如图7-14所示，添加“播放动画”文字，舞台效果如图7-15所示。任务7-2制作“调用外部动画”动画效果图7-15添加文字图7-14设置“属性”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤4选中舞台的矩形，打开“代码片断”面板，展开“加载和卸载”选项，如图7-16所示。任务7-2制作“调用外部动画”动画效果图7-16选中矩形并打开“代码片断”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤5双击“代码片断”面板的“单击以加载/卸载SWF或图像”选项，为当前所选择的对象应用该代码片断，此时会弹出提示对话框，如图7-18所示。提示：因为此处所选择的对象不是影片剪辑元件或者TIF文本对象，因此在应用该代码片段时，Flash会自动给要求将该对象转换为影片剪辑元件并创建实例名称。任务7-2制作“调用外部动画”动画效果图7-18提示对话框制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤6单击“确定”按钮，Flash会自动将该对象转换为影片剪辑元件并设置实例名称，“属性”面板如图7-18所示，修改元件类型为“按钮”，如图7-19所示。任务7-2制作“调用外部动画”动画效果图7-18“属性”面板图7-19修改后“属性”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤7同时“时间轴”面板会自动增加一个名为“Actions”图层，如图7-20所示，在“动作”面板中会自动添加所选择的代码片断，如图7-21所示。任务7-2制作“调用外部动画”动画效果图7-20“时间轴”面板图7-21修改后“属性”面板制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤8在“动作”面板的ActionScript代码中，修改相应的代码，如图7-22所示。提示：在修改加载文件时要注意，加载的文件路径可以是绝对路径的文件，也可以是相对路径的文件，此处所加载的文件与该SWF文件位于同一文件夹中，所以直接填充需要加载的文件名即可。如果文件的来源于调用的SWF所在的域不同，则需要进行特殊配置才可以加载这些文件。任务7-2制作“调用外部动画”动画效果图7-22修改的代码制作步骤任务7-1制作“跟随鼠标移动的星星”动画效果步骤9完成该动画的制作，执行“文件”→“保存”命令，按快捷键“Ctrl+Enter”，测试动画，效果见图。任务7-2制作“调用外部动画”动画效果

“调用外部动画”动画效果相关知识1.认识“代码片断”面板执行“窗口”→“代码片断”命令，打开“代码片断”面板，在该面板中FlashCC预置了多种不同类型的ActionScript脚本代码，如图7-23所示通过使用“代码片断”面板，主要可以实现如下的功能：（1）添加能影响对象在舞台上行为的代码。（2）添加能在时间轴中控制播放头移动的代码。（3）将用户创建的新代码片断添加到面板中。其实使用Flash附带的代码片断也是ActionScript3.0入门的一种好途径。通过学习代码片断中的代码，并遵循片断说明，有助于了解ActionScript3.0的代码结构。使用“代码片断”面板不需要ActionScript3.0的知识，就可以轻松地将ActionScript3.0代码添加到FLA文件，以启用常用功能。这对于ActionScript新手，或者希望无须学习ActionScript语言，就能够添加简单的交互功能的设计者来说，是非常实用的一个功能。任务7-1制作“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果相关知识任务7-1制作“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果通过使用“代码片断”面板，主要可以实现如下的功能：（1）添加能影响对象在舞台上行为的代码。（2）添加能在时间轴中控制播放头移动的代码。（3）将用户创建的新代码片断添加到面板中。需要注意的是，所有这些附带的代码片断都是ActionScript3.0的，ActionScript3.0与ActionScript2.0并不兼容。如果创建的Flash文档时基于ActionScript2.0的，因为FlashCC已不再支持ActionScript2.0，则在打开Flash源文件时，会弹出提示对话框，提示对ActionScript3.0不支持的内容进行转换，如图7-25所示。图7-25提示对话框相关知识2.ActionScript3.0的相关术语（1）动作（Action）动作是指Flash动画播放时执行的某些操作语句。（2）参数（Parameter）参数是存储信息的容器，并被传送给语句或函数。（3）类（Class）类是影片中信息的类目。每个对象都属于一个类，并且是这个类的一个实例。（4）构造器（constructor）构造器用于创建基于类的对象函数。这种函数具有的自变量可以给出对象所属的类的专用的属性。（5）数据类型（DataType）数据类型是描述变量或动作脚本元素可以存储的信息种类。ActionScript中有两种数据类型：原始数据类型和引用数据类型。

任务7-1制作“跟随鼠标移动的星星”动画效果任务7-2制作“调用外部动画”动画效果项目小结本章介绍了FlashCCProfessional中ActionScript3.0的基本概念、相关术语、基本语法及【动作】面板、“代码片断”面板的基本概念和应用方法，对ActionScript3.0有了初步的认识。任务7-1制作“跟随鼠标移动的星星”动画效果项目小结1.ActionScript简介ActionScript是一种基于ECMAScript的编程语言，用来编写AdobeFlash电影和应用程序。ActionScript1.0最初随Flash5一起发布，这是第一个完全可编程的版本。Flash6增加了几个内置函数，允许通过程序更好地控制动画元素。在FlashMX中引入了ActionScript2.0，这是一种强类型的语言，支持基于类的编程特性，比如继承、接口和严格的数据类型。Flash8进一步扩展了ActionScript2.0，添加了新的类库以及用于在运行时控制位图数据和文件上传的API。FlashPlayer中内置的ActionScriptVirtualMachine（AVM1）执行ActionScript。通过使用新的虚拟机ActionScriptVirtualMachine（AVM2），FlashCS3（附带ActionScript3）大大提高了性能。。2.ActionScript3.0的相关术语ActionScript3作为一种功能强大的脚本编辑语言，具有很多的组件。了解这些术语及它们在ActionScript中是如何结合的非常重要。本章主要讲解了动作、参数、类、构造器、数据类型、对象、属性、事件、方法、关键字、实例名相关术语的基本概念。任务7-1制作“跟随鼠标移动的星星”动画效果项目小结项目小结3.ActionScript3.0的语法基础与其他程序开发语言类似，ActionScript3.0具有语法和标点规则，本章针对ActionScript3.0的数据类型、变量名的设置、变量类