flash动画脚本技术(FAS程序设计项目化教程项目一)

项目一模拟Windows XP的启动
1.1 项目教学目标
∙能熟练掌握Flash Profeesion 8和Flash Action Script 2.0创建及测试交互动画程序文件。

∙能使用Flash Action Script 2.0脚本编辑器
∙能使用时间轴控制语句控制影片
∙掌握鼠标事件的使用
∙能使用简单条件语句
∙能使用时间轴控制语句
1.2 项目操作过程
（1）第1步：启动Flash Profession 8，选择菜单“文件→新建”命令，在弹出的“新建文档”窗口中，选择“常规”选项卡的“Flash文档”选项。

在新建的Flash文档中，再选择菜单“文件→保存”命令，在“另存为”窗口的“文件名”文本框中输入“WindowsXP”，再单击“保存”按钮。

（2）第2步：选中“舞台”，单击鼠标右键，在快捷菜单中选择“文档属性”，在“标题”文本框中输入“Windows xp启动与登录”，在“描述”文本框中输入“模拟Windows xp 启动与登录”，在“尺寸（宽）”文本框中输入“800”，在“尺寸（高）”文本框中输入“600”，设置完成后如图1-1所示。

图1-1 文档属性
（3）第3步：双击图层面板中的“图层1”，将“图层1”更名为“启动画面”。

（4）第4步：选择菜单“窗口→库”命令，单击选择“库”面板中的位图“xpstarting”，如图1-2所示。

图1-2 库面板
（5）第5步：按住鼠标左键将位图“xpstarting”拖放至舞台中。

选择位图“xpstarting”的属性面板，在“宽”文本框中输入“800”，在“高”文本框中输入“600”，在“X”文本框中输入“0”，“Y”文本框中输入“0”，设置完成后如图1-3所示。

图1-3 xpstarting属性面板
（6）选择菜单“控制菜单→测试影片”命令，影片运行结果如图1-4所示
图1-4 影片运行结果
（7）第6步：单击选择“库”面板中的影片剪辑“progressingbar_mc”，将其拖放至如
图1-5所示位置。

图1-5 影片剪辑“progressingbar_mc”的拖放位置
（8）第7步：将鼠标移动至“时间轴”面板第40帧处，选择“40”帧，单击鼠标右键，
在快捷菜单中选择“插入关键帧”。

如图1-6所示。

图1-6 插入关键帧
（9）第8步：将鼠标移动至“时间轴”面板第41帧处，选中“41”帧，单击鼠标右键，在快捷菜单中选择“插入空白关键帧”，在帧命名文本框输入帧标签“logon”，如图1-7所示。

图1-7 “41”帧属性面板
（10）第9步：按住鼠标左键将位图“login”拖放至舞台中。

选择位图“login”的属性面板，在“X”文本框中输入“0”，“Y”文本框中输入“0”。

（11）第10步：选择菜单“窗口→组件”命令，在“组件”窗口中用鼠标双击“User Interface”展开列表选择，按住鼠标左键选择“TextInput”输入文本框组件，如图1-8所示。

组件相关知识请阅读项目相关理论知识1.3.2。

图1-8 组件面板
（12）第11步：将“TextInput”输入文本框组件拖放至舞台中，用鼠标选择“TextInput”输入文本框的属性面板，在“组件”命名文本框中输入“passWord_txt”，在“宽”文本框中输入“161”，在“高”文本框中输入“29”，在“X”文本框中输入“496”，“Y”文本框中输入“262”，再用鼠标单击选择“参数”选项卡，选择“参数”面板中用鼠标选择中“password”右则的“下接列表”框，在列表框中选择“true”。

如图1-9所示。

图1-9 输入文本框的参数设置
（13）第12步：单击选择“库”面板中的按钮“go_btn”，将按钮“go_btn”拖放至舞台中。

用鼠标选择按钮“go_btn”的属性面板，在“X”文本框中输入“685”，“Y”文本框中输入“264”。

（14）第13步：单击“工具栏”中的文本工具按钮，用鼠标选择文本的属性面板，在“文本类型”下拉列表框中选择“动态文本”，将文本拖放在舞台中。

再次选择文本的属性面板，在“命名”文本框中输入“notation_txt”，在“X”文本框中输入“494.4”，在“Y”文本框中输入“293.4”，在“字体”下拉列表中选择“黑体”，在字号文本框中输入“12”，在颜色面板中选择“红色”，如图1-10所示。

文本使用知识请阅读项目相关理论知识1.3.3。

图1-10 输入文本框的属性设置
（15）第14步：在舞台用鼠标选择按钮，单击鼠标右键，在快捷菜单中选择“动作”。

（16）第15步：在“脚本”编辑器中，输入如下代码：
//当鼠标释放时，执行代码
on (release) {
//判断输入的密码是否为“123123”
if (_root.passWord_txt.text=="123123")
{
play();
}
else
{
_root.notation_txt.text="错识的密码（请注意
CapLock键是否大写锁定）";
}
}
代码完成后，脚本编辑器中的代码如图1-11所示。

脚本编辑器知识请阅读项目相关理
论知识1.3.3；按钮鼠标事件知识请阅读项目相关理论知识1.3.4；条件语句知识请阅读项目相关理论知识1.3.5；时间轴控件语句知识请阅读项目相关理论知识1.3.6。

图1-11 脚本编辑器中的代码
（17）第16步：将鼠标移动至“时间轴”面板第“41”帧处，选中“41”帧，单击鼠标右键，在快捷菜单中选择“动作”。

在“脚本”编辑器中，输入如下代码：
stop();
代码完成后如图1-12所示。

图1-12 第“41”帧代码的脚本编辑
（18）选择菜单“控制菜单→测试影片”命令，如果文本框中输入结果是“123123”，则影片跳到42帧运行；如果“密码”文本框中输入结果不是“123123”，影片结果如图1-13所示。

图1-13 密码输入错误提示
（19）第17步：将鼠标移动至“时间轴”面板第42帧处，选中“42”帧，单击鼠标右键，在快捷菜单中选择“插入空白关键帧”。

（20）第18步：选择菜单“窗口→库”命令，单击选择“库”面板中的位图“XPLOGGED”。

（21）第19步：按住鼠标左键将位图“XPLOGGED”拖放至舞台中，选择位图“XPLOGGED”的属性面板，在“宽”文本框中输入“800”，在“高”文本框中输入“600”，
在“X”文本框中输入“0”，“Y”文本框中输入“0”,设置完成后如图1-14所示。

图1-14 影片设置位图“XPLOGGED”
（22）第20步：选择菜单“窗口→库”命令，单击选择“库”面板中的影片剪辑“panel_mc”。

（23）第21步：按住鼠标左键将影片剪辑“panel_mc”拖放至舞台中。

选择影片剪辑
“panel_mc”的属性面板，在“X”文本框中输入“249”，“Y”文本框中输入“207”，设置完成如图1-15所示。

图1-15 影片设置影片剪辑“panel_mc”
（24）第22步：选择菜单“窗口→库”命令，单击选择“库”面板中的按钮“restart_btn”。

（25）第23步：按住鼠标左键将按钮“restart_btn”拖放至舞台中。

选择按钮“restart_btn”的属性面板，在“X”文本框中输入“287”，“Y”文本框中输入“276”。

（26）第24步：单击“工具栏”中的文本工具按钮，用鼠标选择文本的属性面板，在“文本类型”下拉列表框中选择“静态文本”，将文本拖放在舞台中。

再次选择文本的属性面板在“X”文本框中输入“271”，在“Y”文本框中输入“306”，在“字体”下拉列表中选择“华文细黑”，在字号文本框中输入“11”，在颜色面板中选择“白色”，在文本框输入“重启计算机”。

（27）第25步：选择菜单“窗口→库”命令，单击选择“库”面板中的按钮“logout_btn”。

（28）第26步：按住鼠标左键将按钮“logout_btn”拖放至舞台中，选择按钮“logout_btn”的属性面板，在“X”文本框中输入“377”，“Y”文本框中输入“276”。

（29）第27步：单击“工具栏”中的文本工具按钮，用鼠标选择文本的属性面板，在“文本类型”下拉列表框中选择“静态文本”，将文本拖放在舞台中。

再次选择文本的属性面板，在“X”文本框中输入“361”，在“Y”文本框中输入“306”，在“字体”下拉列表中选择“华文细黑”，在字号文本框中输入“11”，在颜色面板中选择“白色”，在文本框输入“注销计算机”。

（30）第28步：选择菜单“窗口→库”命令，单击选择“库”面板中的按钮“poweroff_btn”。

（31）第29步：按住鼠标左键，将“poweroff_btn”拖放至舞台中。

选择按钮“poweroff_btn”的属性面板，在“X”文本框中输入“467”，“Y”文本框中输入“276”。

（32）第30步：单击“工具栏”中的文本工具按钮，用鼠标选择文本的属性面板，在“文本类型”下拉列表框中选择“静态文本”，将文本拖放在舞台中。

再次选择文本的属性面板，在“X”文本框中输入“451”，在“Y”文本框中输入“306”，在“字体”下拉列表中选择“华文细黑”，在字号文本框中输入“11”，在颜色面板中选择“白色”，在文本框输入“关闭计算机”，三个按钮设置完成如图1-16所示。

图1-16 影片添加三个按钮
（33）第31步：在舞台用鼠标选择按钮，单击鼠标右键，在快捷菜单中选择“动作”。

（34）第32步：在“脚本”编辑器中，输入如下代码：
on (release)
{
gotoAndPlay(1);
}
（35）第33步：在舞台用鼠标选择按钮，单击鼠标右键，在快捷菜单中选择“动作”。

（36）第34步：在“脚本”编辑器中，输入如下代：
on (release)
{
gotoAndPlay("logon");
}
（37）第35步：在舞台用鼠标选择按钮，单击鼠标右键，在快捷菜单中选择“动作”。

（38）第36步：在“脚本”编辑器中，输入如下代码：
on (release)
{
fscommand("quit");
}
fscommand 函数知识请阅读项目相关理论知识1.3.7。

1.3 项目相关理论知识
1.3.1 Flash ActionScript简介
Flash ActionScript的中文意思是“Flash动作脚本语言”，它是Flash特有的内置语言并运行于Flash影片中。

它随Flash发展已经从1.0版本发展到3.0版本，目前用户主要还是使用2.0版本，本书介绍也是这个版本。

由于ActionScript的不断完善，使得Flash能创作出具有很强交互性的Web动画，大大增强了动画的可控制性，同时也让Flash动画魅力无限。

ActionScript与JavaScript结构类似，ActionScript同样拥有语法、变量、函数等，但是它的编程要容易得多，利用脚本编辑器可使每一行的代码都可以简单地从脚本面板中直接调用。

在任何时候，Flash还可以自动检查输入的ActionScript代码语法是否正确，并提示如何修改。

脚本编辑能非常方便地对脚本进行调试，检查每一个变量的赋值过程和检查带宽的使用情况。

利用ActionScript编写类文件并与影片剪辑的配合使用，让编程学习者更容易理解和掌握面向对象编程思想和技术，所以ActionScript也是面象对象程序初学者的良好工具。

ActionScript 2.0主要有以下功能：
(1).控制影片的播放顺序
在默认的情况下Flash影片是按帧的顺序进行播放动画。

通过ActionScript，用户就可以随心所欲地控制影片的播放内容与顺序。

(2).处理事件
事件是实现交互动画的基础，Flash Profession 8中支持多种事件，如：键盘事件、鼠标事件、影片剪辑事件等等。

(3).声音控件
ActionScript对声音的控制非常简易，用户方便的控制声音的播放、音量的大小、声道和播放指定的声音。

(4).支持面向对象编程(OOP)模型
ActionScript一个重大改进就是支持创建面向对象程序的模型，ActionScript实现了大部份面向对象功能，例如，类、继承、接口和包等等。

(5).程序调试功能强大
ActionScript允许用户设置断点并监视变量的变化，还提供创作工具和编译器能够提供编译器警告和错误消息，帮助用户更快捷迅速的调试程序。

(6).与服务器交互
Flash除了能制作出精彩夺目的网页动画和强大的交互动画，更让人惊叹的是本身具备与本地计算机和服务器进行交互的功能和程序接口。

ActionScript与ASP，和JavaScript的结合，正日益成为以半客户端为特征的新一代程序结构RIA（Rich Internet Application）的重要工具之一。

1.3.2 组件简介
组件（component）这个概念在各种开发工具都会涉及，它的本质就一个类，也就说用户选择某一组件，可以在舞台上创建这个组件的任意个组件对象。

对象管理小组（Object Management Group,OMG)的“建模语言规范”中将组件定义为：“系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。

一个组件代表一个系统中实现的物理部分，包括软件代码（源代码，二进制代码，可执行代码）或者一些类似内容，如脚本或者命令文件。

”
Flash中组件是带参数的影片剪辑，用户可以通过组件的属性面板或ActionScript修改它们的外观和行为。

组件既可以可见的用户界面控件，比如，在项目中的文本框，还有项目中未使用的单选按钮、复选框等等；组件还可以是不可视的，例如，FocusManager，它允许您控制应用程序中接收焦点的对象，这种二种组件的具体使用将在项目七做详细的介绍。

1.3.3 使用文本
在Flash Pressional 8.0使用用文本工具，用户可以创建三种类型的文本类型，并且所有的文本字段都支持Unicode。

(1).静态文本
静态文本（static text）类型是事先用户将文体设置好，在影片的播放后显示不会动态更改字符的文本，由于这种类型的文本没有名字，所以ActionScript无法控制它。

（2）动态文本
动态文本（dynamic text）类型是在影片的播放中根据用户设置相应的条件结果动态的显示的文本，动态文本可以接受ActionScript的控制，但在使用前通常要先命名。

动态文本在交互动画中使用非常频繁，在本书的中八个项目都使用了动态文本。

它的具体使用步骤如下：
①命名动态文本
在动态文命名框中输入文本，如图1-16所示。

图1-17 动态文本命名
②使用动态文本
在脚本就可以对已命名的动态文本进行控制了。

例如在项目一的代码：
_root.notation_txt.text="错识的密码（请注意CapLock键是否大写锁定）";
当代码执行到这条件语句时，动态文本将显示“错识的密码（请注意CapLock键是否大写锁定）”。

（3）输入文本
输入文本（Input text）类型是用户在影片的播放中接受用户随时输入文本，输入文本可以接受ActionScript的控制，但在使用前通常也要先命名。

1.3.4 脚本编辑器
脚本编辑器在“动作”面板的右边，用户可以在脚本编辑器中编写和编辑ActionScript。

脚本编辑器中界面如图1-18所示。

图1-18 脚本编辑器界面
(1).将新项目添加到脚本中
此按钮以分类列表显示ActionScript所有语言元素，用户只需在列表中选取所要的一项语言元素，选中语言元素则自动添加到脚本中。

(2).查找
此按钮方便用户在ActionScript 代码中查找和替换目标文本。

(3).插入目标路径
此按钮帮助用户在脚本中插入绝对或相对目标路径，绝对和相对目标路径我们在后面的项目中讨论。

(4).语法检查
此按钮帮助用户检查当前脚本中的是否存在语法错误，语法检查出来的错误结果将全部按序列在“输出”面板中。

(5).自动套用格式
此按钮帮助用户自动套用格式来设置脚本的格式以实现正确的语法和更好的可读性，用户选择只要选中要自动套用格的代码，然后点击“自动套用格式”按钮就可以完成格式的自动套用。

图1-19显示了自动套用格式之前和之后的结果。

图1-19 自动套用格式结果
(6).显示代码提示
用户在编辑ActionScript时，系统会自动显示代码提示，但是有时用户不小心会错过（比如在显示代码时，用户按了空格键）显示代码提示，这时用户就可以点击“显示代码提示”按钮手动显示代码提示。

(7).调试选项
此按钮帮助用户在脚本中设置或删除断点，那么在调试Flash影片时可以停止然后逐行跟踪脚本中的每一行。

(8).脚本助手
脚本助手可以提示用户输入所需ActionScript脚本语言元素，在“脚本助手”编辑模式中用户不可以直接在“脚本编辑”窗口中输入ActionScript脚本语言元素，而必需通过“脚本助手”编辑编辑。

脚本助手模式如图1-20所示。

图1-20 脚本助手模式
1.3.5 按钮及鼠标事件
影片剪辑(Movie Clip)、按钮(Button)和图形(Graphic)是Flash中的三大元件，按钮是通过响应鼠标事件（Event）来实现Flash交互动画。

按钮响应鼠标操作通过on函数来实现，语法格式如下：
on(鼠标事件类型)
{
处理语句1;
……
处理语句N;
}
鼠标事件类型可以是表1-1中任何一种类型
表1-1 鼠标事件类型
1.3.6 条件语句
条件语句（conditional statement）结构是三大程序结构之一。

其基本特点是:程序的流程由多路分支组成。

在程序的一次执行过程中，首先判断条件，根据条件结果只有一条支路被选中执行，而其他分支上的语句被直接跳过。

(1).if语句
if语句结构语法格式如下：
if (条件表达式)
{
处理语句1;
……
处理语句N;
}
if语句的流程图如图1-21所示。

图1-21 if语句的流程图
if语句对条件表达式进行计算以确定影片剪辑文件中的下一步动作。

如果条件为true，则影片执行运行条件后面大括号内的语句；如果条件为false，则影片将跳过大括号内的语句，执行运行大括号后面的语句。

例1-1：比较变量a和b的大小，当a大于b输出“a 大于b”。

a=3;
b=5;
if(a>b)
{
trace(“a 大于b”);
}
代码运行后，在输出面板中结果为: a 大于b
(2).if…else语句
if…else语法格式如下：
if (条件表达式)
{
处理语句1;
……
处理语句N;
}
else
{
处理语句1;
……
处理语句M;
}
if…else语句的流程图如图1-22所示。

图1-22 if…else语句流程图
if语句对条件表达式进行计算以确定影片剪辑文件中的下一步动作。

如果条件为true，则影片执行运行条件后面大括号内的语句；如果条件为false，则跳过if后面大括号的语句，执行else大括号后面的语句。

例1-2：比较变量a和b的大小，当a大于b输出“a 大于b”，当a小于或等于b输出“a小于或等于b”。

a=5;
b=7;
if(a>b)
{
trace(“a 大于b”);
}
else
{
trace(“a 小于或等于b”);
}
代码运行后，在输出面板中结果为:a小于或等于b
(3).关系运算符
条件表达式通常是由如表1-2所示的关系运算符连接。

表1-2 关系运算符
1.3.7 时间轴控制语句
Flash动画基本原理是基于时间轴来播放帧动画。

ActionScript提供一些简单易用时间轴控制语句对影片的播放和帧的播放顺序的控制。

常用的时间轴控件命令见表1-3。

表1-3 时间轴控制语句
1.3.8 fscommand函数
fscommand函数的功能是使影片文件与Flash播放器或装载Flash播放器的程序（如网页浏览器）之间进行通讯。

它的语法如下：
fscommand(命令, [参数])
命令与参数见表1-4。

表1-4 fscommand函数命令与参数
例1-3：设置影片全屏播放模式。

on(press)
{
fscommand("fullscreen", true);
}
当按钮被按下后，影片便会以全屏模式播放。

fscommand需要注意以下几点：
1．表1-4中描述的所有命令在Web播放器中无效。

2．表1-4中描述的所有命令在独立的应用程序（例如，可执行的影片文件）中有效。

3．表1-4中描述的所有命令只有allowscale和exec在测试影片播放器中有效。

项目一中“关闭计算机”按钮的释放按钮事件处理代码为“fscommand("quit")；”，代码在播放器和Web浏览中并没有效果，只有把影片转换成可执行的影片（扩展名为.exe）后，按下“关闭计算机”按钮就可以关闭影片。

1.4 专业英语
1．专业词汇
Movie Clip 影片剪辑Button 按钮Graphic 图形Event 事件
Action 动作Script 脚本Component 组件Statement 语句
Conditional Statement 条件语条OOP（object-oriented program）面向对象程序2．专业英语原文
Script Assist mode prompts you to enter the elements of a script,and helps you to add simple interactivity to you SWF file(a compressed version of a Flash .fla file with the .swf extension) or application more easily.Script Assist mode is ideal for users who either aren’t comfortable writing their own scripts,or who just appreciate the ease of use the tool provides。

“脚本助手”模式将提示用户输入脚本语言元素，有助于用户更轻松地向SWF文件（它是flash .fla文件一个压缩版本，扩展名为.swf）或应用程序中添加简单交互性脚本语言。

对于那些不喜欢编写自己的脚本，或者那些喜欢利用工具带来的简便性的用户来说，“脚本助手”模式是理想的选择。

3．中英图片对照
以下两张图片是“文档属性”属性面板的中英版本截图，如图1-23和图1-24所示。

图1-22 “文档属性”英文版截图
图1-23 “文档属性”中文版截图
1.5 练习题
理论练习题：
1.Flash Professional 8默认的帧频是（）FPS。

A.4
B.8
C.12
D. 16
2.（）键可以快速打开库面板。

A.Ctrl+L
B.Ctrl+K
C. Ctrl+H
D. Ctrl+P
3.（）键可以快速测试影片。

A.Ctrl+Alt+Enter
B.Ctrl+Enter
C. Alt+Home
D. Alt+Enter
4.有一个影片剪辑实例“progressingbar_mc”是一个不断从左到右移动的进度条，命名为“p_mc”并置于舞台上，用户使用代码（）可以使它停止播放。

A.stop( )
B.progressingbar_mc.stop( )
C._root.p_mc.stop( )
D._root. progressingbar_mc.stop( )
5.修改输入文本框属性面板中的( )属性可以使输入文本时以“*”号显示。

A.Text
B.Editable
D. Password
6.以下那个( )不属于文本的类型。

A．密码文本 B.动态文本 C.输入文本 D.静态文本
7.代码“on (release)”能于（）对象
A.鼠标
B.键盘
C.位图
D.图形
8.Flash正在成为_________结构应用程序的开发利器。

9. _____________语句可以使用影片全屏播放。

10.nextFrame()的语句的功能是__________。

11.简述ActionScript 2.0的主要功能
12.专业英语翻译
(1).Click the Selection tool in the Tools panel.
_________________________________________________________________
(2).On the Timeline,select the “menu and button”layer.
If the layer is locked,unlock it
___________________________________________________________________
(3) In the upper-right corner of the Stage,select the Home button.
___________________________________________________________________
(4).In the Actions panel,you’ll see the Script Assist button above the ActionScript editor.
___________________________________________________________________
(5).To add a function to the button,Click add on the toolbar.
___________________________________________________________________
上机操作题：
1．假如一个影片剪辑是一个上下弹跳的小球，名字为myBall,有三个按钮可以控制它，如下图1-24如示，按钮从左到右排列，第一个按钮使小球处于弹跳状态，第二个按钮使小球处于静止状态，第三个按钮使用小球处于不可见状态,试编写这个三个按钮的程序来实现相应功能。

1-24 “跳动的球”效果图
2.改进项目一，通过“开始”菜单实现注销和关机功能。