Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Feu d'artifice

  • Introduction
  • Informations
Feu d'artifice Nous allons apprendre ici à réaliser un feu d'artifice en Flash grâce à ActionScript.
Ce tutoriel aborde ainsi divers fonctions de flash comme duplicateMovieClip(), attachMovie(), ou encore setRGB()...  
Netger
  • Auteur : Netger
  • Publication : 30 juin 2006 18:45
  • Consultations : 9727
 

1. Nouveau document

Il faut maintenant créer un nouveau document flash.
Feu dartifice image 1 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.

Feu dartifice image 2 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.

Feu dartifice image 3 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".
Feu dartifice image 4 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 occurrence du mc "animation".
Enfin, donnez le nom d'occurrence "anim" à au symbole "animation".

Ensuite, cliquez sur la frame 1 et recopiez le code suivant :
Code-source actionscript
  1. i = 0;
  2. effet = "effet"+random(3);
  3.  
  4. while (i<100) 
  5. {
  6. 	duplicateMovieClip("anim", "anim"+i, i);
  7.  
  8. 	with (this["anim"+i]) 
  9. 	{
  10. 		_rotation = random(360);
  11. 		_xscale = _yscale=40+random(100);
  12. 		gotoAndPlay(effet);
  13. 	}
  14. 	i++;
  15. }
 

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 :
Code-source actionscript
  1. profondeur = 0;
  2. 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 actionscript
  1. for (i=1; i<5; i++) 
  2. {
  3. 	if (random(3)<1) 
  4. 	{
  5. 		attachMovie("explosion", "elt"+profondeur, profondeur);
  6. 		feu = new Color(this["elt"+profondeur]);
  7. 		feu.setRGB(couleurs[random(5)]);
  8. 		with (this["elt"+profondeur]) 
  9. 		{
  10. 			_xscale = _yscale = 25+random(125);
  11. 			_x = random(400);
  12. 			_y = 300-random(200);
  13. 		}
  14. 		profondeur++;
  15. 		profondeur %= 10;
  16. 	}
  17. }
 
3) Frame 10
Nous en arrivons maintenant au terme de ce tutoriel car à ce stade cette ultime étape ne vous posera aucun problème #B5
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... Feu dartifice image 5  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire