当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > Flash as入门(9):控制时间轴

ActionScript
FLASH AS3与网页JS参数值传递的问题
Flash AS3的parameters对象处理网页参数
Flash教程 认识Flash ActionScript的环境
Flash ActionScript编程基础
Flash AS3代码实现鼠标跟随喷枪涂鸦效果
falsh 跨域调用配置
Flash AS3.0 实例教程 喷泉动画特效
AS3 Loader与URLLoader的比较
ColorTransform类调整显示对象的颜色值
Flash AS3 快速制作烟雾动画
Flash AS3 制作文字飞出动画
ActionScript 学习小心得
ActionScript3.0读取网页FlashVars中的参数的问题
通过实例学习AS3.0:案例三
通过实例学习Flash AS3.0:案例四
通过实例学习Flash AS3.0:案例五
通过实例学习Flash AS3.0:案例六
Flash教程:认识Flash ActionScript的环境
Flash as入门(1):认识AS面板
Flash as入门(3):AS基本语法

ActionScript 中的 Flash as入门(9):控制时间轴


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 333 ::
收藏到网摘: n/a

本例继续讲解AS的基础知识,今天我们来学习Flash AS入门系列教程第七课:影片剪辑第三节控制时间轴,对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。

第三节 控制时间轴

MC实际上相当于一个独立的swf文件,它具有它自已的时间轴。反过来说,我们也可以把一个swf文件看成一个MC。所以本节所介绍的控制时间轴的方法同样适用于主时间轴。

在做好一个动画后,如果没有添加任何AS代码,那么动画就会按帧开始播放。本节的题目叫,控制时间轴就是由用户来控制动画的播放。为了实现这个目的,首先应叫动画不要自动播放,所以第一个语句:

stop():时间轴停止播放。

播入停止了,那么肯定就要一个让动画播放的命令:

Play() 时间轴开始播放

下面来做个练习:

新建一个flash文件,在舞台左边上画一个园,在100帧插入关键帧,将园拖到舞台右边。创建补间动画。接下来新建两个按钮,标签分别为:播放,停止。新建一层,将两按钮拖入舞台,打开属性面板,将播放按钮实例命名为:ply_btn,停止按钮实例命名为stop_btn.
新插入一层,命名为:action.打开动作面板,输入:
stop();这样运行时,时间轴将停在第一帧,不播放。
接下来是点击播放按钮的动作:
ply_btn.onRelease = function(){
play();
}
点击停止按钮上的动作:
stop_btn. onRelease = function(){

stop();
}
测试影片,园停在那儿不动,点击播放,园开始运动,点击停止,园停止运动。
这样我们就实现了控制动画播放的功能。
上面是控制主时间轴的播放,那么要控制MC的播放怎做呢?现在新建一个mc,按上面的方法做一个补间动画,在MC的第一帧输入:stop();将MC拖入舞台,在属性面板中实例命名为:mymc_mc.
在主时间轴的第一帧,输入:
ply_btn.onRelease = function(){
mymc_mc.play();
}
stop_btn. onRelease = function(){

mymc_mc.stop();
}
测试影片,那么我们就已能控制MC的播放了。

接下来,进行更进一步的控制。

gotoAndPlay(n):将时间轴转到n所在的帧处,开始始播放。
比如:gotoAndPlay(5); 从第5帧开始播放。

gotoAndStop(n):将时间轴转到n所在的帧处并停止。
比如:gotoAndStop(5);跳到第5帧并停止。

nextFrame()方法:将时间轴移到下一帧并停止。
比如:MC的控制:mymc_mc.nextFrame();
主时间轴的控制:this.nextFrame();

prevFrame()方法:将时间轴移到上一帧并停止。
用法同nextFrame()。

停止与暂停按钮:

stop()命令使时间轴停止播放,但它是停在当前帧处,很显然,这是暂停的效果,当我们再次点击播放按钮时,时间轴从当前开始播放。所以在暂停按钮上的命令是:stop();停止的效果是回到第1帧,所以在停止按钮上的命令是:gotoAndStop(1);

控制影片的播放,应该有快进快退的功能才算完整,要快进快退,那就应该要知道现在时间轴在什么位置,然后,在当前的位置加上或减去一个帧数,比如5帧或10帧来实现。

_currentframe属性:播放头当前在时间轴中的位置。有了这个属性就可实现快进快退的效果了。

练习:在上面的练习中增加两个按钮,标签分别为:快进,快退,将其拖入舞台,实例名称分别为:kj_btn,kt_btn.在actin图层的帧动作面板中,添加如下代码:

kj_btn.onRelease = function(){
gotoAndPlay( _currentframe+5);
}
kt_btn. onRelease = function(){

gotoAndPlay(_currentframe-5);
}
测试影片,现在点快进,则播放头则向前5帧,开始播放。点快退播放头则向后退5帧开始播放。

可能我们还想整得更完美点,在播放时能够有一个播放进度条才好。分析一下,当前帧现在已有了,如果能有一个动画的总帧数,不就行了,是的有总帧数这个属性的。

_totalframes属性:MC的总的帧数。
用当前帧去除以总的帧数,这不就是MC的播放进度吗。然后用一个矩形条来显示进度,采用矩形条有_xscal属性等于当前帧与总帧数的比例来实现。

播放进度条的制作:

练习:接到上面的,插入新的MC,画一细的矩形长条,垂直居中,左对齐。回到主场景,将MC拖入放好,取实例名为bft_mc.打开action层帧动作面板,找到
ply_btn.onRelease = function(){
play();
}
在play()下面插入:
onEnterFrame = function() {

if(_currentframe<_totalframes){

bl = Math.round(_currentframe/_totalframes*100);

bft_mc._xscale=bl;

} else {

delete onEnterFrame //删除每一帧的调用

}
}
测试影片,点击播放按钮时,动画开始播放,同时有一进度条随同展开。

加载进度条的制作:

一些稍大一点的动画,打开比较慢,尤其是在网络上更是如此。有人建议,你的动画如果超过100k,要把它放到网络上,最好做一个加载进度条。加载进度条的制作与播放进度条的制作原理差不多,只是获取的是加载的字节数而不是播放的帧数。先看看MC的两个方法:

getBytesLoaded()方法:返回已加载的字节数。

getBytesTotal()方法:返回动画的总的字节数。注意与上面的_totalframes属性相区别,_totalframes属性是动画的总的帧数,getBytesTotal()方法:返回的是动画的总的字节数。

了解了这两个方法后,制作就与播放进度条一样了。加载进度条常常会放到新的场景中,接上面的练习,点击 窗口>其它面板>场景打开场景面板,点右下角的加号,新增一个场景,并将这个场景拖到原场景1之上。回到场景2,新建一静态文本,内容为:“正在加载请稍候……”,在它下面放一个动态文本,实例名称为:load_txt.新建一影片剪辑元件,画一个细长的矩形,左对齐。回到场景2,将元件拖入放到动态文本下面。实例名称为:load_mc.新插入一层,打开帧动作面板,输入:
load_mc._xscale = 0;
onEnterFrame = function() {

if(getBytesLoaded()<getBytesTotal()){

loadjd = Math.round(getBytesLoaded()/getBytesTotal()*100);

load_mc._xscale = loadjd;

load_txt.text = loadjd +"%";

} else {

delete onEnterFrame;

}


}

点击舞台上的场景按钮,点场景1,这回到了场景1,在action的第100帧(最后一帧)插入关键帧,打开动作面板,输入:
gotoAndStop(1);

为什么要加这句?因为在场景1的前面,我们放了一个加载条的场景,当场景1 播放完后,播放头将回到加载场景,而这时动画已加载,是不需要再播放加载场景的。所以用这一句将播放头回到场景1的第一帧,从而避开了加载场景。

测试影片,结果直接进入了场景1,没看到加载进度条。为什么呢?这是因为在本地影片加载速度太快,没法显示加载进度。没关系,不要关闭flash player,点 视图>下载设置,因为我们的动画太简单,所以选最上面的速度最慢的那个14.4k.这样这可模似在网上加载动画。点 视图>模似下载,怎么样看到了加载进度条了吧。

作业:制作下面的播放器