ActionScript一直以来都是Flash软件中的一个重要模块,特别是在FlashCS5中,对这一模块的功能进一步进行了加强,其中包括重新定义了ActionScript的编程思想,增加了大量的内置类,程序的运行效率更高等。在本章中,将介绍ActionScript3.0的基本语法和编程方法,并通过实例了解几个常用内置类的使用方法。
学习目标:
了解ActionScript3.0的基本语法
掌握一些常见特效的制作方法
掌握代码的书写位置及方法
掌握类的使用及扩展方法
7.1ActionScript3.0简介
ActionScript3.0是最新且最具有创新性的ActionScript版本,它是针对AdobeFlashPlayer运行环境的编程语言,可以实现程序交互、数据处理以及其他许多功能。
ActionScript3.0相比于早期的ActionScript版本具有以下特点。
使用全新的字节码指令集,并使用全新的AVM2虚拟机执行程序代码,使性能显着提高,其代码的执行速度可以比旧式ActionScript代码快10倍。
具有更为先进的编译器代码库,严格遵循ECMAScript(ECMA262)标准,相对于早期的编译器版本,可执行更深入的优化。
使用面向对象的编程思想,可最大限度地重用已有代码,方便创建拥有大型数据集和高度复杂的应用程序。
ActionScript3.0的代码只能写在关键帧上或由外部调入,而不能写在元件上。
7.2ActionScript3.0的基本语法
在ActionScript3.0代码编写过程中,需要遵循的基本语法规则主要有以下几点。
1.区分大小写
ActionScript3.0中大小写不同的标识符被视为不同。例如,下面的代码创建的是两个不同的变量:
varnuml:int;
varNuml:int;
2.点运算符
可以通过点运算符(.)来访问对象的属性和方法。例如有以下类的定义:
该类中有一个name属性和一个methodl方法,借助点语法,并通过创建一个实例来访问相应的属性和方法:
3.字面值
“字面值”是指直接出现在代码中的值。下面的示例都是字面值:
4.分号
可以使用分号字符(;)来终止语句。若省略分号字符,则编译器将假设每一行代码代表一条语句。若使用分号来终止语句,代码会更易于阅读。使用分号终止语句还可以在一行中放置多个语句,但是这样会使代码变得难以阅读。
5.注释
ActionScript3.0代码支持两种类型的注释:单行注释和多行注释,编译器将忽略注释中的文本。
单行注释以两个正斜杠字符开头并持续到该行的末尾。例如,下面的代码包含两个单行注释:
7.3ActionScript3.0常用的内置类
FlashCS5中提供了大量的ActionScript3.0内置类,对于一般的初级用户,了解并掌握一些常用内置类的用法就是足以应对日常Flash设计开发的需要。本节就将使用到几个常用内置类,在设计开发Flash作品的同时,介绍类、属性、方法等的使用方法和编程技巧。
7.3.1知识准备
工欲善其事,必先利其器。在开始实例制作之前,首先对将要用到的重要方法和关键知识点进行学习,才能给更好地读懂并掌握案例的制作方法。
1.获取时间
ActionScript3.0对时间的处理主要通过Date类来实现,通过以下代码初始化一个无参数的Date类的实例,便可得当前系统时间。
通过点运算符调用对象now中包含的getHours、getMinutes、getSeconds方法便可得到当前时间的小时、分钟和秒的数值。
2.指针旋转角度的换算
(1)对于时钟中的秒针,旋转一周是60s即360°,每转过一个刻度是6°。用当前秒数乘上6便得到秒针旋转角度。
(2)对于分针,其转过一个刻度也是6°,但为了避免每隔1min才跳动以下,所以设计成每隔10s转过1°。
其中int(second/10)表示用秒数除以10后取其整数,结果便是每10s增加1.
(3)对于时针,旋转一周是12h即360°,但通过getHours得到的小时数值为0~23,所以先使用“hour%12”将其变化范围调整为0~11(其中“%”表示前数除以后数取余数)。
时针每小时要旋转30°,同样为了避免每隔1h才能跳动一下,设计成每2min旋转1°。
3.元件动画设置
根据计算所得数值,通过点运算符访问并设置实例的rotation属性便可以形成旋转动画。
实例名.rotation=计算所得数值;
4.添加事件
ActionScript3.0事件通过addEventListener方法来添加,一般格式如下。
接收事件对象.addEventListener(事件类型.事件名称,事件响应函数名称);
function事件响应函数名称(e:事件类型)
此处是为响应事件而执行的动作。
若是对时间轴添加事件,则使用this代替接收事件对象或省略不写。
5.算法分析
设一个变量index,要让index在0~n-1之间从小到大循环变化,则可使用如下算法。
表示index=index+1,即变量自加1
表示取余数
若要让index在0n-1之间从大到小循环变化,则使用如下算法:是index=index+(n-1)的缩写形式index=index%n;
7.3.2典型案例-制作精美时钟动画本案例将制作一个日常生活中常见的物品-时钟,它不但具有漂亮的外观,而且可以精确指出当前的系统时间。其控制代码较少,且简单易懂,是作为ActionScript3.0入门学习的最佳选择。设计思路包括制作时钟外壳和阴影、制作表盘元素、制作指针和转轴、绘制玻璃罩添加控制代码。设计效果如图7-1所示效果。
具体的操作过程如下。
1.创建图层
(1)新建一个Flash文档,文档属性使用默认参数。
(2)创建9个图层,从上到下依次重命名为“AS3.0”
层、“玻璃罩”层、“转轴”层、“秒针”层、“分针”层、“时针”层、“表盘”层、“外壳”层和“阴影”层。
2.制作时钟外壳
(1)选择“外壳”层,利用“椭圆工具”在舞台中绘制一个宽、高分别为“200×200”像素的圆形,在【颜色】面板中设置其笔触为“无”,填充颜色的类型为“放射状”,从左至右第1个色块颜色为“E86C28”,第2个色块颜色为“FFD8C0”,如图7-2所示。
(2)利用【对齐】面板将绘制的圆形与舞台居中对齐,然后使用“渐变变形工具”调整填充的大小和中心位置。
(3)复制绘制的圆形,粘贴到当前位置,调整其宽、高为“170×160”像素并与舞台居中对齐,使用“渐变变形工具”调整其填充中心到左上角。
(4)再次执行一次粘贴操作创建第3个圆形,调整其宽、高为“160×160”像素,并与舞台居中对齐,设置其填充颜色为“FFCC00”。
(5)使用“矩形工具”在舞台上方绘制一个宽、高为“25×10”
像素的矩形,设置其笔触颜色为“无”,填充颜色为“放射状”,调色器中的设置与第(1)步中的设置相同。保持相同的设置,再绘制一个宽、高分别为“8×20”像素的矩形。分别将两个矩形与舞台水平中齐,然后将两个矩形上下组合到一起。
(6)保持相同达到笔触和填充设置,在舞台右绘制一个宽、高为“10×100”像素的矩形,并使用“选择工具”将矩形的顶部调整成弧形。
(7)使用“椭圆工具”在矩形上绘制一个宽、高为“105×90”像素的椭圆对象,利用“选择工具”双击椭圆对象进入其内部,选择下半部分椭圆删除,利用“渐变变形工具”将填充中心移到剩余部分的中心。
(8)将矩形与椭圆的中心对齐后,组合在一起。然后将其顺时针旋转35°。
(9)再使用“椭圆工具”绘制一个宽、高为“80×50”像素的椭圆,使用“渐变变形工具”将填充中心移到右下角,然后将其顺时针旋转45°效果如图7-3所示。
(10)利用“选择工具”同时选择右侧的两个对象,按Alt键在舞台左侧复制一组图形,然后选择【修改】→【变形】→【水平翻转】菜单命令。
(11)同时选择圆形外壳周围的5个元素,然后选择【修改】→【排列】→【移至底层】
菜单命令,最后调整各元素的位置。
3.制作阴影效果
(1)选择“阴影”层。使用“椭圆工具”绘制一个宽、高分别为“265×40”像素的椭圆,在【颜色】面板中设置笔触颜色为“无”,填充颜色为“放射状”,左侧色块颜色为“666666”,右侧色块为“666666”且其【Alpha】值为0%,如图7-4所示。
(2)使用“渐变变形工具”调整其填充形状,并调整椭圆的位置,如图7-5所示。
4.制作表盘元素
(1)选择图层“表盘”,选择“直线工具”,设置笔触高度为“1”,按住Shift键绘制一条水平直线,利用【对齐】面板将其与舞台居中对齐,然后打开【变形】面板,将旋转角度设为“6°”,单击按钮复制并应用变形,复制出一圈刻度线,如图7-6所示。
(2)选择“椭圆工具”,将填充设为“无”,绘制出两个直径分别为“155”和“145”的圆形并与舞台居中对齐,效果如图7-7所示。
(3)选择该图层的所有直线和圆,按Ctrl+B键将其分离,然后选择周围和内部的直线段及圆周线段删除,最终剩下时钟的刻度线。选择整点方向的刻度线,将其笔触高度设为“4”。
(4)选择“文本工具”,设置字体为“Arial”,大小为“18”,颜色为“黑色”,在舞台中分别输入数字“1”~“12”并调整其位置。
5.制作指针和转轴
(1)选择图层“时针”,选择“多角星形工具”,在【属性】面板中单击【选项】按钮,打开【工具设置】对话框,设置边数为“3”,绘制一个宽为“6.5”的三角形,设置笔触颜色为“无”,填充颜色为“FF6666”,然后复制、粘贴到当前位置并水平翻转,调整位置使两个三角形底边重合,调整复制后的三角形的填充颜色为“FF9900”,最后调整三角形顶点。
(2)选择绘制的指针,按F8键将其转换名为“指针”的影片剪辑元件,转换时将其注册点设在下方,如图7-8所示。调整指针位置,将元件最下端位于表盘中心,并在【属性】面板中设置其实例名称为“handhour”,如图7-9所示。
(3)复制“指针”元件,选择图层“分针”,将元件粘贴到当前位置,然后适当增加其长度并减小其宽度,调整过程中保证元件最下端位于表盘中心。最后设置元件的实例名称为“hand-minute”。
(4)选择“秒针”层,选择“直线工具”,从表盘中心向上绘制一条直线,设置直线颜色为“红色”,笔触高度为“2”。按F8键将其转换为名为“秒针”
的影片剪辑元件,同样设置注册点位于下方。最后设置其实例名称为“hand-second”。
(5)选择图层“转轴”,选择“椭圆工具”,绘制一个宽、高为“10×10”像素的圆形,设置其笔触颜色为“无”,填充颜色为”FF9900“并与舞台居中对齐。再绘制一个宽、高为“4×4”
像素的圆,设置其填充颜色为“白色”并与舞台居中,完成转轴绘制,如图7-10所示。
6.绘制玻璃罩
(1)选择图层“玻璃罩”,使用“椭圆工具”,在舞台中绘制一个宽、高为“165×165”像素的圆,在【颜色】面板中设置其笔触颜色为“无”,填充颜色为“放射状”,从左至右第1个色块颜色为“白色”,且其“Alpha”值为0%,第2个色块颜色为“白色”,且其“Alpha”
值为60%。
(2)利用【对齐】面板将圆与舞台居中对齐,利用“渐变变形工具”调整其填充中心和大小。
(3)复制圆并粘贴到当前位置,调整其宽、高为“150×150”像素并与舞台居中对齐,在【颜色】面板中将第1个色块向右移动一点位置,如图7-11所示。使用“渐变变形工具”调整填充中心和大小,如图7-12所示。
(4)最后同时选中两个圆,按Ctrl+B键将其分离,使两圆组合到一起形成玻璃罩。
7.输入控制代码
(1)选择图层“AS3.0”第1帧,按F9键打开【动作】面板,在此输入控制代码。
(2)初始化变量并得到当前时间。
最后在所有图层的第2帧插入帧,保存并测试影片,一个精美的时钟制作完成。
通过本案例的学习,除了掌握一个时钟的制作步骤,还可了解一些制作技巧,如阴影的绘制、表盘刻度线的制作、玻璃效果的制作等。通过控制代码可以掌握对象的初始化、方法的调用、实例属性值的设置等。
7.3.3典型案例-制作时尚MP3动画
本案例将制作一款具有时尚外观的MP3播放器,用它可以播放本地音乐或网络歌曲,播放过程中将显示音乐的加载进度和播放进度,此款MP3播放器还具有控制音量的大小、暂停或重新播放音乐、选择上一首或下一首音乐等功能。设计思路有设计外壳、制作倒影、设计按钮及界面元素、添加控制代码。设计效果如图7-13所示效果具体的操作步骤如下。
1.创建图层
(1)新建一个Flash文档,文档属性使用默认参数。
(2)创建8个图层,从上到下依次重命名为“AS3.0”、“播放进度”、“加载进度”、“控制按钮”、“屏幕圆盘”、“光影效果”、“外壳”、“倒影”。
2.设计MP3外壳
(1)选择图层“外壳”,使用“基本矩形工具”绘制一个宽、高为“178×247”像素的矩形,在【属性】面板中设置其“圆角”参数为“19”,其属性设置如图7-14所示。