Outils pour utilisateurs

Outils du site


cours2010:multimedia:controle_d_animations

Contrôle d'animations

Contrôler le démarrage d'une animation

Ajouter l'effet de rebond à la trotteuse du TP Horloge (animation par le code) :

  • Modifier le code pour utiliser un 'Timer' pour que le contrôle de l'animation soit fait toutes les secondes.
  • Ajouter dans le symbole des 'Secondes' (seconde avec anim) une animation de moins d'une seconde tournant l'aiguille sur 6° (seconde (image statique)).
  • S'assurer que l'aiguille démarre son animation à chaque secondes par seconde.gotoAndPlay(1).
  • Éviter que l'animation se répète en plaçant un stop() à sa fin.

Ajout d'une interaction simple

Le but est d'obtenir :
L'extension Adobe Flash est nécessaire pour afficher ce contenu.

Télécharger et partir de cette archive (base+police).

Bien suivre les étapes et tester comme indiqué. Demander de l'aide si vous n'obtenez pas le résultat attendu.

  • Mettre en place un bouton :
    • Lui donner un nom d'occurrence.
    • Ajoutez un gestionnaire d'événement qui réagit au clic sur le bouton.
      • Utilisez une instruction trace(”…”) pour visualiser son effet.
    • Testez votre code : le message s'affiche dans la fenêtre sortie.
  • Réagir au clic en affichant l'animation.
    • Sur un nouveau calque, placez l'occurrence d'un symbole nommé animation.
      • Dans ce symbole, placez une petite animation, par exemple le symbole nommé ”rec”.
    • Faire que ce symbole n'apparaisse qu'a la seconde image (glissé-déplacé).
    • Etendre le ”fond” pour qu'il couvre les deux images (F5).
    • Sur le calque Actions, ajouter une image clef (F6 sur la seconde image) avec pour étiquette ”Début animation”.

  • Modifier le code pour déplacer la tête de lecture à la seconde image (Début animation) suite à un clic : gotoAndStop(“Début animation”);
  • Testez votre code : en cliquant sur le bouton, celui-ci doit disparaître laissant place à l'animation.
  • Dans l'animation, ajouter à la fin un bouton la relançant depuis le début.
  • Ajouter une interpolation de mouvement pour que l'animation soit visible et limitée dans le temps.
  • Ajouter à la fin une image clef (F6) contenant un simple stop(); pour que l'animation ne se joue qu'une fois.
  • Testez votre code : l'animation s'arrête à la fin.
  • Ajoutez le second bouton et donnez-lui un nom d'occurrence.
  • Le faire apparaître en fin d'animation.
  • Ajoutez un gestionnaire d'événement qui réagit au clic sur le bouton.
    • faites rejouer l'animation (gotoAndPlay(1)) suite au click.
  • Testez votre code : vous devez pouvoir relancer l'animation en cliquant sur le bouton.

Contrôler la position (temps) dans une animation

Le but est de mettre en place l'animation des lettres qui “défilent” en s'affichant successivement.

La base est la même animation que l'on nommera roulette. Différentes occurrences de ce symbole (roulette), nommées ”roulette1,roulette2,..” ,qui seront placées sur le clip de l'animation principale (le symbole animation).

Dans l'animation principale l'on lancera l'animation d'une “roulette” avec la méthode play.
Exemple : roulette2.play();

Pour pouvoir s'arrêter sur une lettre donnée : on met en place des étiquettes correspondant à chaque lettre. La méthode gotoAndStop appelée avec comme paramètre la lettre désirée ; permettra d'arrêter la “roulette” et d'afficher la lettre demandée.
Exemple : roulette4.gotoAndStop(“x”);

Mise en place des principes énoncés :

  • Faire le symbole roulette (Cmd+F8).
    • Placer sur un calque (“Lettres”) la lettre “a”.
      • L'afficher pendant deux images (ajouter une image avec F5).
    • Sur le calque action, ajoutez une étiquette “a”.
    • Répéter la même structure pour les autres lettres.
      • Astuce : on peut copier un bloc d'images sélectionnées en les glissant avec la touche ALT.
    • Dans un premier temps, il est inutile de mettre en place toutes les lettres. Juste quelques unes pour tester le principe.
  • Dans l'animation, mettre en place cinq occurrences de roulette que vous nommerez ”roulette1,roulette2,…”.
    • Les faire apparaître à temps différents
  • Tester l'animation.
  • Mettre en place les instructions pour contrôler les “roulettes”.
    • Sur le calque Actions, se placer à l'instant désiré.
    • Faire une image-clef par F6.
    • Dans le panneau “ACTIONS” (F9), mettre l'instruction réalisant :
      • L'arrêt sur une lettre : roulette2.gotoAndStop('c');
      • La relance du défilement : roulette1.play();
cours2010/multimedia/controle_d_animations.txt · Dernière modification: 2011/03/13 23:00 (modification externe)