最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442
当前位置:首页 > 网络设计学院 > Flash教程

Flash在网页中播放控制器制作

日期:08-26    来源:中国设计秀    作者:cnwebshow.com

在闪吧看到了这个flash播放器,想下载其源码下来研究已供自己使用,没想到闪吧已做禁止下载功能。费了几天的网上搜索,除了几篇相关资料外,没有源码下载,更没有实例讲解。受不住诱惑,只好自己参考资料亲手写了。这个flash影片播放控制器时用了闪吧的播放界面,程序代码完全亲手写上。WQx中国设计秀
首先我们看看flash播放控制器的界面(很简单的html代码,不过不是自己源创的) 定义样式: WQx中国设计秀
<style>WQx中国设计秀
body,td,button{font:normal 12px Tahoma;color:#333333;text-align:center}WQx中国设计秀
.drag{position:relative;cursor:hand}WQx中国设计秀
button{border:1px solid #333333;background:#EEEEEE;margin:2px;font-family:Webdings;height:20px}WQx中国设计秀
div{cursor:default}WQx中国设计秀
#menu{margin:3;line-height:20px;border:1px solid #dedede;background:#FFFFFF;display:none;position:absolute}WQx中国设计秀
#menu a:link,a:visited{border:1px solid #FFFFFF;background:#FFFFFF;text-decoration:none;display:block;padding:0 3;margin:1;color:#333333;cursor:default;text-align:left;text-indent:15px}WQx中国设计秀
#menu a:hover{background:#dedede;border-color:#666666;color:#000000}WQx中国设计秀
#ctlButtons IMG{behavior:url(rollover.htc)}WQx中国设计秀
</style>引用驱动程序: <script src="play.js"></script> 以下是flash影片播放和控制界面代码: <div oncontextmenu="return false" onselectstart="return false">WQx中国设计秀
<div style="padding:0">WQx中国设计秀
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"><tr><td>WQx中国设计秀
<object id="movie" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" align="middle">WQx中国设计秀
<param name="movie" value="about:blank" />WQx中国设计秀
<param name="quality" value="high" />WQx中国设计秀
</object>WQx中国设计秀
</td></tr></table>WQx中国设计秀
WQx中国设计秀
<table style="width:550px;height:35px;vertical-align:bottom" cellspacing="0" cellpadding="0" border="0">WQx中国设计秀
<tr>WQx中国设计秀
<td style="">WQx中国设计秀
<table style="border:0px solid #333333;width:90%;" cellpadding="1" cellspacing="0">WQx中国设计秀
<tr>WQx中国设计秀
<td style="text-align:left;vertical-align:left;background:url(bg.gif);height:8px" onMouseDown="Jump(total*event.offsetX/421|0)">WQx中国设计秀
<div id="bar" style="width:0%;font:3px;height:3px;background:#00FF44"></div>WQx中国设计秀
</td>WQx中国设计秀
<tr>WQx中国设计秀
</table>WQx中国设计秀
</td>WQx中国设计秀
<td style="text-align:right;width:50px;font:11px Tahoma" id="frameCount"></td>WQx中国设计秀
</tr>WQx中国设计秀
</table>WQx中国设计秀
<span id="ctlButtons">WQx中国设计秀
<img onClick="Rewind();" title="跳至第一帧" text="9" src="images/button/dd1.gif" hoverSrc="images/button/hh1.gif">WQx中国设计秀
<img onClick="Back();" title="快退" text="7" src="images/button/dd2.gif" hoverSrc="images/button/hh2.gif">WQx中国设计秀
<img onClick="Play();" title="播放" text="4" src="images/button/dd3.gif" hoverSrc="images/button/hh3.gif">WQx中国设计秀
<img onClick="Pause();" title="暂停" text=";" src="images/button/dd4.gif" hoverSrc="images/button/hh4.gif">WQx中国设计秀
<img onClick="Stop();" title="停止" text="<" src="images/button/dd5.gif" hoverSrc="images/button/hh5.gif">WQx中国设计秀
<img onClick="Forward();" title="快进" text="8" src="images/button/dd6.gif" hoverSrc="images/button/hh6.gif">WQx中国设计秀
<img onClick="GoToEnd();" title="跳至最末帧" text=":" src="images/button/dd7.gif" hoverSrc="images/button/hh7.gif">WQx中国设计秀
<img onClick="Replay();" title="重放" text="q" src="images/button/dd8.gif" hoverSrc="images/button/hh8.gif">WQx中国设计秀
<img onClick="showMenu(menu);" title="打开 Flash 文件" text="5" src="images/button/dd9.gif" hoverSrc="images/button/hh9.gif">WQx中国设计秀
<input type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()"></span>WQx中国设计秀
<div id="menu" onClick="this.style.display=''''''''none''''''''">WQx中国设计秀
<a href="打开指定URL" onClick="OpenRemoteSwf();return false">打开指定URL</a>WQx中国设计秀
<a href="选择本地文件" onClick="selectMovie();return false">选择本地文件</a>WQx中国设计秀
<a href="选择本地文件" onClick="alert(''''''''Wren FLash Player 1.0 PreviewnCopyright (C) WRen.Cn'''''''');return false">关于Wren Flash Player</a>WQx中国设计秀
</div></div> 运行播放器的驱动程序: <script defer>WQx中国设计秀
var movie=document.getElementById("movie");WQx中国设计秀
loadSWF("http://down.wren.cn/flash/navigation_68.swf","600","400"); //loadSWF("flash地址","宽度","高度")WQx中国设计秀
</script> WQx中国设计秀
下面看看我写的驱动程序代码,保存为play.js: var total;//定义flash影片总桢数WQx中国设计秀
var frame_number;//定义flash影片当前桢数WQx中国设计秀
WQx中国设计秀
//以下是滚动条图片拖动程序WQx中国设计秀
var dragapproved=false;WQx中国设计秀
var z,x,yWQx中国设计秀
//移动函数WQx中国设计秀
function move(){WQx中国设计秀
if (event.button==1&&dragapproved){WQx中国设计秀
y=temp1+event.clientX-x;WQx中国设计秀
//以下是控制移动的范围WQx中国设计秀
if(y<0)WQx中国设计秀
y=0;WQx中国设计秀
if(y>420)WQx中国设计秀
y=420;WQx中国设计秀
WQx中国设计秀
z.style.pixelLeft=yWQx中国设计秀
movie.GotoFrame(y/420*total);//移动到某一位置,flash影片播放到某个位置WQx中国设计秀
return falseWQx中国设计秀
}WQx中国设计秀
}WQx中国设计秀
//获得拖动前初始数据的函数WQx中国设计秀
function drags(){WQx中国设计秀
if (!document.all)WQx中国设计秀
returnWQx中国设计秀
if (event.srcElement.className=="drag"){WQx中国设计秀
dragapproved=trueWQx中国设计秀
z=event.srcElementWQx中国设计秀
temp1=z.style.pixelLeftWQx中国设计秀
x=event.clientXWQx中国设计秀
document.onmousemove=moveWQx中国设计秀
}WQx中国设计秀
}WQx中国设计秀
WQx中国设计秀
//动态显示播放影片的当前桢/总桢数WQx中国设计秀
function showcount(){WQx中国设计秀
frame_number=movie.CurrentFrame();WQx中国设计秀
frame_number++;WQx中国设计秀
frameCount.innerText=frame_number+"/"+movie.TotalFrames;WQx中国设计秀
element.style.pixelLeft=420*(frame_number/movie.TotalFrames);//滚动条图片随之到相应的位置WQx中国设计秀
if(frame_number==movie.TotalFrames)WQx中国设计秀
clearTimeout(tn_ID);WQx中国设计秀
elseWQx中国设计秀
var tn_ID=setTimeout(''''''''showcount();'''''''',1000);WQx中国设计秀
}WQx中国设计秀
//使影片返回第一帧 WQx中国设计秀
function Rewind(){WQx中国设计秀
if(movie.IsPlaying()){WQx中国设计秀
Pause();WQx中国设计秀
}WQx中国设计秀
movie.Rewind();WQx中国设计秀
element.style.pixelLeft=0;WQx中国设计秀
frameCount.innerText="1/"+total;WQx中国设计秀
}WQx中国设计秀
//播放影片 WQx中国设计秀
function Play(){WQx中国设计秀
movie.Play();WQx中国设计秀
showcount();WQx中国设计秀
}WQx中国设计秀
//暂停播放WQx中国设计秀
function Pause(){WQx中国设计秀
movie.StopPlay();WQx中国设计秀
}WQx中国设计秀
WQx中国设计秀
//跳至最末帧WQx中国设计秀
function GoToEnd(){WQx中国设计秀
if(movie.IsPlaying())WQx中国设计秀
Pause();WQx中国设计秀
movie.GotoFrame(total);WQx中国设计秀
element.style.pixelLeft=420;WQx中国设计秀
frameCount.innerText=total+"/"+total;WQx中国设计秀
}WQx中国设计秀
//快退影片WQx中国设计秀
function Back()WQx中国设计秀
{WQx中国设计秀
if(movie.IsPlaying())WQx中国设计秀
Pause();WQx中国设计秀
frame_number=frame_number-50;WQx中国设计秀
movie.GotoFrame(frame_number);WQx中国设计秀
Play();WQx中国设计秀
}WQx中国设计秀
//快进影片WQx中国设计秀
function Forward()WQx中国设计秀
{WQx中国设计秀
if(movie.IsPlaying())WQx中国设计秀
Pause();WQx中国设计秀
frame_number=frame_number+50;WQx中国设计秀
movie.GotoFrame(frame_number);WQx中国设计秀
Play();WQx中国设计秀
}WQx中国设计秀
//重新播放影片WQx中国设计秀
function Replay(){WQx中国设计秀
if(movie.IsPlaying()){WQx中国设计秀
Pause();WQx中国设计秀
movie.Rewind();WQx中国设计秀
Play();WQx中国设计秀
}WQx中国设计秀
elseWQx中国设计秀
{WQx中国设计秀
movie.Rewind();WQx中国设计秀
Play(); WQx中国设计秀
}WQx中国设计秀
}WQx中国设计秀
//停止播放影片返回到第一桢WQx中国设计秀
function Stop(){WQx中国设计秀
if(movie.IsPlaying()){WQx中国设计秀
Pause();WQx中国设计秀
movie.Rewind();WQx中国设计秀
}WQx中国设计秀
elseWQx中国设计秀
{WQx中国设计秀
movie.Rewind();WQx中国设计秀
}WQx中国设计秀
}WQx中国设计秀
//显示影片载入进度,完全载入后控制按钮可用WQx中国设计秀
function jindu(){WQx中国设计秀
var in_ID;WQx中国设计秀
bar.style.width=Math.round(movie.PercentLoaded())+"%";WQx中国设计秀
frameCount.innerText=Math.round(movie.PercentLoaded())+"%";WQx中国设计秀
if(movie.PercentLoaded() == 100){WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[0].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[1].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[2].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[3].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[4].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[5].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[6].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[7].disabled=false;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[8].disabled=false;WQx中国设计秀
total=movie.TotalFrames;WQx中国设计秀
frame_number++;WQx中国设计秀
frameCount.innerText=frame_number+"/"+total;WQx中国设计秀
bar.style.background="";WQx中国设计秀
//bar.style.width="0%"WQx中国设计秀
bar.innerHTML=''''''''<img src="images/button/posbar1.gif" style="cursor:hand;border:0;" id="element" class="drag" OnMouseover="fnOnMouseover()" OnMouseout="fnOnMouseout()">'''''''';WQx中国设计秀
document.onmousedown=dragsWQx中国设计秀
document.onmouseup=new Function("dragapproved=false;Play()")WQx中国设计秀
showcount();WQx中国设计秀
clearTimeout(in_ID);WQx中国设计秀
}WQx中国设计秀
elseWQx中国设计秀
in_ID=setTimeout("jindu();",1000);WQx中国设计秀
}WQx中国设计秀
WQx中国设计秀
//开始载入flash影片,载入过程中,播放控制按钮不可用WQx中国设计秀
function loadSWF(fsrc,fwidth,fheight){WQx中国设计秀
movie.LoadMovie(0, fsrc);WQx中国设计秀
movie.width=fwidth;WQx中国设计秀
movie.height=fheight;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[0].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[1].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[2].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[3].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[4].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[5].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[6].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[7].disabled=true;WQx中国设计秀
ctlButtons.document.all.tags(''''''''IMG'''''''')[8].disabled=true;WQx中国设计秀
WQx中国设计秀
frame_number=movie.CurrentFrame();WQx中国设计秀
jindu();WQx中国设计秀
}WQx中国设计秀
//显示层函数WQx中国设计秀
function showMenu(menu){WQx中国设计秀
menu.style.display=''''''''block'''''''';WQx中国设计秀
}WQx中国设计秀
WQx中国设计秀
//鼠标点击滚动条上的位置,影片相应播放到那个位置WQx中国设计秀
function Jump(fnume){WQx中国设计秀
if(movie.IsPlaying()){WQx中国设计秀
Pause();WQx中国设计秀
movie.GotoFrame(fnume);WQx中国设计秀
Play();WQx中国设计秀
}WQx中国设计秀
elseWQx中国设计秀
{WQx中国设计秀
movie.GotoFrame(fnume);WQx中国设计秀
Play();WQx中国设计秀
}WQx中国设计秀
}WQx中国设计秀
WQx中国设计秀
//以下两个函数是图片切换函数WQx中国设计秀
function fnOnMouseover(){WQx中国设计秀
element.src = "images/button/posbar.gif";WQx中国设计秀
}WQx中国设计秀
WQx中国设计秀
function fnOnMouseout(){WQx中国设计秀
element.src = "images/button/posbar1.gif";WQx中国设计秀
} 以上代码,我们仔细研究后会发现其实很简单,不过却费了我很大精力。欢迎大家继续在此基础上改进,增添新的功能。WQx中国设计秀
WQx中国设计秀
附可控制Flash Player的Javascript方法。 一览表:WQx中国设计秀
Play() ---------------------------------------- 播放动画 WQx中国设计秀
StopPlay()------------------------------------停止动画 WQx中国设计秀
IsPlaying()----------------------------------- 动画是否正在播放WQx中国设计秀
GotoFrame(frame_number)---------------- 跳转到某帧 WQx中国设计秀
TotalFrames()------------------------------- 获取动画总帧数 WQx中国设计秀
CurrentFrame()------------------------------回传当前动画所在帧数-1 WQx中国设计秀
Rewind()-------------------------------------使动画返回第一帧 WQx中国设计秀
SetZoomRect(left,top,right,buttom)-------放大指定区域 WQx中国设计秀
Zoom(percent)------------------------------改变动画大小 WQx中国设计秀
Pan(x_position,y_position,unit)------------使动画在x,y方向上平移 WQx中国设计秀
PercentLoaded()----------------------------返回动画被载入的百分比 WQx中国设计秀
LoadMovie(level_number,path)----------- 加载动画 WQx中国设计秀
TGotoFrame(movie_clip,frame_number)- movie_clip跳转到指定帧数 WQx中国设计秀
TGotoLabel(movie_clip,label_name)------ movie_clip跳转到指定标签 WQx中国设计秀
TCurrentFrame(movie_clip)--------------- 回传movie_clip当前帧-1