标题: [实例教程] Flv网络播放器制作全攻略(初级篇)-
space
管理员
Rank: 9Rank: 9Rank: 9


UID 2
精华 65535
积分 657158
帖子 546
下载币 373 枚
推广分 2321 点
经验值 2066 点
阅读权限 200
注册 2005-3-25
状态 离线
发表于 2006-4-21 06:28  资料  个人空间  短消息  加为好友 
Flv网络播放器制作全攻略(初级篇)-


FlvPlayer1.rar

FlvPlayer2.rar

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

第一步

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

图1-1

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

图1-2

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

var nc:NetConnection = new NetConnection();

nc.connect(null);

var ns:NetStream = new NetStream(nc);

var myVideVideo;

myVideo.attachVideo(ns);

ns.play(

http://www.creeper.cn/video/BT玩家.flv

);

具体代码有不清楚的请查看帮助文档。我们按Ctrl Enter导出看看,这时候我们应该能正常播放flv影片了。

第二步

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

图1-3

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

图screenShot.jpg

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

图1-4

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

图1-5

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

rewind_btn.onRelease = function(){

ns.seek(0);

}

play_btn.onRelease = function(){

ns.pause();

}

pause_btn.onRelease = function(){

ns.pause();

}

好的,我们现在按Ctrl Enter测试下影片。这里需要说明一下,play_btn和pause_btn函数内的代码都为ns.pause();,实际上pause()这个方法是实现了视频流播放和暂停两个功能,当播放时按下就为暂停,暂停状态下按下就是继续播放。

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

今天就先写这么多,之后我们继续制作进度条、播放滑块等。

第三步:

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

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

图1-6

然后我们选择该矩形并按F8将其转换成一个名为loader的影片剪辑,并且将场景中该元件的实例名也命名为loader,设置Alpha值为60%。双击进入该影片剪辑的编辑状态,选择中间白色的填充,按F8转换名为loadBar的影片剪辑,并命名该元件的实例名为loadBar。

然后返回场景,选择action层的第一帧输入以下代码:

var amountLoaded:Number = 0;

loader.loadBar._xscale = amountLoaded;

function videoStatus(){

var videoTotal:Number = ns.bytesTotal;

var videoLoaded:Number = ns.bytesLoaded;

amountLoaded = videoLoaded /videoTotal*100;

loader.loadBar._xscale = amountLoaded;

trace(amountLoaded);

}

var videoInterval = setInterval(videoStatus,100);

好了,按Ctrl Enter测试影片吧。(源文件为FlvPlayer2.rar)

[此贴子已经被作者于2006-4-20 23:32:08编辑过]



把下面的网址贴到网络上任何地方,可以获得下载币 详情点击这里
http://bbs.sj63.com/viewthread.php?tid=2484&fromuid=0 复制本帖地址
顶部
[广告] 如何快速赚取论坛下载币?
bob_shen
新手上路
Rank: 1


UID 13671
精华 0
积分 23
帖子 23
下载币 20 枚
推广分 0 点
经验值 46 点
阅读权限 10
注册 2006-4-27
状态 离线
发表于 2006-6-6 23:30  资料  个人空间  短消息  加为好友 
谢谢亲爱的  楼猪  学习到了 !
[em02]

顶部
[广告] 新手必读--论坛积分、等级、发贴、下载说明
韩落工作室
新手上路
Rank: 1


UID 27166
精华 0
积分 39
帖子 24
下载币 67 枚
推广分 28 点
经验值 58 点
阅读权限 10
注册 2006-12-3
状态 离线
发表于 2006-12-3 14:01  资料  个人空间  短消息  加为好友 

谢谢分享,本人页会,多交流!






顶部
[广告] 设计路上--酷站收藏大全,给你上万个设计灵感


当前时区 GMT+8, 现在时间是 2009-1-9 12:27
粤ICP备05029101号