Prise en charge de l’affichage en plein écran

La version ActionScript 3.0 du composant FLVPlayback prend en charge le mode plein écran, qui exige Flash Player 9.0.28.0 ou une version ultérieure. Le code HTML doit en outre être configuré correctement pour un affichage en plein écran. Certaines enveloppes prédéfinies comportent un bouton bascule qui permet d’activer ou de désactiver le mode plein écran. L’icône FullScreenButton se trouve à droite de la barre de contrôle dans l’illustration suivante.

Icône Plein écran sur la barre de contrôle

Le mode plein écran n’est pris en charge que si la propriété fullScreenTakeOver est définie sur true (sa valeur par défaut).

La prise en charge de l’affichage en plein écran peut se faire indépendamment ou non de la prise en charge de l’accélération matérielle. Pour plus d’informations sur la prise en charge de l’accélération matérielle, voir Accélération matérielle.

Mise en œuvre de la prise en charge du mode plein écran pour FLVPlayback

  1. Ajoutez le composant FLVPlayback à votre application et attribuez-lui un fichier vidéo.

  2. Sélectionnez, pour le composant FLVPlayback, une enveloppe qui comprend un bouton d’affichage en plein écran (p.ex. SkinUnderPlaySeekFullscreen.swf) ou ajoutez le composant d’interface utilisateur FullScreenButton au composant FLVPlayback à partir de la section Vidéo du panneau Composants.

  3. Choisissez Fichier > Paramètres de publication.

  4. Dans la boîte de dialogue Paramètres de publication, cliquez sur l’onglet HTML.

  5. Dans l’onglet HTML, choisissez Flash avec prise en charge plein écran dans la liste déroulante Modèle.

  6. Dans ce même onglet, activez la case à cocher Détecter la version de Flash et entrez la version 9.0.28 ou une version ultérieure, en fonction de la version de Flash Player que vous utilisez.

  7. Dans l’onglet Formats, assurez-vous que les options Flash (.swf) et HTML (.html) sont sélectionnées. Vous pouvez remplacer les noms par défaut.

  8. Cliquez sur Publier puis sur OK.

    Au lieu d’exécuter l’étape 7, vous pouvez cliquer sur OK puis choisir Fichier > Aperçu avant publication > Par défaut - (HTML) afin d’ouvrir automatiquement le fichier HTML exporté dans votre navigateur par défaut. Vous pouvez aussi ouvrir le fichier HTML exporté dans votre navigateur afin de tester l’option d’affichage en plein écran.

    Pour ajouter le composant FLVPlayback avec prise en charge du mode plein écran à votre page Web, ouvrez le fichier HTML exporté et copiez le code qui y incorpore le fichier SWF sur votre page Web. Ce code doit ressembler à l’exemple suivant :

    //from the <head> section 
     
    <script language="javascript"> AC_FL_RunContent = 0; </script>  
    <script language="javascript"> DetectFlashVer = 0; </script>  
    <script src="AC_RunActiveContent.js" language="javascript"></script> 
    <script language="JavaScript" type="text/javascript">  
    <!--  
    // -----------------------------------------------------------------------------  
    // Globals  
    // Major version of Flash required  
    var requiredMajorVersion = 9;  
    // Minor version of Flash required  
    var requiredMinorVersion = 0;  
    // Revision of Flash required  
    var requiredRevision = 28;  
    // -----------------------------------------------------------------------------  
    // -->  
    </script>  
     
    //and from the <body> section 
     
    <script language="JavaScript" type="text/javascript">  
    <!--  
    if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {  
        alert("This page requires AC_RunActiveContent.js.");  
    } else {  
        var hasRightVersion = DetectFlashVer(requiredMajorVersion, 
            requiredMinorVersion, requiredRevision);  
        if(hasRightVersion) { // if we&apos;ve detected an acceptable version  
            // embed the Flash movie  
            AC_FL_RunContent(  
                &apos;codebase&apos;, &apos;http://download.macromedia.com/pub/ 
                    shockwave/cabs/flash/swflash.cab#version=9,0,28,0&apos;,  
                &apos;width&apos;, &apos;550&apos;,  
                &apos;height&apos;, &apos;400&apos;, 
                &apos;src&apos;, &apos;fullscreen&apos;,  
                &apos;quality&apos;, &apos;high&apos;,  
                &apos;pluginspage&apos;, &apos;http://www.macromedia.com/go/ 
                    getflashplayer&apos;,  
                &apos;align&apos;, &apos;middle&apos;,  
                &apos;play&apos;, &apos;true&apos;,  
                &apos;loop&apos;, &apos;true&apos;,  
                &apos;scale&apos;, &apos;showall&apos;,  
                &apos;wmode&apos;, &apos;window&apos;,  
                &apos;devicefont&apos;, &apos;false&apos;,  
                &apos;id&apos;, &apos;fullscreen&apos;,  
                &apos;bgcolor&apos;, &apos;#ffffff&apos;,  
                &apos;name&apos;, &apos;fullscreen&apos;,  
                &apos;menu&apos;, &apos;true&apos;, 
                &apos;allowScriptAccess&apos;,&apos;sameDomain&apos;, 
                &apos;allowFullScreen&apos;,&apos;true&apos;,  
                &apos;movie&apos;, &apos;fullscreen&apos;,  
                &apos;salign&apos;, &apos;&apos; ); //end AC code  
        } else { // Flash is too old or we can&apos;t detect the plug-in.  
            var alternateContent = &apos;Alternative HTML content should be placed 
                    here.&apos;  
                + &apos;This content requires Adobe Flash Player.&apos;  
                + &apos;<a href=http://www.macromedia.com/go/getflash/>Get Flash</a> 
                        &apos;;  
            document.write(alternateContent); // Insert non-Flash content.  
        }  
    }  
    // -->  
    </script>  
    <noscript>  
        // Provide alternative content for browsers that do not support scripting  
        // or for those that have scripting disabled.  
        Alternative HTML content should be placed here. This content requires Adobe Flash Player.  
        <a href="http://www.macromedia.com/go/getflash/">Get Flash</a>  
    </noscript>

    Vous pouvez également utiliser le fichier HTML exporté comme modèle pour votre page web, et y ajouter davantage de contenu. Toutefois, si vous choisissez cette méthode, modifiez le nom du fichier HTML, de façon à éviter de l’écraser par erreur si vous exportez à nouveau le fichier HTML FLVPlayback depuis Flash par la suite.

    Dans tous les cas, vous devez également exporter sur votre serveur Web le fichier AC_RunActiveContent.js qui a été exporté dans le même dossier que le fichier HTML.

    La prise en charge du mode plein écran dans ActionScript comprend les propriétés fullScreenBackgroundColor, fullScreenSkinDelay et fullScreenTakeOver, ainsi que la méthode enterFullScreenDisplayState(). Pour plus d’informations sur ces éléments ActionScript, voir Guide de référence d’ActionScript 3.0 pour Flash Professional.

Utilisation de la méthode enterFullScreenDisplayState()

Vous pouvez également appeler le mode plein écran à l’aide de la méthode ActionScript enterFullScreenDisplayState(), comme le montre l’exemple suivant.

function handleClick(e:MouseEvent):void { 
    myFLVPlybk.enterFullScreenDisplayState(); 
} 
myButton.addEventListener(MouseEvent.CLICK, handleClick);

Dans cet exemple, le mode plein écran n’est pas appelé par un clic sur le bouton bascule d’une enveloppe FLVPlayback, mais bien par un clic sur un bouton (MyButton) que le créateur de la page Web a ajouté pour activer le mode plein écran. Un clic sur le bouton déclenche le gestionnaire d’événement handleClick, qui appelle la méthode enterFullScreen DisplayState().

La méthode enterFullScreenDisplayState() règle la propriété Stage.displayState sur StageDisplayState.FULL_SCREEN. Elle s’accompagne donc des mêmes restrictions que la propriété displayState. Pour plus d’informations sur la méthode enterFullScreenDisplayState() et la propriété Stage.displayState, voir Guide de référence d’ActionScript 3.0 pour Flash Professional.

Accélération matérielle

Flash Player 9.0.115.0 et les versions ultérieures comprennent du code qui exploite le matériel vidéo disponible pour améliorer les performances et la fidélité des fichiers FLV que FLVPlayback joue en plein écran. Si les conditions préalables sont remplies et si la propriété fullScreenTakeOver est définie sur true, Flash Player utilise l’accélération matérielle pour mettre le fichier vidéo à l’échelle au lieu de le faire par voie logicielle. Si le composant FLVPlayback s’exécute dans une version de Flash Player plus ancienne, ou si les conditions préalables pour l’accélération matérielle ne sont pas remplies, Flash Player se charge de la mise à l’échelle du fichier vidéo, comme il le faisait auparavant.

Pour exploiter l’accélération matérielle en vue d’un affichage en plein écran, votre ordinateur doit être équipé d’une carte graphique compatible DirectX 7 avec 4 Mo ou plus de VRAM (RAM vidéo). Cette prise en charge matérielle est disponible sous Windows 2000 ou Mac OS X 10.2 et les versions ultérieures de ces systèmes d’exploitation. Direct X® fournit des API qui incluent une interface entre le logiciel et le matériel vidéo, de manière à accélérer notamment les graphismes en deux et trois dimensions.

Pour exploiter le mode d’accélération matérielle, vous devez en outre lancer le mode plein écran d’une des façons suivantes :

  • bouton de basculement en mode plein écran d’une enveloppe FLVPlayback ;

  • contrôle vidéo FullScreenButton ;

  • méthode ActionScript enterFullScreenDisplayState(). Pour plus d’informations, voir la section Utilisation de la méthode enterFullScreenDisplayState().

    Si vous activez le mode plein écran en réglant la propriété Stage.displayState sur StageDisplayState.FULLSCREEN, FLVPlayback n’emploie pas l’accélération matérielle, même si le matériel vidéo et la mémoire nécessaires sont disponibles.

    Une conséquence de l’emploi de l’accélération matérielle pour la prise en charge du mode plein écran est que les enveloppes FLVPlayback sont mises à l’échelle avec le lecteur vidéo et le fichier vidéo. L’image suivante montre l’effet du mode plein écran avec accélération matérielle sur l’enveloppe FLVPlayback, dont un détail est illustré en pleine résolution.

    Mode plein écran sur un moniteur 1600 x 1200 avec une vidéo 320 x 240 pixels
    Mode plein écran sur un moniteur 1600 x 1200 avec une vidéo 320 x 240 pixels

    Cette image montre le résultat de l’utilisation du mode plein écran sur un moniteur 1600 x 1200 avec un fichier vidéo d’une largeur de 320 et une hauteur de 240, les dimensions par défaut de FLVPlayback. L’effet de distorsion sur l’enveloppe est plus marqué sur les fichiers FLV de petites dimensions ou sur un moniteur de grande taille. A l’inverse, cette distorsion est moindre sur les grands fichiers FLV ou les petits moniteurs. Par exemple, le passage de 640 x 480 à 1600 x 1200 augmente toujours la taille de l’enveloppe, mais avec moins de distorsion.

    Vous pouvez configurer la propriété skinScaleMaximum de façon à ce qu’elle limite la mise à l’échelle de l’enveloppe FLVPlayback. La valeur par défaut est 4,0, c’est-à-dire 400 %. Toutefois, la limitation de la mise à l’échelle de l’enveloppe exige une combinaison de matériel et de logiciel pour mettre le fichier FLV à l’échelle, ce qui peut dégrader les performances de fichiers FLV de grandes dimensions qui sont codés avec un débit binaire élevé. Si la vidéo est de grande taille (par exemple, 640 pixels de large ou plus, 480 pixels de haut ou plus), ne définissez pas skinScaleMaximum sur une petite valeur, car cela provoquerait des problèmes notables de performance sur les grands écrans. La propriété skinScaleMaximum vous permet de gérer les compromis entre les performances et la qualité et l’apparence d’une enveloppe de grande taille.

Sortie du mode plein écran

Pour quitter le mode plein écran, cliquez de nouveau sur son bouton ou appuyez sur la touche Echap.

Le réglage des propriétés suivantes et l’appel des méthodes suivantes peuvent provoquer des modifications de disposition forçant le composant FLVPLayback à sortir du mode plein écran : height, registrationHeight, registrationWidth, registrationX, registrationY, scaleX, scaleY, width, x, y, setScale() ou setSize().

Si vous réglez les propriétés align ou scaleMode, FLVPlayback les règle sur center et maintainAspectRatio jusqu’à la sortie du mode plein écran.

Le changement de valeur de la propriété fullScreenTakeOver de true à false quand vous vous trouvez en mode plein écran avec accélération matérielle force également Flash à quitter le mode plein écran.