Archive for January, 2010|Monthly archive page

Flash and Fullscreen

Flash’s fullscreen display implementation is one of the most deceptive aspects that I’ve come across within the Flash platform. On the surface, fullscreen is an unbelievably simple and clean-cut feature: you set the stage’s “displayState” property to either StageDisplayState.FULL_SCREEN or StageDisplayState.NORMAL. However, once you really get digging into fullscreen implementation, you discover all kinds of weird nuances that make this seemingly simple feature a real headache. So, I’ll run through my laundry-list of gotchas and development tactics that I’ve picked up over the years. Here goes…

Toggling fullscreen

Generally I implement a toggle button to click in and out of fullscreen mode. This is super easy to set up, and just uses the basic fullscreen controls of Flash. Nothing fancy going on here; I’d just set this as the CLICK handler of my toggle button…

private function _onToggleFullscreen($event:MouseEvent):void {
 var $fs:Boolean = (stage.displayState == StageDisplayState.FULL_SCREEN);
 stage.displayState = $fs ? StageDisplayState.NORMAL : StageDisplayState.FULL_SCREEN;

Responding to displayState changes

Now, it’s not uncommon to want to rearrange your display a bit when entering/exiting fullscreen mode. I generally shift the alignment, scale, and proportions of elements on screen to better fit the display in fullscreen mode. Now, it would seem like we could just add this reformatting logic into the fullscreen toggle button’s event handler (above) where we actually toggle the displayState. However, this doesn’t work in practice because Flash Player automatically activates the ESC key as an exit from fullscreen mode. This provides a back-door to changing the displayState without going through your toggle button. As a result, all mode-change logic should occur in response to the stage’s RESIZE event (which will trigger in response to your toggle button, and in response to exiting fullscreen with ESC). So, do this:

stage.addEventListener(Event.RESIZE, this._onStageResize, false, 0, true);
function _onStageResize($event:Event):void {
 // perform actions in response to stage resize here...

Configuring the fullscreen presentation

The next nuance of this process is considering how you want to present your content in fullscreen mode. By default, your stage will be upscaled to fill the screen along with black space to fill up any differences in aspect ratio. This upscaling is controlled by another stage property called “scaleMode”, which has a set of value constants defined in the StageScaleMode class. By adjusting the stage’s scaleMode property, you can define how stretching is (or is not) applied. But wait, there’s more! Also check out the stage’s “align” property which goes hand-in-hand with the scaleMode property. The “align” property (set to one of the StageAlign class constants) will define how an unscaled stage positions itself while in fullscreen mode.

Now, while the “stage.align” property is a good concept, it has one blatant omission: there is no StageAlign.CENTER option to place the unscaled stage in the center of the screen while in fullscreen mode. This oversight confounds me, and even a good technical explanation from Adobe would not excuse the feature omission in my opinion. So, if you do want to center unscaled content within fullscreen mode, you’ll need to set the stage’s scaleMode to “NO_SCALE”, the stage’s align to “TOP_LEFT”, and then manually do the math to center your root display item within the visible stage boundaries.

Other weird stuff about fullscreen mode

I’m not even sure how to categorize these items, so I’ll just make a list of all the other “gotchas” that I’ve run into…

1) Fullscreen mode does NOT work in a test publish running within the Flash IDE. You’ll need to place the SWF into a browser or publish a projector to have your fullscreen button work.

2) Fullscreen will only work within a web browser if you’ve included a [allowFullScreen=”true”] parameter within the Flash embed tag.

3) Flash does not respond to keyboard input while in fullscreen mode (grumble). I’ve looked for the rationale behind this restriction, but have found nothing other than Adobe citing it as a “security measure”. As of Flash Player 10, they threw us a bone and gave us the arrow keys, SPACE, and TAB as fullscreen freebies. Otherwise, you can only get unrestricted fullscreen keyboard access by going through AIR.


SWFAddress revisited

It’s been a year since I’ve done anything with SWFAddress, and in that time I’ve received many support questions in response to my last blog post on the subject. So, now that I’m back into SWFAddress on a new project, I’ve finally gotten around to posting a sample implementation of a SWFAddress proxy class in my previous post, available here:

I hope it’s useful!