Créer un délai dans une animation

By 19 mai 2008Adobe Flash, Tutoriels

Il existe plusieurs moyens de créer une temporisation dans Flash, mais tous font appel à des méthodes un peu tarabiscotées 😉 Je voudrais présenter ici une méthode simple et souple pour temporiser une animation basée sur la timeline (avec peu d’ActionScript).

Il arrive souvent, dans le cadre d’un dessin animé, qu’on ait besoin d’attendre un certain temps sur une image. On pourrait bien sûr utiliser des getTimer() et autres setInterval(), mais ces méthodes sont un peu complexes à mettre en oeuvre et dans ce genre de projet, il y a peu de code en général et on aime bien tester depuis Flash.
De plus, il faut que le graphiste puisse facilement changer la temporisation car la perception du rythme d’un dessin animé peut changer (en fonction de la musique ajoutée après par exemple).

Dans l’exemple ci-après, on va donc créer un calque Actions qui contiendra l’appel à une fonction définie dans la première image :

var compteur:Number = 0;

function attendre(images) {
  if(compteur==images) {
      compteur = 0;
      gotoAndPlay(_currentframe+1);
  } else {
      compteur++;
      gotoAndPlay(_currentframe-1);
  }
}

Le code est très simple, on définit une variable compteur qui va s’incrémenter jusqu’à atteindre une certaine valeur passée en paramètres : le nombre d’images.
Quand cette valeur est atteinte, on passe à l’image suivante, sinon on passe à l’image précédente.

remarque : on pourrait penser qu’un objet animé bougera quand la tête de lecture se déplacera entre les 2 images… Or, il n’en est rien 😉 Rien ne bouge ! Je ne sais pas pourquoi mais ça arrange bien nos affaires…

Il ne reste plus maintenant qu’à invoquer cette fonction depuis l’image où on veut mettre un délai.
On met donc la ligne de code suivante sur le calque Actions après avoir créé une image-clé :

attendre(48);

Ici, on attendra 4 secondes si la cadence de l’animation est de 12 images/seconde.

Comme le compteur est remis à 0 dans la fonction, le comptage reprend toujours correctement.

Laisser un commentaire