Ce tutoriel est conçu de telle façon que même un L en phase Terminale puisse le comprendre. Il est donc largement accessible à  tous.

Votre but sera de réaliser le sublime et poétique &quot;jeu&quot; que voici :
<!-- m --><a class="postlink" href="http://img215.imageshack.us/my.php?image=redrosekh7.swf">http://img215.imageshack.us/my.php?image=redrosekh7.swf</a><!-- m -->
Cliquez dans la boîte et déplacez le canif avec les touches directionnelles. Le but est de toucher toutes les roses en unminimum de temps. Passionant, n'est-il pas ?

Mine de rien, cela vous fera découvrir suffisamment de fonctionnalités pour réaliser vos premiers jeux. Tout le reste n'est qu'habileté et inventivité.

-------------------

[size=200:ycjt8cli][b:ycjt8cli]Installation du matériel[/b:ycjt8cli][/size:ycjt8cli]

Rendez-vous sur <!-- m --><a class="postlink" href="https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&amp;promoid=BPAKK&amp;loc=fr%5Ffr">https://www.adobe.com/cfusion/tdrc/inde ... oc=fr%5Ffr</a><!-- m -->

Connectez-vous avec les identifiants suivants (observez mon immense bonté, je vous mâche les formalités) :
[b:ycjt8cli]ID :[/b:ycjt8cli] <!-- e --><a href="mailto:borv@free.fr">borv@free.fr</a><!-- e -->
[b:ycjt8cli]mot de passe :[/b:ycjt8cli] azerty

Et téléchargez. C'est une version d'essai de 30 jours, mais vous êtes assez grand pour vous procurer le crack. Si ça se trouve, il suffit juste de la retélécharger sous un autre compte.

L'installation terminée, téléchargez le pack du jeu : <!-- m --><a class="postlink" href="http://vertdebleu.free.fr/roses.rar">http://vertdebleu.free.fr/roses.rar</a><!-- m -->
Il contient...
- Les deux images constitutives du jeu
- Un projet flash vierge (clean.fla)
- Un projet flash avec les images importées (complete.fla)

Copiez &quot;clean.fla&quot;, et renommez la copie &quot;roses.fla&quot; (je le Veux). Pouquoi ne pas créer directement un projet vierge ? Parce que créer un jeu implique de régler certains paramètres dont je n'ai même pas idée. Partez donc de ce fichier vierge, c'est du sûr.


[size=200:ycjt8cli][b:ycjt8cli]Importation des images[/b:ycjt8cli][/size:ycjt8cli]

La partie la plus rébarbative, mais hélas nécessaire. Vous pouvez la zapper en ouvrant directement &quot;complete.fla&quot;, mais vous n'irez pas bien loin si vous ne savez pas importer vos propres images.

Bien. Ouvrez &quot;roses.fla&quot; avec &quot;Adobe Flash CS3 Professional&quot;. Une foultitude de fenêtres s'affichent. Interressons-nous à  celle en bas à  droite, nommée &quot;Bibliothèque&quot; : c'est là  que vous importerez vos images.

Pour ce faire, deux méthodes :
- Faîtes glisser &quot;image_lame.png&quot; et &quot;image_rose.bmp&quot; dans la fenêtre Bibliothèque à  partir de l'explorateur Windows.
- Fichier &gt; Importer &gt; Importer dans la Bibliothèque...

Une fois vos deux images importées, il faut les convertir en &quot;clip&quot;, pour que l'on puisse les faire bouger, tourner, détecter des collision... Voici comment procéder.

Faîtes tout d'abord glisser &quot;image_lame&quot; dans la zone de travail centrale. Clic droit sur la nouvelle image, &quot;Convertir en symbole...&quot;. Nom : &quot;lame&quot;, Identifiant : &quot;lame&quot; (et cochez &quot;clip&quot; si ce n'est déjà  fait). Cliquez sur &quot;Avancé&quot; et cochez &quot;Exporter pour ActionScript&quot;. Un clip nommé &quot;lame&quot; est normalement apparu dans la Bibliothèque.

Pour la rose, c'est plus délicat : il faut supprimer le fond noir de l'image. Pourquoi ne pas le faire préalablement avec un autre logiciel, me direz-vous ? Parce que si vous ne le (re)faîtes pas avec Flash, fond invisible ou pas, on ne pourra détecter des collision qu'avec le [u:ycjt8cli]cadre[/u:ycjt8cli] de la rose, et non avec la rose elle-même. Cette étape est donc fondamentale, à  moins de se satisfaire d'un jeu à  base de carrés et de rectangles (pour la lame, peu importe, car seul son pixel haut-gauche nous intéresse).

Faîtes glisser &quot;image_rose&quot; dans la zone de travail. Faîtes Ctrl + B. Dans la boîte à  outil (gauche de l'écran), cliquez sur l'outil &quot;lasso&quot;. Cela fait apparaître deux &quot;baguettes magiques&quot; en bas de la boîte à  outil. Cliquez sur celle de droite. Réglez &quot;Seuil&quot; à  150, et mettez &quot;Pixels&quot; pour &quot;Lissage&quot;. Validez, puis cliquez dans la zone noire de la rose. Une baguette apparaît. Cliquez à  nouveau : seule la zone noire est sélectionnée. Faîtes Ctrl + X pour la supprimer. Il ne vous reste plus qu'à  convertir la rose restante en clip, comme précédemment (Nom : &quot;rose&quot;, Identifiant : &quot;rose&quot;, et n'oubliez pas de cocher &quot;Exporter pour ActionScript&quot;).

A présent que vos deux clips sont dans la bibliothèque, supprimez allégrement les deux clips de la zone de travail, la laissant parfaitement blanche et immaculée.

Avant d'aller plus loin, règlons le centre de rotation de la rose. En effet, par défaut, une image tournera autour de son pixel haut-gauche, ce qui est disgrâcieux (ce pixel sert également de coordonnées pour l'image). Double-cliquez sur l'icône du clip &quot;rose&quot;, et déplacez la rose jusqu'à  ce que la croix soit en son centre. Retournez à  la zone de travail en cliquant sur &quot;Scène 1&quot;.

Avant de passer aux choses intéressantes, intéressons-nous aux propriétés du document. Cliquez dans la zone de travail : des paramètres s'affichent dans l'onglet &quot;propriété&quot;, en bas de l'écran (si vous l'avez fermé par mégarde, Fenêtre &gt; Propriétés &gt; Propriétés ; cela vaut également pour les autres onglets). D'une part, la taille de la fenêtre : laissez-là  à  640 x 480, si vous voulez héberger votre jeu sur imageshack. D'autre part, la cadence, en ips (itérations par secondes). Si la cadence vaut 120 ips, par exemple, chaque seconde sera découpée en 120 itérations (ou frames), qui serviront d'unité de temps au jeu. Plus la cadence est élevée, plus le jeu est fluide, cela va de soi. Enfin, si vous faîtes clic droit &gt; Propriétés dans la zone de travail, vous pouvez également en changer la couleur (mettez du rouge sang, pour l'occasion).

Bien. Sauvegardez votre projet (Ctrl + S), et entrons dans le vif du sujet. Si vous avez rencontré des problèmes, vous pouvez toujours ouvrir &quot;complete.fla&quot; à  la place - mais du moins, signalez lesdits problèmes sur le présent topic.


Dans l'onglet en haut de l'écran, il y une sorte de réglette avec des graduations de 5 en 5. Juste en-dessous du 1, se trouve un minuscule rectangle, avec un non moins minuscule rond à  l'intérieur. Faîtes un clic droit dans ce micro-rectangle, puis &quot;Actions&quot; (la dernière option de la liste). S'affiche la fenêtre dont, à  dater de cet instant, vous ne bougerez plus. Tout ce que vous ferez par la suite se limitera à 

- Taper des lignes de code, à  la rude, comme nos ancêtres les Gaulois
- Tester votre jeu (Ctrl + ENTER)

N'oubliez pas de sauvegarder régulièrement (Ctrl + S), une fatal error est si vite provoquée. Si vous êtes vraiment parano (comme moi), copiez-collez régulièrement votre code dans un document Wordpad.

A partir de maintenant, votre seul effort sera de copier-coller des blocs de codes dans la fenêtre Actions, d'en comprendre le fonctionnement, et de tester votre jeu. Epuisant, n'est-ce pas ? A chaque étapes, les lignes de code ajoutées seront signalées en vert.



Niveau 1 : la rose fugitive

Nous allons tout d'abord créer une version épurée du jeu :
----------------------------------------

Etape 1 : Afficher un clip

Copiez-collez ceci dans votre fenêtre, et faîtes Ctrl + ENTER (idem pour le étapes suivantes) :

****
_root.attachMovie('lame','canif',50);
****

Sauf erreur, un magnifique canif s'affiche en haut à  gauche de l'écran. Si tel n'est pas le cas, dans la bibliothèque, clic droit sur &quot;lame&quot;, et vérifiez que 1) la case &quot;exporter pour ActionScript&quot; est bien cochée 2) l'Identifiant au-dessus est bien &quot;lame&quot; (ne rien écrire dans &quot;Classe&quot;).

Explication du miracle :
- &quot;lame&quot; est l'identifiant du clip dans la bibliothèque.
- &quot;canif&quot; sera le nom du clip qui s'affichera (mais on aurait très bien pu reprendre &quot;lame&quot;). L'intérêt étant que l'on peut en afficher plusieurs, de noms différents.
- &quot;50&quot; est la profondeur du clip. Pour exemple, le clip de profondeur 50 s'affichera DEVANT les clips de profondeur 49, 48, 47... Vous n'avez droit qu'à  une seule profondeur par clip : si vous affichez un nouveau clip de profondeur 50, il écrasera l'ancien.


Etape 2 : Modifier la position d'un clip

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

Comme vous vous en doutez...
- &quot;canif._x&quot; est la coordonnée x (abscisse) du pixel haut-gauche du canif
- &quot;canif._y&quot; est la coordonnée y (ordonnée) du pixel haut-gauche du canif

Notez que les y sont comptés à  partir du haut, et non du bas de l'écran.

L'opérateur &quot;=&quot; permet de leur affecter la valeur 100. Voilà , voilà . Testez votre jeu pour constater. (Notez que l'on peut laisser des espaces dans son code, pour faire joli, tant qu'ils ne coupent pas des mots.)



Etape 3 : Aller vers l'Est

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

function onEnterFrame()
{
	canif._x += 1;
}
****

Vous constatez avec émoi que le canif se barre vers la droite.

Explications :
- Ce qui se trouve entre les accolades de &quot;function onEnterFrame() { ... }&quot; est exécuté à  *chaque* frame, c'est à  dire 120 fois par seconde (cf. plus haut)
- &quot;canif._x += 1&quot; augmente l'abscisse du canif de 1

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

Pour changer sa vitesse, remplacez 1 par 2, 3, 0.5, -1...
Raccourci utile : vous pouvez remplacer &quot;+= 1&quot; par &quot;++&quot; (incrémenter), &quot;-= 1&quot; par &quot;--&quot; (décrémentez). Souvenez-vous en.


Etape 4 : Aller vers l'Est quand je veux, si je veux

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

function onEnterFrame()
{
	if(Key.isDown(Key.RIGHT)) canif._x += 1;
}
****

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;if(condition) commande&quot; signifie que &quot;commande&quot; sera exécutée si &quot;condition&quot; est vérifiée.


Etape 5 : Autres directions

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

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

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


Etape 6 :

****
v=3;

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

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;
}
****

Comme nous l'avons vu, il suffit de remplacer 1 par un autre chiffre pour modifier la vitesse. Soit, mais s'il faut le faire quatre fois à  chaque fois, c'est ennuyeux. On déclare donc une variable v que l'on rend égale à  3, qui correspondra désormais à  la vitesse. Il n'y aura ainsi plus qu'à  remplacer 3 par un autre nombre pour modifier la vitesse dans TOUTES les directions.



Etape 7 : Quelques fleurs dans ce monde de brute

****
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;
}
****

Nous avons donc fièrement affiché deux roses, &quot;rose1&quot; et &quot;rose2&quot;.



Etape 8 : Rotation

****
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;

	rose2._rotation ++;
}
****

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



Etape 9 : Collision

****
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;

	if(rose1.hitTest(canif._x,canif._y,true)) rose2._rotation ++;
}
****

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;rose1&quot; est la forme
- &quot;canif._x&quot; et &quot;canif._y&quot; sont le coordonnées x et y du pixel (c'est à  dire le pixel haut-gauche du canif, c'est à  dire sa pointe)

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



Etape10 : Téléportation

****
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))
	{
		rose1._x = 100 + random(440);
		rose1._y = 100 + random(280);
	}

}
****

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

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

Donc, lorsque l'on touchera la rose, ses nouvelles coordonnées seront choisies :
- en x, entre 100 et 540
- en y, entre 100 et 380


Etape11 : Touche d'action

****
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;

	rose1._rotation ++;

	if( rose1.hitTest(canif._x,canif._y,true)  &amp;&amp;  Key.isDown(Key.SPACE) )
	{
		rose1._x = 100 + random(440);
		rose1._y = 100 + random(280);
	}

}
****

Cette fois, nous avons
- fait tourné la rose (parce que c'est Joli)
- requis, en plus du contact, l'appuie sur la touche &quot;espace&quot; pour téléporter la rose

Explications :
- &quot;if(cond1 &amp;&amp; cond2) commande&quot; --&gt; &quot;commande&quot; est réalisée si cond1 ET cond2 sont vérifiées.
- &quot;if(cond1 || cond2) commande&quot; --&gt; &quot;commande&quot; est réalisée si cond1 OU cond2 (ou les deux) sont vérifiées.

&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).




Etape 12 : Une question de notation

***
v=3;

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

_root.attachMovie('rose',&quot;rose&quot;+1,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;

	rose1._rotation ++;

	if( rose1.hitTest(canif._x,canif._y,true)  &amp;&amp;  Key.isDown(Key.SPACE) )
	{
		rose1._x = 100 + random(440);
		rose1._y = 100 + random(280);
	}

}
***

Vous constatez que le programme... marche toujours. Ainsi,