Flash Video Player Tutorial
Feb 6th, 2009 | By admin | Category: FlashA custom video player can be very helpful for your overall beauty of your web design. If you have a video site, it is even more crucial to have a custom video player that leaves a good impression on your visitors.
In this tutorial, we’ll show you how to code and design your custom flash video player step by step. We hope it will be a good resource for the flash newbies.
Important Notes Before Beginning
- Don’t forget to set the instance names of the movieclips as stated, otherwise, the actions will not work!
- Pay attention to italic statements. They will be telling you which layer & movieclip you are working on!
- FullScreen button will only work if you have <param name=”allowFullScreen” value=”true” /> in your HTML.
Design Part:
First, create a new flash document (ActionScript 2.0) and set the size and the frame rate as you wish. A frame rate of 30fps is typical. Speaking of document size, you should keep in mind that if you are streaming 4×3 ratio videos, you should obey this ratio also adding the height of control bar which we will use. We, in this tutorial, set the size to 489 x 400 px.
As background color, we suggest you to set it same with your website’s background color. But it is up to you, of course.
Scene 1 (layer:background)
Now name the first layer “background” and put whatever you want to display on the background of your video player. We placed a black fading background for the control bar here.
Scene 1 (layer:controls)
Create a new layer, named “controls”. Then, draw your control bar buttons that will trigger video to pause, play, rewind, mute and resize to fullscreen.
Convert all buttons to movie clips by selecting and hitting F8. Name each as you wish. Then in the properties window, set the instance name of each movie clip. Instance names of the buttons in our example; “pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” in order.
Scene 1 > volume (layer:Layer1)
As you can guess, volume and fullscreen buttons must have different views when clicked. So, first, click on the volume button to edit further. Inside the movieclip, create two frames, one for mute, one for unmute.
Scene 1 > fullscreen (layer:Layer1 & Layer2)
Repeat the same process for the fullscreen button. Two parts of the fullscreen button, the arrow and the rectangle is split to two layers in my example. You are totally free on that.
Scene 1 (layer:controls)
For the scrub bar, you will draw 2 thick lines, one long and horizontal, and one short and vertical. Convert each line you drew to movieclip by selecting and hitting F8. Set the instance name of the long line, which will be used as the video timeline, “mc_track”. Instance name of the knob, the short line, can be set as “mc_knob”. Finally, select both movieclips together and hit F8 to merge both into one movieclip, which we named “mc_scrubber”.
Now, select all movie clips together ( Shift + click each one ) and hit F8 again to merge all movie clips in one clip. Name it “mc_controls”.
Scene 1 (layer:video)
Now, create a new layer, named “Video”. Open the components panel or hit directly Ctrl+F7 and drag the MediaDisplay component to the newly created layer. For the video to show up in the whole screen of video player, you must resize the component to fill all white area. After resizing, click on the MediaDisplay component and open the component inspector tools ( Shift + F7 ). In the parameters tab, uncheck “Automatically Play”, “Use Preferred Media Size” and “Respect Aspect Ratio”. You can use it “Automatically Play” checked if you want that way.
Scene 1 (layer:stroke)
For the video screen to be more stylish, create a new layer over the “video” layer, name it “stroke” and grap the rectangle tool to draw a rectangle ( black + 1 px border ) with the same dimensions of MediaDisplay component. This is to cover the component with a stroke around. Now, we have a better video player look.
ActionScript Part:
Scene 1 (layer:actions)
Actionscript part is the important part to add the functionality to our design. First, we begin with defining the relative path of the video file. Create a new layer, named “actions”. Click on the first frame and open the actions panel. Type the following code to define the FLV address. Keep in mind that, this video player is only able to play FLV files.
The path, “video/video.flv” is the relative path for the video file, named “video.flv”. “FLV” expresses that the video player will be used to play FLV files. The other option is “MP3″.
Scene 1 > mc_controls (layer:othercntrls)
Now time to add “actions” for the control buttons. Click on the “mc_controls” movie clip, that must be in “controls” layer normally. Click twice to edit this movie clip, Inside “mc_controls”, create 3 layers and names in order: “progress”, “actions”, “othercntrls”. Put all the control bar buttons (”pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” ), created before, into “othercntrls” layer. “actions” layer again will keep all the actionscript and “progress” layer will hold the scrub bar for the video player.
Click here for more about this step.
Scene 1 > mc_controls (layer:actions)
Now, click on the “actions” layer, open the actions panel for this layer (F9). Add the following code into actions panel.
video = _root.video;
//play button function
play_btn.onRelease = function() {
video.play();
};
//pause button function
pause_btn.onRelease = function() {
video.pause();
};
//fullscreen function
fullscreen_btn.onRelease = function() {
video.displayFull();
toggleFullScreen();
};
//rewind function, stop(0) can also be used.
rewind.onRelease = function() {
video.play(0);
};
//mute and unmute
mc_volume.onRelease = function() {
mc_volume.play();
};
//This part is for the fullscreen function
Stage.scaleMode="Scale";
Stage.align = "TC"; //T:top, C: center
function toggleFullScreen(){
if(Stage["displayState"]=="normal"){
Stage["displayState"]="fullScreen";
fullscreen_btn.gotoAndStop(2);
}else{
Stage["displayState"]="normal";
fullscreen_btn.gotoAndStop(1);
}
} |
Scene 1 > mc_controls > volume (layer:Layer1) & Scene 1 > mc_controls > fullscreen
For the volume button and the fullscreen button, only the first frames of those movieclips must be appearing on the screen if not clicked. When those buttons clicked, movieclips must play the second frames and stop there. To do that, add a stop function into the every frame of fullscreen and volume movieclips. In the code above, it can be seen that clicking the button, will play those stopped movieclips, meaning the second frame will appear on screen.
Scene 1 > mc_controls > volume (layer:Layer1)
For the volume button, to mute and unmute the sound. We will add two pieces of code after stop function in actions panel, that changes the state of sound for that frame.
For frame 1, put the following code into actions panel. When this frame plays, sound will be unmuted.
stop(); _root.video.volume = 100; |
For frame 2, put the following code into actions panel. This frame will decrease the volume to zero.
stop(); _root.video.volume = 0; |
In sum, we have a video screen, that has the path for the video file, a rewind button, a pause button, a play button, a volume control button and a fullscreen button. The only thing left is a scrub bar’s (seek bar) functions.
Scene 1 > mc_controls > mc_scrubber (layer:Layer1)
Scrub bar needs the following code. So, click on “mc_scrubber” movieclip and create a new layer for the actions. Copy and paste the following code, into the actions panel.
video = _root.video;
mc_knob.onPress = function() {
mdown = true;
this.startDrag(false, 0, 0, mc_track._width, 0);
};
mc_knob.onRelease = function() {
mdown = false;
this.stopDrag();
};
mc_knob.onReleaseOutside = mc_knob.onRelease();
this.onEnterFrame = function() {
if (mdown) {
dist = mc_knob._x;
pct = dist/mc_track._width;
newVol = pct*video.totalTime;
video.playheadTime = newVol;
} else {
dist = video.playheadTime;
pct = dist/video.totalTime;
newX = pct*mc_track._width;
mc_knob._x = newX;
}
}; |
That’s it. You must now have had a simple flash video player for your web site. This is my result:
More Features in Wow XML Flash Video Player. Check it out!
If you are unable to end up with a result like above or you are looking for a more advanced player, here it is. We have the Wow XML Flash Video Player. It’s just $12, including the FLA.
The video below, is set to auto-play:false. Preview image is set. In-video ad is set. Pre-roll video ad is set. Post-video screen is enabled. Click here for an auto play version.
Wow XML Flash Video Player: Pre-roll ad, Invideo text ad, Post-video screen
| Some of the Features: 1. Preroll Advertisement Option 2. Invideo Text Advertisement Option 3. Your Own Logo on the Screen 4. Post-video Related-videos Screen 5. XML Input 6. Preview Image Before the Video Plays More Info >> Just $12This item is available at activeden.net. Click to purchase! |
Professional version is available!
Some features:
* Hide your FLV video path (XML + MySQL + PHP)
* Pre-roll ads
* In-video text ads
* Post-video related videos screen
* Your own logo on video screen
More Info
Administrator,
Wowebmaster.com.
Scene 1 > mc_controls (layer:othercntrls)
Now time to add actions for the control buttons. Click on the “mc_controls” movie clip, that must be in “controls” layer normally. Inside “mc_controls”, create 3 layers and names in order: “progress”, “actions”, “othercntrls”. Put all the control bar buttons, created before, into “othercntrls” layer. “actions” layer again will keep all the actionscript and “progress” layer will hold the scrub bar for the video player.
————————————————-
Can you be more specific about this part? Specifically "put all the control bar buttons, created before, into "othercntrls" layer. "actions" layer again will keep all……"
How are we suppose to "put" the movie clips into a layer?
anyways, great tutorial I can’t wait to make this video player.
Erik,
On that step, you should have had “pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” buttons in your “mc_controls” movie clip. When you click twice on “mc_controls” to edit it, you should have seen that only a layer exists and it’s named as “layer 1″. “Layer 1″ must have been holding all of those buttons I mentioned above. Now, you rename “Layer 1″ to “othercntrls” and create two more layers, named “progress” and “actions”. Layer names are not important.
If you have more questions, don’t hesitate to ask again.
Hi there,
what if you want to do a mouse roll over, for the playback controls? Like for instance, the playback menu will only appear upon mouse roll over, and disappear upon mouse out. Similar to the vimeo playback controls on full screen. Tried to convert the scrub-bar to buttons, but it doesn’t work. Please enlighten!
Thank you for this tutorial, it helped a lot!
Looks Great!
Regarding the Professional version, can I serve my own ads(in-video text) with that?
Thanks.
That was a nice tutorial!
Based on the codes shown here at your page, I’ve seen some parts that can be “improved” for shorter line usage and optimization of the flash file.
—
function toggleFullScreen() {
if (Stage["displayState"]==”normal”) {
Stage["displayState"]=”fullScreen”;
fullscreen_btn.gotoAndStop(2);
} else {
Stage["displayState"]=”normal”;
fullscreen_btn.gotoAndStop(1);
}
}
… can be shorten to…
function toggleFullScreen() {
Stage["displayState"]=(Stage["displayState"]==”normal”)?”fullScreen”:”normal”;
fullscreen_btn.gotoAndStop((Stage["displayState"]==”normal”)?2:1);
}
—
mc_knob.onRelease = function() {
mdown = false;
this.stopDrag();
};
mc_knob.onReleaseOutside = mc_knob.onRelease();
this.onEnterFrame = function() {
if (mdown) {
dist = mc_knob._x;
pct = dist/mc_track._width;
newVol = pct*video.totalTime;
video.playheadTime = newVol;
} else {
dist = video.playheadTime;
pct = dist/video.totalTime;
newX = pct*mc_track._width;
mc_knob._x = newX;
}
}
… can be shorten to…
mc_knob.onReleaseOutside = mc_knob.onRelease = function() {
mdown = false;
this.stopDrag();
};
this.onEnterFrame = function() {
(mdown)?video.playheadTime = (mc_knob._x/mc_track._width)*video.totalTime:mc_knob._x = (video.playheadTime/video.totalTime)*mc_track._width
}
—
That’s all I can help… I hope this works… Good luck with your works (including this one)!
I have a question about creating frames for the volume button.
When I create the button for the mute part, erases the unmute one .
I am sure its pretty easy, this is just my first time doing this.
thanks
I followed this tutorial and it wont play my flv file – the only way I can get it to play it is if I click on the media display then choose \’component inspector\’ and add the location in there – and then the buttons aren\’t working!.
Also can you tell me how i would call different movies to the player – what would i use as the URL in the Media Display parameter area and how would I pass a php variable to it.
Thanks
hi
how to show a message that” there is no file”, if that there is no video file ….
thanx
vivek
i have problem can you guys help me out here. i dont know why my play button and rewind button also timeline and the shorthead on the timeline and my volume didnt work too. Here my code i hope you can give me opinion so i can fix it.Also my video could play but the button wont work
Please helppppppppppp!!!!!!!!
CODE:
video.setMedia(\"because i am girl.flv\", \"FLV\");
video = _root.video;
//play button function
play_btn.onRelease = function() {
video.play();
};
//pause button function
pause_btn.onRelease = function() {
video.pause();
};
//fullscreen function
fullscreen_btn.onRelease = function() {
video.displayFull();
toggleFullScreen();
};
//rewind function, stop(0) can also be used.
rewind.onRelease = function() {
video.play(0);
};
//mute and unmute
mc_volume.onRelease = function() {
mc_volume.play();
};
//This part is for the fullscreen function
Stage.scaleMode=\"Scale\";
Stage.align = \"TC\"; //T:top, C: center
function toggleFullScreen(){
if(Stage[\"displayState\"]==\"normal\"){
Stage[\"displayState\"]=\"fullScreen\";
fullscreen_btn.gotoAndStop(2);
}else{
Stage[\"displayState\"]=\"normal\";
fullscreen_btn.gotoAndStop(1);
}
}
video = _root.video;
mc_knob.onPress = function() {
mdown = true;
this.startDrag(false, 0, 0, mc_track._width, 0);
};
mc_knob.onRelease = function() {
mdown = false;
this.stopDrag();
};
mc_knob.onReleaseOutside = mc_knob.onRelease();
this.onEnterFrame = function() {
if (mdown) {
dist = mc_knob._x;
pct = dist/mc_track._width;
newVol = pct*video.totalTime;
video.playheadTime = newVol;
} else {
dist = video.playheadTime;
pct = dist/video.totalTime;
newX = pct*mc_track._width;
mc_knob._x = newX;
}
};
Question:
¿How can I Toggle back the fullscreen_btn when I press de “Esc” Key? It stays the same like in fullscreen mode. Just pressing the button toggles back.
Thanks!
how can i call video in HTML
(i want to call video this way –in HTML– Is there any other possible codes rather than
–video.setMedia(”video.flv”,”FLV”);)–
can you pls help …..