![[Fléche]](../images/defaut/icones/puce_navig.gif)
Tutorial Flash : Feu d'artifice
Introductions
Informations
Résultat
Nous allons apprendre ici à réaliser un feu d'artifice en Flash grâce à ActionScript.
Ce tutorial aborde ainsi divers fonctions de flash comme duplicateMovieClip(), attachMovie(), ou encore setRGB()...
1. Créer un nouveau document flash et préparer la scène
Il faut maintenant créer un nouveau document flash.Attribuez lui les propriétés suivantes :
- dimensions : 400 x 300 pixels (j'ai choisie les dimensions au hasard)
- couleur d'arrière-plan : noir (ou une autre couleur sombre).
- cadence : 12 images par secondes
- unité de la règle : pixels
Pour que la lecture de notre animation ne provoque pas d'erreurs nous devons utiliser le compilateur de la version 1.0 d'ActionScript.
Cliquez donc sur "Fichier", "paramètres de publication" et choisissez "Version d'actionscript : Actionscript 1.0".
Pour le moment rien de bien compliqué
2. Dessiner une étincelle
Pour réaliser notre feu d'artifice nous allons avoir besoin d'une étincelle !!En fait ce que j'appelle ici "étincelle" n'est rien d'autre qu'un petit symbole ovale que nous allons dessiner.
Nous commencerons donc par créer un symbole movie-clip appelé "etincelle" (cliquez sur "insertion" puis "symbole").
Ensuite faites apparaitre la bibliothèque de l'animation (Ctrl + L) et double cliquez sur le mc "etincelle".
Faites un zoom de 1500% et dessinez en blanc un ovale horizontal de 3 pixels sur 1 pixel aligné aux coordonées x=0 et y=0.
Une fois cette étape achevée retournez à la racine de votre animation avant de passer à l'étape suivante.
3. Créer différents effets
Pour cette étape nous allons créer les différents effets que pourra prendre notre étincelle durant l'animation.Ces effets peuvent être de plusieurs types : couleurs, transparence, longueur de la trajectoire, etc...
Comme pour l'étape précédente nous allons commencer par insérer un nouveau symbole mc que nous appellerons "animation".
Utilisez la bibliothèque pour "entrer" dans ce nouveau symbole puis placez-y une occurance du symbole "etincelle" aux coordonnées x=0 et y=0.
Insérez maintenant une image clé à la frame 15, placez-y une action stop(); puis déplacez le symbole "étincelle" vers la droite et appliquez lui un Alpha de 0%.
Créez 2 nouveaux calques et procédez de manière globalement identique pour créer 2 autres effets.
Attention, les différents effets ne doivent pas se chevaucher.
Afin de pouvoir identifier nos différents effets, nous allons les nommer.
Pour cela il suffit cliquer sur la première frame concernée et de remplir le champ intitulé "étiquette d'image" en bas à gauche.
Donnez leur les noms "effet0", "effet1" et "effet2".
4. Créer une explosion d'un seul feu d'artifice
C'est à partir de cette étape qu'ActionScript va nous être utile : il va nous permettre de dupliquez aléatoirement notre symbole "animation" autour d'un axe de 360°.Cette fois encore nous commencerons par insérer un nouveau movie-clip que nous nommerons "explosion".
Depuis la bibliothèque, faites un clic-droit sur ce nouveau symbole et choisissez "liaisons...".
Dans la fenêtre d'options, cochez "Exporter pour Actionscript" et "Exporter dans la première image" puis validez.
Utilisez à nouveau la bibliothèque pour "entrer" dans ce symbole et placez-y une occurance du mc "animation".
Enfin, donnez le nom d'occurance "anim" à au symbole "animation".
Ensuite, cliquez sur la frame 1 et recopiez le code suivant :
Code-source : AS
i = 0;
effet = "effet"+random(3);
while (i<100) {
duplicateMovieClip("anim", "anim"+i, i);
with (this["anim"+i]) {
_rotation = random(360);
_xscale = _yscale=40+random(100);
gotoAndPlay(effet);
}
i++;
}
5. Créer le feu d'artifice
Il ne nous reste plus qu'à gérer correctement une boucle sur la scène principale avant de pouvoir admirer notre splendide feux d'artifice.1) Frame 1
Si ce n'est pas déjà fait, revenez sur votre scène principale et placez vous sur la frame 1.
Nous allons utiliser cette première frame pour déclarer et initialiser nos variables globales :
profondeur = 0;
couleurs = ["0x0099FF", "0x00FF00", "0xFF0000", "0xFFFF00", "0xCC00FF"];
"profondeur" correspond à la profondeur du clip et "couleurs" est un tableau contenant les différentes couleurs qui seront aléatoirement appliques aux clips.
2) Frame 2
Insérer une image clé à la frame 2 de votre animation.
Placez-y ensuite le code ActionScript suivant afin de générer aléatoirement des copies de notre mc "explosion" :
Code-source : AS
for (i=1; i<5; i++) {
if (random(3)<1) {
attachMovie("explosion", "elt"+profondeur, profondeur);
feu = new Color(this["elt"+profondeur]);
feu.setRGB(couleurs[random(5)]);
with (this["elt"+profondeur]) {
_xscale = _yscale = 25+random(125);
_x = random(400);
_y = 300-random(200);
}
profondeur++;
profondeur %= 10;
}
}3) Frame 10
Nous en arrivons maintenant au terme de ce tutorial car à ce stade cette ultime étape ne vous posera aucun problème
Il vous suffit juste de placer une image clé à la frame 10 et d'y insérer le code ActionScript "gotoAndPlay(2);".
Ce code permet de créer une boucle infinie entre la frame 2 et la frame10.
N'hésitez pas à personnaliser et à améliorer ce tutorial : vous pouvez par exemple ajouter différents sons d'explosions, modifier les couleurs, etc...
