Flash animation in the Web page playback Controller Production Xiang Solution

Source: Internet
Author: User
Tags continue new features reference rewind
Flash Animation | control | Web page in the Flash bar saw this Flash player, want to download its source code down research has been for their own use, did not expect to Flash bar has been done to prohibit the download function. A few days of online search, in addition to a few relevant information, there is no source download, there is no instance to explain. Can't resist the temptation, had to write their own reference materials. This flash movie playback controller with a flashing bar of the playback interface, the program code completely hand-written.
First we look at the Flash Playback Controller interface (very simple HTML code, but not its own source) to define the style:
<style>
Body,td,button{font:normal 12px tahoma;color: #333333; Text-align:center}
. Drag{position:relative;cursor:hand}
button{border:1px solid #333333; background: #EEEEEE; margin:2px;font-family:webdings;height:20px}
Div{cursor:default}
#menu {margin:3;line-height:20px;border:1px solid #dedede; background: #FFFFFF;d Isplay:none;position:absolute}
#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}
#menu a:hover{background: #dedede; border-color: #666666; color: #000000}
#ctlButtons Img{behavior:url (ROLLOVER.HTC)}
</style> Reference driver: <script src= "Play.js" ></script> below is the Flash movie playback and Control Interface code: <div oncontextmenu= " return False ' onselectstart= return false ' >
<div style= "padding:0" >
<table border= "0" cellpadding= "0" cellspacing= "1" bgcolor= "#000000" ><tr><td>
<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=" "height=" "align=" Middle ">
<param name= "movie" value= "About:blank"/>
<param name= "Quality" value= "High"/>
</object>
</td></tr></table>

<table style= "Width:550px;height:35px;vertical-align:bottom" cellspacing= "0" cellpadding= "0" border= "0" >
<tr>
&LT;TD style= "" >
<table style= "border:0px solid #333333 width:90%;" cellpadding= "1" cellspacing= "0" >
<tr>
&LT;TD style= "Text-align:left;vertical-align:left;background:url (bg.gif); height:8px" >
<div id= "Bar" style= "Width:0%;font:3px;height:3px;background: #00FF44" ></div>
</td>
<tr>
</table>
</td>
&LT;TD style= "text-align:right;width:50px;font:11px Tahoma" id= "Framecount" ></td>
</tr>
</table>
<span id= "Ctlbuttons" >









<input type= "File" id= "Moviefile" style= "Display:none" onpropertychange= "Loadmovie ()" ></span>
<div id= "Menu" >
<a href= "Open the specified URL" > open the specified url</a>
<a href= "Select Local File" > select Local file </a>
<a href= "Select Local file" > About Wren Flash player</a>
</div></div> Run the player driver: <script defer>
var Movie=document.getelementbyid ("movie");
loadswf ("http://down.wren.cn/flash/navigation_68.swf", "600", "400"); LOADSWF ("Flash address", "width", "height")
</script>
Here's a look at the driver code I wrote, save for Play.js:var total;//define Flash movie Total Frames
var frame_number;//defines the current number of frames for a flash movie

The following is a scroll bar picture drag program
var Dragapproved=false;
var z,x,y
Move function
function Move () {
if (event.button==1&&dragapproved) {
Y=temp1+event.clientx-x;
The following is the scope of control movement
if (y<0)
y=0;
if (y>420)
y=420;

Z.style.pixelleft=y
Movie. Gotoframe (y/420*total);//move to a location, Flash movie to play to a location
return False
}
}
function to get initial data before dragging
function drags () {
if (!document.all)
Return
if (event.srcelement.classname== "drag") {
Dragapproved=true
Z=event.srcelement
Temp1=z.style.pixelleft
X=event.clientx
Document.onmousemove=move
}
}

Animate the current frame/total number of frames that play the movie
function Showcount () {
Frame_number=movie. Currentframe ();
frame_number++;
framecount.innertext=frame_number+ "/" +movie. Totalframes;
element.style.pixelleft=420* (Frame_number/movie. Totalframes);//scroll bar picture with the appropriate location
if (Frame_number==movie. Totalframes)
Cleartimeout (tn_id);
Else
var tn_id=settimeout ("") showcount (); ', ', 1000);
}
Bring the movie back to the first frame
Function Rewind () {
if (movie. IsPlaying ()) {
Pause ();
}
Movie. Rewind ();
element.style.pixelleft=0;
framecount.innertext= "1/" +total;
}
Play a movie
function Play () {
Movie. Play ();
Showcount ();
}
Pause Playback
function Pause () {
Movie. Stopplay ();
}

Skip to Last Frame
function Gotoend () {
if (movie. IsPlaying ())
Pause ();
Movie. Gotoframe (total);
element.style.pixelleft=420;
framecount.innertext=total+ "/" +total;
}
Quick Rewind Movie
function back ()
{
if (movie. IsPlaying ())
Pause ();
frame_number=frame_number-50;
Movie. Gotoframe (Frame_number);
Play ();
}
Fast forward to the movie
function Forward ()
{
if (movie. IsPlaying ())
Pause ();
frame_number=frame_number+50;
Movie. Gotoframe (Frame_number);
Play ();
}
Play back the movie
Function Replay () {
if (movie. IsPlaying ()) {
Pause ();
Movie. Rewind ();
Play ();
}
Else
{
Movie. Rewind ();
Play ();
}
}
Stop playing the movie return to the first frame
function Stop () {
if (movie. IsPlaying ()) {
Pause ();
Movie. Rewind ();
}
Else
{
Movie. Rewind ();
}
}
Show movie load progress, full load post control button available
function Jindu () {
var in_id;
Bar.style.width=math.round (movie. Percentloaded ()) + "%";
Framecount.innertext=math.round (movie. Percentloaded ()) + "%";
if (movie. percentloaded () = = 100) {
CtlButtons.document.all.tags ("") "' IMG '" "'" [0].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [1].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [2].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [3].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [4].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [5].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [6].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [7].disabled=false;
CtlButtons.document.all.tags ("") "' IMG '" "'" [8].disabled=false;
Total=movie. Totalframes;
frame_number++;
framecount.innertext=frame_number+ "/" +total;
Bar.style.background= "";
Bar.style.width= "0%"
Bar.innerhtml= ' ' Document.onmousedown=drags
Document.onmouseup=new Function ("Dragapproved=false; Play ())
Showcount ();
Cleartimeout (in_id);
}
Else
In_id=settimeout ("Jindu ();", 1000);
}

Start loading Flash movie, the playback control button is not available during loading
function loadswf (fsrc,fwidth,fheight) {
Movie. Loadmovie (0, FSRC);
Movie.width=fwidth;
Movie.height=fheight;
CtlButtons.document.all.tags ("") "' IMG '" "'" [0].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [1].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [2].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [3].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [4].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [5].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [6].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [7].disabled=true;
CtlButtons.document.all.tags ("") "' IMG '" "'" [8].disabled=true;

Frame_number=movie. Currentframe ();
Jindu ();
}
Display layer Functions
function ShowMenu (menu) {
"Menu.style.display=" "' Block '" "";
}

Click on the position on the scroll bar, the movie play to that position accordingly
function Jump (fnume) {
if (movie. IsPlaying ()) {
Pause ();
Movie. Gotoframe (Fnume);
Play ();
}
Else
{
Movie. Gotoframe (Fnume);
Play ();
}
}

The following two functions are picture switching functions
function Fnonmouseover () {
ELEMENT.SRC = "Images/button/posbar.gif";
}

function Fnonmouseout () {
ELEMENT.SRC = "Http://www.webjx.com/htmldata/2005-10-22/images/button/posbar1.gif";
The above code, we carefully study will find that in fact very simple, but it cost me a lot of energy. Welcome you to continue to improve on this basis, add new features.

A JavaScript method with control Flash Player is attached. list:
Play ()----------------------------------------animation
Stopplay ()------------------------------------stop animation
IsPlaying ()-----------------------------------whether the animation is playing
Gotoframe (frame_number)----------------jump to a frame
Totalframes ()-------------------------------get the total number of frames for the animation
Currentframe ()------------------------------return the number of frames in the current animation-1
Rewind ()-------------------------------------causes the animation to return to the first frame
Setzoomrect (Left,top,right,buttom)-------enlarge the specified range
Zoom (percent)------------------------------change animation size
Pan (x_position,y_position,unit)------------to translate the animation in the x,y direction
percentloaded ()----------------------------returns the percentage of animation being loaded
Loadmovie (Level_number,path)-----------load animation
Tgotoframe (movie_clip,frame_number)-Movie_clip jumps to the specified number of frames
Tgotolabel (movie_clip,label_name)------Movie_clip jumps to the specified label
Tcurrentframe (movie_clip)---------------postback Movie_clip Current frame-1
Tcurrentlabel (movie_clip)-----------------postback movie_clip current label
Tplay (Movie_clip)---------------------------play Movie_clip
Tstopplay (movie_clip)----------------------stop movie_clip Playback
GetVariable (variable_name)-----------------Get variables
SetVariable (variable_name,value)-----------variable assignment
Tcallframe (movie_clip,frame_number)---Call specifies the action on the frame
Tcalllabel (Movie_clip,label)----------------call specifies the action on the label
Tgetproperty (Movie_clip,property)--------get the specified properties of Movie_clip
Tsetproperty (Movie_clip,property,number)-Set the specified properties of Movie_clip
The above code, we carefully study will find that in fact very simple, but it cost me a lot of energy. Welcome you to continue to improve on this basis, add new features.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.