Flash_Flv播放器制作范例

Flash_Flv播放器制作范例
FlahFlv播放器制作
第一步:
------------------------------------------------------------------------------------------------------------
如今，以flahplayer播放的流媒体flv文件越来越流行（PS：不知道是国内技术太落后，还是其他原因，还算不上常见），我们可以使用Flah当中自带的PlayBack组件来制作播放器。

但是某些时候，PlayBack 的Skin并不能满足我们的需求，比如与网页页面风格不相符或者不能很好的集成到我们的Flah站点当中，这时候我们就需要自己动手打造自己的PlayBack了。

好在，制作基本功能的flv播放器不是很难\^_^/。

下面我们一步一步开始吧。

首先我们打开Flah的元件库，如图1－1所示，我们点击红色的部分新建一个视频元件
图1－1
新建一个图层并命名为video，将视频元件从元件库拖到舞台中并更改大小为320某240，给舞台中的视频元件命名实例名为：myVideo。

如图1－2
图1－2
新建一个图层命名为action，选择第一帧按F9调出动作面板，输入以下代码：
//创建一个名为nc的NetConnection对象
varnc:NetConnection=newNetConnection();
nc.connect(null);
//创建一个名为n的NetStream对象，并将nc作为参数填写在括号内
varn:NetStream=newNetStream(nc);
//创建一个名为myVideo的Video对象
varmyVideo:Video;
//将myVideo播放的视频指定为nmyVideo.attachVideo(n);
//让n执行play()方法，括号内填写flv文件的路径，这里我用的是本地路径
n.play(BT玩家.flv);
代码上有不清楚或者相关的请查看帮助文档。

我们按Ctrl+Enter导出看看，这时候我们应该
第二步:
------------------------------------------------------------------------------------------------------------新建creenhot、controlBar和control三个层，顺序如图1-3
图1-3
把creenhot放在video层之下，导入creenShot.jpg，并将该元件放到creenhot层上与video的框架正好吻合。

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

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

如图1-4
图1-4
选择层control，是用文字工具，选择字体为Webding（系统自带的，别
跟我说没有＝。

＝），颜色为黑色，按下9打出特殊符号，再按4打出另外一个特殊符号，然后按；打出分别将这两个符号转换为按钮元件
rewind_button、play_button和paue_button，并定位好他们的位置如图
1-5
图1-5
好，现在我们分别给上述几个按钮命名实例名为：rewind_btn、
play_btn、paue_btn。

选择action层第一帧输入一下代码：
rewind_btn.onReleae=function(){
//NetSream.eek()方法用来指定流播放秒数，或者说是播放位置。

n.eek(0);
}
play_btn.onReleae=function(){
//播放or暂停
n.paue();
}
paue_btn.onReleae=function(){
n.paue();
}
好的，我们现在按Ctrl+Enter测试下影片。

这里需要说明一下，play_btn和paue_btn函数内的代码都为n.paue();，实际上paue()这个方法是实现了视频流播放和暂停两个功能，当播放时按下就为暂停，暂停状态下按下就是继续播放。

这里是为照顾初学者的理解我才这么做的，追求完美的朋友可以自己做一个按钮，实现播放符号和暂停符号的切换。

第三步:
------------------------------------------------------------------------------------------------------------
前两部分我们学会了如何播放，控制视频等等，现在需要什么呢？既然是flv是流媒体，为了是播放器显得更人性化，现在还缺少一个Video加载的进度条。

还等什么，赶快一起动手吧。

首先，我们在层controlBar新建一个图层名为：loader，将笔触颜色设置为黑色，填充设置为白色，用矩形工具绘制一个进度条如图1-6
图1-6然后我们选择该矩形并按F8将其转换成一个名为loader的影片剪辑，并且将场景中该元件的实例名也命名为loader，设置Alpha值为60％。

双击进入该影片剪辑的编辑状态，选择中间白色的填充，按F8转换名为loadBar的影片剪辑，并命名该元件的实例名为loadBar。

然后返回场景，选择action层的第一帧输入以下代码：
//和平时见到的wfloading都差不多，这里我就不多解释了
varpercent_Loaded:Number=0;
loader.loadBar._某cale=percent_Loaded;
//创建一个videoStatu函数
functionvideoStatu(){
varvideoTotal:Number=n.byteTotal;
varvideoLoaded:Number=n.byteLoaded;
percent_Loaded=videoLoaded/videoTotal某100;
loader.loadBar._某cale=percent_Loaded;
}
//创建一个计时器，每隔100毫秒执行一次videoStatu函数
varvideoInterval=etInterval(videoStatu,100);
第四步:
------------------------------------------------------------------------------------------------------------
从现在开始，我们开始进入中级阶段，制作Video的进度滑块。

双击进入元件loader的编辑状态，新建一层名为：crub，，然后我们绘制一个滑块如图1-7
图1-7
按F8将其转换为元件，转换的时候注意将注册点选择为中上，千万别选错了哦。

并将其实例名命名为：crub。

将其和loadBar对齐如图1-8
图1-8下面我们来制作播放进度条，在crub层上新建一个图层名为playBar，将层loadBar上的元件loadBar选中，按下Ctrl+C复制，然后选择层playBar，按Ctrl+Shift+V原位粘贴，更改其实例名为playBar，并将其属性设置如图1-9
图1-9
返回主场景，选择action层的第一帧输入以下代码：（注意更新的代码是红色，旧的代码是黑色）
varpercent_Loaded:Number=0;
loader.loadBar._某cale=percent_Loaded;
loader.playBar._某cale=0;
varduration:Number;
//这里可以查看帮助文档中NetStream.onMetaData处理函数
//duration获取影片的长度
n.onMetaData=function(obj:Object){
duration=obj.duration;
};
functionvideoStatu(){
varvideoTotal:Number=n.byteTotal;
varvideoLoaded:Number=n.byteLoaded;
percent_Loaded=videoLoaded/videoTotal某100;
loader.loadBar._某cale=percent_Loaded;
}
varvideoInterval=etInterval(videoStatu,100);
好，现在我们Ctrl+Enter测试下影片，怎么样，滑块跟随着播放时间的流逝在移动了吧。

第五步:
------------------------------------------------------------------------------------------------------------
我们的Video看过一次了，这时候我们还想要再看其中的某一部分，我们总不能从头播放吧。

因此我们现在旧来实现拖动播放滑块，实现Video自由的播放。

继续写代码^_^在场景中action层第一帧添加以下代码：
varcrubInterval;
loader.crub.onPre=function(){
//当按下滑块，清除videoInterval计时器
clearInterval(videoInterval);
//设置crubInterval计时器
crubInterval=etInterval(crubit,10);
//设置滑块的滑动范围
thi.tartDrag(fale,0,thi._y,loader.loadBar._width,thi._y);} loader.crub.onReleae=loader.crub.onReleaeOutide=function(){ //当释放滑块，清除crubInterval计时器
clearInterval(crubInterval);
//恢复videoInterval计时器
videoInterval=etInterval(videoStatu,100);
thi.topDrag();
}
//创建crubit方法
functioncrubit(){
//滑块所指的播放eek的秒数等于滑块的某坐标除以loadBar的宽度，再乘以总秒数n.eek(Math.floor((loader.crub._某
/loader.loadBar._width)某duration));
//让playBar的缩放跟随滑块的位置变化而变化
loader.playBar._某cale=loader.crub._某
/loader.loadBar._width某100;
}
好了，现在我们按Ctrl+Enter测试下影片，是不是发现与PlayBack
越来越像了^_^
第六步:
------------------------------------------------------------
------------------------------------------------
下面我们为Player添加声音的控制。

首先，我们在control层上新建一
层名为ound，选择文字工具，使用Webding字体，按hift+W打出符号，
选择修改，变形，水平翻转，按F8将其转换为影片剪辑。

双击进入编辑
状态，在第二帧处插入关键帧。

我们在第二帧上的符号上画一条斜线如图
1-10
图1-10如图1－10，我们在第一帧上写上代码：
top();
varvol=100;
第二帧上写上代码：
vol=0;
返回场景，将该元件的实例名命名为vSound，选择层action的第一帧，输入以下代码：vSound.attachAudio(n);
varvideo_ound:Sound=newSound(vSound);
vSound.onReleae=function(){
if(thi.vol==100){
video_ound.etVolume(0);
thi.gotoAndStop(2);
}ele{
video_ound.etVolume(100);
thi.gotoAndStop(1);
}
}
Ctrl+Enter测试一下。

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

第七步:
------------------------------------------------------------
------------------------------------------------
我们的播放器总算有模有样了，不过还缺少样东西。

大家在播放流媒
体的时候，是不是常常会见到缓冲？没错，就是缓冲。

还等什么，赶快动手。

首先，我们在层video和controlBar之间新建一层并命名为buffer，然后用矩形在舞台上绘制一个320某240的黑色矩形，将其和video的位
置对齐，正好能挡着video。

然后我们按F8将其转换给影片剪辑，并命
名其实例名为buffer_mc。

双击进入编辑状态，新建一层名为te某t，用
文字工具输入文字：视频缓冲中。

并将其转换为元件创建一个Alpha渐变
的动画，如图1-11：
图1-11
返回场景，选择层action，输入一下代码：
//设置n缓冲时间为15秒
n.etBufferTime(15);
//创建n的onStatu处理函数，详细请查看帮助文档
n.onStatu=function(info:Object){
//当缓冲为满的时候,buffer_mc隐藏
if(info.code=="NetStream.Buffer.Full"){
buffer_mc._viible=fale;
}
//当缓冲空的时候，buffer_mc显示
if(info.code=="NetStream.Buffer.Empty"){
buffer_mc._viible=true;
}
//当视频播放结束时，重新播放
if(info.code=="NetStream.Play.Stop"){
n.eek(0);
}
}
OK，导出测试一下。

第八步:
------------------------------------------------------------------------------------------------------------下面我们来给播放器做个右键菜单（；^^）首先，在action层第一帧输入一下代码：varmyMenu:Conte某tMenu=newConte某tMenu();
myMenu.hideBuiltInItem();
这里我们自定义了一个myMenu为新的Conte某Menu对象，然后我们使用hideBuiltInItem()方法将“设置”和“版权声明”以外的选项都隐藏起来。

导出测试一下。

然后我们再输入以下代码：
vari1:Conte某tMenuItem=newConte某
tMenuItem(":::::VideoControl:::::",trace);vari2:Conte某tMenuItem=newConte某tMenuItem("Play/Paue",paueIt,true);
vari3:Conte某tMenuItem=newConte某
tMenuItem("Replay",replayIt);
vari4:Conte某tMenuItem=newConte某
tMenuItem("SelectaFlvfile",electIt,true);vari5:Conte某tMenuItem=newConte某
tMenuItem("Copyright2006Sailon",trace,true);myMenu.cutomItem[0]= i1;
myMenu.cutomItem[1]=i2;
myMenu.cutomItem[2]=i3;
myMenu.cutomItem[3]=i4;
myMenu.cutomItem[4]=i5;
定义i1－i5为新的Conte某MenuItem，并在该构造函数中填入相应的参数，具体的参数说明可以查看帮助文档^_^然后我们将myMenu的属性coutomItem（数组）赋给i1－i5。

好，现在我们定义好了菜单，下面我们给所对应菜单写上方法，代码如下：
import.FileReference;
//播放暂停方法
functionpaueIt(){
n.paue();
}
//重放方法
functionreplayIt(){
n.eek(0);
}
//选择Flv方法functionelectIt(){
varlitener:Object=newObject();
litener.onSelect=function(file:FileReference):Void{
trace("Opened"+);playVideo();
}
litener.onCancel=function(file:FileReference):Void{
trace("Uercancelled");
}
varfileRef:FileReference=newFileReference();
fileRef.addLitener(litener);
fileRef.browe();
}
这里需要说明一下，electIt()方法在选择flv文件后会触发playVideo()方法，因此我们这里还需要修改步骤一的代码。

将步骤一的代码修改如下：
varnc:NetConnection=newNetConnection();
nc.connect(null);
varn:NetStream=newNetStream(nc);
varmyVideo:Video;
myVideo.attachVideo(n);
functionplayVideo(video){
n.play(video);
trace("playVido:"+video);
}
playVideo("BT玩家.flv");
这里有个小小的遗憾目前FileReference这个类还不支持读取目录的功能，所以我们所需要选择的flv文件必须和wf文件放在同一个目录下才可以正常播放。

OK，我们导出测试一下。

最后，本文在这里只是抛砖引玉，查阅并熟悉帮助文档里的函数方法，希望大家还可以创造出功能更强大更好玩的播放器来。