[size=200:1mykjqih][b:1mykjqih]Partie I : Les joies de la programmation [i:1mykjqih]brute[/i:1mykjqih][/b:1mykjqih][/size:1mykjqih]






[b:1mykjqih]Etape 1 : Afficher une image[/b:1mykjqih]

Ce projet flash contient deux images dans sa bibliothèque : la Lame et la Rose. Nous allons afficher la lame.
Copier-collez ceci (&quot;Ctrl + C&quot; puis &quot;Ctrl + V&quot;, je précise, sait-on jamais...) dans la fenêtre Actions, et faites &quot;Ctrl + ENTER&quot; :

[img:1mykjqih]http&#58;//borv&#46;free&#46;fr/flash/6&#46;png[/img:1mykjqih]

[quote:1mykjqih][color=blue:1mykjqih]_root.attachMovie('lame','canif',50);[/color:1mykjqih][/quote:1mykjqih]

Sauf erreur, une magnifique lame s'affiche en haut à  gauche de l'écran. 

[img:1mykjqih]http&#58;//borv&#46;free&#46;fr/flash/7&#46;png[/img:1mykjqih]

Explication du miracle :

- On copie l'image dont le nom est &quot;[color=blue:1mykjqih]lame[/color:1mykjqih]&quot; dans la bibliothèque.
- On affiche cette copie sous le nom (arbitraire) de &quot;[color=blue:1mykjqih]canif[/color:1mykjqih]&quot;.
- On lui donne le numéro &quot;[color=blue:1mykjqih]50[/color:1mykjqih]&quot;.

A savoir sur la numérotation d'images :

- L'image 50 s'affichera DEVANT les images 49, 48, 47...
- Si vous attribuez le numéro 50 à  une autre image, elle effacera l'ancienne.
- Vous pouvez attribuer des numéros négatifs.






[b:1mykjqih]Etape 2 : Modifier la position d'une image[/b:1mykjqih]

Copiez-collez ceci, et faites &quot;Ctrl + ENTER&quot; (pareil pour les étapes suivants, les ajouts sont indiqués en [color=blue:1mykjqih]bleu[/color:1mykjqih]) :

[img:1mykjqih]http&#58;//borv&#46;free&#46;fr/flash/8&#46;png[/img:1mykjqih]

[quote:1mykjqih]_root.attachMovie('lame','canif',50); 
[color=blue:1mykjqih]canif._x = 100 ; 
canif._y = 100 ;[/color:1mykjqih][/quote:1mykjqih]

- &quot;[color=blue:1mykjqih]canif._x[/color:1mykjqih]&quot; est l'abscisse de l'image (nombre horizontal de pixels entre la [b:1mykjqih]droite[/b:1mykjqih] de l'écran et le [b:1mykjqih]coin haut-gauche[/b:1mykjqih] de l'image)
- &quot;[color=blue:1mykjqih]canif._y[/color:1mykjqih]&quot; est l'ordonnée de l'image (nombre vertical de pixels entre le [b:1mykjqih]haut[/b:1mykjqih] de l'écran et le [b:1mykjqih]coin haut-gauche[/b:1mykjqih] de l'image)
- On leur assigne la valeur [color=blue:1mykjqih]100[/color:1mykjqih] avec l'opérateur &quot;[color=blue:1mykjqih]=[/color:1mykjqih]&quot;.

Remarques :

- Par défaut, &quot;canif._x&quot; et &quot;canif._y&quot; valent 0 (d'où l'affichage en haut à  gauche, à  l'étape précédente)
- Vous pouvez entrer des coordonnées décimales ( ex : 83.45), l'image se floutera pour s'afficher &quot;entre deux pixels&quot;.
- N'oubliez pas le point-virgule à  la fin de chaque ligne de code.






[b:1mykjqih]Etape 3 : Aller vers l'Est[/b:1mykjqih]

[quote:1mykjqih]_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

[color=blue:1mykjqih]function onEnterFrame() 
{ 
canif._x += 1; 
}[/color:1mykjqih][/quote:1mykjqih]

Vous constatez avec émoi que le canif se barre vers la droite. Explications :
 
- Ce qui se trouve entre les accolades de &quot;[color=blue:1mykjqih]function onEnterFrame() { ... }[/color:1mykjqih]&quot; est exécuté à  chaque itération, soit 120 fois par seconde.
- &quot;[color=blue:1mykjqih]canif._x += 1[/color:1mykjqih]&quot; augmente l'abscisse du canif de 1.

Le canif se décale donc d'un pixel vers la droite à  chaque itération, soit de 120 pixels par seconde. 

Remarques :

- Pour aller vers la gauche, il suffit de remplacer &quot;+= 1&quot; par &quot;-=1&quot;
- Pour modifier la vitesse, remplacez 1 par 2, 3, 0.5, -1... 
- Raccourci commode : vous pouvez remplacer &quot;+= 1&quot; par &quot;++&quot; (incrémentation), &quot;-= 1&quot; par &quot;--&quot; (décrémentation).
- Il y a 120 itérations par secondes : c'est le maximum, mais nous verrons plus bas comment modifier cette cadence.






[b:1mykjqih]Etape 4 : Aller vers l'Est quand je veux, si je veux [/b:1mykjqih]

[quote:1mykjqih]_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

function onEnterFrame() 
{ 
[color=blue:1mykjqih]if(Key.isDown(Key.RIGHT))[/color:1mykjqih] canif._x += 1; 
}[/quote:1mykjqih]

Désormais, le canif ira vers l'Est uniquement lorsque la touche directionnelle droite est enfoncée. 

- Nous avons ajouté je que l'on appelle une condition : &quot;[color=blue:1mykjqih]if(truc) machin[/color:1mykjqih]&quot; signifie que &quot;machin&quot; sera exécuté si la condition &quot;truc&quot; est vraie. 
- [color=blue:1mykjqih]Key.isDown(Key.RIGHT)[/color:1mykjqih] est une condition &quot;vraie&quot; quand la touche directionnelle droite est pressés, et &quot;fausse&quot; quand elle ne l'est pas.

Remarques :

- Vous pouvez changer de touche en remplaçant &quot;Key.RIGHT&quot; par &quot;Key.UP&quot;, &quot;Key.LEFT&quot;, &quot;Key.DOWN&quot;...
- &quot;Key.TRUC&quot; est un raccourci qui ne fonctionne que pour certaines touches. Pour les autres, vous devrez utiliser leur numéro ASCII, que vous trouverez [url=http&#58;//www&#46;tcp-ip-info&#46;de/tcp_ip_und_internet/ascii&#46;gif:1mykjqih]&gt;ici&lt;[/url:1mykjqih]. Par exemple, pour utiliser la touche A, remplacez &quot;Key.RIGHT&quot; par &quot;65&quot;.






[b:1mykjqih]Etape 5 : Autres directions[/b:1mykjqih]

[quote:1mykjqih]_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x += 1; 
[color=blue:1mykjqih]if(Key.isDown(Key.LEFT)) canif._x -= 1; 
if(Key.isDown(Key.DOWN)) canif._y += 1; 
if(Key.isDown(Key.UP)) canif._y -= 1; [/color:1mykjqih]
}[/quote:1mykjqih]

Vous pouvez à  présent mouvoir votre canif dans les quatre directions. Nul besoin de commentaire, j'imagine ?






[b:1mykjqih]Etape 6 : Une vitesse pour Tous[/b:1mykjqih]

[quote:1mykjqih][color=blue:1mykjqih]v=3;[/color:1mykjqih] 

_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x [color=blue:1mykjqih]+= v[/color:1mykjqih]; 
if(Key.isDown(Key.LEFT)) canif._x [color=blue:1mykjqih]+= v[/color:1mykjqih]; 
if(Key.isDown(Key.DOWN)) canif._y [color=blue:1mykjqih]+= v[/color:1mykjqih]; 
if(Key.isDown(Key.UP)) canif._y [color=blue:1mykjqih]+= v[/color:1mykjqih]; 
}[/quote:1mykjqih]

On a déclaré une variable v, égale à  3. Il vous suffira de changer sa valeur pour changer la vitesse dans TOUTES les directions.

Attention, malheureux ! Si vous oubliez de déclarer &quot;v=3&quot; en début de programme, le logiciel plantera dès qu'il rencontrera &quot;+= v&quot; ([i:1mykjqih]Quel est donc ce &quot;v&quot; que je ne connais point ?[/i:1mykjqih]). D'où la nécessité de sauvegarder régulièrement (Ctrl + S).






[b:1mykjqih]Etape 7 : Quelques fleurs dans ce monde de brute [/b:1mykjqih]

[quote:1mykjqih]v=3; 

_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

[color=blue:1mykjqih]_root.attachMovie('rose','rose1',1); 
rose1._x = 200 ; 
rose1._y = 300 ; 

_root.attachMovie('rose','rose2',2); 
rose2._x = 400 ; 
rose2._y = 300 ;[/color:1mykjqih] 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x += v; 
if(Key.isDown(Key.LEFT)) canif._x -= v; 
if(Key.isDown(Key.DOWN)) canif._y += v; 
if(Key.isDown(Key.UP)) canif._y -= v; 
}[/quote:1mykjqih]

Nous avons donc fièrement affiché deux roses, &quot;rose1&quot; et &quot;rose2&quot; (cf. étape 1 &amp; 2).






[b:1mykjqih]Etape 8 : Rotation[/b:1mykjqih] 

[quote:1mykjqih]v=3; 

_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

_root.attachMovie('rose','rose1',1); 
rose1._x = 200 ; 
rose1._y = 300 ; 

_root.attachMovie('rose','rose2',2); 
rose2._x = 400 ; 
rose2._y = 300 ; 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x += v; 
if(Key.isDown(Key.LEFT)) canif._x -= v; 
if(Key.isDown(Key.DOWN)) canif._y += v; 
if(Key.isDown(Key.UP)) canif._y -= v; 

[color=blue:1mykjqih]rose2._rotation ++; [/color:1mykjqih]
}[/quote:1mykjqih]

Chose incroyable, rose2 se met à  tourner. 
En fait, chaque clip possède une coordonnée x (._x), une coordonnée y (._y) en un angle de rotation en degrés ([color=blue:1mykjqih]._rotation[/color:1mykjqih]). C'est donc cet angle que l'on augmente d'un degré (via le &quot;++&quot;) à  chaque itération. Bien entendu, vous pouvez remplacer &quot;++&quot; par &quot;+= 3&quot; ou &quot;-= 2&quot;, pour changer la vitesse et le sens de rotation.






[b:1mykjqih]Etape 9 : Collision[/b:1mykjqih] 

[quote:1mykjqih]v=3; 

_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

_root.attachMovie('rose','rose1',1); 
rose1._x = 200 ; 
rose1._y = 300 ; 

_root.attachMovie('rose','rose2',2); 
rose2._x = 400 ; 
rose2._y = 300 ; 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x += v; 
if(Key.isDown(Key.LEFT)) canif._x -= v; 
if(Key.isDown(Key.DOWN)) canif._y += v; 
if(Key.isDown(Key.UP)) canif._y -= v; 

[color=blue:1mykjqih]if(rose1.hitTest(canif._x,canif._y,true))[/color:1mykjqih] rose2._rotation ++;
 
}[/quote:1mykjqih]

Cette fois, rose2 tourne lorsque la pointe du canif touche rose1 (celle de gauche).

Nous avons introduit une nouvelle condition : &quot;hitTest&quot;. Elle détecte la collision entre une forme et un pixel. Ici, 
- &quot;[color=blue:1mykjqih]rose1[/color:1mykjqih]&quot; est la forme 
- &quot;[color=blue:1mykjqih]canif._x[/color:1mykjqih]&quot; et &quot;[color=blue:1mykjqih]canif._y[/color:1mykjqih]&quot; sont le coordonnées x et y du pixel (...c'est à  dire le pixel haut-gauche du canif, c'est à  dire de sa pointe) 

(Remarquez que, pour tester une condition, il suffit d'afficher une image bidon - ici, rose2 - et de la faire tourner si la condition est réalisée. Cela peut servir.)






[b:1mykjqih]Etape 10 : Téléportation[/b:1mykjqih] 

[quote:1mykjqih]v=3; 

_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

_root.attachMovie('rose','rose1',1); 
rose1._x = 200 ; 
rose1._y = 300 ; 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x += v; 
if(Key.isDown(Key.LEFT)) canif._x -= v; 
if(Key.isDown(Key.DOWN)) canif._y += v; 
if(Key.isDown(Key.UP)) canif._y -= v; 

if(rose1.hitTest(canif._x,canif._y,true)) 
[color=blue:1mykjqih]{ 
rose1._x = 100 + random(440); 
rose1._y = 100 + random(280); 
}[/color:1mykjqih] 

}[/quote:1mykjqih]

Cette fois, lorsque vous touchez la rose, cela ne fait plus tourner rose2 (que nous n'avons plus affichée) : cela téléporte rose1. 

La méthode est simple : 
- random(440) choisit un nombre entier au hasard entre 0 et 440 
- random(280) choisit un nombre entier au hasard entre 0 et 280 

Donc, lorsque l'on touchera la rose, ses nouvelles coordonnées seront prises au hasard : 
- Pour les x, entre 100 et 540 
- Pour les y, entre 100 et 380






[b:1mykjqih]Etape11 : Touche d'action[/b:1mykjqih] 

[quote:1mykjqih]v=3; 

_root.attachMovie('lame','canif',50); 
canif._x = 100 ; 
canif._y = 100 ; 

_root.attachMovie('rose','rose1',1); 
rose1._x = 200 ; 
rose1._y = 300 ; 

function onEnterFrame() 
{ 
if(Key.isDown(Key.RIGHT)) canif._x += v; 
if(Key.isDown(Key.LEFT)) canif._x -= v; 
if(Key.isDown(Key.DOWN)) canif._y += v; 
if(Key.isDown(Key.UP)) canif._y -= v; 

[color=blue:1mykjqih]rose1._rotation ++; [/color:1mykjqih]

if( rose1.hitTest(canif._x,canif._y,true) [color=blue:1mykjqih]&amp;&amp; Key.isDown(Key.SPACE)[/color:1mykjqih] ) 
{ 
rose1._x = 100 + random(440); 
rose1._y = 100 + random(280); 
} 

}[/quote:1mykjqih]

Cette fois, nous avons...
- Fait tourné la rose (parce que c'est... [i:1mykjqih]joli[/i:1mykjqih]) 
- Requis, en plus du contact, l'appuie sur la touche &quot;espace&quot; pour téléporter la rose 

Explications : 
- &quot;if(truc &amp;&amp; bidule) machin&quot; : &quot;machin&quot; est exécuté si &quot;truc&quot; [b:1mykjqih]et[/b:1mykjqih] &quot;bidule&quot; sont vérifiées. 
- &quot;if(truc || bidule) commande&quot; : &quot;machin&quot; est exécuté si &quot;truc&quot; [b:1mykjqih]ou[/b:1mykjqih] &quot;bidule&quot; (...ou les deux) sont vérifiées. 

Minute culturelle : &quot;&amp;&amp;&quot; et &quot;||&quot; sont respectivement le ET et le OU logique ; ce sont des opérateurs dits booléens (car ils opèrent sur des propositions pouvant être soit vraies, soit fausses).


C'est tout pour le moment, rompez. Nous verrons par la suite des options plus avancée (zoom, transparence, affichage de séries d'images, sauvegarde en ligne...), mais vous en savez à  présent assez pour faire pas mal de choses. Reste à  savoir comment importer des images personnalisées ; c'est l'objet de la partie suivante.