Wednesday, November 23, 2011

Full Screen Mode

Full Screen Mode


MXML File

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            import flash.display.StageDisplayState;
            import mx.managers.SystemManager;

            private function init():void {
              
                systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                dispState = systemManager.stage.displayState;
            }

            private function fullScreenHandler(evt:FullScreenEvent):void {
                dispState = systemManager.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
               
                if (evt.fullScreen) {
                 
                } else {
                   
                }
            }

            private function toggleFullScreen():void {
                try {
                    switch (systemManager.stage.displayState) {
                        case StageDisplayState.FULL_SCREEN:
                            /* If already in full screen mode, switch to normal mode. */
                            systemManager.stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                            /* If not in full screen mode, switch to full screen mode. */
                            systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                } catch (err:SecurityError) {
                   
                }
            }
        ]]>
    </mx:Script>

    <mx:String id="dispState" />
    <mx:Label text="width={Application.application.width}" />
    <mx:Label text="height={Application.application.height}" />
    <mx:Label text="displayState={dispState}" />

    <mx:Button label="Toggle fullscreen" click="toggleFullScreen()" />

</mx:Application>

Notes:

In your HTML wrapper, add the following property:


AC_FL_RunContent(
    "src", "main",
    "width", "100%",
    "height", "100%",
    "align", "middle",
    "id", "main",
    "quality", "high",
    "bgcolor", "#869ca7",
    "name", "main",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer",
    "allowFullScreen", "true"
);
Or, if you are using <object /> and <embed /> tags, you can use the following syntax instead:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id="main" width="100%" height="100%"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
        <param name="movie" value="main.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#869ca7" />
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="true" />

    <embed src="main.swf" quality="high" bgcolor="#869ca7"
        width="100%" height="100%" name="main" align="middle"
        play="true"
        loop="false"
        quality="high"
        allowScriptAccess="sameDomain"
        allowFullScreen="true"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/go/getflashplayer">
    </embed>

</object>

Full Screen Mode Demo

No comments:

Post a Comment