Flash Lite 2

Bien démarrer avec Flash Lite 2.x > Didacticiel : Création d'une application Flash Lite (Flash Professional uniquement) > Création de l'application (Flash Professional uniquement) > Création de l'écran Video (Flash Professional uniquement)

Création de l'écran Video (Flash Professional uniquement)

Dans cette section, vous allez ajouter un clip vidéo à l'application, ainsi qu'un code ActionScript qui permet à l'utilisateur de contrôler sa lecture (lecture, pause et nouvelle lecture) avec la touche programmable droite.

Au cours de ce didacticiel, vous allez regrouper le clip vidéo dans la bibliothèque de fichiers SWF, bien qu'il reste possible de charger un fichier vidéo externe à partir du système de fichiers du périphérique ou d'une adresse réseau.

1. Dans Flash, ouvrez le fichier créé dans la section Création de l'écran des plats du jour (Flash Professional uniquement).
2. Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque), si ce n'est pas déjà fait.
3. Ouvrez le menu des options situé dans le coin supérieur droit du panneau Bibliothèque et sélectionnez Nouvelle vidéo.

   La boîte de dialogue Propriétés de la vidéo s'affiche.

4. Tapez le nom du symbole vidéo dans la zone de texte Symbole (cafe Video, par exemple).
5. Dans cette boîte de dialogue, sélectionnez l'option de regroupement de la vidéo source dans le fichier SWF, puis cliquez sur Importer.
6. Ouvrez le dossier Samples and Tutorials/Tutorial Assets/Flash Lite 2.0/cafe/ situé dans le dossier d'installation de Flash Professional 8 sur votre disque dur, sélectionnez le fichier cafe_townsend.3gp et cliquez sur Ouvrir.

   Si le clip ne s'affiche pas dans la boîte de dialogue Ouvrir (ou si il ne peut pas être sélectionné), sélectionnez Tous les fichiers (*.*) dans la liste déroulante Fichiers de type (Windows) ou Tous les fichiers dans la liste déroulante Activer (Macintosh). En effet, l'outil de programmation de Flash ne permet pas d'identifier automatiquement la plupart des formats vidéo de périphérique.

   La boîte de dialogue Propriétés de la vidéo s'affiche, comme illustré ici. Cliquez sur OK.

   
   
   

7. Cliquez sur OK pour fermer la boîte de dialogue Propriétés de la vidéo.

   Un nouveau symbole vidéo s'affiche dans le panneau Bibliothèque du document qui est associé au fichier vidéo de périphérique.

   Pour plus d'informations sur l'utilisation de la vidéo de périphérique dans Flash Lite, consultez la section Exploitation d'une vidéo de périphérique dans le manuel Développement d'applications Flash Lite 2.x.

8. Pour ajouter l'objet vidéo sur la scène, sélectionnez l'image 51 du calque Video en tant qu'image clé dans le scénario, comme indiqué dans l'exemple suivant :

   
   
   

9. Dans le panneau Bibliothèque, faites glisser l'objet Video sur la scène.
10. Dans l'inspecteur Propriétés, tapez cafeVideo dans la zone de texte Nom d'occurrence, puis définissez la coordonnée x de l'objet sur 0, sa coordonnée y sur 45, sa largeur sur 176 et sa hauteur sur 144.

    
    
    

11. Dans le scénario, sélectionnez l'image 51 en tant qu'image-clé dans le calque ActionScript.
12. Ouvrez le panneau Actions (Fenêtre > Actions) et entrez, ou copiez et collez, le code suivant :

    // Arrêt du scénario, enregistrement des touches 
    // programmables et démarrage du clip.
    stop ();
    fscommand2 ("SetSoftKeys", "Home", "Pause");
    cafeVideo.play ();
    var playing:Boolean = true;
    // Code du gestionnaire d'événements de touche
    // programmable :
    Key.removeListener (myListener);
    var myListener:Object = new Object ();
    myListener.onKeyDown = function () {
        var keyCode = Key.getCode ();
        if (keyCode == ExtendedKey.SOFT1) {
            gotoAndPlay ("home");
        }
        else if (keyCode == ExtendedKey.SOFT2) {
            if (playing) {
                // Si la vidéo est en cours de lecture, arrêtez-la,
                // Définition de la variable d'état (playing) sur 
                // false et définissez l'étiquette de touche 
                // programmable droite sur « Play ».
                cafeVideo.pause ();
                playing = false;
                rightSoftKeyLabel.text = "Play";
            }
            else {
                // Si la lecture de la vidéo est suspendue, reprenez-la,
                // définissez la variable d'état (playing) sur
                // false, et définition de l'étiquette de touche
                // programmable droite sur « Pause ».
                cafeVideo.resume ();
                playing = true;
                righttSoftKeyLabel.text = "Pause";
            }
        }
    };
    // Enregistrement d'un objet écouteur :
    Key.addListener (myListener);
    //
    // Code du gestionnaire de l'état vidéo. 
    //
    cafeVideo.onStatus = function (infoObject:Object) {
        var code = infoObject.code;
        if (code == "completed") {
            // Si la lecture du clip est terminée, définissez
            // playing=false, et définissez l'étiquette de touche 
            // programmable droite sur « Replay » :
            playing = false;
            rightSoftKeyLabel.text = "Replay";
        }
    };
    

13. Enregistrez votre travail et testez l'application dans l'émulateur.
14. Sélectionnez l'option View Video dans l'écran d'accueil de l'application pour afficher la vidéo.

    Interrompez la lecture de la vidéo en appuyant sur la touche programmable Droite, puis appuyez de nouveau sur la même touche pour reprendre la lecture. Lorsque le clip est terminé, appuyez de nouveau sur la touche programmable droite pour reprendre la lecture de la vidéo.