Sweeping Design

I visited the topic of using flex in full-screen for the first time today and found the examples at Flex Examples and Everything Flex wanting in clarity and style. Here, then, is the low-down - as clean and simple as it gets!

View source here.

This example allows you to enter full-screen with “fullScreen=true” and exit with “fullScreen=false”. The listener for FullScreenEvent.FULL_SCREEN updates fullScreen in case the user exits by pressing escape rather than by clicking the checkbox. As a result, fullScreen is bindable, as shown in the checkbox.

Do note that you will need to set allowFullScreen to true in your project’s index.template.html, lest you get:
Error #2152: Full screen mode is not allowed.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
  <mx:initialize><![CDATA[
    systemManager.stage.addEventListener(
      FullScreenEvent.FULL_SCREEN,
      function(event: FullScreenEvent): void { fullScreen = event.fullScreen; }
    );
  ]]></mx:initialize>
 
  <mx:Script><![CDATA[
    private var _fullScreen: Boolean;
 
    [Bindable] public function get fullScreen(): Boolean { return _fullScreen; }
    
    public function set fullScreen(isFull:Boolean):void {
      _fullScreen = isFull;
      stage.displayState = (isFull) ? StageDisplayState.FULL_SCREEN : StageDisplayState.NORMAL; }
  ]]></mx:Script>
 
  <mx:CheckBox id="fs" label="Full Screen"
    click="fullScreen=event.target.selected" selected="{fullScreen}"
    horizontalCenter="0" verticalCenter="0"/>
 
</mx:Application>