8.1 原理简介 虽然进度条对于大多数中高级水平的AS制作者来说,是再简单不过的事情,不过,考虑到经常有初学者问到播放器进度条的制作问题,在此,笔者还是花上一些笔墨写写吧。 一个最常规的横向进度条,就是一个滑块在一定长度L的区域做横向移动,当用户不拖动滑块的时候,滑块在进度条的位置将会随着视频位置的变化而改变。而这里说的视频位置,是指视频当前时间与总时间的比值。一个两分钟的视频刚开始播放时,其位置时间为0,那么,进度条滑块的位置也就是0。播到一分钟的时候,位置时间将是60s/120s*100%=50%,也就是让滑块位于0.5L的位置,两分钟的时候,位置时间将是120s/120s*100%=100%,就是让滑块位于L的位置,也就是进度条的最右端。 不过,位置时间和总时间并不是常量,必须要根据这两个变量,动态算出进度条滑块的位置: ball._x=pos/dur*L 从上面的计算过程,可以看出,该表达式中,pos就是视频的位置时间,dur就是视频的总时间,L则是进度条的长度。假如最左端不是0而是某一数值initx的话,那上面的表达式就要改成: ball._x=initx+pos/dur*L
8.2 时间刚才已经获取了,所以,现在就只需要获得initx和L了。 这个,只要在进度条progressBar元件里头第一帧读一次就可以了。 var initx:Number = ball._x; var inity:Number = ball._y; var maxLength:Number = 301; 在这里,获取进度条滑块(滑块实例名为ball)的x和y的位置(之所以要获得y位置,是控制拖动滑块的时候,纵坐标的位置保持不变),然后,maxLength就是8.1表达式中的L,这个大家可以动态获取,不过笔者比较懒,直接写个常量上去了事了。
8.3 让滑块的位置周期性地改变: this.onEnterFrame = function() { ball._x = initx+_parent.video_pos/_parent.video_dur*maxLength; }; 此时,生成一个SWF,在网页里测试,就可以看到进度条的滑块随视频位置时间的变化而改变了。
.4 接下来就做拖动了。 拖动滑块,首先需要限制滑块只能横向在initx到initx+maxLength这一范围内移动,纵向不能改变。 然后,当释放滑块的时候,我们要让视频移动到相应的位置pos,根据进度条的原理,此时的pos依然满足: ball._x=initx+pos/dur*L 于是,可以解得pos=(ball._x-initx)/L*dur 然后,再把这一数值以fscommand传给HTML,但是,由于dur其实是视频的总时间,属于WMP的信息,直接在Flash里传出去似乎不是很好(这纯粹是个人的想法),于是,笔者把上面的式子改了一下: pos/dur=(ball._x-initx)/L 然后,pos/dur用一变量percent代替,传给HTML,再让JS处理。 于是,现在可以在ball里头的按钮添加代码: on (press) { startDrag(this, false, _parent.initx, _parent.inity, _parent.initx+_parent.maxLength, _parent.inity); } on (release, releaseOutside) { fscommand("setvideopercent", (_x-_parent.initx)/_parent.maxLength);//这里需要让HTML接收位置时间,然后通过JS控制视频播放 stopDrag(); } 此时在网页里测试影片,你会发现,视频播放的时候,滑块根本不听你的话,它老是跟着播放进度走。
......怎么办呢?
此时,我们必须想办法,在按下按钮的时候,禁用 ball._x = initx+_parent.video_pos/_parent.video_dur*maxLength; 这么一句。这里,最好的办法,个人觉得是去掉onEnterFrame事件,然后在释放滑块以后,重新声明。 不过,笔者已经形成了不太好的习惯,喜欢通过一个布尔变量来判断是否执行。定义一个dragging变量,如果为true,则不允许滑块跟着视频走。 那么,progressBar第一帧的代码就改成: var initx:Number = ball._x; var inity:Number = ball._y; var maxLength:Number = 301; dragging = false; this.onEnterFrame = function() { if (!dragging) { ball._x = initx+_parent.video_pos/_parent.video_dur*maxLength; } }; ball里头的按钮代码则改为: on (press) { |