文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计Flash → 用Flash来制作一个Flash播放器

用Flash来制作一个Flash播放器

时间:2004/11/7 2:22:00来源:本站整理作者:蓝点我要评论(0)


            
             
              
             
            

               
               

            



            最近在网上看到了很多用Flash制作的播放器,就想试着用Flash来制作一个播放器。

  点击这里下载源文件


一、实现背景


  仔细研究一下各个播放器的实现方法,其实原理是大同小异的,都是用Flash来实现,只是有的实现还利用了Java Script跟Flash的通讯,通过网页来控制Flash的播放。


  最简单的实现方法是,在Flash中先用Load Movie函数将影片导入场景中,使用Movie Clip相应的函数,如play,gotoAndStop,stop,nextFrame,prevFrame等等,就可以实现播放器的大概功能了。


  不过,想要将播放器做的比较通用,在制作过程中还是有点复杂,再加上考虑播放影片的质量控制、场景的缩放、fps的计算、Flash与Java Script的通讯等等因素,就更加复杂了。


  下面我们通过一个例子来看看具体的实现。






 


最终效果演示 [ 全屏观看 ]


二、实现步骤


  我们先来制作一个被控制的目标影片,然后再制作播放器的主体部分。


  1、新建一个Flash文件,按Ctrl + F8建立一个Movie Clip,命名为“Sample Movie Graphic”,在此Clip的场景中绘制如图1所示的图样。



  2、再按Ctrl + F8建立一个Movie Clip,命名为“Sample Movie”,将上一步所制作的Clip拖到Sample Movie的场景中,在时间轴的第345帧上面插入关键帧,并用工具条中的缩放工具,将第345帧上面的Sample Movie Graphic旋转一定的角度。在Sample Movie的第一帧和第345帧的Action面板上面增加如下语句:stop(); 点击选取此Clip时间轴上面的第一帧,设置此帧的属性面板如图2所示。这一步是制作一个旋转的效果。



  3、将Sample Movie从图库拖到影片的场景中,并在属性面板上面命名为“movie”。


  4、以上制作的是被控制的目标影片,也可以用Load Movie函数来动态导入,原理是先建一个空的Clip,将要播放的影片导入到此Clip中即可。


  5、接下来我们制作播放器的主体。按Ctrl + F8新建立一个Movie Clip,命名为“scrubberTimeLineGraphic”。在此Clip的场景中用矩形工具绘制一个长方形。这是播放器的时间轴


6、按Ctrl + F8新建立一个Movie Clip,命名为“scrubberTimeLineHandleGraphic”。在此Clip的场景中用矩形工具绘制一小块长方形。按Ctrl + F8新建立一个Button,命名为“scrub b TimeLineHandle”,并将scrubberTimeLineHandleGraphic Clip拖到此Button的场景中。再按Ctrl + F8新建立一个Movie Clip,命名为“scrubberTimeLineHandle”,将scrub b TimeLineHandle Button拖到此Clip的场景中,并在scrub b TimeLineHandle Button的Action面板上面增加如下语句:






on (press) {
_root.scrubber.stopMovie(_root.scrubTarget) //注释1
_root.scrubTimeLineHandle = "scrub"; //注释2
this.startDrag(true, 0, _parent.timeLine._y, _parent.timeLine._width - this._width, _parent.timeLine._y); //注释3
}
on (release, releaseOutside) { //注释4
_root.scrubTimeLineHandle = "zero";
this.stopDrag();
if (_root.scrubTargetState == "play") { //注释5
_root.scrubber.playMovie(_root.scrubTarget)
} else {
_root.scrubber.stopMovie(_root.scrubTarget)
}
}




  注释1:调用帧里面的函数,停止播放影片。
  注释2:设置变量。
  注释3:定位时间滑块的位置。
  注释4:当在时间滑块外边释放鼠标的时候触发此响应函数。
  注释5:设置播放的状态。


  7、第六步是制作播放器的时间滑块,请注意在Clip之间的层次。


  8、按Ctrl + F8新建立一个Button,命名为“scrub b drag”,在此Button中绘制一个表示移动的箭头。


  9、按Ctrl + F8新建立一个Movie Clip,命名为“scrubShadeOpenGraphic”,在此Clip的场景中绘制一个表示播放器张开的箭头。按Ctrl + F8新建立一个Movie Clip,命名为“scrubShadeClosedGraphic”,在此Clip的场景中绘制一个表示播放器合上的箭头。按Ctrl + F8新建立一个Button,命名为“scrub b shadeToggle”,在此Button时间轴中的Hit里面绘制一个小正方形,并在其他帧里面插入空白关键帧。


  10、按Ctrl + F8新建立一个Movie Clip,命名为“scrub b shade 2”,将scrubShadeClosedGraphic Clip拖到此Clip的场景中,设置此帧的标签为“open”,并在此帧的Action面板上面增加如下语句:








_root.scrubShadeState="open"
_root.scrubber.buttonRow._y = 0
stop()


  注释:展开播放器。


  11、在scrub b shade 2 Clip的第二帧上面插入空白关键帧,将此帧的标签设置为“closed”,并在此帧的Action面板上面增加如下语句:








_root.scrubShadeState="closed"
_root.scrubber.buttonRow._y = _root.scrubber.buttonRow._height*-1
stop()




  注释:合上播放器。


  12、在scrub b shade 2 Clip的时间轴上面插入一个新的层,将scrub b shadeToggle Button拖到此层的场景上面,并在此Button的Action面板上面增加如下语句:








on(press){
if(_root.scrubShadeState=="open"){
gotoAndStop("closed")
}else{
gotoAndStop("open")
}
}


  注释:根据变量,设置相应的状态


13、按Ctrl + F8新建立一个Movie Clip,命名为“scrubFlipSwitchGraphic”。在scrubFlipSwitchGraphic这个Clip的场景中,绘制一个长方形。


  14、按Ctrl + F8新建立一个Movie Clip,命名为“scrubFlipSwitch”。将scrubFlipSwitchGraphic Clip拖到此帧的场景中,将帧标签设置为“off”,并在此帧的Action面板上面增加如下语句:








stop()


  15、在scrubFlipSwitch Clip的时间轴的第二帧上面,插入一个关键帧,将帧标签设置为“on”,并在此帧的Action面板上面增加如下语句:








stop()


  16、在scrubFlipSwitch Clip的第二帧场景中的Clip的Action面板上面增加如下语句:








onClipEvent (enterFrame) {
_root.scrubber.scrubEngine(_root.scrubTarget, _root.scrubSpeed);
}


  注释:上面这些语句等于是整个播放器的引擎。


  17、分别用Ctrl + F8新建立六个Button,依次在Button的场景里面绘制“跳到最前”、“后退”、“停止”、“播放”、“前进”、“跳到最后”的箭头。


  18、按Ctrl + F8新建立一个Movie Clip,命名为“scrub button row”。将scrubFlipSwitch Clip拖到此Clip的场景中,命名为“flipSwitch”,在scrub button row Clip的场景里面用文本框拉两个文本输入框,设置属性分别如图3和图4所示。




将第17步绘制的六个箭头拖到scrub button row Clip的场景里面,在“跳到最前” 箭头的Action面板上面增加如下语句:








on (press) {
_root.scrubber.begin(_root.scrubTarget, 1);
}


  注释:调用帧函数里面的“跳到最前”函数。


  在“后退” 箭头的Action面板上面增加如下语句:








on (press) {
_root.scrubDirection = "reverse";
_root.scrubber.buttonRow.flipSwitch.gotoAndStop("on");
}
on (release, releaseOutside) {
_root.scrubber.buttonRow.flipSwitch.gotoAndStop("off");
}


  注释:调用帧函数里面的“后退”函数


在“停止” 箭头的Action面板上面增加如下语句:






on (press) {
_root.scrubber.stopMovie(_root.scrubTarget);
_root.scrubTargetState = "stop";
}


  注释:调用帧函数里面的“停止”函数。


  在“播放” 箭头的Action面板上面增加如下语句:








on (press) {
_root.scrubber.playMovie(_root.scrubTarget);
_root.scrubTargetState = "play";
}


  注释:调用帧函数里面的“播放”函数。


  在“前进” 箭头的Action面板上面增加如下语句:








on (press) {
_root.scrubDirection = "forward";
_root.scrubber.buttonRow.flipSwitch.gotoAndStop("on");
}
on (release, releaseOutside) {
_root.scrubber.buttonRow.flipSwitch.gotoAndStop("off");
}


  注释:调用帧函数里面的“前进”函数。


  在“跳到最后” 箭头的Action面板上面增加如下语句








on (press) {
_root.scrubber.end(_root.scrubTarget);
}


  注释:调用帧函数里面的“跳到最后”函数。


  19、按Ctrl + F8新建立一个Movie Clip,命名为“control”。将scrubFlipSwitch Clip从图库拖到control Clip的场景中,命名为“buttonRow”。将时间滑块scrubberTimeLineHandle Clip从图库拖到control Clip的场景中,命名为“handle”,并在scrubberTimeLineHandle Clip的Action面板上面增加如下语句:








onClipEvent (enterFrame) {
_root.scrubCurrentFrame = _root.scrubber.currentFrame(_root.scrubTarget)
if (_root.scrubTimeLineHandle == "scrub") {
_root.scrubber.scrubHandle(_root.scrubTarget);
} else {
_root.scrubber.scrubHandlePlay(_root.scrubTarget);
}
}


  20、将缩放的箭头scrub b shade 2 Clip从图库拖到control Clip的场景中。将移动的箭头scrub b drag从图库拖到control Clip的场景中,并在scrub b drag Clip的Action面板上面增加如下语句:








on (press) {
this.startDrag();
}
on (release, releaseOutside) {
this.stopDrag();
}


 


21、在control Clip的时间轴上面插入一个新的层,将时间轴scrubberTimeLineGraphic Clip拖到此帧的场景中,命名为“timeLine”,在帧的Action面板上面插入如下语句:







function end (setTarget, frame) { //注释1
setTarget.gotoAndStop(setTarget._totalframes);
_root.scrubTargetState = "stop";
}
function begin (setTarget, frame) { //注释2
setTarget.gotoAndStop(frame);
_root.scrubTargetState = "stop";
}
function stopMovie (setTarget) { //注释3
setTarget.stop();
}
function playMovie (setTarget) { //注释4
setTarget.play();
}
function scrubHandlePlay (setTarget) { //注释5
_root.scrubber.handle._x = (_root.scrubber.timeLine._width-_root.scrubber.handle._width)*(setTarget._currentFrame/setTarget._totalFrames);
}
function scrubHandle (setTarget) { //注释6
setTarget.gotoAndStop(int(setTarget._totalFrames*(_root.scrubber.handle._x/(_root.scrubber.timeLine._width-_root.scrubber.handle._width))));
}
function currentFrame (setTarget){ //注释7
return setTarget._currentFrame
}


function scrubEngine (target, speed) { //注释8
if (_root.scrubDirection == "reverse") {
direction = target._currentframe - Number(speed);
_root.direction = direction
}else{
direction = target._currentframe + Number(speed);
_root.direction = direction
}
target.gotoAndStop(direction);


if (direction<1) {
target.gotoAndStop(1);
}
if (direction>target._totalframes) {
target.gotoAndStop(target._totalframes);
_root.scrubTargetState = "stop";
}
if (_root.scrubTargetState == "play") {
target.play();
} else {
target.stop();
}
}


  注释1:定义“跳到最后”函数。
  注释2:定义“前进”函数。
  注释3:定义“停止”函数。
  注释4:定义“播放”函数。
  注释5:移动时间滑块。
  注释6:移动时间滑块时调用的函数。
  注释7:显示当前播放帧数的函数。
  注释8:根据输入的速度,调整播放情况。


  22、将影片的主场景中的第一帧的帧标签设置为“scrubber”。


  23、将control Clip拖到影片的主场景中,命名为“scrubber”,并在Clip的Action面板上面增加如下语句:








onClipEvent (load) {
_root.scrubTarget = _root.movie;
_root.scrubTargetState = "stop";
}


  注释:定位播放器要播放的影片


三、小结


  至此,一个Flash播放器就算制作完成。本质上是对Movie Clip这个函数的控制,只不过在最外一层增加了许多封装的东西,看起来就显得有点复杂。


  如果想做成网页模板,在模板里面使用这个播放器,可以在网页中通过Java Script来控制Flash播放器。这里面最重要的是Java Script与Flash之间的通讯,即是在浏览器里面的操作动作,要通过Java Script传到Flash播放器里面去。两者之间的通讯的一种实现方法是这样的:先把Flash所生成的swf文件插入到网页中,然后在网页中插入如下Java Script语句。









  注释1:这是响应浏览器里面动作的函数,在需要响应的地方加入这个函数,就可以触发这个函数。
  注释2:myFlash是插入的swf的名字,SetVariable函数的作用是将页面里的sendText变量传到Flash中的myVar变量,在Flash中对myVar变量进行相应的操作,就可以控制播放了。


  点击这里下载源文件

相关阅读 Mac访问Windows共享文件夹Windows 7正版系统验证方法windows 8.1系统版本号查看方法Windows 8.1系统电话激活时无法输入微软返回代码解决方法Windows 8如何调整屏幕分辨率windows8.1磁盘占用100%解决方法Mac双系统如何删除Boot Camp安装的Windows分区Apple教你如何在Mac 上运行 Windows

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 Flash CS4基础入门 如何在Flash中打开一个定制的浏览器新窗口?学习ActionScript 3.0的6个好处几个小技巧精简Flash文件体积在Flash动画中添加“加为收藏”和“设为首页

人气排行 Flash游戏制作--小熊拼图Flash制作动画知识:遮罩用Flash实现几种镜头效果鼠标效果系列教程:游动的鱼Flash如何做鼠标指针样式Flash制作声情并茂的电子相册FlashMX经典实例-文字类:倒影字Flash遮罩特效实例--百叶窗效果