Monday, 28 November 2011

Simple AS3 video player using VideoLoader

In this tutorial you will learn how to create a simple Actionscript 3 video player using the Greensock Videoloader which can be downloaded from I find the Greensock Videoloader is more intuitive to use that the native AS3 Netstream and Video classes for creating a video player. It is also more rich in features, for more information take a look at the documentation. You will need a FLV video file for this tutorial. I have used my own playpause button class that toggle between the play and pause states, but you can alternatively create your own toggle button.

Simple AS3 video player using VideoLoader

Step 1

Open a new AS3 FLA and save the file with name: VidPlayer. Then open up an AS3 class file and save it with the name VidPlayer.

Step 2

In the VidPlayer class add the following import statements and variables.

 import flash.display.Sprite;

 import com.ilike2flash.PlayPauseBtn;
 import com.greensock.TweenNano;
 import com.greensock.loading.VideoLoader;
 public class VidPlayer extends Sprite 
  private var vid:VideoLoader;
  private var btn:PlayPauseBtn;
  private var rollArea:Sprite;
  private var url:String = 'video.flv';
  public function VidPlayer() {

In the constructor add the code below. This creates a new instance of the VideoLoader class with the width and height set to the stage dimensions, the scale mode set to proptionalInside, and the autoPlay set to false. The container property is set to ‘this’ which will add the VideoLoader onto the stage itself. You can alternatively specify any display object to hold the VideoLoader. The ‘url’ parameter is the name of the video file. I have added a video complete event which will fire the vidCompleteHandler when a video finishes playing.

vid = new VideoLoader(url, { name:"myVideo", container:this, width:stage.stageWidth, height:stage.stageHeight, scaleMode:"proportionalInside", autoPlay:false} );
vid.addEventListener(VideoLoader.VIDEO_COMPLETE, vidCompleteHandler);

This adds an invisible roll area onto the stage with the same dimensions as the stage. The mouse over and mouse out event listeners are added to the sprite.

rollArea = new Sprite();,0);, 0, stage.stageWidth, stage.stageHeight);
rollArea.addEventListener(MouseEvent.MOUSE_OVER, mouseHandler);
rollArea.addEventListener(MouseEvent.MOUSE_OUT, mouseHandler);;

The play/pause button is added to the centre of the stage with a mouse click event listener. The button is also added inside the rollArea so does not conflict with the mouse over and mouse over event listeners of the rollArea.

btn = new PlayPauseBtn();
btn.x = stage.stageWidth / 2 - btn.width / 2;
btn.y = stage.stageHeight / 2 - btn.height / 2; 
btn.addEventListener(MouseEvent.CLICK, btnClicked);

This function fades the button out when the mouse is out of the roll area and fades the button in when the mouse is on the roll area. I have used the TweenNano plugin to tween the alpha property of the button.

private function mouseHandler(e:MouseEvent):void 
if (e.type == "mouseOver"), 0.5, { alpha:1 } );
if (e.type == "mouseOut"), 0.5, { alpha:0 } );

This function toggles the play and pause state of the video using the videoPaused property of the VideoLoader.

private function btnClicked(e:MouseEvent):void 
vid.videoPaused = !vid.videoPaused;

This function sets the video back to the beginning and changes the button state to play when the video has finished playing.

private function vidCompleteHandler(e:Event):void 

Step 3

Export movie Ctrl + Enter.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP