Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_boutons_animes

Projet basique : boutons animés

Le but de ce TP est de mettre en place un comportement commun à plusieurs symboles : jouer une animation au survol de la souris.

Comme ce comportement doit être commun à plusieurs Classes, on va utiliser la notion d'héritage. Une Classe hérite des comportements (méthodes et propriétés) de sa Classe de base (transitivement de ses parents).

Spécifier la Classe de base

Vous l'avez déjà fait dans FlashDevelop. Car toutes Classes associées à un Symbole doit être basé sur MovieClip :

Ainsi, votre Classe dispose de tous les comportements de MovieClip donc on peut l'utiliser “comme” un MovieClip.

Dans le code ActionScript, cela s'écrit :

public class MenuBouton extends MovieClip {
  //...
}

On dispose du même “réglage” dans Flash IDE :

Généralement on modifie la Classe et laisse la Classe de base comme étant MovieClip.

Mais on va utiliser le paramètre de la Classe de base comme spécifié sur la capture :

  • On choisit un nom pour la Classe associé à ce bouton :
    • src0.grZ0.unNom.projet.boutons.Bouton1
  • On utilise une Classe de base qui sera commune à tous les boutons :
    • src0.grZ0.unNom.projet.MenuBouton
      • Elle-même dérive de MovieClip pour que ses enfants puissent être utilisés comme symbole.
        • Ouch ! C'est pour forger votre vocabulaire ;-)

En résumé :

Bouton1 extends MenuBouton extends MovieClip
Ce qui est propre à un bouton
- Texte
- Graphisme
- Animation
Ce qui est commun à tous les boutons
- “comme un bouton”
- Réagir au survole
- Gérer l'animation
Comme un Symbole
- tout le reste…

Travail : pour tous les boutons

  • Les exporter pour ActionScript :
    • Choisir un nom de Classe.
      • Peu d'importance, on ne va pas faire le fichier ActionScript correspondant.
    • Donnez la Classe de base.
      • src0.grZ0.unNom.projet.MenuBouton

Code des comportements communs

Avec FlashDevelop, créez une Classe : src0.grZ0.unNom.projet.MenuBouton

Vérifier que Flash l'utilise bien

Comme un bouton

Il existe des propriétés de la Classe MovieClip (ou ses parents) qui permettent à un symbole de se comporter comme un bouton :

  • buttonMode : si true, déclenche l'affichage du curseur en forme de main…
  • mouseChildren : détermine si les enfants de l'objet prennent ou non en charge la souris.
    • ce point est important si l’on utilise la propagation des événements (voir TP suivant).
  • tabEnabled : permet la navigation au clavier.

Le constructeur d'un objet a pour rôle de l'initialiser (rendre utilisable). Donc, modifier ces propriétés dans le constructeur pour en faire bénéficier toutes les instances de cette Classe ainsi que les instances des Classes dérivées de celle-ci.

Tester que maintenant tous les boutons changent de curseur quand on les survole avec la souris !

Réagir au survole

On désire avoir un comportement (animation) quand le curseur survole ou quitte un bouton.

Pour ce faire, il nous faut détecter ces événements :

Mettre en place les gestionnaires d'événements dans le constructeur.

Dans le corps des méthodes servant de gestionnaires d'événements, placer un simple trace(”…”);

Tester que les messages s'affichent.

Gérer l'animation

Le but est d'avoir une animation qui se joue en avant ou en arrière suivant que le curseur survole ou quitte un bouton.

Mise en place de l'animation

Mettre en place une animation.

Reste que l'on veut que l'animation ne se joue pas par défaut. Ajouter ”stop();” au constructeur.

Principe d'animation

On veut les comportements suivants :

  • Quand on survole, on lit l'animation (en avant).
  • Quand on quitte le bouton, on lit l'animation à l'envers.

Lire une animation “normalement” n'est pas dur, il suffit de dire ”play();” et de mettre un ”stop();” pour s'arrêter.

Lire une animation à l'envers n'est pas le comportement par défaut. Il est nécessaire de le programmer nous-mêmes. La méthode prevFrame() de MovieClip nous sera utile. On utilisera également son opposé : nextFrame()

Pour contrôler l'animation nous même, il est nécessaire de déterminer l'action à entreprendre à chaque rafraîchissement de l'affichage : Event.ENTER_FRAME. Mettre en place un gestionnaire d'événement pour celui-ci.

Dans ce gestionnaire d'événement, on va devoir déterminer si l'on veut avancer ou reculer. Cette décision dépend d'ou est la souris :

  • Quand elle est rentrée : l'on a reçu l'événement MouseEvent.ROLL_OVER
  • Quand elle quitte le bouton : l'on a reçu l'événement MouseEvent.ROLL_OUT

Reste à s'en souvenir :

  • On ajoute une variable d'instance privée _avance de type Boolean (vrai ou faux).
  • On met cette variable à “vrai” (_avance = true;) quand la souris rentre : événement MouseEvent.ROLL_OVER
  • On met cette variable à “faux” (_avance = false;) quand la souris part : événement MouseEvent.ROLL_OUT

On peut maintenant écrire le comportement à chaque rafraîchissement : événement Event.ENTER_FRAME :

  • Si _avance :
    • Alors, l’on va à l'image suivante (nextFrame();).
    • Sinon, l’on va à l'image précédente (prevFrame();).

cours2009/multimedia/projet_basique_boutons_animes.txt · Dernière modification: 2010/05/12 22:00 (modification externe)