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

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.

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.

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.

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

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.

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

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

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

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

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 .

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

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

Dans le panneau Script, entrez le code suivant :

stop();

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

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.

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.

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

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.

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.

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.

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

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.