Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Full Screen – Passer une application Flex en plein écran

Flash Player 9 ( à partir de la version 9.0.28.0 et 10) donne la possibilité d'afficher un SWF en plein écran. Ce type d'affichage peut se révéler pratique, voire primordial dans le cas d'applications vidéos (comme le player Youtube par exemple). Le passage en plein écran se fait grâce à plusieurs instructions en ActionScript ainsi qu'une modification des tags <object> et <embed> qui servent à intégrer votre application dans une page HTML.

Notez qu'une fois en plein écran, vous ne pourrez plus écrire dans les champs texte de votre application. C'est une sécurité pour la prévention d'attaque de phishing qu'Adobe a mis en place. Par contre, une application Adobe Air permet de passer en plein écran tout en laissant les champs texte éditables.

Passer en Plein Ecran avec ActionScript

Pour pouvoir faire certaines modifications (cacher/afficher/resize des éléments par exemple) au moment du passage en Full Screen, on va ajouter un handler qui sera appelé à chaque fois que l'état d'affichage de notre stage est modifié.

Attention, vous ne pouvez pas ajouter ce handler tant que votre application n'est pas complètement initialisée. Il ne faut donc pas l'ajouter lors du creationComplete mais lors de l'évènement applicationComplete (accessible sur <mx:Application>).

Si vous tentez d'ajouter ce handler sur le creationComplete, vous aurez une RTE (RunTime Error) suivante:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at main/init()
at main/___main_Application1_creationComplete()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.core::UIComponent/set initialized()
at mx.managers::LayoutManager/doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()

En effet, la propriété stage n'est pas encore initialisée au moment de l'évènement creationComplete.

Pour passer en mode plein écran, on va simplement modifier la valeur de la propriété displayState de stage. Cette propriété displayState peut prendre deux valeurs que vous pouvez trouver comme constante static dans flash.display.StageDisplayState:

• StageDisplayState.FULL_SCREEN : mode plein écran (full screen)
• StageDisplayState.NORMAL: mode normal (par défaut)

Voici une mini-application Flex permettant de passer en fullScreen:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" viewSourceURL="srcview/index.html">

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

    private function init():void {
        // au moment du applicationComplete, ajouter le handler
        stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
        dispState = stage.displayState;
    }

    private function fullScreenHandler(evt:FullScreenEvent):void {
        dispState = stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
        if (evt.fullScreen) {
            // traitement spécifique à faire lors du passage en plein écran
        } else {
            // traitement spécifique à faire lors du retour à la normale
        }
    }

    private function toggleFullScreen():void {
        try {
            switch (stage.displayState) {
                case StageDisplayState.FULL_SCREEN:
                    // si on est déjà en FULL SCREEN, on se remet en normal
                    stage.displayState = StageDisplayState.NORMAL;
                    break;
                default:
                    // si on est pas en full screen, on passe en plein écran
                    stage.displayState = StageDisplayState.FULL_SCREEN;
                    break;
            }
        } catch (err:SecurityError) {
            // ignore
        }
    }
    ]]>
    </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="Activer/désactiver le Full Screen" click="toggleFullScreen()" />

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Si vous essayer dans votre application Flex, sans avoir lu la fin de ce tutorial, vous aurez sûrement l'erreur de type SecurityError :  SecurityError: Error #2152: Le mode plein écran n’est pas autorisé.

Cette erreur se produit car vous n'avez pas modifié les tags de fichier HTML dans lequel se trouve votre SWF.

Modifier les tags HTML servant à intégrer le SWF

Si vous utilisez Flex Builder, vous pouvez directement modifier le template qui génère une page HTML de base. Avec Flex Builder 3, ce template se trouve dans le dossier html-template de votre projet et se nomme index.template.html. Au niveau des fonctions JavaScript qui servent à intégrer le SWF, rajoutez:

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"
);

Si vous n'utilisez pas le template HTML généré par FB3, vous pouvez directement modifier les tags HTML <object> et <embed> comme ceci:

<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>

Autoriser le plein écran lors d'une intégration avec SWFObject (et plug-in WordPress wp-swfobject)

Pour ceux que cela intéresse, qui ont WordPress avec le plug-in wp-swfobject permettant d'intégrer des SWF avec SWFObject, il suffit de modifier le plug-in.  Dans la fonction wpswfObject, vous verrez que l'on écrit tous ces paramètres avec des addParam(). Il suffit de rajouter le paramètre allowFullScreen à cet endroit:

...
$writeswf.= "so.addParam(\"quality\", \"".$swf_config['wp_swf_quality']."\");\n";
$writeswf.= "so.addParam(\"allowFullScreen\", \"true\");\n";
if ($match[4] != "") {
...

Pour information, il y a des bugs connus avec ce passage en plein écran, surtout pour les personnes étant sur plate-forme Mac. Au programme, des pertes de focus et des problèmes de scale éventuels qui peuvent arriver