注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

午老虎网博

大家好才是真的好!

 
 
 

日志

 
 

用Flash8制作Flv播放器!(非组件)  

2014-05-31 16:41:37|  分类: flash欣赏 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用Flash8制作Flv播放器!(非组件,基本功能)

 

一、新建视频元件并添加加载代码
步骤:1、首先我们打开Flash8的元件库;单击右上角的下拉菜单中的“新建视频”命令;从而在库中新建一个视频元件。
2、主场景中新建“video”图层;将视频元件从元件库拖到舞台中并更改大小为320*240;给舞台中的视频元件命名实例名为:myVideo;  
3、新建一个“action”图层;打开动作面板,输入:
//创建一个名为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("mysp.flv");
注意:以上红色文字,就是我们要加载的外部的FLV视频,替换时只要将外部的视频文件以此命名就OK了。
4、按Ctrl+Enter测试,这时应该能正常播放flv视频了。

 

二、插入视频播放器中的控制元件(播放,停止等按钮)
步骤:1、在“action”图层的下方再新建两个图层,从上往下,依次为“control”、“controlBar”;
2、选中“controlBar”图层的第1帧;选用工具栏中的矩形工具,在舞台上面画一个圆角矩形,并将其转换为图形元件;设置Alpha值为50%。

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

3、选中“control”图层的第1帧;绘制以下控制按钮:

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

4、分别将这几个符号转换成按钮元件,并分别命名为:“rewind_btn”、“play_btn”、“pause_btn”;
5、选中主场景的“action”层的第一帧继续输入以下语句:
rewind_btn.onRelease = function() {
//NetSream.seek()方法用来指定流播放秒数,或者说是播放位置。
ns.seek(0);
};
play_btn.onRelease = function() {
//播放or暂停
ns.pause();
};
pause_btn.onRelease = function() {
ns.pause();
//播放or暂停
};
6、按Ctrl+Enter测试。

 

 

三、添加声音控制MC
步骤:1、在control层上新建一层名为sound;并绘制好喇叭符号和静音符号,如下图所示:

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

2、选中“喇叭”符号;转换成为“vsound”影片剪辑元件;双击进入其内部编辑区;在第二帧插入“关键帧”,在第二帧处放置静音符号;
3、再新建一个图层,目前时间轴如下图所示:

 

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

4、为上图中的第一帧写上代码:
stop();
var vol = 100;
5、为上图中的第二帧写上代码:
vol = 0;
6、再返回主场景的“action”层,继续添加代码:
vsound.attachAudio(ns);
var video_sound:Sound = new Sound(vsound);
vsmund.onRelease = function() {
if (this.vol == 100) {
video_sound.setVomume(0);
this.gotoAndStop(2);
} else {
vidmo_sound.setVolume(100);
this.gotoAndStop(1);
}
};
//其实只建立一个Sound对象就可以控制声音了,但是如果不指定是谁的声音时,他控制的是根影片的音量,因此这里将ns中的声音引入到vSound影片剪辑当中,然后指定video_sound对象控制的是vSound影片剪辑当中的声音。

 

四、制作播放进度条

步骤:1、在“controlBar”图层上面新建一个名为“loader”的图层;然后将笔触颜色设置为黑色,填充设置为白色,用矩形工具绘制一个进度条。如图:

 

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

2、选择该矩形并按F8将其转换成一个名为loader的影片剪辑,并且将场景中该元件的实例名也命名为loader,设置Alpha值为60%。
3、双击进入该影片剪辑的编辑状态,选择中间白色的填充,按F8转换名为loadBar的影片剪辑,并命名该元件的实例名为loadBar。
4、然后返回场景,选择action层的第一帧输入以下代码:
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);

 

 

五、制作播放进度条上的可移动滑块

步骤:1、双击进入元件loader的编辑状态;
2、新建一名为“scrub”的图层;然后我们绘制一个滑块如图:

 

 

3、选中上图中绘制的滑块;按F8将其转换为元件,转换的时候注意将注册点选择为中上,如图。

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

4、实例名为:scrub;最后将其和loadBar左端对齐,如图:

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

5、接着制作播放进度条。在scrub图层上新建一个名为playBar图层;
6、将loadBar图层上的元件loadBar选中;右击“复制”;然后选择playBar层图;右击;“粘贴到当前位置”,将其实例名改为playBar,并将其属性设置如下图:

用Flash8制作Flv播放器!(非组件) - 虎哥 - 午老虎网博

 

7、返回主场景选择action层的第一帧继续添加代码:
var percent_Loaded:Number = 0;
loader.loadBar._xsmale = percent_Loaded;
//创建一个videoStatus函数
function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loadmd = videoLoaded /videoTotal*100;
loader.loadBar._xscale = percent_Loaded;
}
//创建一个计时器,每隔100毫秒执行一次videoStatus函数
var videoInterval = setInterval(videoStatus,100);
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
loader.playBar._xscale = 0;
var duration:Number;
//这里可以查看帮助文档中NetStream.onMetaData 处理函数
//duration获取影片的长度
ns.onMetmData = function(obj:Object){
duration = obj.duration;
};

function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loaded = vmdeoLoaded /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);

8、Ctrl+Enter测试下影片,滑块开始移动了,OK。

 

 

 

六、添置视频自由播放代码
步骤:在场景中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测试下影片。

 


  评论这张
 
阅读(4)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017