Saturday, 9 June 2012

Actionscript 3 VideoLoader in full screen mode

The native FLVPlayback component in Flash has a feature called ‘Fullscreen Takeover’ which puts the FLVPlayback component into fullscreen mode and also moves it to the top of the displaylist. The Greensock’s VideoLoader currently does not have this feature however it can be easily recreated. You basically need to set the current width and height of the video to the stage’s width and height when the Fullscreen mode is initialised. Then you have to return the video back to its original size when the Fullscreen mode goes back to normal. I will be creating a simplified version of Simple AS3 video player where you click on the stage to play/pause the video instead of having a roll over button. This post assumes you have the downloaded Greensock VideoLoader and have a FLV file with the name vid.flv.

Step 1

Open up a new FLA file and save it with the name VidPlayerFull. Then open up the class file and save it with the name.

Step 2

In the VidPlayerFull class file add the following import statements and member variables.

package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;

 import com.greensock.loading.VideoLoader;
 import com.greensock.events.LoaderEvent;
 
 public class VidPlayerFull extends Sprite 
 {
  private var vid:VideoLoader;
  private var clickArea:Sprite;
  private var url:String = 'video.flv';
  
  public function VidPlayer() {
  
  }
 }
}

In the constructor add the following code. The code is mostly the same as the Simple AS3 video player post, but I have added a mouse click event to the sprite instead of the roll over/out events.

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

clickArea = new Sprite();
clickArea.graphics.beginFill(0x000000,0);
clickArea.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
clickArea.addEventListener(MouseEvent.CLICK, clickHandler);
clickArea.graphics.endFill();
addChild(clickArea);

This sets the stage scale mode to ‘no scale’ and the stage align to ‘top left’ which will prevent the video from being distorted and ensure the video is fitted correctly in the full screen mode. I have added a key down keyboard event to the stage. This will be used to trigger the full screen mode.

stage.quality = StageQuality.BEST;
stage.scaleMode = StageScaleMode.NO_SCALE

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressHandler); 
The clickHandler function plays and pauses the video, and the vidCompleteHandler sets the video back to the beginning when its finishes playing.

private function clickHandler(e:MouseEvent):void 
{
 vid.videoPaused = !vid.videoPaused;
}
  
private function vidCompleteHandler(e:Event):void 
{
 vid.gotoVideoTime(0);
}

The keyPressHandler function uses an If/Else statement to determine the display state of the stage and toggles full screen mode accordingly. I have used the space bar (key code 32) as the trigger button. For more information on detecting key presses take a look at this post.I have used the "content.fitWidth" and "content.fitHeight" to get the width and height of the VideoLoader.

private function keyPressHandler(e:KeyboardEvent):void 
{
 if (e.keyCode == 32) {
    
  if (stage.displayState== "normal") {
   stage.displayState="fullScreen";
     
   vid.content.fitWidth = stage.stageWidth;
   vid.content.fitHeight = stage.stageHeight;
    
   clickArea.width = stage.stageWidth;
   clickArea.height = stage.stageHeight;   
  } else {
   stage.displayState = "normal";
  }
 }
}

Step 3

Export the movie Ctrl + Enter. Now use the space bar to toggle full screen with the Videoloader.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP