Deplacement avec le

clavier
Par Blue112
www.openclassrooms.com
Sommaire
2 Sommaire ...........................................................................................................................................
3 Deplacement avec le clavier ..............................................................................................................
3 Cration d'un fichier flash ..................................................................................................................................................
4 Cration d'un clip et d'une occurrence ..............................................................................................................................
4 Vous avez dj l'image ......................................................................................................................................................
4 Vous n'avez pas d'image ...................................................................................................................................................
5 Cration de clip .................................................................................................................................................................
5 Donner un nom d'occurrence notre personnage ...........................................................................................................
5 La puissance de l'ActionScript ..........................................................................................................................................
7 Partager .......................................................................................................................................................................................................................
2/8
www.openclassrooms.com
Deplacement avec le clavier
Par Blue112
Mise jour : 01/01/1970
Bienvenue !
Donc, dans ce tuto, on va apprendre faire bouger un clip l'aide des touches du clavier .
C'est quoi, un clip ?
Un clip, c'est une ensemble de textes, de graphiques, et de tout un tas de choses que Flash prend pour un objet.
Alors, on commence ?
Sommaire du tutoriel :
Cration d'un fichier flash
Cration d'un clip et d'une occurrence
Vous avez dj l'image
Vous n'avez pas d'image
Cration de clip
Donner un nom d'occurrence notre personnage
La puissance de l'ActionScript
Cration d'un fichier flash
Alors, tout d'abord, il vous faut Macromedia Flash. Il est disponible en licence 30 jours ici.
Inscrivez-vous, confirmez par mail votre inscription, tlchargez-le, installez-le, ouvrez-le.
Quand une fentre vous demandera :
Citation : Fenetre
Voulez-vous essayer Flash ou entrer une numro de srie ?
Vous mettrez "Essayer Flash pendant 30 jours".
Il est possible que les informations que je donne soient incorrectes, je ne fais que de l'approximatif, je ne me rappelle
pas exactement des mots .
Vous tombez sur une grande fentre, avec une plus petite l'intrieur.
Allez dans la rubrique Crer, puis cliquez sur le lien Document Flash.
Et, tadaaa ! Vous tes dans Flash !
En thorie, et suivant votre version, a devrait ressembler a (cliquez pour agrandir un peu) :
Sommaire 3/8
www.openclassrooms.com
Maintenant, un bonhomme .
Cration d'un clip et d'une occurrence
Occurrence ? C'est quoi, ce nom barbare ?
Il faut dj savoir que tous les clips que vous crerez seront stocks dans la bibliothque (pas celle de la ville, hein ). Celle
que Flash met notre disposition.
Pour une occurrence :
Citation : Aide de Flash
Une occurrence est une copie d'un symbole situ sur la scne ou imbriqu dans un autre symbole. Une occurrence peut avoir
une couleur, une taille et une fonction diffrentes de celles de son symbole. La manipulation d'un symbole met toutes ses
occurrences jour, mais l'application d'effets sur une occurrence de symbole ne met jour que cette occurrence.
Bon, allez, nous allons enfin introduire notre bonhomme .
Vous avez dj l'image
Si vous avez dj l'image, c'est trs simple :
Fichier => Importer => Importer dans la scne.
Une 'tite capture pour bien voir :
(Cliquez dessus pour agrandir)
Choisissez ensuite votre fichier...
Ouvrir...
Et voil, vous avez un beau bitmap .
Et, en plus, vous pouvez sauter la prochaine partie .
Vous n'avez pas d'image
Bon, si vous n'avez pas d'image reprsentant d'un personnage, il y a deux solutions :
vous en faites une (image) ;
vous faites un truc tout simple pour tester.
Crons un petit carr .
droite, vous avez l'outil Carr. Cliquez dessus, puis faites un cliquer-dplacer sur le carr blanc au milieu pour tracer notre petit
carr.
Hop ! un screen :
Deplacement avec le clavier 4/8
www.openclassrooms.com
(Comme d'habitude, on clique dessus pour agrandir)
Faites un carr plus petit que le mien, s'il vous plat.
Dans le panneau de gauche, section Couleurs, vous avez deux carrs de couleur :
le premier carr, signal par un petit crayon, correspond au contour du carr ;
le deuxime, signal par un pot de peinture, correspond au fond du carr.
Cliquez sur chacun d'eux pour modifier les valeurs, et slectionnez la couleur de votre choix.
Je dirais... noir pour le contour, et bleu pour le fond.
Voil, vous avez un carr. Maintenant, tracez un cadre de slection tout autour.
N'hsitez pas dpasser, il vaut mieux allez plus loin et slectionner tout .
Une fois le carr slectionn, il est normal qu'il soit bizarre, plus clair, et avec ses cts plus foncs.
Cration de clip
Facile, facile .
Une fois votre carr ou votre personnage slectionn, pressez F8.
Un petite fentre s'ouvre .
Donnez un nom votre carr, ce sera son nom de clip.
En dessous, slectionnez Clip !
Pour ce tutoriel, nous l'appellerons bonhomme, mais son nom n'a aucune influence .
Passons au dplacement.
Donner un nom d'occurrence notre personnage
Trs simple, partie courte .
Cliquez sur le personnage (le clip). En bas, dans le panneau Proprits, est crit
Citation : Flash
<nom d'occurrence>
Cliquez un coup dessus, il s'en va . Ensuite, tapez perso, qui sera son nom d'occurrence !
Ensuite, cliquez nouveau sur le blanc .
Partie termine .
Dj ?
Oui, mais la prochaine partie va tre plus corse, accrochez-vous .
La puissance de l'ActionScript
Deplacement avec le clavier 5/8
www.openclassrooms.com
En bas de votre fentre, vous avez un panneau Proprits, et une flche ct.
Cliquez sur la flche pour faire disparatre le panneau .
Ensuite, cliquez sur la flche prs de Actions.
Cela ouvre un truc tout blanc .
Cette fentre est spare en deux, des fonctions prconstruites pour les dbutants, et le champ texte blanc. On ne veut pas de
fonctions prconstruites, donc, on clique sur la flche de la barre de sparation.
Ensuite, nous allons maintenant faire du code, et plus prcisment de l'ActionScript pour faire bouger votre personnage .
Dans le blanc, tapez ou copiez-collez cette ligne :
Code : Actionscript
this.perso.onEnterFrame = function(){
C'est quoi, ce truc avec des point et des =)({ partout ?
C'est de l'ActionScript.
Allez, hop, petite explication
this le clip parent l'objet, c'est--dire l'image dans laquelle nous avons mis notre perso ;
perso est le nom de votre occurrence ;
onEnterFrame = function() dit Flash d'excuter ce qu'il y aura aprs chaque image, 12 fois par seconde pour
un fichier Flash classique ;
{ sert dire : " partir de l".
Ensuite, ceci :
Code : Actionscript
if (Key.isDown(Key.UP)){
this._y -= 5;
}
else if (Key.isDown(Key.DOWN)){
this._y += 5;
}
else if (Key.isDown(Key.LEFT)){
this._x -= 5;
}
else if (Key.isDown(Key.RIGHT)){
this._x += 5;
}
Argh, tu veux nous tuer balancer un norme bout de code comme a ?
Mais non. C'est juste que ce p'tit bout de code est li .
Alors hop, on explique.
if(...){ sert dire : "si (c'est a){ alors fait a }" ;
Key.isDown(...) si on appuie sur une touche ;
Key.UP la flche qui va en haut, ct du pav numrique ;
Key.DOWN la flche qui va en bas, encore ct du pav numrique ;
Deplacement avec le clavier 6/8
www.openclassrooms.com
Key.RIGHT la flche qui va droite, toujours ct du pav numrique ;
Key.LEFT la flche qui va gauche, devinez ct de quoi ?
this.perso._x += 5;
Selon l'avis d'un expert, this, ici, dsigne l'occurrence perso car le bloc de code est li l'vnement
onEnterFrame du clip perso (encore selon un expert ) ;
._x ou ._y sont les coordonnes de notre occurrence. Elle partent du point 0 0 en haut gauche ;
+= ou -= sert retirer ou ajouter un nombre. Ici, ._x.
<puce>5 dfinit le nombre de pixels qui se dplacera chaque dplacement.
Et, pour finir :
Code : Actionscript
stop(); // Sinon notre image va clignoter... et on fait un
bonhomme, pas un sapin de nol.
} // Sert dire : Jusque-l (rappelez-vous, plus haut on avait dit
: partir de l ^_^ ).
Note, le texte derrire // est un commentaire, vous pouvez le laisser ou l'enlever.
On lance l'animation grce Contrle => Tester l'animation ou le raccourci Ctrl + Entre.
On voit notre bonhomme, rien d'autre, touchez aux flches, il bouge . Gniiaal !
Et voil, vous avez appris les bases de Flash, de l'ActionScript, et tout et tout sans problme (enfin, je l'espre).
Allez, je vous laisse .
Blue112 - La 112
e
ombre bleue.
Toute faute => problme => incomprhension => demande d'ajout => par Message Priv .
Partager

Ce tutoriel a t corrig par les zCorrecteurs.
Deplacement avec le clavier 7/8
www.openclassrooms.com