You are on page 1of 3

Original article including working example and downloadable source flash files found at

circlecube.com.
One of the best features of the flash player if you’re doing video is the fullscreen functionality. It has
been a question I’ve heard repeatedly. There are limits to what you can do in fullscreen. Such as
minimal keyboard support while in fullscreen. But it is perfect for a video player! Who doesn’t want to
see a video expanded to full screen mode?

There are a couple things to consider when coding fullscreen into your flash. Remember the hard coded
“Press Esc to exit full screen mode.” that Adobe has placed into the flash player. This is untouchable by
developers, and the function returns to normal stage display state. So we call the function to go
fullscreen, but the exit fullscreen has already been written for us. This can pose a problem though,
when we need the player to do something when we exit fullscreen, that is when we want it to do
something more than the generic black box function adobe includes.

1. specify stage properties


2. full screen button and listeners
3. stage fullscreenEvent listener
4. (functions for each)
5. allowfullscreen = true

Working example: http://blog.circlecube.com/2009/03/tutorial/how-to-use-fullscreen-in-as3-stage-


display-state-tutorial/

1. Stage properties exist that allow us to specify what type of fullscreen we want. We can have the swf
scale to fit the fullscreen area (StageScaleMode.SHOW_ALL), not scale at all
(StageScaleMode.NO_SCALE), skew to fit fullscreen (StageScaleMode.EXACT_FIT), and scale to fill
fullscreen area (Stage.ScaleMode.NO_BORDER). We may also edit the alignment of the stage in the
fullscreen area; in this example I’m using TOP, but refer to documentation for more options

2. Adobe has placed restrictions on when a swf can enter fullscreen, and has deemed that it must result
from a user interaction, a mouse click or keystroke. So create your buttons (or keyListeners). I prefer to
have one button to enter fullscreen and another to exit, and have them both call the same function to
toggle fullscreen. It gives a clearer communication to the user. I then control the visibility of these
buttons depending on the current display state of the stage.

3. Another listener to watch the stage dispaly state.


stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange); This will fire every
time the stage display state changes. We need this because as I mentioned earlier, when entering
fullscreen we use our own function, but the ‘hit esc to exit fullscreen’ functionality is built into the
flash player, we can’t update our stage layout or button visibility without watching to catch when the
display state is changed. Using this method we can update our stage layout any and every time.

4. Of course flesh out the fullscreenToggle function to include anything else you need.

5. Lastly, for a SWF file embedded in an HTML page, the HTML code to embed Flash Player must
include a ‘param’ tag and ‘embed’ attribute with the name ‘allowFullScreen’ and value ‘true’, like this:

<object>
...
<param name="allowFullScreen" value="true" />
<embed ... allowfullscreen="true" />
</object>

The allowFullScreen tag enables full-screen mode in the player. If you do everything else right and
don’t include this in your embed codes, fullscreen will not work. The default value is false if this
attribute is omitted. Note the viewer must at least have Flash Player version 9,0,28,0 installed to use
full-screen mode. Also note that the simple (ctrl + enter) testing your movie in flash will not allow
fullscreen either, you must use the debug tester (ctrl + shift + enter) … or go open the published swf in
flash player.

stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP;

var stageDisplayAdjustCounter:uint = 0;

fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange);

fsb.buttonMode = true;
ssb.buttonMode = true;

//fullscreen buttons need this to adjust the stage display state.


//pressing escape to exit fullscreen bypasses this function
function fullscreenToggle(e:MouseEvent = null):void {
status.appendText(stageDisplayAdjustCounter+". fullscreenToggle from
"+stage.displayState+"\n");
//normal mode, enter fullscreen mode
if (stage.displayState == StageDisplayState.NORMAL){
//set stage display state
stage.displayState = StageDisplayState.FULL_SCREEN;
}
//fullscreen mode, enter normal mode
else if (stage.displayState == StageDisplayState.FULL_SCREEN){
//set stage display state
stage.displayState = StageDisplayState.NORMAL;
}
//here we subtract 1 from the counter because it has already incremented (in
onFullscreenChange) when we set the display state above

status.appendText((stageDisplayAdjustCounter-1)+". fullscreenToggle to
"+stage.displayState+"\n");
status.scrollV = status.maxScrollV;

//this function is called every and anytime the stage display state is adjusted
//either by pressing our buttons or
function onFullscreenChange(e:FullScreenEvent = null):void {
status.appendText(stageDisplayAdjustCounter+". onFullscreenChange\n");
status.scrollV = status.maxScrollV;
if (stage.displayState == StageDisplayState.FULL_SCREEN) {
fsb.visible = false;
ssb.visible = true;
}
else {
fsb.visible = true;
ssb.visible = false;
}

stageDisplayAdjustCounter++;
}

onFullscreenChange();

download source fla file: http://blog.circlecube.com/2009/03/tutorial/how-to-use-fullscreen-in-as3-


stage-display-state-tutorial/