Adding Centered Play Button
Updated: Apr 22, 2008
Views: 2345
Description: In this tutorial we will walk through the steps on adding a large play button. It will disappear once a play state has entered. This button also works in full screen mode.
Complete Code:
import mx.video.*;
player.autoPlay = false;
play_btn._visible = true;
//Play Button
play_btn.onRelease = function (evnt:Object){
play_btn._visible = false;
player.play();
}
//playing************************************
player.addEventListener("playing", this);
function playing() {
play_btn._visible = false;
}
//paused***************************************
player.addEventListener("paused", this);
function paused() {
play_btn._visible = true;
}
//complete***************************
player.addEventListener("complete", this);
function complete(){
play_btn._visible = true;
}
player.autoPlay = false;
play_btn._visible = true;
//Play Button
play_btn.onRelease = function (evnt:Object){
play_btn._visible = false;
player.play();
}
//playing************************************
player.addEventListener("playing", this);
function playing() {
play_btn._visible = false;
}
//paused***************************************
player.addEventListener("paused", this);
function paused() {
play_btn._visible = true;
}
//complete***************************
player.addEventListener("complete", this);
function complete(){
play_btn._visible = true;
}
Setting up the FLV Player and Setting the Source
Before you begin, make sure that you have the FLV Player and your purchased installed using the extension manager and have created a new Flash ActionScript 3.0 File. Also that you have dragged an instance of the FLV Player onto the stage from the Component Panel (Window > Components).
After you have successfully added the FLV Player to the stage, The first thing you need to do is set the source to your FLV video. These can be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property source with the instance of your player selected. Or you can set this in Action Script (make sure to give your player the instance name player).
Creating Play Button
Create a movie clip to be used as Play button. When creating this movie clip please also make sure you have setup the linkage. You will only need this in the library so it is not required to have on stage. to setup linkage open yur library (Window > Library) and finding our Movie Clip that we created and right clicking and selecting Linkage. Check the box Export for ActionScript, make sure Export for first frame is checked, and give it a Class name of PlayButton. The instance name of play button is play_btn.
Setting up that autoPlay property
We will need to set autoPlay property to false first. This will enable the player to not play until the play button has been pressed.
player.autoPlay = false;
Play button visibility
On initial start up we will need the play button to be displayed.
play_btn._visible = true;
Set invisibility of play button
We want the play button to go away once the player enters the playing state. We do this by adding a "playing" video event.
player.addEventListener("playing", this);
function playing() {
play_btn._visible = false;
}
function playing() {
play_btn._visible = false;
}
Re-Apperance of Play button
Now we want the play button to be displayed whenever the video is paused or a video has finished. We will use a pause and complete video event. Then set the play button to visible.
//paused***************************************
player.addEventListener("paused", this);
function paused() {
play_btn._visible = true;
}
//complete***************************
player.addEventListener("complete", this);
function complete(){
play_btn._visible = true;
}
player.addEventListener("paused", this);
function paused() {
play_btn._visible = true;
}
//complete***************************
player.addEventListener("complete", this);
function complete(){
play_btn._visible = true;
}
Other Tutorials
