Expériences

Présentation

Un peu de script et de graphisme avec un tutoriel Flash sur la réalisation d’une sorte de fontaine à lucioles multicolores ! Rien de compliqué, il faut cependant avoir quelques bases en Flash, notamment dans la création de clips, et quelques notions d’ActionScript. J’utilise personnellement la version 8 de Flash, mais je pense que l’animation est réalisable avec des versions antérieures.

Voici le résultat auquel nous allons parvenir :

Nous allons pour cela créer tout d’abord un clip animé qui représente un “éclat”, puis nous allonssimuler une source d’éclats sur l’écran.

Création du clip de base

Création de l’éclat

Commençons par créer un document Flash de 400 pixels par 400 pixels par exemple. Pour y voir plus clair, spécifions un arrière-plan noir.

Sur ce fond noir, nous allons créer un cercle blanc d’une petite taille, sans bordure. Faire ce cercle en petite taille permet de s’approcher par la suite au mieux du rendu final. Ici, il fait 5 fois 5 pixels. Convertissons maintenant ce cercle en clip animé (touche F8 par défaut sous Windows), et appelons-le “point” histoire de ne pas se mélanger les pinceaux dans le futur.

Nous allons maintenant spécifier quelques filtres à ce cercle pour lui donner un aspect luisant. Un clic simple sur l’objet “point” permet de spécifier des filtres sur cet objet. Tout d’abord, appliquons un premier rayonnement blanc, assez proche du centre (flou de 4 sur les directions X et Y), et d’une intensité modérée : juste ce qu’il faut pour avoir l’impression que le point est une source de lumière. Il ne faut donc pas que la limite entre le cercle et le rayonnement soit trop visible. J’utilise une qualité de rayonnement élevée afin que celui-ci soit bien circulaire (avec une qualité inférieure il a tendance à avoir une forme carrée). N’hésitez pas à zoomer (400%) pour ajuster au mieux la configuration de ce filtre.

Pour donner l’impression que la source a une couleur, nous allons créer un deuxième rayonnement. Il doit sembler “décorer” l’environnement, il faut donc lui donner une plus grande ampleur : un flou sur une distance de 15 en X et Y est correct. Ici, j’ai choisi un bleu, couleur qui a tendance a moins frapper nos yeux, surtout sur du noir. J’ai donc dû spécifier une intensité assez élevée : 650% pour l’exemple. Qualité élevée, pour les mêmes raisons que précédemment.

Sortons de la modification de l’objet “point”. Nous avons crée la base de notre éclat, nous allons maintenant l’animer.

Animation de l’éclat

Nous allons transformer l’objet “point” et ses filtres en un clip animé. De la même façon que tout à l’heure, F8 permet de convertir l’objet “point” en symbole. Appelons celui-ci “eclat”. Dès la création, on peut cocher dans les options avancées “Exporter pour ActionScript”. L’objet de type “eclat” sera alors accessible dans les scripts que nous écrirons.

Ajoutons maintenant l’animation à cet éclat. Pour cela, modifions l’objet “en place” en double-cliquant dessus et insérons une image-clef à l’image 20 (touche F6). Déplaçons l’objet “point” de cette image sur un côté (à droite par exemple), en appuyant sur la touche MAJ pour garder la même ordonnée (y). Ici, j’ai activé l’affichage en pelure d’oignons pour donner une idée de la distance de déplacement : à gauche de l’image on distingue l’objet tel qu’il est positionné sur l’image 1, à droite l’objet déplacé de l’image 20.

L’étape suivante est bien évidemment la création d’une interpolation de mouvement entre l’image 1 et l’image 20. Mettons une accélération importante (ici 70) afin de donner un effet de jaillissement à cet éclat.

Nous allons maintenant faire disparaître l’éclat qui a jailli. J’ai activé ici les contours en pelures d’oignon pour voir l’ensemble de l’animation en contour. Comme l’interpolation est accélérée, vers l’image 15 les déplacements de l’objet “point” se font très courts. C’est donc à partir de là que nous allons faire disparaître l’éclat. À l’image 15, insérons une image-clef (touche F6) afin de découper l’animation en 2 : le jaillissement puis la disparition.

Sélectionnons à nouveau l’image 20 et l’objet “point” à cette image. Nous allons appliquer un flou assez large (distance de 10 en X et Y), de qualité élevée. Il va permettre de faire disparaître l’éclat par un effet proche de l’évaporation. Notez que ce filtre va apparaître automatiquement sur tous les objets “point” de l’animation “eclat” (en l’occurrence les images 1 et 15), mais que ses propriétés le rendent inactif.

Pour compléter notre disparition, appliquons un filtre de transparence complète à notre objet “point”. Dans les propriétés de l’objet, il suffit de sélectionner comme couleur “Alpha” et de la spécifier à 0%.

L’animation est terminée : vous pouvez déplacer le curseur pour constater que Flash s’est occupé de tout. Il reste cependant à indiquer au clip de s’arrêter à la dernière image pour ne pas boucler indéfiniment. Toujours à l’image 20, dans les “Actions”, écrivons stop();. Cela évitera au clip de recommencer à l’image 1 après l’image 20.

Vous pouvez à ce stade tester l’animation : l’éclat jaillit une fois et disparaît. Nous pouvons désormais passer au code ActionScript.

Écriture du script

Revenons à la scène principale. Supprimons l’objet “eclat” que nous venons de créer de la première image de la scène, tout en le laissant dans la bibliothèque. Nous allons l’insérer par script.

Nous écrirons le script à l’image 1 de la scène. Nous voulons donc que différents éclats jaillissent d’un point de l’écran, éclats ayant des tailles et des orientations différentes. Tout d’abord, créons la source des éclats, arbitrairement au point (200, 200) de l’écran :

// Création de la source des éclats
var src:MovieClip = _root.createEmptyMovieClip("src", _root.getNextHighestDepth());
src._x = 200;
src._y = 200;

Pour nommer les éclats que nous créerons, nous aurons besoin d’un compteur. Les classes ActionScript sont, pour la plupart tout du moins, spécifiées “dynamiques” (dynamic class). Cela signifie qu’on peut dynamiquement ajouter des propriétés. Profitons-en pour ajouter le compteur en tant que propriété de la source :

// Compteur d'éclats
src.i = 1;

La scène affiche par défaut 12 images par seconde (modifiable dans les propriétés). Il s’agit plus ou moins de la fréquence d’actualisation des clips. Comme on ne peut aller plus vite que la machine, nous allons créer un éclat par image. Pour cela, spécifions une fonction à appeler à chaque fois qu’une image du clip source est affichée :

// Création d'un éclat par image (12 images/sec par défaut)
src.onEnterFrame = function()
{
[CONTENU DE LA FONCTION]
};

Remplissons maintenant le contenu de la fonction. Nous voulons que la taille des éclats soit variable, que les éclats partent de la source et enfin que leur direction soit aléatoire :

	var size:Number = Math.random() * 5;	// Taille aléatoire
 
// Copie d'un clip de la bibliothèque dans un clip (ici _root)
var eclat:MovieClip = _root.attachMovie(
"eclat",							// Nom du clip à copier
"eclat" + (this.i++),				// Nom du clip créé
_root.getNextHighestDepth(), 		// Profondeur du clip
{									// Propriétés de l'objet
_x: this._x, _y: this._y,		// Sur la source
_width: size, _height: size		// Taille
}
);
 
// Important ! Spécifier _rotation dans les propriétés
// de l'objet à la création a une fâcheuse tendance à le déformer
eclat._rotation = Math.random() * 360;	// Direction de l'éclat

On a donc créé une variable size aléatoire entre 0 et 5 permettant de déterminer la largeur (_width) et hauteur (_height) de l’objet “eclat” copié. Cet objet est nommé en fonction du compteur, incrémenté au passage ("eclat" + (this.i++)). Comme nous créons les éclats dans la scène principale (_root.attachMovie), la profondeur et la position sont spécifiées selon la scène principale : _root.getNextHighestDepth() pour la profondeur, this._x et this._y pour récupérer les coordonnées de la source, elle-même positionnée dans la scène principale. Enfin, nous indiquons la rotation (_rotation) après la création pour éviter une déformation de l’objet.

C’est terminé ! Il ne reste plus qu’à essayer ! Si vous vous êtes perdu dans la rédaction du script, vous pouvez le télécharger et le copier-coller au bon endroit.

Pour obtenir d’autres fontaines du plus bel effet, vous pouvez utiliser dans le script un filtre travaillant sur les couleurs : ColorMatrixFilter. Je vous joins un deuxième exemple où les couleurs sont très variées et un troisième, dont les couleurs de l’éclat varient autour de sa teinte originale. Pour cela, il suffit de modifier les teintes rouge, vert et bleu du clip de façon légère : j’additionne à la teinte originale un nombre entre -16 et 16. Voici le résultat :

Edit : les utilisateurs de Flash CS3 devront certainement enregistrer les clips en compatibilité ActionScript 2.0 et les fichiers en compatibilité Flash 8. Si vous parvenez à faire fonctionner le tutoriel en utilisant d’autres versions d’ActionScript et Flash, n’hésitez pas à m’envoyer les modifications par mail ou dans les commentaires.

Conclusion

Ce tutoriel présente une technique simple mais efficace. En modifiant le clip animé, quelques paramètres ou l’affichage il est possible de réaliser de multiples effets : fumée, feu d’artifice, traînées… Attention toutefois aux performances qui tombent rapidement si les animations dupliquées sont trop complexes, trop longues ou trop nombreuses.

Cet article peut être modifié ou approfondi ultérieurement. Il ne se veut pas complet et n’est pas exempt d’erreurs. N’hésitez pas à les signaler.

Vous pouvez m’adresser vos remarques ou suggestions à enisseo@hotmail.com. Je ne manquerai pas de vous répondre.