Flash_Flv播放器制作范例

Flash_Flv播放器制作范例

Flash Flv播放器制作

第一步:

------------------------------------------------------------------------------------------------------------

如今，以flash player播放的流媒体flv文件越来越流行（PS：不知道是国内技术太落后，还是其他原因，还算不上常见），我们可以使用Flash当中自带的PlayBack组件来制作播放器。但是某些时候，PlayBack的Skin并不能满足我们的需求，比如与网页页面风格不相符或者不能很好的集成到我们的Flash站点当中，这时候我们就需要自己动手打造自己的PlayBack了。好在，制作基本功能的flv播放器不是很难\^_^/。下面我们一步一步开始吧。

首先我们打开Flash的元件库，如图1－1所示，我们点击红色的部分新建一个视频元件

图1－1

新建一个图层并命名为video，将视频元件从元件库拖到舞台中并更改大小为320*240，给舞台中的视频元件命名实例名为：myVideo。如图1－2

图1－2

新建一个图层命名为action，选择第一帧按F9调出动作面板，输入以下代码：

//创建一个名为nc的NetConnection对象

var nc:NetConnection = new NetConnection();

nc.connect(null);

//创建一个名为ns的NetStream对象，并将nc作为参数填写在括号内

var ns:NetStream = new NetStream(nc);

//创建一个名为myVideo的Video对象

var myVideo:Video;

//将myVideo播放的视频指定为ns myVideo.attachVideo(ns);

//让ns执行play()方法，括号内填写flv文件的路径，这里我用的是本地路径

ns.play(BT玩家.flv);

代码上有不清楚或者相关的请查看帮助文档。我们按Ctrl+Enter导出看看，这时候我们应该

Flash_Flv播放器制作范例

能正常播放flv影片了。 PS：如果目前你手头上没有flv文件，不用担心。到去下载.

第二步:

------------------------------------------------------------------------------------------------------------ 新建screenshot、controlBar和control三个层，顺序如图1-3

图1-3

把screenshot放在video层之下，导入screenShot.jpg，并将该元件放到screenshot层上与video的框架正好吻合。

图screenShot.jpg

PS：对于影片截图，放不放就根据需要啦。

选择层controlBar，用矩形工具绘制一个圆角矩形，将其转换成元件后，设置Alpha值为50％。如图1-4

Flash_Flv播放器制作范例

图1-4

选择层control，是用文字工具，选择字体为Webdings（系统自带的，别跟我说没有＝。＝），颜色为黑色，按下9打出特殊符号 ，再按4打出另外一个特殊符号 ，然后按；打出 。分别将这两个符号转换为按钮元件rewind_button、play_button和pause_button，并定位好他们的位置如图1-5

图1-5

好，现在我们分别给上述几个按钮命名实例名为：rewind_btn、play_btn、pause_btn。选择action层第一帧输入一下代码：

rewind_btn.onRelease = function(){

//NetSream.seek()方法用来指定流播放秒数，或者说是播放位置。

ns.seek(0);

}

play_btn.onRelease = function(){

//播放or暂停

ns.pause();

}

pause_btn.onRelease = function(){

ns.pause();

}

好的，我们现在按Ctrl+Enter测试下影片。这里需要说明一下，play_btn和pause_btn函数内的代码都为ns.pause();，实际上pause()这个方法是实现了视频流播放和暂停两个功能，当播放时按下就为暂停，暂停状态下按下就是继续播放。这里是为照顾初学者的理解我才这么做的，追求完美的朋友可以自己做一个按钮，实现播放符号和暂停符号的切换。 第三步:

------------------------------------------------------------------------------------------------------------

Flash_Flv播放器制作范例

前两部分我们学会了如何播放，控制视频等等，现在需要什么呢？既然是flv是流媒体，为了是播放器显得更人性化，现在还缺少一个Video加载的进度条。还等什么，赶快一起动手吧。首先，我们在层controlBar新建一个图层名为：loader，将笔触颜色设置为黑色，填充设置为白色，用矩形工具绘制一个进度条如图1-6

图1-6 然后我们选择该矩形并按F8将其转换成一个名为loader的影片剪辑，并且将场景中该元件的实例名也命名为loader，设置Alpha值为60％。双击进入该影片剪辑的编辑状态，选择中间白色的填充，按F8转换名为loadBar的影片剪辑，并命名该元件的实例名为loadBar。 然后返回场景，选择action层的第一帧输入以下代码：

//和平时见到的swf loading都差不多，这里我就不多解释了

var percent_Loaded:Number = 0;

loader.loadBar._xscale = percent_Loaded;

//创建一个videoStatus函数

function videoStatus(){

var videoTotal:Number = ns.bytesTotal;

var videoLoaded:Number = ns.bytesLoaded;

percent_Loaded = videoLoaded /videoTotal*100;

loader.loadBar._xscale = percent_Loaded;

}

//创建一个计时器，每隔100毫秒执行一次videoStatus函数

var videoInterval = setInterval(videoStatus,100);

第四步:

------------------------------------------------------------------------------------------------------------

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

Flash_Flv播放器制作范例

图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;

Flash_Flv播放器制作范例

//这里可以查看帮助文档中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测试下影片，怎么样，滑块跟随着播放时间的流逝在移动了吧。 第五步:

------------------------------------------------------------------------------------------------------------

我们的Video看过一次了，这时候我们还想要再看其中的某一部分，我们总不能从头播放吧。因此我们现在旧来实现拖动播放滑块，实现Video自由的播放。继续写代码^_^ 在场景中action层第一帧添加以下代码：

var scrubInterval;

loader.scrub.onPress = function(){

//当按下滑块，清除videoInterval计时器

clearInterval(videoInterval);

//设置scrubInterval计时器

scrubInterval = setInterval(scrubit,10);

//设置滑块的滑动范围 this.startDrag(false,0,this._y,loader.loadBar._width,this._y); }

loader.scrub.onRelease = loader.scrub.onReleaseOutside = function(){

//当释放滑块，清除csrubInterval计时器 clearInterval(scrubInterval);

//恢复videoInterval计时器

videoInterval = setInterval(videoStatus,100);

this.stopDrag();

}

//创建scrubit方法

function scrubit(){

//滑块所指的播放seek的秒数等于滑块的x坐标除以loadBar的宽度，再乘以总秒数 ns.seek(Math.floor((loader.scrub._x / loader.loadBar._width)*duration));

//让playBar的缩放跟随滑块的位置变化而变化

loader.playBar._xscale = loader.scrub._x / loader.loadBar._width *100;

}

好了，现在我们按Ctrl+Enter测试下影片，是不是发现与PlayBack越来越像了^_^

Flash_Flv播放器制作范例

第六步:

------------------------------------------------------------------------------------------------------------

下面我们为Player添加声音的控制。首先，我们在control层上新建一层名为sound，选择文字工具，使用Webdings字体，按shift+W打出 符号，选择修改，变形，水平翻转，按F8将其转换为影片剪辑。双击进入编辑状态，在第二帧处插入关键帧。我们在第二帧上的 符号上画一条斜线如图1-10

图1-10 如图1－10，我们在第一帧上写上代码：

stop();

var vol = 100;

第二帧上写上代码：

vol = 0;

返回场景，将该元件的实例名命名为vSound，选择层action的第一帧，输入以下代码： vSound.attachAudio(ns);

var video_sound:Sound = new Sound(vSound);

vSound.onRelease = function(){

if(this.vol == 100){

video_sound.setVolume(0);

this.gotoAndStop(2);

}else{

video_sound.setVolume(100);

this.gotoAndStop(1);

}

}

Flash_Flv播放器制作范例

Ctrl+Enter测试一下。这里需要说明一下，其实只建立一个Sound对象就可以控制声音了，但是如果不指定是谁的声音时，他控制的是根影片的音量，因此这里将ns中的声音引入到vSound影片剪辑当中，然后指定video_sound对象控制的是vSound影片剪辑当中的声音。 第七步:

------------------------------------------------------------------------------------------------------------

我们的播放器总算有模有样了，不过还缺少样东西。大家在播放流媒体的时候，是不是常常会见到缓冲？没错，就是缓冲。还等什么，赶快动手。 首先，我们在层video和controlBar之间新建一层并命名为buffer，然后用矩形在舞台上绘制一个320*240的黑色矩形，将其和video的位置对齐，正好能挡着video。然后我们按F8将其转换给影片剪辑，并命名其实例名为buffer_mc。双击进入编辑状态，新建一层名为text，用文字工具输入文字：视频缓冲中。并将其转换为元件创建一个Alpha渐变的动画，如图1-11：

图1-11

返回场景，选择层action，输入一下代码：

//设置ns缓冲时间为15秒

ns.setBufferTime(15);

//创建ns的onStatus处理函数，详细请查看帮助文档

ns.onStatus = function(info:Object){

//当缓冲为满的时候,buffer_mc隐藏

if(info.code == "NetStream.Buffer.Full"){

buffer_mc._visible = false;

}

//当缓冲空的时候，buffer_mc显示

Flash_Flv播放器制作范例

if(info.code == "NetStream.Buffer.Empty"){

buffer_mc._visible = true;

}

//当视频播放结束时，重新播放

if(info.code == "NetStream.Play.Stop"){

ns.seek(0);

}

}

OK，导出测试一下。

第八步:

------------------------------------------------------------------------------------------------------------ 下面我们来给播放器做个右键菜单（；^ ^）首先，在action层第一帧输入一下代码： var myMenu:ContextMenu = new ContextMenu();

myMenu.hideBuiltInItems();

这里我们自定义了一个myMenu为新的ContexMenu对象，然后我们使用hideBuiltInItems()方法将“设置”和“版权声明”以外的选项都隐藏起来。导出测试一下。 然后我们再输入以下代码：

var i1:ContextMenuItem = new ContextMenuItem("::::: Video Controls :::::",trace); var i2:ContextMenuItem = new ContextMenuItem("Play / Pause",pauseIt,true);

var i3:ContextMenuItem = new ContextMenuItem("Replay",replayIt);

var i4:ContextMenuItem = new ContextMenuItem("Select a Flv files",selectIt,true); var i5:ContextMenuItem = new ContextMenuItem("Copyright 2006 Sailon",trace,true); myMenu.customItems[0] = i1;

myMenu.customItems[1] = i2;

myMenu.customItems[2] = i3;

myMenu.customItems[3] = i4;

myMenu.customItems[4] = i5;

定义i1－i5为新的ContexMenuItem，并在该构造函数中填入相应的参数，具体的参数说明可以查看帮助文档^_^ 然后我们将myMenu的属性coustomItems（数组）赋给i1－i5。 好，现在我们定义好了菜单，下面我们给所对应菜单写上方法，代码如下：

import .FileReference;

//播放暂停方法

function pauseIt() {

ns.pause();

}

//重放方法

function replayIt() {

ns.seek(0);

}

//选择Flv方法 function selectIt(){

var listener:Object = new Object();

listener.onSelect = function(file:FileReference):Void {

Flash_Flv播放器制作范例

trace("Opened " + ); playVideo();

}

listener.onCancel = function(file:FileReference):Void {

trace("User cancelled");

}

var fileRef:FileReference = new FileReference();

fileRef.addListener(listener);

fileRef.browse();

}

这里需要说明一下，selectIt()方法在选择flv文件后会触发playVideo()方法，因此我们这里还需要修改步骤一的代码。将步骤一的代码修改如下：

var nc:NetConnection = new NetConnection();

nc.connect(null);

var ns:NetStream = new NetStream(nc);

var myVideo:Video;

myVideo.attachVideo(ns);

function playVideo(video){

ns.play(video);

trace("playVido:" + video);

}

playVideo("BT玩家.flv");

这里有个小小的遗憾目前FileReference这个类还不支持读取目录的功能，所以我们所需要选择的flv文件必须和swf文件放在同一个目录下才可以正常播放。 OK，我们导出测试一下。 最后，本文在这里只是抛砖引玉，查阅并熟悉帮助文档里的函数方法，希望大家还可以创造出功能更强大更好玩的播放器来。

本文来源：https://www.bwwdw.com/article/xe64.html