How to use fullscreen in AS3 | Stage Display State Tutorial
Author: Evan Mullins | Filed under: tutorial
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.
Steps
- specify stage properties
- full screen button and listeners
- stage fullscreenEvent listener
- (functions for each)
- allowfullscreen = true
Example
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.
Actionscript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 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(); |
Source
Download fullscreen_tut.fla file
First I’ll explain what I’ve found to be the reason of the jumpiness. And then explain and show what can be done to make this movement be more smooth.
