Tutorial - Comment créer un jeu flash (programmation action script flash, fichiers source .fla inclus)
Grâce à ce tutorial, vous allez
créer un jeu flash, en partant de 0. Les
fichiers sources flash (.fla) sont disponibles pour chaque étape du tutorial.
Le jeu que vous allez créer est un jeu simple qui vous permettra de comprendre comment
organiser ses calques, gérer les
appuis clavier (touches fléchées),
animer les différents MovieClip et gérer un système de score.
Je vais expliquer dans ce tutorial
comment faire un jeu flash en ActionScript, clône de Dance Dance Revolution.
Attention, tutorial en deux parties.
Le jeu en flash en flash que vous allez créer grâce au tutorial
Ce dont vous avez besoin pour créer un jeu en flash
Le logiciel Adobe Flash 8
Pour
créer un jeu flash , vous devez utiliser le logiciel Flash 8. Flash 8 est payant mais Adobe propose une
version d'évaluation (comprenant toutes les fonctionalités du logiciel complet) pendant 30 jours. Pour cela vous devez simplement vous enregistrer sur le site d'Adobe.
Télecharger la version d'évalution de Adobe Flash 8 en Français
Les fichiers .fla et .swf
Un fichier FLA est un fichier qui peut être ouvert par le logiciel Flash. C'est le
fichier source principal, celui qui sert à créer les fichier .swf.
Un fichier SWF est le fichier que vous obtenez quand vous compilez un fichier FLA. Les fichiers SWF sont ceux que vous pouver
intégrer dans une page web.
Tutorial - Inclure un SWF Flash dans une page Web
Créer un nouveau fichier Flash (.fla)
Tout d'abord, créez un nouveau document Flash (Fichier > Nouveau ... > Document Flash). Par défaut, la taille de la scène est de 550x400 pixels et la cadence d'image de 12 images/seconde.
Pour cet exemple, on va utiliser une scène de taille 300x350 pixels et une
cadence de 30 images/seconde pour une impression de fluidité.
Pour modifier ces paramètres, ouvrez le panneau Propriétés qui apparaitra en bas(Fenêtre > Propriétés ... > Propriétés).
Importer des images dans Flash
Dans votre jeu, vous allez afficher des
élements graphiques. Vous pouvez créer ces images grâce au logiciel Flash qui dispose d'outils de dessin vectoriel ou à l'aide d'un autre logiciel comme
Adobe Illustrator. Pour
importer des images dans la bibliothèque de votre fichier Flash, cliquez sur Fichier > Importer > Importer dans la bibliothèque ...
Choisissez une ou plusieurs images qui seront immédiatement copiées dans la bibliothèque de votre fichier Flash. Pour ouvrir cette bibliothèque, cliquez sur Fenêtre > Bibliothèque. La bibliothèque contiendra tous les éléments de votre scène. Pour sortir un élément de la bibliothèque, il suffit de faire un glisser-déposer sur la scène.
En faisant cela, vous ne sortez pas l'élement de la bibliothèque (il est toujours présent) mais vous créer
seulement une occurence (c'est-à-dire un exemplaire similaire) de votre MC sur la scène.
Vous pouvez créer autant d'occurences d'un MC que vous le souhaitez. Pour pouvoir identifier chaque occurence, Flash utilise des
noms d'occurence (voir plus loin).
Ici, on va importer l'image de la flèche et celle du fond.
Dès que vous importez une image,
vérifiez ses paramètres de compression. Pour cela, faîtes clic droit > propriétés sur votre image dans la bibliothèque. Dans le menu déroulant 'Compression', choisissez "Sans perte (PNG/GIF)".
Il est fortement conseillé de ne pas utiliser ces images directement sur la scène, il faut les convertir en symbole (MovieClip), sinon Flash va créer des images temporaires dans la bibliothèque nommées Interpolation XX. Pour éviter cela, glissez-déposez l'image sur la scène puis choisissez Modifier > Convertir en symbole (F8).
Choisissez "Clip" et donnez lui un nom tel que "mc_fleche" ou "mc_fond" pour bien les reconnaître. Vous pouvez ensuite supprimer le MovieClip de la scène, il apparaît maintenant dans votre bibliothèque.
C'est ce MC et non plus l'image que vous allez utiliser et manipuler.
Placer des images dans Flash
Une fois que vous avez crée vos MovieClip, créez un calque que vous allez appeler "background". Placez votre mc_fond avec les coordonnées X et Y à 0 (dans le panneau propriétés).
Verrouillez le calque pour éviter de selectionner le fond par erreur. Créez un nouveau calque et nommez le "fleches". Placez le mc_fleche sur la scène mais à l'exterieur de la zone de travail de 300x350.
La flèche sera positionnée par le
code ActionScript.
Télécharger le fichier source flash de l'étape 1
La gestion du scénario d'un jeu en Flash
Un jeu en flash ne se construit pas comme une animation; en effet tout ne peut pas être programmé à l'avance. Sur la ligne des temps principale, tout va se dérouler
sur une seule et même image qui va être jouée
en boucle par le lecteur Flash. Pour cela on va utiliser la fonction onEnterFrame de Flash.
Cette fonction permet d'executer une portion de code dès que Flash dessine une image, c'est-à-dire 30 fois / seconde. Pour initialiser des variables, on met simplement les initialisations en dehors de ce bloc onEnterFrame.
Flash va lire ces lignes de code une seule fois et initialiser les variables.
La gestion de l'appui sur les touches fléchées
Créez un calque que vous allez appeler "ActionScript" qui va contenir l'ensemble du code pour faire fonctionner le jeu.
Sur la première image, entrez ce code ActionScript :
_root.onEnterFrame = function (){
if (Key.isDown(Key.UP)){
trace("appui touche UP");
}
if (Key.isDown(Key.DOWN)){
trace("appui touche DOWN");
}
if (Key.isDown(Key.LEFT)){
trace("appui touche LEFT");
}
if (Key.isDown(Key.RIGHT)){
trace("appui touche RIGHT");
}
}
Ce code va intercepter les appuis sur les touches fléchées du clavier. Pour le moment, un seul appui déclenche plusieurs trace(); car le code s'effectue 30 fois par secondes.
Pour détecter uniquement la bascule d'une touche clavier, on va créer une variable 'relache' pour chaque touche qui
va agir comme un décompteur.
Sur la première image du scénario, on a donc le code action script :
relache_haut = 0;
relache_bas = 0;
relache_gauche = 0;
relache_droite = 0;
decompteur_max = 9;
onEnterFrame = function (){
// si le décompteur à été activé, on décrémente le compteur jusqu'à arriver à 0
if (relache_haut > 0) relache_haut -= 1;
// intercepter l'appui sur la touche fléchée seulement si le décompteur est arrivé à 0
if (Key.isDown(Key.UP) && relache_haut == 0){
relache_haut = decompteur_max;
trace("appui touche UP");
}
if (relache_bas > 0) relache_bas -= 1;
if (Key.isDown(Key.DOWN) && relache_bas == 0){
relache_bas = decompteur_max;
trace("appui touche DOWN");
}
if (relache_gauche > 0) relache_gauche -= 1;
if (Key.isDown(Key.LEFT) && relache_gauche == 0){
relache_gauche = decompteur_max;
trace("appui touche LEFT");
}
if (relache_droite > 0) relache_droite -= 1;
if (Key.isDown(Key.RIGHT) && relache_droite == 0){
relache_droite = decompteur_max;
trace("appui touche RIGHT");
}
}
Télécharger le fichier source flash de l'étape 2
Placement des movieclips en action script flash (propriétés _x et _y)
On va maintenant coder le déplacement des flèches vers le bas en actionscript. Pour faciliter les choses, déplacez sur votre scène, 4 occurences de "mc_fleche".
Tournez chacune des flèches pour que vous ayez une flèche orientée vers le haut, une vers la gauche, vers la droite et vers le bas grâce à l'outil "Transformation Libre". Dans le panneau Propriétés, donnez leur un nom d'occurence correspondant (fleche_gauche, fleche_droite, fleche_bas, fleche_haut).
Pour placer les flèches fixes, on va jouer sur les propriétés actions script _x et _y des movie clips flash. On va donc toutes les placer verticalement (_y) à 290 pixels du haut et les décaler horizontalement (_x) vers la droite avec le même espacement.
Toujours dans la première image, copiez-collez le code AS suivant (à l'extérieur du bloc onEnterFrame :
fleche_gauche._y = fleche_bas._y = fleche_haut._y = fleche_droite._y = 290;
fleche_gauche._x = 60;
fleche_bas._x = 120;
fleche_haut._x = 180;
fleche_droite._x = 240;
Les flèches vont apparaître complètement décalées car le point de rotation de movie clip "mc_fleche" est placé sur le coin haut gauche de l'image. La rotation s'est donc faîte
par rapport à ce point et les coordonnées sont donc modifiées.
Pour
modifier ce point de rotation, on va simplement placer l'origine du movie clip aligné avec le centre de la flèche. Il faut donc passer en mode édition du MC "mc_fleche" et déplacer la flèche vers le centre du MC (la petite croix).
Si vous faîtes une prévisualisation de votre animation flash (ctrl+entrée), vos flèches devraient être placées correctement. Si ce n'est pas le cas, vérifiez que vous avez bien orthographié les noms d'occurence sur la scène et dans le code.
Télécharger le fichier source flash de l'étape 3
Création des movie clip contenant les flèches descendantes
Tout d'abord, créez un nouveau MC contenant la flèche qui va descendre et nommez le "Fleche_move". Vous pouvez la créer simplement avec les
outils de dessin vectoriel de flash (en "enfermant" la forme finale à l'intérieur d'un movieclip ou importer un nouveau fichier image dans la bibliothèque comme vous l'avez fait précédemment pour les flèches fixes. Afin de ne pas les confondre, ces flèches seront vertes (ou choisissez la couleur de votre choix).
De la même façon que vous avez centré les premières flèches par rapport au centre de rotation, centrez les flèches vertes sinon vous serez confrontés au même problème. Créez ensuite 4 occurences de votre movieclip "Fleche_move".
Comme pour les flèches précédentes, tournez chaque flèche et nommez les par le nom d'occurence correspondant (fleche_gauche_move, fleche_droite_move, ...).
Suite du tutorial sur la création de jeu flash en actionscript :
>>
Tutorial - Créer un jeu flash, Action script et animation, 2ème partie
