×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 21817|回复: 64

[AS] AS入门教程第7课第3节控制时间轴[原创][本文已收录教程库]

[复制链接]
发表于 2008-10-23 09:44:16 | 显示全部楼层 |阅读模式
                              第三节 控制时间轴
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.这样这可模似在网上加载动画。点 视图>模似下载,怎么样看到了加载进度条了吧。

作业:制作下面的播放器


[ 本帖最后由 xyl7422 于 2008-11-14 10:52 编辑 ]
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=211347
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 5金币 +22 威望 +1 热心度 +5 收起 理由
onereal + 1 进度条不能走的,参看11楼和33楼修正。
xyl7422 + 8 + 2 感谢发布教程,支持博士哦:)
祁连山 + 1 谢谢教程哈,支持一下,收录教程库。
清风掠影 + 5 + 1 精品文章
zctmh0336 + 8 + 2 精品文章

查看全部评分

发表于 2008-10-26 22:53:11 | 显示全部楼层
酷素材
对实例 bft_mc  似乎没有语句指向。照着做,没有成功,改为 load_mc  才可以了。可能是笔误吧!

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 多谢发现问题。已将代码中的load_mc改为bft ...

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-10-26 23:35:28 | 显示全部楼层
交作业:



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +2 收起 理由
zctmh0336 + 2 网站的统一格式是550*400,因此大或小于都会 ...

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-10-27 00:01:51 | 显示全部楼层
怎么回事?场景设置为550*150。怎么跑到这里会成这样了!jc:yiwen
回复 支持 反对

使用道具 举报

发表于 2008-10-27 15:46:51 | 显示全部楼层

回复 板凳 sunshijiu 的帖子

酷素材
谢谢zctmh0336答复!原来是这样。噢~~~~~~~~~
回复 支持 反对

使用道具 举报

发表于 2008-11-18 12:56:15 | 显示全部楼层
酷素材
交个作业




这下贴对了吧

[ 本帖最后由 zctmh0336 于 2009-1-13 16:58 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 不错,支持练习.你的flash还是没帖对哈,再看 ...

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-1-13 16:45:03 | 显示全部楼层

我的作业,

你给看下,我的作业为什么会是这样.jc:yun 谢谢

[ 本帖最后由 zctmh0336 于 2009-1-13 16:54 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-1-13 16:56:28 | 显示全部楼层
7楼朋友的作业
回复 支持 反对

使用道具 举报

发表于 2009-1-18 11:55:06 | 显示全部楼层
怎么做到mc上不行啊?
交作业    老师,还有一个问题,为什么在摸拟下载时,开始什么都看不到,过了一会才看到下载的进度条,然后进到场景1的画面


[ 本帖最后由 eadnfan 于 2009-1-18 16:36 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-3-30 23:45:58 | 显示全部楼层
很好的教程啊,早怎么没发现呢。要是早发现这个教程,就少走了很多冤枉路了哈!
有个问题请教老师:前面学了加载外部SWF,今天又学了做进度条,可是两个怎么合起来呢?就是说要把这个进度条放在加载的SWF文件上。我试过很多方法,这个进度条都只能在文档中的MC上能用,可是一放到加载的SWF上就不行了。我想是和加载的方法有关系吧,可是不知道该用什么方法加载SWF,这个进度条才会有效?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-31 19:17:41 | 显示全部楼层
问题应该在:bl = Math.round(_currentframe/_totalframes*100);

这里_currentframe和_totalframes是指的主时间轴的当前帧和总帧数。如果要制作加载的动画的播放进度,比如是用swf_mc加载的,那么将上面的改为:
bl = Math.round(swf_mc._currentframe/swf_mc._totalframes*100);
回复 支持 反对

使用道具 举报

发表于 2009-4-7 23:52:28 | 显示全部楼层

作业

作业


[ 本帖最后由 sanbos 于 2009-4-7 23:55 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-4-9 10:20:34 | 显示全部楼层
交作业。

   

[ 本帖最后由 huangspg 于 2009-4-9 12:25 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-5-24 15:08:30 | 显示全部楼层
老师 我这个播放条怎么不正确?我把源文件发上来 你看看问题吧

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-5-25 09:35:17 | 显示全部楼层
14# 竹林深处


你将进度条放在代码层了,代码层你又只有一帧,当然就看不到过度了.两个解决办法:
1.将代码层延长到第30帧.
2.将进度条放到其它图层,但不能放到园形补间动画图层.
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345