Flamme animée

  • Introduction
  • Informations
Flamme animée Ce tutoriel vous permettra de réaliser un effet de flamme animée (pour une bougie par exemple).
Afin que ce tutoriel reste simple à comprendre j'ai utilisé la minimum de code possible.  
Netger
  • Auteur : Netger
  • Publication : 21 juil. 2006 18:57
  • Consultations : 9003
 

1. Nouveau document

Flamme animée  image 1 Commençons créer un nouveau document flash possédant les propriétés suivantes :
  • dimensions : 200 x 250 pixels (j'ai choisie les dimensions au hasard)
  • couleur d'arrière-plan : noir (ou une autre couleur).
  • cadence : 24 images par secondes
  • unité de la règle : pixels

2. Créer un MovieClip "mc_base"

Nous allons commencer par créer un MC pour y placer la base graphique de notre animation.
Cliquez sur "insertion" puis "nouveau symbole" et nommez-le.

Flamme animée  image 2 Maintenant, dessinez ou importez un disque de 64 px de diamètre et dont le remplissage est un dégradé blanc vers transparent
Placez le graphique aux coordonnées -32 et -32 afin de la centrer puis revenez à la racine de votre animation avant de passer au chapitre suivant.

3. Créer un MC "mc_anim"

Maintenant que l'on possède une base "modelable" et bien nous allons l'animer !
Flamme animée  image 3 Cliquez de nouveau sur "insertion" et "nouveau symbole" afin de créer notre animation de base.

4. Définir l'animation de base

Allez chercher le symbole "mc_base" dans la bibliothèque et appliquez lui les paramètres suivants :
  • diamètre 12px
  • teinte #CCFF99
  • coordonnées : -6,-6
Insérez une nouvelle image-clé à la frame 5 puis cliquez sur votre symbole pour le sélectionner et appliquez lui les paramètres suivants :
  • diamètre 35px
  • teinte #FFFF00
  • coordonnées : -17.5,-17.5
Insérez une nouvelle image-clé à la frame 20 et attribuez lui les paramètres suivants :
  • largeur 12px
  • hauteur 50px
  • couleur : avancé (mettez tout les paramètres à 0 saut "Rouge=(0%xR)+255")
  • coordonnées : -6,-200
Flamme animée  image 4 Et enfin, ajoutez le code AS "gotoAndPlay(1);" sur cette dernière frame.

5. Placer le MC "mc_anim" sur la scéne principale

Flamme animée  image 5 Notre animation de base est prête, nous allons donc la placer sur la scène principale.
N'oubliez pas de lui donner le nom d'occurrence "flam" avant de passer au dernier chapitre.

6. Ajouter le code

Flamme animée  image 6 Il ne nous reste plus qu'à ajouter le code pour terminer notre animation.

1) Frame 1
Code-source actionscript
  1. i = 0;
  2. setProperty ("flam", _visible, 0);
  3. posX = getProperty("flam",_x);
 
2) Frame 2
Code-source actionscript
  1. if(i < 50)
  2. {
  3. 	duplicateMovieClip ("flam", "flam"+i, i);
  4. 	setProperty ( "flam"+i, _x,posX+random(3));
  5. 	i++;
  6. }
 
3) Frame 3
Code-source actionscript
  1. gotoAndPlay(2);
 
 
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire