蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网页制作 >> 网页三剑客 >> 正文

简单!用Flash制作Flv播放器攻略!

作者:佚名    文章来源:网络    更新时间:2008-11-1 13:26:29
 

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

图1
图1 Flash中新建视频

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

图2 Flash
图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
图3 Flash新建层

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

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

图4 Flash
图4 Flash插入元件

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

图5 Flash
图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 插入播放进度条
图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中插入进度滑块
图7 Flash中插入进度滑块

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

[1] [2] 下一页


发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★