Flash AS3 Tutorial : FullScreen functionality with Sample code

Please follow & like us :)

Using AS3 (ActionScript 3.0) you can initiate or leave full-screen mode. The ActionScript to initiate full-screen mode works only in user interaction to a mouse click or keypress. Very Interesting. I have details and sample method calls for your reference below.

Library

flash.display.Stage.displayState:String property

This property is gettable and settable. Values are for the class StageDisplayState:

  • StageDisplayState.FULL_SCREEN
  • Stage.DisplayState.NORMAL

This property is used to check the current state of the movie or to enter or exit full-screen mode.

Sample event listener
fullScreenHandler = function( event:FullScreenEvent ) {};
stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler );

The AS3 event received is FullScreenEvent, which extends ActivityEvent. FullScreenEvent has a Boolean fullScreen property, which indicates whether the movie has entered (true) or exited (false) full-screen mode.

ActionScript 3.0 will throw a security error in the plug-in or ActiveX control if the display state is set to StageDisplayState.FULL_SCREEN when it is not permitted by one of the security restrictions listed above.

flash.display.Stage.fullScreenSourceRect:Rectangle property

Adjusting fullScreenSourceRect after entering full-screen mode will not change the displayed region of a SWF. Also, if your rectangle has a different aspect ratio from the user’s monitor, “bars” will be added on the sides, as appropriate, that are the same color as the background color of the SWF or background color for the SWF that is set in the HTML.

If a user has turned off hardware scaling in the Flash Player settings, or if Flash Player is running on a machine that is not capable of hardware scaling, fullScreenSourceRect will be ignored and normal software-rendered full-screen mode will be used instead.

Sample code :

import flash.display.Stage; //importing package

import flash.display.StageDisplayState; //importing package

import flash.display.*;

import flash.events.*;

import flash.geom.Rectangle;

// functions to enter and leave full screen mode

function goFullScreen(event:ContextMenuEvent):void

{

stage.displayState = StageDisplayState.FULL_SCREEN;

}

 

// Alternate full-screen function that uses hardware scaling to display the upper left //corner of the stage in full screen.

function goScaledFullScreen(){

var screenRectangle:Rectangle = new Rectangle(0, 0, stage.stageWidth/2, stage.stageHeight/2);

stage.fullScreenSourceRect = screenRectangle;

stage.displayState = StageDisplayState.FULL_SCREEN;

}

 

function exitFullScreen(event:ContextMenuEvent):void

{

stage.displayState = StageDisplayState.NORMAL;

}

// function to enable and disable the context menu items,

// based on what mode we are in.

function menuHandler(event:ContextMenuEvent):void

{

if (stage.displayState == StageDisplayState.NORMAL)

{

event.target.customItems[0].enabled = true;

event.target.customItems[1].enabled = false;

}

else

{

event.target.customItems[0].enabled = false;

event.target.customItems[1].enabled = true;

}

}

// create the context menu, remove the built-in items,

// and add our custom items

var fullscreenCM:ContextMenu = new ContextMenu();

fullscreenCM.addEventListener(ContextMenuEvent.MENU_SELECT, menuHandler);

fullscreenCM.hideBuiltInItems();

 

var fs:ContextMenuItem = new ContextMenuItem(“Go Full Screen” );

fs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goFullScreen);

fullscreenCM.customItems.push( fs );

 

var xfs:ContextMenuItem = new ContextMenuItem(“Exit Full Screen”);

xfs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, exitFullScreen);

fullscreenCM.customItems.push( xfs );

 

// finally, attach the context menu to a movieclip

mc.contextMenu = fullscreenCM;

I hope you find this useful. I have provided this code from one of the sample flash application I built myself.