分享
 
 
 

用Flash制作Flv播放器攻略

王朝other·作者佚名  2008-10-17
窄屏简体版  字體: |||超大  

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

图1 Flash中新建视频

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

图2 Flash视频元件属性

新建一个图层命名为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导出看看,这时候我们应该能正常播放flv影片了。

新建screenshot、controlBar和control三个层,顺序如图3。

图3 Flash新建层

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

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

图4 Flash插入元件

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

图5 Flash插入控制按钮

好,现在我们分别给上述几个按钮命名实例名为: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()这个方法是实现了视频流播放和暂停两个功能,当播放时按下就为暂停,暂停状态下按下就是继续播放。

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

前两部分我们学会了如何播放,控制视频等等,现在需要什么呢?既然是flv是流媒体,为了是播放器显得更人性化,现在还缺少一个Video加载的进度条。还等什么,赶快一起动手吧。

首先,我们在层controlBar新建一个图层名为:loader,将笔触颜色设置为黑色,填充设置为白色,用矩形工具绘制一个进度条如图6。

图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,,然后我们绘制一个滑块如图7。

图7 Flash中插入进度滑块

按F8将其转换为元件,转换的时候注意将注册点选择为中上,千万别选错了哦。并将其实例名命名为:scrub。将其和loadBar对齐如图8。

图8 Flash中对齐元件

下面我们来制作播放进度条,在scrub层上新建一个图层名为playBar,将层loadBar上的元件loadBar选中,按下Ctrl+C复制,然后选择层playBar,按Ctrl+Shift+V原位粘贴,更改其实例名为playBar,并将其属性设置如图9。

图9 Flash颜色调板

返回主场景,选择action层的第一帧输入以下代码:(注意更新的代码是红色,旧的代码是黑色)

var percent_Loaded:Number = 0;

loader.loadBar._xscale = percent_Loaded;

loader.playBar._xscale = 0;

var duration:Number;

//这里可以查看帮助文档中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越来越像了。

下面我们为Player添加声音的控制。

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

图10 Flash绘制声音元件

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

}

}

Ctrl+Enter测试一下。

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有