注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

为Flash影片增加播放控制  

2014-04-01 17:10:28|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


        在自己的作品中加上类似于播放器上的控制影片播放的功能,比如:暂停、播放、快进、快退、进度条等,这样做不仅方便浏览者观看,而且也现显得我等闪技之"神出鬼没"(嘻嘻)。看上去实现起来好象很烦,其实只须加上一些简单的脚本语句,即可让你的作品拥有如同RealPlayer、Windows Media Player等播放器能  图1
  以上是仿照Windows Media Player面板界面,除了有基本的控制播放功能之外,还有回放、快进、快退、影片控制进度条、音量控制等功能。

 首先,先制作一段影片,在主时间轴添加一些东东就可以了。

 1. 把默认图层命名为"音乐",Ctrl+R导入一个声音文件,然后拖到这一层按声音的长度设定帧的长度,在声音面板上把它设为"数据流"。
   2.新建个图层命名为"动画",按"音乐"层帧的长度做一段动画,可随意。俺做的就是个简单的从圆到矩形的Shape形变。
  接下来主角要出场了,开始做影片控制部分。这一部分要把它们全部部件加到一个MC(Movie clip)当中,这样不仅便于"管理",而且要在别的作品加入控制功能时只要把这个总MC加入即可!

新建一个MC,命名为"控制面板",Ctrl+I打开实例面板,在名称栏输入:all。注意以后的所有东东都要添加在这个MC当中。
   1.默认图层命名为"背景",做个如图2的背景。

为Flash影片增加播放控制 - 清风 - 清风的博客   图2
   2.新建个图层命名为"动态文本",添加两个动态文本框,变量名分别为"nowframe"和"allframe",它们是用来显示当前帧和总帧数的,以后会用得到。
   3.新建一个图层命名为"按钮"。下面开始做控制影片播放的按钮,一共要做八个,(如图3)把他们依次命名为 "播放"、"暂停"、"停止"、"倒放"、"开始"、"快退"、"快进"、"结束",共享图库里有的是漂亮的按钮当然也可以用它们来代替。把做完的按钮加到"按钮"这一层,排列好它们的位置。
为Flash影片增加播放控制 - 清风 - 清风的博客    图3
   接着开始对每一个按钮添加脚本,首先要依次为按钮"播放"、"暂停"、"停止"、"开始"、"结束"添加脚本。

按钮 "播放" "暂停" "停止"
脚本 on (release) {
_root.play ();
}
on (release) { _root.stop();
}
on (release) {
root.stop();    _root.gotoandstop(1);
}

  

按钮 "开始" "结束"
脚本 on (release) {
root.gotoandstop(1);
}
on (release) {
_root.gotoandstop(_root._totalframes);
//停止到最后一帧
}


   至于"倒放"、"快退"、"快进"就不能简单的在按钮添加脚本而达到目的,它们需要调用一个MC才能达到控制影片的目的。
        4.新建一个MC,一共要用到7帧,依次为这7个关键帧添加脚本。

   在第一帧添加:
   stop ();
   speed=4;//此为"快退"、"快进"的速度值,你可以调节它来控制快进、快退的速度

   第2帧://"倒放"所转到帧
   _root.prevFrame ();

   第3帧:
   gotoandplay(2); //与第2帧形成循环

   第4帧://"快退"所转到帧
   for (i=0; i<=speed; i++) {
    _root.prevFrame();
   }
   第5帧:
   gotoAndPlay (4); //与第4帧形成循环

   第6帧://"快进"所转到帧
   for (i=0; i<=speed; i++) {
    _root.nextFrame();
   }
   第7帧:
   gotoAndPlay (6); //与第6帧形成循环

 5.把这个MC拖到"按钮"层,Ctrl+I打开实例面板,在名称栏输入:"kz"。接下来只要在"倒放"、"快退"、"快进"上添加转到相应帧的脚本即可。

按钮 "倒放" "快退" "快进"
脚本 on (release) {
  kz.gotoandplay(2);
}
on (release) {
 kz.gotoandplay(4);
}
on (release) {    kz.gotoandplay(6);
}

 最后还须注意的是在按下"倒放"、"快退"、"快进"这三个按钮后"kz"会陷入循环,这样再按其他按钮就失灵了,所以还要为"播放"、"暂停"、"停止"、"开始"、"结束"这些按钮添加一句脚本:"kz.stop();"以停止"kz"的循环。
   接下来这一部分我们来制作影片进度条和音量控制条。

 这一部分我们来制作影片进度条和音量控制条。
   先从简单的音量控制条部分开始做起,它需要一个可拖动的MC游标、一个graphics的背景条和一个包含它俩的MC。
   1.新建一个名为"音量游标"的MC,在默认层做一个如图4的矩形。然后再新建一个名为"音量背景条"的graphics,做个如图5的三角行。
为Flash影片增加播放控制 - 清风 - 清风的博客 为Flash影片增加播放控制 - 清风 - 清风的博客
   图4     图5
  
   2.新建一个名为"音量控制"的MC,把"音量背景条"拖到这一层,然后新建一个图层,再把"音量游标"这个MC拖到这一层,调整它们的位置(如图6)。

为Flash影片增加播放控制 - 清风 - 清风的博客 图6   

完成上面的步骤后开始为"音量游标"这个MC添加脚本,在"音量游标"上按右键选ACTION,添加如下脚本:

  onClipEvent (enterFrame) {
   mex= getProperty(this, _x); //取得X轴坐标值
   vol.setvolume(mex/0.59); //设定音量
  }
  onClipEvent (load) {
   vol= new Sound(); //设定实例
  }
  onClipEvent (mouseDown) {
   if (this.hitTest( _root._xmouse,_root._ymouse)) {
    startDrag (this, false, 0, 0, 59, 0);
   }
  }
  onClipEvent (mouseUp) {
   stopDrag ();
  }

需要解释的是:语句 vol.setvolume(mex/0.59);中的0.59是"音量背景条"的宽度减去"音量游标"的宽度(也就是"音量游标"可被拖动的长度)再除100所得(音量值为0--100),各位可以根据你做出来的具体情况计算。

在"控制面板"这个MC上新建个图层名为"音量",把做好的"音量控制"MC拖到这一层,调整好他的位置(图7)。
为Flash影片增加播放控制 - 清风 - 清风的博客   图7
   最后我们来制作影片进度条,它的制作与音量控制条的制作大同小异也是需要一个MC做为游标,一个graphics的背景条和一个包含它俩的MC。有了上面音量控制条的经验制作起来就很简单了。
   1.新建一个名为"影片游标"的MC,在默认层做一个如图8的图形。再新建一个名为"影片背景条"的graphics,做个如图9的长条矩形。
为Flash影片增加播放控制 - 清风 - 清风的博客 为Flash影片增加播放控制 - 清风 - 清风的博客
   图8   图9
   2.再新建一个名为"影片进度条"的MC,同样把"影片背景条"加在默认层。新建一个图层,把"影片游标"加到这一层,调整它们的位置(图10)。

为Flash影片增加播放控制 - 清风 - 清风的博客 图10

为"影片游标"添加如下脚本:
  onClipEvent (load) {
   drag = new Boolean();
   drag = false;
   cang = 495/_root._totalframes; // 495 为影片背景条减影片游标所得,你可根据自己情况计算得出
  }
  onClipEvent (mouseDown) {
   drag = true;
   if (this.hitTest(_root._xmouse, _root._ymouse)) {
    startDrag (this, false, 0, 0, 495, 0);
  }
  }
  onClipEvent (mouseUp) {
   drag = false;
   stopDrag ();
  }
  onClipEvent (enterFrame) {
   _root.all.allframe=_root._totalframes; //在动态文本框显示总帧数
   _root.all.nowframe=_root._currentframe; //在动态文本框显示当前帧
   if ((drag == true) && (this.hitTest(_root._xmouse, _root._ymouse))) {
    _root.all.kz.stop();
   xvernier = getProperty(this, _x); //取得游标的X轴坐标值
   _root.gotoandstop(int(xvernier/cang)); //经过比例运算转到相应帧
   } else if (_root._currentframe == 1) {
   setProperty (this, _x, 0);
  } else {
   setProperty (this, _x, _root._currentframe*cang); //根据当前帧控制游标位置
   }
  }
  
   3.在MC"控制面板"上新建一名为"进度条"的层,把"影片控制条"拖到这一层,调整它的位置(如图11)。
为Flash影片增加播放控制 - 清风 - 清风的博客 图11

 自制flash播放器"就基本完成了。最后提醒一点:如果不希望影片一开始就播放,可以在"控制面板"这个MC中加入 onClipEvent (load) {_root.stop ();} 这个脚本。

  评论这张
 
阅读(140)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017