简易mc进度的播放及其控制

首先介绍一下mc

在个人看来，mc就是简易的动画。它是由一帧一帧的图片以一定速率逐帧播放从而形成的动画效果。

（这次讲的就是主要联系mc所具有的帧数来进行操作的）

在制作之前，势必要构思一下整个制作过程所具有的流程及其相关操作

而后我们就可以着手用代码来实现我们的想法

元件部分：

首先，我们要制作一个简易的进度条和拖动滑块，还有进度显示的文本显示框

这里因为美术功底太差，我就用了button组件里面按钮的颜色来画了这么两个简易的进度条和拖动滑块

进度条和滑块区域的要有一定的透明

将这两个元件都拖动到舞台想要的位置    然后  滑块命名为   mc_bar  进度条命名为mc_blt

除了文本进度显示  我们也可以用”水“随进度慢慢充满这个进度条

这里我做了一个遮罩   通过遮罩的位置来使”水“慢慢充满进度条

  遮罩 命名为mc_zz

  水命名为  rate_water

 源代码部分：

首先是   进度显示的文本显示框 

//文本显示进度
var rate_txt:TextField=new TextField();
rate_txt.border=true;                                //边框显示
rate_txt.width=26;                                    //文本框的宽度
rate_txt.height=20;                                  //文本框的高度
rate_txt.borderColor=0x0099FF;             //边框颜色
addChild(rate_txt);                                   //将文本框添加到舞台上（这里我是加载到舞台左上角了，可以根

                                                                   据实际需要对它的  .x和.y属性来控制添加位置）

遮罩

rate_water.mask=mc_zz;

然后我们就定义所拖动的范围和文本显示内容：
var l:int=mc_blt.x;                                                    //滑动区域起始点x值                                       
var h:int=mc_blt.y;                                                   //滑动区域起始点y值
var rate:int;                                                             //文本显示
var rate2:int;                                                           //
var bar_rec:Rectangle=new Rectangle(l,h,300,0);   //300是可左右拖动的范围   0是上下拖动的范围
mc_bar.buttonMode=true;                                       //使得鼠标到滑块上变手形

首先是滑块自动随mc的播放而自动滑动

my_mc.addEventListener(Event.ENTER_FRAME,Move)                                              //对mc添加循环侦听
function Move (event:Event)
{
 mc_bar.x=mc_blt.x+int((mc_blt.width/my_mc.totalFrames)*my_mc.currentFrame);     //滑块位置
 mc_zz.x=-150+int((mc_blt.width/my_mc.totalFrames)*my_mc.currentFrame);            //遮罩的位置
 if(mc_bar.x==mc_blt.x+mc_blt.width)                                                                            //判断mc是否播放完全
 {
  my_mc.removeEventListener(Event.ENTER_FRAME,Move);                                     //移除侦听
  my_mc.stop();                                                                                                               //mc停止播放
 }
 rate=(mc_bar.x-mc_blt.x)/mc_blt.width*100;                                                                 //当前播放的比率
 rate_txt.text=rate+"%";                                                                                                   //显示到文本框
}

然后是手动拖动滑块 （这时我们要停止mc的播放）

mc_bar.addEventListener(MouseEvent.MOUSE_DOWN,down)         //添加滑块移动侦听
function down(event:MouseEvent)                                           
{
 my_mc.stop();                                                                                      //停止播放mc
 mc_bar.startDrag(false,bar_rec);                                                        //开始移动 ，属性用到我们之前设定的滑动范围
 my_mc.removeEventListener(Event.ENTER_FRAME,Move);            //移除mc播放进度的侦听
 rate_water.visible=false;                                                                      //水的能见度为0
}

松开滑块后 ”文本“ ”水“  ”mc“播放位置的处理

mc_bar.addEventListener(MouseEvent.MOUSE_UP,up)                     //鼠标松开的侦听
function up(event:MouseEvent)
{
 rate_water.visible=true;                                                                         //水可见
 my_mc.play();                                                                                        //mc开始播放
 mc_bar.stopDrag();                                                                                //停止拖动
 

文本播放进度显示

 rate=(mc_bar.x-mc_blt.x)/mc_blt.width*100;
 rate_txt.text=rate+"%";

进度条的位置
 rate2=my_mc.totalFrames*rate/100;                                                      //mc随拖动而到的帧数
 my_mc.gotoAndPlay(rate2);                                                                   //mc开始播放的帧数             
 my_mc.addEventListener(Event.ENTER_FRAME,Move);                     //添加回滑块自动随mc的播放而自动滑动
}

这就是最后呈现的布局                            

这次的内容就是这些了，菜鸟写的不当之处还请指教

谢谢！！