Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_boutons_3_etats

Projet basique : boutons à trois états

Ce TP est la suite de celui sur la gestion des événements de navigation. Le but est de pouvoir activer et désactiver les boutons du menu suivant la page affichée.

Dans cette activité, vous allez utiliser une librairie externe :

  • Un classique : une librairie de “Tween” : TweenMax
    • Remarque : on trouve plus souvent des références à TweenLite. 1)
  • Cette librairie se présentera sous forme d'un “SWC” précompilé.

Mise en place et usage de la librairie

Installation dans votre projet

  • Télécharger la librairie (lien disponible sur le site).
    • Avant pouvoir de télécharger, on vous présente la licence. Cette librairie est gratuite si votre site n'est pas payant. Il peut être à but commercial, mais pas requérir des paiements des utilisateurs.
  • Extraire l'archive.
    • Le ficher contenant la librairie précompilée se nomme : ”greensock.swc
  • copier le fichier ”greensock.swc” dans votre dossier pages.
    • Le choix de ce dossier vient du fait que vos fichiers “FLA” sont configurés pour utiliser les “SWC” placés dedans.
      • Il serait plus opportun de le placer dans un dossier lib. Mais il faudrait éditer tous les “FLA” pour ajouter son chemin.

Ne pas oublier de signaler à FlashDevelop que vous désirez l'utilisé comme librairie :

Utilisation de TweenMax

Présentation

Ce qu'on appelle “Tween” recouvre des fonctions permettant de gérer des animations :

  • C'est exactement la même chose que les interpolations de mouvement de Flash IDE.
    • Simplement on utilise du code ActionScript et non l'éditeur de mouvement.
  • Flash dispose d'une Classe ''Tween''.
    • Mais elle est d'intérêt limité. On utilise généralement une autre librairie.

La démarche que je vous propose est intermédiaire :

  • On va mettre en place l'animation sur la “timeline”.
  • Mais la contrôler en utilisant TweenMax.
    • On l'utiliser pour déplacer la tête de lecture entre des étiquettes.

Code ActionScript

Pour piloter une animation avec TweenMax il suffit de spécifier :

  • Qui animer :
    • Nous allons placer le code sur une Classe directement associé au bouton donc : this . C.-à-d. le bouton lui-même.
  • En combien de temps (valeur en secondes):
    • Comme on va utiliser une animation faite sur le scénario, il faut comprendre que l'on pourra jouer l'animation à une vitesse différente.
  • Quelles propriétés changer et à quelles valeurs (un objet en notation littérale).
    • On va utiliser TweenMax pour animer vers une étiquette (frameLabel) dont on spécifiera le nom (une chaîne de caractères).

Cela donne :

Mise en place de l'animation

Dans le TP sur les boutons animés, l'on jouait l'animation en avant ou en arrière de la fin vers le début.

  • Le début figurait l'état normal.
  • La fin figurait l'état survolé.

Maintenant l'on désire animer entre 3 états :

  • “normal”
  • “survole”
  • “inactif” : quand le bouton est désactivé.

Mettre en place une animation avec des étiquettes correspondant à chaque état.

Ou :

Remarque : l'ordre des états (étiquettes) n'a pas d'importance. Il dépend seulement de l'effet désiré.

Vous pouvez tester cette nouvelle version de l'animation en modifiant le code de la Classe associé aux boutons.

  • On n'a plus besoin du gestionnaire d'événement
    • la “Tween” le fait pour nous.
  • La variable stockant la direction de lecture peut être également supprimée.

Le code devient terriblement simple :

Remarque, il existe deux raisons pour ne pas utiliser une librairie :

  • L'ignorance : on ne sait pas que cela existe. En fait, on ne s'informe pas des bonnes pratiques.
  • La stupidité : on préfère écrire soi-même du code bourré d'erreurs plutôt que d'utilisé un code éprouvé.

Ceci dit, on peut toujours vouloir faire soi-même pour apprendre. Mais quand on a compris, on passe à autre chose !

Tester que les animations des boutons fonctionnent toujours. Il faut adapter le code présenté si vous avez déjà mis en place les méthodes active et desactive.

Code d'activation/désactivation

Principe

Le but est de signaler à l'utilisateur l'état du bouton :

  • On animera vers l'état désiré lors des changements d'état :
    • active → “normal”
    • desactive → “inactif”
  • De même, on changera buttonMode (pour le curseur).

Conseil, appelez la méthode active depuis votre constructeur. Cela assure que les boutons soient bien dans l'état initial désiré (“normal”).

Tester le code. Si vous avez mis en place les événements de navigations, les boutons du menu doivent se désactiver suivant la page affichée.

  • Attention : cela ne fonctionne que si :
    • Vous ne bougez pas la souris.
    • Ou plus simplement si vous naviguez par un lien.
  • La raison est l'événement ROLL_OUT qui ramène le bouton à l'état normal.

Voir plus loin pour la solution.

Désactiver les interactions

Il existe une propriété des objets d'affichage qui contrôle le fait que l'utilisateur puisse interagir avec un élément : mouseEnabled.

  • On changera cette propriété quand on active ou désactive un bouton.
    • Ajoutez à la fonction active :
      • mouseEnabled = true;
    • Ajoutez à la fonction desactive :
      • mouseEnabled = false;

Attetion “bug” : si l’on change buttonMode à false, cela à pour effet de déclencher l'événement MouseEvent.ROLL_OVER . Assez logique si vous y réfléchissez. Vous devez donc tester buttonMode avant d'animer vers l'état “normal” dans ce gestionnaire d'événement.

1) Mais l'usage de TweenMax simplifier le code : pas besoin d'activer un “plugin”
cours2009/multimedia/projet_basique_boutons_3_etats.txt · Dernière modification: 2010/05/18 22:00 (modification externe)