脚本学习往往是一个既抽象又枯燥的过程,本讲稿将用更多的图例来辅助教学,力求做到形象生动些。
此内容根据《初级as源文件,从0开始学习教程总汇》改写。
本课程按中文版Flash MX 2004版本角度讲解。
一、帧上的 stop()、gotoAndPlay()和gotoAndStop()控制
在时间轴上使用最多的就是 stop(),gotoAndPlay(),gotoAndStop(),尤以stop()最为频繁。
许多好的 flash 里面经常可以看到帧上面有个“ a ” , 这是在这个帧上写有脚本的标志。
有的 flash 里面到处都是这个标志,初一看,觉得好复杂!其实打开一看几乎都是简单的 stop(); 可见它的重要。
我们先来玩一下这个示例:
再看看它源文件的时间轴:
可以看到“帧动作”图层上第5、第10、第15、第20各帧上都有一个 a, 其实这全是简单的停止播放的代码:“ stop();” 。它的作用就是,让动画播放到这个地方时停止,它只对当前时间轴有用,如果要使影片停止的话就应该写到影片的时间轴上。
为了解决在停止播放的情况下能重新播放影片,在场景中加了个按扭,在按钮上输入的脚本代码是:
on(release){
play();
}
就是这一点简单的知识,曾经作出过一个风靡校园的情书——点不到的拒绝按扭,所以说,技术的关键在创意和应用。
作业1:做一个点不到会跑的按扭。
我做的示例图如下:
提示:先做一个按扭,拖入场景,在按扭上输入代码:
on (rollOver) {
play();
}
(注:这里用到用按钮控制场景的内容,这个知识点先提前用一下)
复制9帧(也可复制更多),最重要的是把每帧的按扭位置移动一下,别让它跟前一位置相同。
然后新建一图层,在 1 —— 10 帧上面都写上 stop();哈哈,如此这般包你成功。
作业2:gotoAndPlay( 帧数 ), 使播放头从某一帧开始播放; gotoAndStop( 帧数 ); 使播放头停止到时间轴上的某一帧。请把示例源文件时间轴上第20帧的代码改写成“gotoAndPlay(1);”或“gotoAndStop(1);”,再看看其效果。
二、按扭的 play(),stop() 控制
面向对象编程已经成为时尚,也就是说,当你要控制某个对象时,就要直接把代码对准它。让我们先来看一个面向按钮动画控制实例,本实例由两个图层做成,一个图层上放置着一只运动小球,另一个图层上放置着两个按钮。实例效果如下:
1、用按钮控制场景
如果上图中左右运动的小球是直接通过形状补间动画做在场影1的图层1上的,我们可以在图层2第1帧上放两只按钮来控制它的停止和播放。这就叫用按钮控制场景。
这时,播放按钮上的控制代码应是:
on(press){ // 按扭的基本激活事件就是 on, 后面括号里面是方法, press 按下, 当然也可以用 release 按下然后放开
play(); // play() 就是由按下或按下然后放开这个事件来激活的。
}
停止按钮上的控制代码应是:
on (press) {
stop();
}
2、用按钮控制影片
如果上图中左右运动的小球是一个影片剪辑的实例,再用安放在主场景上的按钮来控制它的停止和播放,这就叫控制影片。
这时,播放按钮上的控制代码应是:
on(press){
_root.mc.play();
}
停止按钮上的控制代码应是:
on(press){
_root.mc.stop();
}
明显地可以看出,控制影片的按钮代码比前者多了 _root.mc 这就是面向对象激活。其中mc是影片剪辑的实例名。 _root.mc就是实例的路径。
一般来说不写这个对象时,默认是当前的时间轴;写明了控制对象,就能对这个对象进行控制了,所以在对影片剪辑进行控制时,必须对这一被控对象进行命名。
思考题:如果把控制影片剪辑的按扭放进 mc ,要控制影片的播放和停止应当如何加代码?
提示:这就要用到以下代码了:
on (release) {
_parent.play();
}
或
on (release) {
_parent.stop();
}
等等 (所谓“等等”,就是说还可以把执行动作改为gotoAndPlay()及gotoAndStop())
三、用按钮控制影片属性
1、我们先来认识一下影片的属性:
_x 影片的横坐标;
_y 影片的纵坐标
_xscale 影片的横向缩放比例;
_yscale 影片的纵向缩放比例;
_alpha 影片的透明度变化值( 0~100 );
_visible 影片的可见性,值为 true 时,影片可见;值为 false 时,影片不可见;
2、下边我们来学习怎么控制这些属性。
(1)控制属性的方法之一:
第一个语句:setProperty(target, property, value ) //target :被控制的对象,也就是被控制影片的名称; property :影片的属性,就是刚刚讲的 _alpha 等; value :影片属性的值。这个语句的作用就是把值赋给影片的属性。
另一个语句: getProperty(instance, property);//instance :影片的名字, property :影片的属性。这个语句的作用是获取该影片属性的值。例如: a=getProperty(mc,_alpha) 如果 mc 的透明度为 80 ,那么 a=80;
让我们来看一个实例:
右上图是这一实例制作过程的时间轴。“影片小球”图层第1帧上放置着影片剪辑小球实例,实例名为mc。“按钮”图层第1帧上放着六只按钮。
透明度“-”按钮的代码是:
on(release){
setProperty("mc",_alpha,getProperty(mc,_alpha)-10);// 控制当前影片的透明度,按扭每点一次,透明度减小10
if(mc._alpha<=0){ // 当透明度减小的 <0 ,就让透明度为 0
setProperty("mc",_alpha,0);
}
}
对第一行的setProperty("mc",_alpha,getProperty(mc,_alpha)-10);是不是有点不习惯?其实它是这两句的合成。
value =getProperty(mc,_alpha)-10);// 影片透明度 -10 然后把值赋给 value
setProperty(mov,_alpha, value ) ; // 把 value 的值赋给 mov 的透明度属性。
透明度“+”按钮的代码是:
on(release){
setProperty("mc",_alpha,getProperty(mc,_alpha)+10);
if(mc._alpha>=100){
setProperty("mc",_alpha,100);
}
}//这段代码请你自己去理解吧,下同。
缩放度“-”按钮的代码是:
on(release){
setProperty("mc",_xscale,getProperty(mc,_xscale)-5);
setProperty("mc",_yscale,getProperty(mc,_yscale)-5);
}
缩放度“+”按钮的代码是:
on(release){
setProperty("mc",_xscale,getProperty(mc,_xscale)+5);
setProperty("mc",_yscale,getProperty(mc,_yscale)+5);
}
可见按钮的代码是:
on (release) {
setProperty("mc", _visible, true);
}
不可见按钮的代码是:
on (release) {
setProperty("mc", _visible, false);
}
(2)控制属性的方法之二:
用点语句直接赋值和调用。
举个例子: mc._alpha=40; // 让影片的透明度为 40 ;
b=mc._alpha // 把影片的透明度值赋给变量 b
建议刚开始使用时先用第一种方法,主要是为了熟悉 AS 。熟悉之后再用第二种方法。
练习:做一个小球影片和四个按扭,使得在点击相关的按扭时,影片可以分别向上,下,左,右移动。
我做的示例如下图:
提示:利用影片属性 _x,_y 。
四、影片剪辑的 onClipEvent 控制
它和按扭很相似,我们先来对它做个介绍:
onClipEvent(movieEvent){ // 触发事件关键字,表示要捕获的事件
statements; // 这个我们见过,要执行的代码块
}
从上面可以看出,跟按扭相比,只不过是把 on 换成了 onClipEvent
onClipEvent 语句可以捕获当前 MovieClip 中的指定事件,并执行相应的程序块。参数( movieEvent )指定了要捕获的事件,可以捕获下列事件 ( 不必硬记 , 熟悉熟悉即可 ) :
load :当前 MovieClip 被载入并准备显示之前触发该事件
unload :当前 MovieClip 被卸载准备消失之前触发该事件
enterFrame :当前 MovieClip 每次计算帧上的内容时触发该事件
mouseMove :当鼠标移动时触发该事件
mouseDown :当鼠标左键按下时触发该事件
mouseUp :当鼠标左键抬起时触发该事件
keyDown :当键盘按键被按下时触发该事件
keyUp :当键盘按键被按下后松开时触发该事件
data :当前 MovieClip 接收到新数据时触发该事件
在这么多的事件中我们只讲两个,它们是最常用的 :load 和 enterFrame;
load :当前 MovieClip 被装入并准备显示之前触发该事件。如果是 load 事件,代码块就执行一次。
enterFrame :当前 MovieClip 每次计算帧上的内容时触发该事件。它的意思就是:如果是 enterFrame 事件,代码块一直执行,也就是重复执行。
除此之外,根据今天的内容要求,还要再介绍一个简单的 getTimer(); 它的作用就是:可以获取当前 Flash 动画已经播放了多少毫秒的数据信息。
讲概念总是太抽象,下面就让我们形象地来看看一个自制的时间检测器吧:
这是一个影片载入及播放时间的检测器。下面就让我们来剖析一下它的制作过程:
从时间轴上看:
“文本框”图层第1帧输入了“stop”命令。即首先要让影片在第1帧状态下停住。
“按钮”图层第1帧放置了一个检测按钮,这按钮上的代码是:
on (release) {
nextFrame();//跳到下一帧
}
“按钮”图层第2帧放置了一个停检按钮,这按钮上的代码是:
on (release) {
gotoAndStop(1);//跳回第1帧停住
}
显然,“文本框”第1帧及“按钮”图层上的1、2帧上放置的元件及输入的代码,是用来控制影片播放的,我的目的是为了让你看得更清楚些。“说明文字”图层的内容也是陪称性的。而实质性的内容则是“影片”图层第1帧和“文本框”图层的第2帧。
“文本框”图层第2帧上,放着两个动态文本框,分别跟在说明文字的两个冒号之后。跟在“载入时间”之后的文本框的变量名为“mload”,跟在“播放时间”之后的文本框的变量名为“menter”。
在“影片”图层第1帧,放置着一个影片剪辑实例,它的实例名是“mc”。不过,它对应的那个影片剪辑元件是一个没有任何内容的空元件。具体的做法就是按 Ctrl+F8 建一个影片剪辑元件,在它上面不画任何东西。然后把这个元件拖到主场景上(这时在舞台上出现一个小白点),修改其实例名为“mc”(其实可以不给它修改实例名,因为程序无须识别它)。最后选中该实例,输入如下代码:
onClipEvent(load){ // 当影片载入时执行下面代码
_root.mload=getTimer(); // 把当前影片载入的时间(毫秒),赋值给场景中的 mload 文本
}
onClipEvent(enterFrame){ // 只要播放帧上的影片就执行代码
_root.menter=getTimer();// 把当前影片播放的时间(毫秒),赋值给场景中的 mload 文本
}
观看效果,可以看到 影片载入时间的数字是不变的,而影片播放时间则一直在变化。那是因为影片的下载是一次性完成的,而影片的播放则是持续进行着的。即使你点了停止检测按钮,影片却还在继续播放着,所以播放时间还在不断增加着。
下一部分,我们将进一步学习onClipEvent的应用。
作业:用判断语句 if 还有今天的 onClipEvent,getTimer(); 做一个读秒的计数器,从 10 数到 1 然后停止。
提示: getTimer()/1000 这样单位就是秒, int(getTimer()/1000) 这样得到就是整数。影片剪辑实例上的代码供参考:
onClipEvent (enterFrame) {
if (_root.menter>=1) {
_root.menter = 10-int(getTimer()/1000);
} else {
stop();
}
}
示例图:
注:如果倒计时已结束,请用网址http://jxy.cliao.com/djjbxx10z.swf输入浏览器地址栏打回车看效果。
五、用onClipEvent 结合按扭做“听话的小球”
首先,让我们一起看一看用onClipEvent 结合按扭做成的“听话的小球”效果,只要你把鼠标住六个蓝色矩形的任何一个上一放,那绿色小球就会跑到放着鼠标的矩形上来。
接下来,让我们再看看它的制作过程:
时间轴上“按钮”图层上放置着六只按钮。它们是由同一个蓝色矩形按钮元件拖出的实例。六只按钮的实例名分别为b1、b2、b3、b4、b5、b6。每只按钮上都输有代码:
on(rollOver){// 当鼠标滑过按扭
_root.newx=_root.bn._x; // 把当前按扭的横坐标赋值给变量 newx;其中 n=1,2,3,4,5,6, bn 一定要和按扭名相对应。
}
"影片"图层上放置着一个红色小球影片剪辑实例,输入代码:
onClipEvent(load){// 当影片载入时,执行代码
_root.newx=this._x; // 把当前影片的横坐标赋值给变量 newx ,这是为了保证影片开始是静止的
}
onClipEvent(enterFrame){// 当播放帧上有该影片时,执行代码
this._x=this._x+(_root.newx-this._x)/4;// 变量 newx 是最终位置,影片不断向这个位置移动。
}
说明:变量 newx前面如果没有 _root ,那么变量 newx 只在局部有效,也就是说,按扭上面的改变对影片中变量不起作用,自然没有办法控制了。加上 _root 它的范围是整个动画。
思考题:你能用按扭的点击事件 release 来激发,做一个类似的游戏,让小球能在竖直方向移动。示例图:
六、条件语句 if
在 AS 中,条件语句 if 起判断控制的作用。是基本的语句类型,是 AS 灵活控制动画的重要语句。
让我们先来看看它的结构:
if ( conditions ) { //conditions: 条件,本句是说如果满足这个条件,
statements1; // 它就执行 statements1: 代码;
}else{ // 如果不满足条件
statements2; // 它就执行 statements2; 代码。
}
而多数时候只需要判断满足条件,然后执行什么代码,所以else 部分可以省去,成为这个样子:
if(conditions){
statements1;
}
接下来让我们玩一下用条件语句if做成的动画。我们可以发现,每次播放,总是循环3次就停止了。
为什么会这样的呢,让我们再来看看它源文件上时间轴(如右上图所示)的内容。在小球图层上,我们制作了一个自左向右的小球运动过程。按钮图层第1帧,我们安放了一只播放按钮,这按钮上加有动作语句:
on (release) {
play();
}
在“帧动作”图层的第1帧上输入的动作语句是:
i=0;//给变量i赋予初始值0
在“帧动作”图层的第2帧上输入的动作语句是:i=i+1;它的意思是:等播放到这一帧的时候, i 的值增加 1
我们要重点讨论的是帧动作图层第20帧上所加的帧动作:
if(i<3){ //i<3 是条件,如果 i<3 成立,
gotoAndPlay(2);//就执行 gotoAndPlay(2);
}else{//否则
gotoAndStop(1);//跳到第1帧停止
}
七、复制影片 duplicateMovieClip
duplicateMovieClip, 是做 AS 特效中常用到的,作用是复制影片。可以说 80% 的特效里面都有它,例如幻影,下雨,下雪,雷电,文本打字,跟随…………等等等等。鉴于它的重要性,我们将用连续三部分的篇幅来讲它,目的是为了加强记忆,让你能够基本上学会运用。
下面我们首先来看看它的结构:
duplicateMovieClip(target, newname, depth) ; //target 你要复制的影片名称。 newname :给复制出来的影片赋予新的名字; depth :深度,复制出来的影片的层深。数小的层放在数大的层下面,例 1 层在 2 层的下面,等等。
接下来让我们再来看看下面这个“幻影”效果及其脚本使用过程吧:
时间轴中MC图层第1帧上放置着一个实例名为mc的影片剪辑,这个影片剪辑自左向右运动,并包含有由一个矩形经平行四边形、并翻转平行四边形等形变过程。
AC图层上的1、2、3各帧都写有脚本语句。
第1帧上的代码是:
i=0;//为变量i赋予初始值0
stop;
(注:如果要使母本影片剪辑不显现,这里可增加一语句: _root.mc._visible=0; )
第2帧上的代码是:
i++; // 每次播放这一帧, i 的值加一
duplicateMovieClip(mc, "mc" add i, i);// 复制影片 mc, 复制的新影片名字为 mci, i 是新影片的深度
setProperty("mc" add i, _alpha, 100-i*15); // 让复制出来的影片 mci 的透明度为 100 — i*15
第3帧上的代码是:
if(i<5){ // 如果 i<5,
gotoAndPlay(2); // 播放第2帧,作用是为了复制 5 个影片。
}else{
stop(); //i>5 停留在这一帧。
}
(注意: duplicateMovieClip 要和循环判断if,以及影片属性控制相结合才有它存在的意义,也才能很好的发挥它的作用。)
从以上语句可以看出,影片播放伊始是不能复制影片的,因为它在第1帧就停止了。为了实现复制,我们在“复制”按钮上输入的动作脚本代码是:
on (release) {
gotoAndPlay(2);
}
removeMovieClip是与duplicateMovieClip经常配合使用的语句,其作用是用来删除指定的影片剪辑。本实例通过按钮来删除影片。加在“删除”按钮上的动作脚本代码是:
on (release) {
for (; i>0; i--) {
removeMovieClip("mc" add i);
}
}
如果你不想一次性把复制得到的影片删完,而想一次删除一个新影片,则在“删除”按钮上的代码应是:
on (press) {
if (i>=1) {
removeMovieClip("mc" add i);
i--;
}
}
练习题:做一个上下运动的小球影片剪辑,利用 for 循环语句,使在点击不同按扭的情况下,能复制出排列不一的10个小球。
我做的示例如下图:
提示:(1)请用 _x,_y 属性控制复制影片的坐标。(2)用不同的按钮控制复制出来影片的不同排列。
八、用 duplicateMovieClip 做下雨效果
下雨特效的思路是这样的:先做一雨滴的效果,然后复制一定数量的雨滴,就出现了许多雨了。这就是利用影片的坐标属性让复制出来的雨滴从不同的地方杂乱无章地落下,这样就显得真实了。
让我们先来看看这个下雨效果影片:
然后让我们来看看制作过程中时间轴上的内容:雨滴图层的第一帧放着一个雨滴的影片剪辑(制作元件时,请把雨的落点及涟漪做在舞台+字花上),AS图层的三个帧都输入了脚本。
AS图层第1帧的代码是:i = 0; //为变量i赋初值
AS图层第2帧的代码是:
i = i+1; //让i加1,其实这里也可以写成i=i++
duplicateMovieClip(rain, "rain" add i, i); //复制影片rain,复制的名字raini,深度i
_root["rain" add i]._x = random(300);// 把0至300(舞台宽度)之间的随机函数赋给复制出来的影片raini的横坐标_x。
_root["rain" add i]._y = random(200);// 把0至200(舞台高度)之间的随机函数赋给复制出来的影片raini的纵坐标_y。
AS图层第3帧的代码是:
if(i<200){ //条件语句,限定复制的最多个数
gotoAndPlay(2); //如果i<200,也就是复制的雨滴还不够200,那么播放第二帧.
}else{
stop(); //如果复制数到了200,就停止在当前帧, 也就停止了复制.。
}
说明:雨滴能做到杂乱无章,离不开 random();的作用。下面对它作点说明:
random (),建议这样用最好—— Math.random() ,符合最新版本的习惯。它的作用是获取0.0到1.0之间的随机数.如果这样写—— Math.random(n), 就是获取 0 到 n 之间的随机数。
思考题:你能用上例已有的雨滴元件通过脚本代码处理,制作一个更真实的下雨效果吗?以下是我做的下雨效果:
制作提示:(1)在舞台上再拖入一个雨滴实例,经调整大小和透明度,确定一个新的实例名;(2)命名一个新变量j,用以代替i变量的作用;(3)用上述类似的方法复制影片;(4)注意深度变化,即i跟j的值不可重复。
九、给复制得到的影片加载标记
先看一看以下示例:
别觉得这示例太复杂了。我们先一起分析一下左起第一按钮是如何起作用的。明白了这一按钮的制作过程,后两按钮的制作也就顺理成章了。
在开始讲解例题之前,先讲一点知识性问题:场景中有个影片 mc , mc 中有个动态文本 txt ,那么给 txt 赋值是这样的 ._root.mc.txt= value , value 是你要赋给文本的值,它和属性一样。不光是动态文本,即使是影片中的变量也是可以有这样的方法调用的。
再讲一个赋值语句 set, 它的格式是这样的:
set (变量名字,赋给变量的值);
举个例子字 num=6 也可以写成 set(num,6);
接下来,我们一起来分析示例的制作过程:
右上图是主场景的时间轴,它上面共有三个图层。在“小球母本”图层第1帧放置着一个实例名为mc的小球影片剪辑实例。如果你想让母本小球隐去,则可以在这一帧写上:
_root.mc._visible=0;// 让影片为不可见。
在制作这个小球影片剪辑元件时,除了画一个小球外,在它上面还画有一个动态文本框,其变量名为 num。
“按钮”图层显然是放置按钮的。“文字”图层第1帧上,输入了母本、按钮说明等内容。
在左起第一按钮上输有下列代码:
on (release) {
for (i=1; i<10; i++) {// 循环 9 次;复制 9 个影片
duplicateMovieClip(_root.mc, "mc" add i, i);
setProperty("mc" add i, _x, 5+i*30);// 根据 i 来确定复制影片的横坐标
setProperty("mc" add i, _y, 45);//复制影片的纵坐标恒定不变
set("mc" add i add ".num", i);//这是新内容,下面专门讲
}
}
set("mc" add i add ".num", i),是我们今天的新内容。 add 是字符串运算。"mc" add i add ".num", 运算的结果是. mci.num,也就是复制出来的影片中动态文本变量。整个句子就是把 i 的值赋给这个动态变量。
关于动态文本赋值,我们以后会经常遇到。
以上三部分,我们接触的全是duplicateMovieClip语句。后面部分我们将继续学习别的内容。
作业:完成后两按钮的制作,即通过点击相关按钮,只给奇数球加载标记,或只给偶数球加载标记。
提示:后两按钮的制作要用判断语句,先用它来判断 i 是奇数或偶数,然后加载。我们可以用取模“%”运算来判断数字的奇偶性。“ % ”运算符号取模,它的基本意义是相除后取余数。例:如果 i%2==1,则i是奇数;如果 i%2==0,则i是偶数。
十、加载影片 attachMovie
attachMovie, 它的作用是加载影片 ,更具体一点说,就是把库中的元件加载到影片里来。它的用法和复制影片几乎是一样的 , 不同的是它加载的影片直接来自于库。
让我们先来看看这一语句的结构: myMovieClip.attachMovie( idName, newName, depth);//idName 被加载影片的名字 ,newName 加载后影片的新名字 ,depth 新影片的深度。显然,它跟复制语句是很相似的。
接下来让我们来看一个用加载法做成的示例:
示例中的效果想必你已清楚了。那么,库里的元件是如何加载到影片上来的呢?下面,让我们来看看它的制作过程。
一个很关键的问题是:加载法里用到的影片剪辑元件跟复制法里的影片剪辑元件相比,有一个很大的不同。那就是它不是普通的影片剪辑元件,而是一个做有链接的高级元件。也就是说,在制作好普通影片剪辑元件mc的基础上,还得对它进行以下操作:用鼠标在库中该影片剪辑元件名mc前的图标上右击,点“链接”,就会跳出一个“链接属性”对话框,如左下图所示:
在左图所示的“链接属性”对话框中,给“为动作脚本导出”打上勾(这时“在第一帧导出”前会自动打上勾,默认它)。注意:这上面的标识符很重要,必须跟加载语句中的被加载影片名相一致。
完成了做有链接的高级影片剪辑元件后,按理说就可以在场景上通过加载脚本加载影片了。但是,为了能说明层的深度,我们在制作影片剪辑元件mc时,多做了几个成分,如左上图所示:(1)为了标记加载影片的序号,在“文本框”图层中加入了一个动态文本框(参见第八部分“给复制得到的影片加载标记 ”,文本框的变量名为num);(2)为了在影片中能交换小球的上下位置,在“隐形按钮”图层安放了一只隐形按钮(制作这个隐形按钮时,只在“点击”帧画一个跟圆球一样大小的正圆)。并为这只按钮输入了如下代码:
on(release){
this.swapDepths(100); // 点击按扭,该影片的深度变为 100,如果这个深度上有影片, 那么就交换深度,原来 100 上的影片深度改为是 mc 影片交换前的深度。
}
接下来,让我们看看主场景上的时间轴吧。这里只有两个图层。“说明文字”图层只放置了两行说明性的文字。“按钮图层”上也只放置着一只按钮。显然,从主场景时间轴和舞台上看,根本没有拖入影片剪辑元件。那么,又为什么能在影片中加载呢?这就是因为在主场景的按钮上我们加入了如下代码:
on (release) {
for (i=1; i<=3; i++) {
_root.attachMovie("mc", "mc" add i, i+1);// 把影片 mc 从库中加载三次 , 深度分别是 1,2,3。
_root["mc" add i]._x = 60+45*i;
_root["mc" add i]._y = 70;
set("mc" add i add ".num", i);
}
}
十一、循环语句 for ,和动态文本
循环有 for 循环和 do while 循环,它们和上面讲的判断语 if 同等重要。多次重复执行的代码是循环存在的根本,它可以让你从复杂的代码中解脱。
我们先认识一下它的结构:
for(init; condition; next){ //init 开始记数的初始值; condition 是条件,如果条件成立,循环继续,反之循环结束。 next 是记数变化的语句,如果记数不变化,那就成了死循环!
statements; //statements; 执行代码,我们已经认识过了。
}
接下来我们来看一个实例,其制作示意图如右:
选中“文本框”图层第1帧,在舞台上放置五个动态文本框(注意:在文本框中显示的文字的字体、大小和颜色等等,必须在设定动态文本框时就在属性检查器上设置好)。选中左边头上的文本框,在属性检查器面板的“变量”处 给文本定义变量,输入txt1,用同样的方法给另四个文本框按从左到右的顺序分别输入变量名txt2、txt3、txt4、txt5。
下面我们再看看怎么利用这些变量给文本赋值:
在“AS”图层的第一帧,输入以下代码:
for(i=1;i<=5;i++){ //
_root["txt" add i]=i; // “ txt" add i 是一个字符串运算,如果 i=1 运算结果就是 txt1
}
这时测试影片,我们就可以在屏幕上看到“1 2 3 4 5”五个数字。
现在,我们来看看代码的运行过程:开始时 i=1, 满足条件 i<=5 ,所以就执行 _root["txt" add i]=i。 “ txt" add i 是一个字符串运算,如果 i=1 运算结果就是 txt1, _root["txt" add i]=i的执行结果是在屏幕第一个文本框的位置显示数字1; 执行完之后,再执行 i++, 这样 i=2, 还是满足条件,所以还执行 _root["txt" add i]=i,结果是在屏幕第二个文本框的位置显示数字2;以此类推,直到执行完 i=5 后,经过 i++ 后 i=6 了,不满足条件了,循环也就结束。
思考题:(1) 因为上述文本框是在场景中的,所以用 _root 表示路径,如果文本框是在影片中,那该怎么办呢?
(2) 用循环计算 1+2+3+4+ ………… +100 ,结果要在动态文本框里面显示。
十二、循环结构 while控制
while 与 do_while 结构都可以按照一定的条件循环执行循环体,wihle 结构先判定循环条件, 当条件符合时就执行循环体,按顺序执行完循环体中的语句后, 再返回 wihle 语句开始处, 重新判定条件,并以此规则进行循环操作,直到循环条件为 false 时终止循环, 转而执行 wihle 结构下面的命令。与 wihle 结构不同的是, do_while 循环结构先执行循环体中的语句,然后判定循环条件。 这就是说 do_while 循环结构无论条件是否符合 , 循环至少执行一次。
我们先认识一下它的结构:
while(condition) { //condition 是条件,如果条件成立,循环继续,反之循环结束。
statement(s); //statements 是执行代码
}
接下来我们来看一个应用while循环结构控制的示例:
然后再来看它的制作过程:(1)首先制作一个如左下图所示的影片剪辑,画一个笔触颜色灰色、填充色为紫色的大圆(直径45),居中;再画两个不同颜色的小圆(直径6)。(2)选中mc图层第1帧,把影片剪辑元件拖入舞台适当位置,实例名改为s0,在第3帧插入帧。(3)插入as图层,在第1帧输入代码:
i = 1;
while (i < 100) {
duplicateMovieClip (s0, "s" add i, i);
setProperty("s" add i, _rotation , getProperty("s" add (i - 1), _rotation) + 10);
i++;
}//复制99个影片,每个影片比前一个影片转过10弧度角度
setProperty(s0, _visible , 0);//复制99个影片后,不再复制
在第2帧输入代码:
i = 1;
while (i<100) {
setProperty("s" add i, _rotation , getProperty("s" add i, _rotation) +6);//旋转6弧度
setProperty("s" add i, _x , getProperty("s" add (i - 1), _x) +3);//每个影片比前一个影片在右方3像素处
setProperty("s" add i, _y , getProperty("s" add (i - 1), _y) +0);//每个影片的纵坐标不变,如要变可把0改为其他值
setProperty("s" add i, _xscale , getProperty("s" add (i - 1), _xscale) -1);//每个影片比前一个影片横向缩小1%
setProperty("s" add i, _yscale , getProperty("s" add (i - 1), _yscale) -1);//每个影片比前一个影片纵向缩小1%
i++ ;
}
在第3帧输入代码:
gotoAndPlay (2);
制作就这么简单,效果却十分动人。
十三、改变鼠标的形状
这一节我们来学习用 flash 制作一个个性化的鼠标指针。
先讲一讲这里要用到的语句startDrag():
startDrag(); 拖拽影片,我们来看它的格式:
myMovieClip.startDrag(lock, left, top, right, bottom) ; myMovieClip 是要拖动影片的名字(面对对象编程), lock 表示影片拖动时是否中心锁定在鼠标,值有 true,false ; true 锁定, false 不锁定。
left,top,right,bottom 就是影片拖动的左,上,右,下的范围。我们举个例子说明一下:
mc.startDrag(true,100,100,300,300); 就是拖动影片 mc ,把影片中心锁定在鼠标,拖动的范围是( 100 , 100 ) ~ ( 300 , 300 )的矩形框。
如果这样写: mc.startDrag(true); 拖动影片没有范围限制;
再认识一下 stopDrag();
myMovieClip.stopDrag() ; myMovieClip 是要停止拖拽的对象;stopDrag(); 停止拖拽;全句就是停止对影片myMovieClip的拖拽。
最后讲一下两个鼠标的属性控制:
Mouse.hide(); 隐藏鼠标,当前 flash 不显示鼠标箭头;
Mouse.show(); 显示当前鼠标箭头;
接下来,请看一看我制作的改变鼠标形状的示例图:
现在,我们来分析一下它的制作过程:
本示例舞台宽300像素、高150像素。
从右上图的时间轴上看:“按钮”图层放置着两个按钮;“鼠标形状”图层上放置着一个自己设计的鼠标头形状影片剪辑实例,其实例名为mc;“有效区”图层上画有一个宽280、高130的白色矩形,相对舞台居中;“说明文字”图层无须多说了吧。
从脚本语句来看:
“鼠标形状”图层第1帧的代码是: _root.mc._visible=false;// 设置影片不可见;
“改变鼠标形状”按钮上的代码是:
on(release){
_root.mc._visible=true; // 设置影片可见
_root.mc.startDrag(true,10,10,290,140); // 拖动影片
Mouse.hide(); // 隐藏鼠标
}
这样的结果就使得鼠标的形状成了我们新设计鼠标形状了。
“还原鼠标形状”按钮上的代码是:
on(release){
_root.mc.stopDrag(); // 停止影片拖拽
Mouse.show(); // 显示鼠标
_root.mc._visible=false; // 影片不可见
}
这样的结果就让鼠标恢复到原来的样子。
作业:根据以上原理,自己设计一个鼠标形状,并在默认大小的舞台上制作出改变鼠标形状的动画来。
十四、用length,substring制作打字效果
用 AS 控制文本可以做不少的特效,比起用逐帧动画制作更简单且更眩!接下来的两部分内容我们就来学习文本控制。
先来认识两个控制文本的语句: length,substring;
先看 length, 它的用法简单:
对象 .length();// 可以返回对象的长度属性。对象可以是文本,字符串,数组。我们今天只用返回字符串的长度,也就是字符串的字符个数。
举个例子: txt="flash"; // 把字符串“ flash" 赋值给 txt,
a=txt.length(); // 得到字符串的长度 5 ,并赋值给变量 a.
还可以这样写: length(express);//express 为对象,返回对象长度。
表达上面的例子: a=length(txt);// 得到字符串的长度 5 ,并赋值给变量 a.
length() 获得的是单字节字符的个数;
如果是汉字的话就要用 mbLength(); 运用的方法和 length() 一样。不同的是一个汉字当作是一个字符。(不知道是不是我机子问题,今天做这个例题文件时,只能用第二中表达方法 length(express) ,而且以前写上这个关键词时会变颜色,也会有提示。可今天没有:()
再来看 substring 的用法:
myString.substring(from, to) ; //mystring 要操作的字符串对象 ;from, 数字,取字符串的开始位置; to 取字符串的结束位置。
我们同样来举个例子: txt="flash";
tt= txt.subString(2,3);// 从 txt 字符串的第 2 个字符也就是 l 开始,取三个字符也就是 las, 把它赋值给 tt. 这个时候 tt=las;
它的另一种用法是: substring(string, index, count);
表达上面的例题就是: subString(txt,2,3);
同样的如果用来操作汉字就用: mbSubString();
下面让我们来看一个通过代码控制制作的打字效果动画:
接下来,让我们来了解一下它的制作过程:
从时间轴上看:在“文本框”图层第1帧拉一个动态文本框,变量名为 tt, 并把它的属性改为“多行”。(在属性面板上变量名的左边不远有一个“V”,点一下在那里设置"多行")
"AS"图层的代码分别是:
第1帧:
txt=" 我喜欢学习用flash制作动画,更喜欢学一点AS代码知识。因为通过代码控制的动画,不仅制作特别简单,而且效果特别丰富多采。";// 把这一串字符赋值给变量 txt。提醒一点:两边的引号一定是在英语状态下输入的。
max=mbLength(txt); // 获得字符串的长度,并赋值给变量 max;
i=1; // 初始化变量 i, 值为 1
stop();//让影片一开始处于停止状态,点击按钮后才开始打字,这样容易看清效果。
第2帧:
tt=mbSubString(txt,1,i);// 得到字符串的前 i 个字符,并把这些字符赋值给动态文本框。
i=i+1;// 变量 i 加 1
第3帧:
if(i<=max){ // 如果还没把所有字打完
gotoAndPlay(2);//返回第2帧继续打字
}else{ //字打完时就停止
stop();
}
说明:关键是第二帧上的代码,等播放到第二帧时动态文本就等于全部字符串的前 i 个字符,变量 i 每次加 1 ,字符也每次多一,所以文字就一个个地蹦出来了。 最后一帧上的判断代码也很重要,有了这段代码,才可以把所有设计好的字全部打完。
“按钮”图层上放置一个播放按钮,这应该是不说自明了吧。
十五、 用length,substring制作旋转的文字
这一节,我们结合一个示例再来熟悉一下length,substring的应用。其实,它基本上是套用上节的格式,只不过是中间稍微有点变化而已。让我们先看一看这个示例效果吧:
接下来让我们再看看它的制作过程:
1. 新建一影片剪辑元件tt, 在里面放一个动态文本框,其变量名为 ch 。
2. 新建影片剪辑元件 mc: 把已制作好的影片剪辑元件 tt 拖入舞台,实例名为 tt 。增加运动引导层,做成一个tt绕椭圆轨道运动的影片剪辑元件。
3. 回到主场景,看右上方的时间轴。在“影片”图层第1帧上,拖入影片剪辑元件mc的实例,写入其实例名mc。
4. “代码”图层上写着代码:
第1帧上的代码(几乎和上一节的一样):
txt="学脚本做动画其乐无穷"; // 给变量 txt 赋值字符串
max=length(txt); // 返回字符串的长度,赋值给变量 max.
i=1; // 初始化变量 i ,值为 1
_root.mc._visible=0;// 设置影片为不可见
第2帧上的代码(和加载标记那一节讲的差不多):
char=substring(txt,i,1);// 获得字符串的第 i 个字符,并赋值给变量 char
duplicateMovieClip(mc,"mc" add i,i);//复制影片 mc
set("mc" add i add" .tt.ch",char);// 把第 i 个字符,赋给复制出来的新影片里面的 tt 影片中的动态文本。这一句也可以这样写 _root["mc" add i].tt.ch=char;
i=i+1;// 每次播放此帧, i 加 1
第5帧上的代码:
if(i>max){ // 很简单的判断语句
stop();
}else{
gotoAndPlay(2);
}
说明:这个效果是这样实现的,根据字符串的个数,决定复制多少个影片,把复制出来的影片中的文本赋予不同的字,因为复制的影片都是一样的运动,复制出来的时间有先后,整体就出现了示例的效果。
作业:用汉字做一个波浪形文字效果。示例图供参考:
十六、文字的鼠标跟随
鼠标跟随的原理基本上都是一样的。它们都是利用拖拽一个影片,跟随的部分通过被拖拽影片的坐标向它接近。因此,制作文字的鼠标跟随分两步进行:
1. 先复制一定影片,给文本加载不同的字符。
2. 让这些影片的位置按顺序排列,后面影片的位置根据前面的影片位置变化而变化。
下面让我们先看一个文字鼠标跟随的示例:
接下来让我们再从时间轴上来看看它的制作过程:
1、在“文本框”图层上,放置着一个影片剪辑元件的实例,实例名为trail。这个影片剪辑元件名为trail,里面放着一个变量名为tt的动态文本框。.
2、在“控制”图层上,也放置着一个影片剪辑元件的实例。这个影片剪辑元件名为control,它的里面只写着三帧代码:
第1帧上的代码是:
txt="学脚本做动画其乐无穷";// 给变量赋字符串值
max=length(txt); // 获取字符串的长度
for(i=1;i<=max;i++){ // 下面是复制影片并加载标记
duplicateMovieClip(_root.trail,"trail" + i,i);
set("_root.trail" + i + ".tt",substring(txt,i,1));
}
这一帧的作用就是字符串有几个字符就复制几个影片,并且每个影片显示一个不同的字符。
第2帧上的代码是:
for (i=1; i<=max; i++) {
_root["trail" + i]._x = _root["trail" + i]._x+((_root["trail" + (i-1)]._x)-_root["trail" + i]._x)/3+6;
_root["trail" + i]._y = _root["trail" + i]._y+(_root["trail" + (i-1)]._y-_root["trail" + i]._y)/3;
}
这一帧上的语句是关键,要求所有影片的位置都由上一个影片来决定。
语句第二行中,_root["trail" + i]._x ;是当前影片的横坐标位置。_root["trail" + (i-1)]._x ;是上个影片的位置。表达式最后面的“ +6 ”确定了字符前后的距离为6象素。如果没有它,当前影片靠拢后就和上个影片重合了。
如果能理解横坐标了,那么纵坐标也是一样的。
这个 for 循环一次就控制了所有的影片,因此预览的时候可以看到所有的影片都在动。
第3帧上的代码是:
gotoAndPlay(2);// 播放第二帧,也就是一直利用第二帧来调整位置。
3、“空影片”图层上,也放置着一个影片剪辑元件的实例, 其实例名为 trail0。这个影片剪辑元件名为trail0,它的里面没有任何内容,所以是个空影片。这个实例,就是鼠标直接拖动的对象。
4、“AS”图层上,输有一段代码:
startDrag(_root.trail0,true);// 拖拽空影片,锁定在鼠标中心。这是关键的一句,拖动空影片,后面的影片也就跟着动了
_root.trail._visible=false;// 使 trail 影片不可见
思考题:如果把第2步中 control 影片剪辑元件里的代码,换成用 onClipEvent 来完成,试看效果会是如何。
提示:复制影片用 load 事件