Exemple : Elément de portfolio d’animation (Flash Professional)

Cet exemple indique comment vous pouvez assembler des éléments d’ActionScript dans une application complète. L’élément de portfolio d’animation est un exemple de la façon dont vous pourriez ajouter à une animation linéaire existante des éléments interactifs mineurs. Vous pourriez, par exemple, incorporer une animation créée pour un client dans un portfolio en ligne. Les éléments interactifs à ajouter sont deux boutons sur lesquels l’utilisateur peut cliquer : un pour lancer l’animation et un pour accéder à une URL distincte (telle que le menu du portfolio ou la page d’accueil de l’auteur).

Le processus de création de cet élément peut être divisé en quatre sections principales :

  1. Préparer le fichier FLA pour ajouter des éléments ActionScript interactifs

  2. Créer et ajouter les boutons

  3. Ecrire le code ActionScript

  4. Test de l’application.

Préparation à l’ajout d’interactivité

Avant d’ajouter des éléments interactifs à l’animation, nous devons configurer le fichier FLA en créant des emplacements pour ajouter le nouveau contenu. En l’occurrence, il s’agit de créer un espace sur la scène où les boutons sont placés, et un « espace » dans le fichier FLA pour garder différents éléments séparés.

Pour configurer le fichier FLA et ajouter des éléments interactifs :

  1. Créez un fichier FLA comportant une animation simple (une interpolation de mouvement simple ou une interpolation de forme, par exemple). Si vous disposez déjà d’un fichier FLA contenant l’animation que vous présentez dans le projet, ouvrez-le et enregistrez-le sous un nouveau nom.

  2. Choisissez l’endroit où vous souhaitez que les deux boutons apparaissent à l’écran. L’un d’eux lance l’animation et l’autre effectue un lien vers le portfolio de l’auteur ou la page d’accueil. Si nécessaire, libérez ou ajoutez de l’espace sur la scène pour ce nouveau contenu. Le cas échéant, vous pouvez créer un écran de démarrage sur la première image, auquel cas, décalez l’animation afin qu’elle démarre sur l’image 2 ou ultérieurement.

  3. Ajoutez un nouveau calque, au-dessus des autres dans le scénario, et nommez-le buttons . Il s’agit du calque auquel vous ajouterez les boutons.

  4. Ajoutez un nouveau calque, au-dessus du calque buttons, et nommez-le actions . C’est là que vous ajouterez le code ActionScript à votre application.

Création et ajout de boutons

Vous allez à présent créer et positionner les boutons qui constituent le centre de l’application interactive.

Pour créer et ajouter des boutons au fichier FLA :

  1. A l’aide des outils de dessin, créez l’aspect visuel de votre premier bouton (celui de lecture) sur le calque buttons. Par exemple, dessinez un ovale horizontal avec du texte par-dessus.

  2. A l’aide de l’outil de sélection, sélectionnez toutes les parties graphiques du bouton.

  3. Dans le menu principal, choisissez Modifier > Convertir en symbole.

  4. Dans la boîte de dialogue, choisissez le type de symbole de bouton, donnez-lui un nom et cliquez sur OK.

  5. Le bouton étant sélectionné, dans l’Inspecteur des propriétés, affectez-lui le nom d’occurrence playButton .

  6. Répétez les étapes 1 à 5 afin de créer le bouton qui permettra à l’utilisateur d’accéder à la page d’accueil de l’auteur. Nommez ce bouton homeButton .

Ecriture du code

Le code ActionScript de cette application peut être divisé en trois ensembles de fonctionnalités, même s’ils sont tous entrés au même endroit. Le code doit effectuer les trois opérations suivantes :

  • Arrêter la tête de lecture dès le chargement du fichier SWF (lorsque la tête de lecture atteint l’image 1).

  • Ecouter un événement pour lancer la lecture du fichier SWF lorsque l’utilisateur clique sur le bouton de lecture.

  • Ecouter un événement pour que le navigateur accède à l’URL appropriée lorsque l’utilisateur clique sur le bouton de la page d’accueil de l’auteur.

Pour créer un code qui arrête la tête de lecture lorsqu’elle atteint l’image 1 :

  1. Sélectionnez l’image-clé sur l’image 1 du calque actions.

  2. Pour ouvrir le panneau Actions, sélectionnez Fenêtre > Actions dans le menu principal.

  3. Dans le panneau Script, entrez le code suivant :

    stop();

Pour écrire un code qui lance l’animation lorsque l’utilisateur clique sur le bouton de lecture :

  1. A la fin du code entré aux étapes précédentes, ajoutez deux lignes vides.

  2. Entrez le code suivant en bas du script :

    function startMovie(event:MouseEvent):void 
    { 
        this.play(); 
    }

    Ce code définit une fonction appelée startMovie() . Lorsque la fonction startMovie() est appelée, elle lance la lecture du scénario principal.

  3. Sur la ligne qui suit le code ajouté à l’étape précédente, entrez cette ligne de code :

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Cette ligne de code enregistre la fonction startMovie() comme écouteur de l’événement click de playButton . Ainsi, chaque fois que l’utilisateur clique sur le bouton playButton , la fonction startMovie() est appelée.

Pour rédiger un code qui permet au navigateur d’accéder à une URL lorsque l’utilisateur clique sur le bouton de la page d’accueil :

  1. A la fin du code entré aux étapes précédentes, ajoutez deux lignes vides.

  2. Entrez ce code au bas du script :

    function gotoAuthorPage(event:MouseEvent):void 
    { 
        var targetURL:URLRequest = new URLRequest("http://example.com/"); 
        navigateToURL(targetURL); 
    }

    Ce code définit une fonction gotoAuthorPage() . Cette fonction crée d’abord une occurrence d’URLRequest représentant l’URL http://example.com/, puis transmet cette URL à la fonction navigateToURL() afin que le navigateur de l’utilisateur l’ouvre.

  3. Sur la ligne qui suit le code ajouté à l’étape précédente, entrez cette ligne de code :

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Cette ligne de code enregistre la fonction gotoAuthorPage() comme écouteur pour l’événement click de homeButton . Ainsi, chaque fois que l’utilisateur clique sur le bouton homeButton , la fonction gotoAuthorPage() est appelée.

Test de l’application

A ce stade, l’application est entièrement opérationnelle. Testons-la pour nous assurer que c’est le cas.

Pour tester l’application :

  1. Dans le menu principal, sélectionnez Contrôle > Tester l’animation. Flash Professional crée le fichier SWF et l’ouvre dans une fenêtre Flash Player.

  2. Testez les deux boutons pour vérifier qu’ils fonctionnent.

  3. Si ce n’est pas le cas, vérifiez les points suivants :

    • Les deux boutons ont-ils des noms d’occurrence différents ?

    • Les appels à la méthode addEventListener() utilisent-ils les mêmes noms que les noms d’occurrence des boutons ?

    • Les noms d’événement corrects sont-ils utilisés dans les appels à la méthode addEventListener() ?

    • Le paramètre correct est-il spécifié pour chacune des fonctions (qui nécessitent toutes les deux un seul paramètre avec le type de données MouseEvent) ?

    Tous ces points et la plupart des autres erreurs possibles entraînent l’apparition d’un message d’erreur lorsque vous choisissez la commande Tester l’animation ou que vous cliquez sur le bouton pendant le test. Recherchez les erreurs de compilation dans le panneau prévu à cet effet (celles qui ont lieu lorsque vous choisissez d’abord Tester l’animation). Recherchez les erreurs d’exécution dans le panneau Sortie. Il s’agit des erreurs qui ont lieu pendant la lecture du contenu, lorsque vous cliquez sur un bouton, par exemple.