Basix rapide clignotement animé aléatoire

Même lorsque vous animez sur la timeline, une simple touche ActionScript peut améliorer ce que vous faites. Dans ce petit conseil, nous allons utiliser une seule ligne d'AS3 pour ajouter du réalisme animé en un clin d'œil!


Étape 1: ouvrez les yeux

Saisissez les fichiers source et ouvrez le fichier "database.fla". Sur la scène, vous trouverez la "tête" du MovieClip, qui comprend deux couches contenant les MovieClips "le visage" et "les yeux".

Bien sûr, si vous voulez recommencer à zéro, en utilisant vos propres graphiques, vous pouvez le faire.?


Étape 2: les yeux l'ont

Nous allons faire clignoter les yeux périodiquement, alors commencez par double-cliquer sur le clip "yeux" pour entrer sa timeline.


Étape 3: Vue clignotante

Allongez le montage en ajoutant une image clé à l'image 80 du calque "yeux". C’est là que nous allons placer les yeux dans leur état "clignotant".

Supprimez les yeux ouverts de la scène et portez votre attention sur la bibliothèque. Vous y trouverez "eyesClosed" que vous pouvez positionner sur la scène où se trouvait auparavant le clip "eyesOpen".

Avec les yeux fermés sélectionnés, appuyez sur F5 pour ajouter quelques images supplémentaires. Ajoutez autant que vous voulez; Cela augmentera le temps que les yeux de votre personnage passeront fermés au cours d'un clignement des yeux. 3 images c'est bien dans notre cas.

Testez votre film (Commande / Ctrl + Entrée) pour avoir une idée de l'effet clignotant que vous avez créé..

La tête de lecture se déplace le long de la timeline, provoquant un clignotement périodique. Parfait! Droite? Eh bien pas exactement. Le clignotement de l'uniforme suggérerait que notre personnage est un robot ou qu'il manque son lobe frontal.


Étape 4: Randomeyes

Améliorons l’effet en randomisant le clignotement.

Ajoutez un deuxième calque au MovieClip "yeux", étiquetez-le "Actions" et verrouillez-le. Sélectionnez la première image et entrez l'extrait suivant dans le panneau Actions (Fenêtre> Actions):

 gotoAndPlay (uint (Math.random () * totalFrames) +1);

Étape 5: Examen de la vue

Que fait réellement cet extrait? Bien, le gotoAndPlay (); action envoie la tête de lecture le long du scénario en cours, quel que soit le numéro d'image défini dans les accolades. Le contenu de nos accolades nous donnera notre numéro de cadre.

le Math.random () La méthode retournera un nombre compris entre 0 et (sans toutefois inclure) 1. Ceci est multiplié par totalFrames, une propriété de notre MovieClip - la quantité d'images qu'il contient (dans notre cas, 83). uint () soigne le résultat de notre nombre aléatoire * totalFrames, en arrondissant et en nous donnant un entier.

Le plus petit entier on peut s'attendre à 0, puisque uint (0 * 83) vaut 0.

Le plus grand entier on peut espérer 82, puisque uint (0,9999999999 * 83) est 82.

Par conséquent, nous +1 pour finir, nous donner un cadre de destination entre 1 et 83.

Une fois que la tête de lecture atteint la fin de notre scénario, elle retourne à l'image 1 et est à nouveau envoyée à une image aléatoire..

Vérifiez le film à nouveau!

Notre personnage clignote toujours, mais maintenant à intervalles irréguliers, ce qui semble beaucoup moins lobotomisé.

L'effet devient encore plus clair avec deux instances de notre personnage sur scène. Dans l'exemple ci-dessous, nous avons deux personnages différents, mais les deux utilisent exactement le même MovieClip "yeux":

Je ne dis pas que ces deux-là ont l'air de l'avoir complètement ensemble, mais vous avez l'idée?


Amélioration de la vue

C'est un résultat final très simple, pourquoi ne pas voir si vous pouvez l'améliorer?

  • Avoir un jeu avec le timing; modifier le nombre d'images par seconde et le nombre d'images dans votre film clignotant.
  • Pourquoi ne pas essayer de modifier l’extrait de code pour empêcher la tête de lecture de sauter dans l'action clignotante elle-même?
  • Peut-être pourriez-vous même empêcher l'animation de clignoter trop rapidement successivement?

Conclusion

Vous avez fini! Il s'agit d'une technique simple et couramment utilisée, mais le déplacement de la tête de lecture sur des images aléatoires peut s'appliquer dans des milliers de situations. J'espère que vous en trouverez l'usage :)