从现在开始，我们开始进入中级阶段，制作Video的进度滑块。双击进入元件loader的编辑状态，新建一层名为：scrub，，然后我们绘制一个滑块如图1-7

图1-7

按F8将其转换为元件，转换的时候注意将注册点选择为中上，千万别选错了哦。并将其实例名命名为：scrub。将其和loadBar对齐如图1-8

图1-8

下面我们来制作播放进度条，在scrub层上新建一个图层名为playBar，将层loadBar上的元件loadBar选中，按下Ctrl+C复制，然后选择层playBar，按Ctrl+Shift+V原位粘贴，更改其实例名为playBar，并将其属性设置如图1-9

图1-9

返回主场景，选择action层的第一帧输入以下代码：（注意更新的代码是红色，旧的代码是黑色）

var percent_Loaded:Number = 0;

loader.loadBar._xscale = percent_Loaded;

loader.playBar._xscale = 0;

var duration:Number;

//这里可以查看帮助文档中NetStream.onMetaData 处理函数

//duration获取影片的长度

ns.onMetaData = function(obj:Object){

duration = obj.duration;

};

function videoStatus(){

var videoTotal:Number = ns.bytesTotal;

var videoLoaded:Number = ns.bytesLoaded;

percent_Loaded = videoLoaded /videoTotal*100;

loader.loadBar._xscale = percent_Loaded;

loader.scrub._x = ns.time / percent_Loaded * loader.loadBar._width;

loader.playBar._xscale = ns.time / percent_Loaded *100;

}

var videoInterval = setInterval(videoStatus,100);

好，现在我们Ctrl+Enter测试下影片，怎么样，滑块跟随着播放时间的流逝在移动了吧。