[b:346mkcxl][size=200:346mkcxl]Partie III : Manipuler des séries d'images[/size:346mkcxl][/b:346mkcxl]






L'objet de cette partie sera de réaliser ceci :

[img:346mkcxl]http&#58;//img340&#46;imageshack&#46;us/img340/2377/persitenceut0&#46;jpg[/img:346mkcxl]

...sans afficher les images *une par une* comme un gros philistin épais, bien entendu.






[b:346mkcxl]Etape 1 :  Un douloureux effort[/b:346mkcxl]

Téléchargez [url=http&#58;//borv&#46;free&#46;fr/flash/cieux&#46;fla:346mkcxl]&lt;ici&gt;[/url:346mkcxl] le fichier flash avec les images déjà  importées (ma bonté me perdra).
Tant que nous y sommes, si vous cherchez un fichier vierge pour vos futures productions... [url=http&#58;//borv&#46;free&#46;fr/flash/vierge&#46;fla:346mkcxl]&lt;le voilà &gt;[/url:346mkcxl].






[b:346mkcxl]Etape 2 : Planter le décor[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel', 'ciel',-1);

_root.attachMovie('avion' , 'avion666' , 1);

avion666._x = 150;
avion666._y = 150;[/quote:346mkcxl]

Jusque là , pas d'embrouilles.






[b:346mkcxl]Etape 3 : Afficher une image indicée[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

_root.attachMovie('avion' , [color=blue:346mkcxl][b:346mkcxl]&quot;avion&quot;+666[/b:346mkcxl][/color:346mkcxl] , 1);

avion666._x = 150;
avion666._y = 150;[/quote:346mkcxl]

Cette notation permet de créer l'image [color=blue:346mkcxl][b:346mkcxl]avion666[/b:346mkcxl][/color:346mkcxl] à  partir d'un nom ([color=blue:346mkcxl][b:346mkcxl]avion[/b:346mkcxl][/color:346mkcxl]) et d'un numéro ([color=blue:346mkcxl][b:346mkcxl]666[/b:346mkcxl][/color:346mkcxl]), appelé &quot;[b:346mkcxl]indice[/b:346mkcxl]&quot;. Vous comprendrez son utilité plus bas.






[b:346mkcxl]Etape 3 : Manipuler une image indicée[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

_root.attachMovie('avion' , &quot;avion&quot;+666 , 1);

[color=blue:346mkcxl][b:346mkcxl]_root[&quot;avion&quot;+666][/b:346mkcxl][/color:346mkcxl]._x = 150;
[color=blue:346mkcxl][b:346mkcxl]_root[&quot;avion&quot;+666][/b:346mkcxl][/color:346mkcxl]._y = 150;[/quote:346mkcxl]

Cette notation permet de manipuler l'image [color=blue:346mkcxl][b:346mkcxl]avion666[/b:346mkcxl][/color:346mkcxl] sous sa forme [color=blue:346mkcxl][b:346mkcxl]&quot;avion&quot;+666[/b:346mkcxl][/color:346mkcxl]. Vous comprendrez son utilité plus bas (bis).






[b:346mkcxl]Etape 4 : Indicer avec une variable[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

[color=blue:346mkcxl][b:346mkcxl]n=666;[/b:346mkcxl][/color:346mkcxl]

_root.attachMovie('avion' , &quot;avion&quot;+[color=blue:346mkcxl][b:346mkcxl]n[/b:346mkcxl][/color:346mkcxl] , 1);

_root[&quot;avion&quot;+[color=blue:346mkcxl][b:346mkcxl]n[/b:346mkcxl][/color:346mkcxl]]._x = 150;
_root[&quot;avion&quot;+[color=blue:346mkcxl][b:346mkcxl]n[/b:346mkcxl][/color:346mkcxl]]._y = 150;[/quote:346mkcxl]

Nous avons rentré l'indice [color=blue:346mkcxl][b:346mkcxl]666[/b:346mkcxl][/color:346mkcxl] dans une variable [color=blue:346mkcxl][b:346mkcxl]n[/b:346mkcxl][/color:346mkcxl]. Puis, nous utilisons cette variable à  la place du nombre.
Bien entendu, si vous omettez le [color=blue:346mkcxl][b:346mkcxl]n=666[/b:346mkcxl][/color:346mkcxl], c'est le plantage assuré.






[b:346mkcxl]Etape 5 : Numéroter avec une variable[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

[color=blue:346mkcxl][b:346mkcxl]n=0;[/b:346mkcxl][/color:346mkcxl]

_root.attachMovie('avion' , &quot;avion&quot;+n , [color=blue:346mkcxl][b:346mkcxl]n[/b:346mkcxl][/color:346mkcxl]);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150;[/quote:346mkcxl]

Cessons le délire numérologique, et mettons [color=blue:346mkcxl][b:346mkcxl]n[/b:346mkcxl][/color:346mkcxl] à  [color=blue:346mkcxl][b:346mkcxl]0[/b:346mkcxl][/color:346mkcxl].
Nous voyons que le numéro de l'image peut [i:346mkcxl]aussi[/i:346mkcxl] être une variable.






[b:346mkcxl]Etape 6 : Multiplier les pains[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

n=0;

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150;

[color=blue:346mkcxl][b:346mkcxl]n++;[/b:346mkcxl][/color:346mkcxl]

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150;

[color=blue:346mkcxl][b:346mkcxl]n++;[/b:346mkcxl][/color:346mkcxl]

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150;[/quote:346mkcxl]

Description des opérations :

- On initialise n à  0.
- On affiche l'image [color=blue:346mkcxl][b:346mkcxl]&quot;avion&quot;+n[/b:346mkcxl][/color:346mkcxl], soit [color=blue:346mkcxl][b:346mkcxl]avion0[/b:346mkcxl][/color:346mkcxl].
- On incrémente n : n vaut maintenant 1.
- On affiche l'image [color=blue:346mkcxl][b:346mkcxl]&quot;avion&quot;+n[/b:346mkcxl][/color:346mkcxl], soit [color=blue:346mkcxl][b:346mkcxl]avion1[/b:346mkcxl][/color:346mkcxl].
- On incrémente n : n vaut maintenant 2.
- On affiche l'image [color=blue:346mkcxl][b:346mkcxl]&quot;avion&quot;+n[/b:346mkcxl][/color:346mkcxl], soit [color=blue:346mkcxl][b:346mkcxl]avion2[/b:346mkcxl][/color:346mkcxl].

Bien sûr, en testant le jeu, vous n'observez aucune différence : [color=blue:346mkcxl][b:346mkcxl]avion1[/b:346mkcxl][/color:346mkcxl] et [color=blue:346mkcxl][b:346mkcxl]avion2[/b:346mkcxl][/color:346mkcxl] on été rigoureusement superposées à  [color=blue:346mkcxl][b:346mkcxl]avion0[/b:346mkcxl][/color:346mkcxl]. Mais patience, patience...






[b:346mkcxl]Etape 7 : Etaler les pains[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

n=0;

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150 + [color=blue:346mkcxl][b:346mkcxl]100*n[/b:346mkcxl][/color:346mkcxl];

n++;

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150 + [color=blue:346mkcxl][b:346mkcxl]100*n[/b:346mkcxl][/color:346mkcxl];

n++;

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150 + [color=blue:346mkcxl][b:346mkcxl]100*n[/b:346mkcxl][/color:346mkcxl];[/quote:346mkcxl]

Ainsi, chaque image sera affichée 100 pixels au-dessous de la précédente.

Pour n=0 : avion0._y = 150 + 0*100 = [b:346mkcxl]150[/b:346mkcxl]
Pour n=1 : avion1._y = 150 + 1*100 = [b:346mkcxl]250[/b:346mkcxl]
Pour n=2 : avion2._y = 150 + 2*100 = [b:346mkcxl]350[/b:346mkcxl]

A présent, nous avons trois fois le même bloc de code. Nous pouvons donc remplacer cela par une... [b:346mkcxl]boucle[/b:346mkcxl].






[b:346mkcxl]Etape 8 : Distribuer *automatiquement* les pains[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

n=0;

[color=blue:346mkcxl][b:346mkcxl]while(n&lt;=2)

{[/b:346mkcxl][/color:346mkcxl]

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150 + 100*n;

n++;

[color=blue:346mkcxl][b:346mkcxl]}[/b:346mkcxl][/color:346mkcxl][/quote:346mkcxl]

Nous avons mis en place une boucle de type &quot;while&quot; :
[b:346mkcxl]while(truc) {machin}[/b:346mkcxl] signifie que [b:346mkcxl]machin[/b:346mkcxl] sera répété en boucle [i:346mkcxl]tant que[/i:346mkcxl] ([i:346mkcxl]&quot;while&quot;[/i:346mkcxl]) la condition [b:346mkcxl]truc[/b:346mkcxl] sera vraie.
Ici, la boucle se répète tant que n est inférieur ou égal à  2, soit trois fois : c'est ce que nous voulons.

En appendice, voici la syntaxe pour les [b:346mkcxl]conditions[/b:346mkcxl] numériques : 

- &quot;x strictement inférieur à  y&quot; : [b:346mkcxl]x &lt; y[/b:346mkcxl]
- &quot;x strictement supérieur à  y&quot; : [b:346mkcxl]x &gt; y[/b:346mkcxl]
- &quot;x inférieur ou égal à  y&quot; : [b:346mkcxl]x &lt;= y[/b:346mkcxl]
- &quot;x supérieur ou égal à  y&quot; : [b:346mkcxl]x &gt;= y[/b:346mkcxl]
- &quot;x égal à  y&quot; : [b:346mkcxl]x==y[/b:346mkcxl] (*)
- &quot;x différent de y&quot; : [b:346mkcxl]x!=y[/b:346mkcxl]

(*) Pour ne pas confondre avec la [b:346mkcxl]commande[/b:346mkcxl] &quot;x=y&quot;, qui rend x égal à  y.






[b:346mkcxl]Etape 9 : On arrête pas le progrès[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

[color=blue:346mkcxl][b:346mkcxl]for(n=0 ; n&lt;=2 ; n++)

{[/b:346mkcxl][/color:346mkcxl]

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150;
_root[&quot;avion&quot;+n]._y = 150 + 100*n;

[color=blue:346mkcxl][b:346mkcxl]}[/b:346mkcxl][/color:346mkcxl][/quote:346mkcxl]

Mieux encore, voici une boucle &quot;for&quot; :

[quote:346mkcxl][b:346mkcxl]for([color=red:346mkcxl]initialisation[/color:346mkcxl]; [color=green:346mkcxl]condition[/color:346mkcxl]; [color=orange:346mkcxl]incrémentation[/color:346mkcxl])
{
instructions;
}[/b:346mkcxl][/quote:346mkcxl]

...équivaut à ...

[quote:346mkcxl][b:346mkcxl][color=red:346mkcxl]initialisation;[/color:346mkcxl]
while([color=green:346mkcxl]condition[/color:346mkcxl])
{
instructions;
[color=orange:346mkcxl]incrémentation[/color:346mkcxl];
}[/b:346mkcxl][/quote:346mkcxl]

Pour faire simple, c'est exactement la même chose, on a juste rangé le [color=blue:346mkcxl][b:346mkcxl]n=0[/b:346mkcxl][/color:346mkcxl] et le [color=blue:346mkcxl][b:346mkcxl]n++[/b:346mkcxl][/color:346mkcxl] dans la parenthèse.






[b:346mkcxl]Etape 10 : Augmentons la production[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1);

for(n=0 ; n&lt;=[color=blue:346mkcxl][b:346mkcxl]33[/b:346mkcxl][/color:346mkcxl] ; n++)

{

_root.attachMovie('avion' , &quot;avion&quot;+n , n);

_root[&quot;avion&quot;+n]._x = 150 [color=blue:346mkcxl][b:346mkcxl]+ 10*n[/b:346mkcxl][/color:346mkcxl];
_root[&quot;avion&quot;+n]._y = 150 [color=blue:346mkcxl][b:346mkcxl]+ 6*n[/b:346mkcxl][/color:346mkcxl];

}[/quote:346mkcxl]

Maintenant que nous avons tout mis sous cette forme confortable, on peut afficher autant d'images que l'on veut, de la façon que l'on veut. Il suffit pour cela de modifier quelques valeurs numériques.






[b:346mkcxl]Etape 11 : Un peu d'esthétisme[/b:346mkcxl]

[quote:346mkcxl]_root.attachMovie('ciel','ciel',-1); 

for(n=0 ; n&lt;=33 ; n++) 

{ 

_root.attachMovie('avion' , &quot;avion&quot;+n , n); 

_root[&quot;avion&quot;+n]._x = 150 + 10*n; 
_root[&quot;avion&quot;+n]._y = 150 + 6*n;
[color=blue:346mkcxl][b:346mkcxl]_root[&quot;avion&quot;+n]._rotation = 3*n;
_root[&quot;avion&quot;+n]._alpha = 3*n + 1;[/b:346mkcxl][/color:346mkcxl]

}[/quote:346mkcxl]

Concluons cette partie avecun avant-goût de ce que vous pourrez faire par la suite :

- On tourne chaque image de [b:346mkcxl]3*n[/b:346mkcxl] degrés (grâce au paramètre [color=blue:346mkcxl][b:346mkcxl]._rotation[/b:346mkcxl][/color:346mkcxl], vu dans la Partie I).
- On règle sa transparence à  [b:346mkcxl](3*n + 1)[/b:346mkcxl] % (grâce au paramètre [color=blue:346mkcxl][b:346mkcxl]._alpha[/b:346mkcxl][/color:346mkcxl], qu'on peut faire varier de 0 à  100 : 0 = transparent, 100 = opaque).


Voilà , voilà . Dans le prochain chapitre, nous verrons comment animer joyeusement tout ceci, à  grand renfort de sinus et de cosinus (ce qui sera l'occasion de douloureux rappels mathématiques de troisième, pour certains).