[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Programmation > ActionScript / Flash / Flex > Deplacement avec le clavier > Lecture du tutoriel

Deplacement avec le clavier

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

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 :

Création d'un fichier flash
Création d'un clip et d'une occurrence.
Vous avez déjà l'image
Vous n'avez pas d'image
Création de clip
Donner un nom d'occurrence à notre personnage
La puissance de l'action script

Création 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, téléchargez le, installez le, ouvrez le.

Quand une fenêtre vous demandera :
Citation : Fenetre

Voulez vous essayer flash ou entrer une numéro de série ?

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 rapelle pas exactement des mots

Vous tombez sur une grande fenêtre, avec une plus petite à l'interieur.
Allez dans la rubrique Créer, puis, cliquez sur le lien Document Flash.

Et, tadaaa ! Vous êtes dans Flash :magicien:

!
En théorie, et suivant votre version, ça devrait ressembler à ça (cliquez pour agrandir un peu) :

Maintenant, un bonhomme

Création d'un clip et d'une occurrence.

Occurrence ? C'est quoi ce nom barbare ?

Il faut déjà savoir, que tout les Clip que vous créerez seront stockés dans la bibliothèque( 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 scène ou imbriqué dans un autre symbole. Une occurrence peut avoir une couleur, une taille et une fonction différentes 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 déjà l'image

Si vous avez déjà l'image, c'est très simple :

Fichier => Importer => Importer dans la scene.

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 représentant d'un personnage, il y a deux solutions :

Vous en faite une (image).
Vous faite un truc tout simple pour tester.

Créons un petit carré

.

A droite, vous avez l'outil Carré. Cliquez dessus, puis faites un cliqué-déplacé sur le carré blanc au milieu pour tracer notre petit carré.

Hop, un screen :

(Comme d'habitude, on clique dessus pour agrandir)
Faites un carré plus petit que le mien, s'il vous plaît.

Dans le panneau de gauche, section "Couleurs", vous avez deux carrés de couleur :

Le premier carré, signalé par un petit crayon, correspond au contour du carré.
Le deuxième, signalé par un pot de peinture, correspond au fond du carré.

Cliquez sur chacun pour modifier les valeurs, et sélectionnez 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 sélection tout autour.

N'hésitez pas à dépasser, il vaut mieux allez plus loin et sélectionner tout

Une fois le carré sélectionné, il est normal qu'il soit bizarre, plus clair, et avec ses cotés plus foncé.

Création de clip

Facile, facile

.

Une fois votre carré ou votre personnage sélectionné, pressez F8.
Un petite fenêtre s'ouvre

.

Donnez un nom à votre carré, ce sera son nom de Clip.
En dessous, séléctionnez Clip !
Pour ce tutoriel, nous l'appellerons bonhomme, mais son nom n'a aucune influence

.

Passons au déplacement.

Donner un nom d'occurrence à notre personnage

Très simple, partie courte

.

Cliquez sur le personnage (le Clip). En bas, dans le panneau propriétés, est écrit
Citation : Flash

Cliquez un coup dessus, il s'en va

. Ensuite, tapez perso, qui sera son nom d'occurence !

Ensuite, recliquez sur le blanc

.

Partie terminée

Déjà

Oui, mais la prochaine partie va être plus corsée, accrochez vous

La puissance de l'action script

En bas de votre fenêtre, vous avez un panneau Propriétés, et une flèche à coté.
Cliquez sur la flèche pour faire disparaître le panneau

.

Ensuite, cliquez sur la flèche près de Actions.
Celà ouvre un truc tout blanc

.
Cette fenêtre est séparée en deux, des fonctions préconstruite pour les débutants, et le champ texte blanc. On ne veut pas de fonctions préconstruite, donc, on clique sur la flèche de la barre de séparation.

Ensuite, nous allons maintenant faire du code, et plus précisément de l'action script pour faire bouger votre personnage

.

Dans le blanc, tapez ou copiez collez cette ligne :

Code : Actionscript

1	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'exécuter ce qu'il y aura après à 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 flèche qui va en haut, à coté de pavé numérique ,
Key.DOWN la flèche qui va en bas, encore à coté de pavé numérique ,
Key.RIGHT la flèche qui va à droite, toujours à coté de pavé numérique ,
Key.LEFT la flèche qui va à gauche, devinez à coté de quoi ?

this.perso._x += 5;

Selon l'avis d'un expert, this, ici, désigne l'occurrence perso car le bloc de code est lié à l'événement onEnterFrame du clip "perso" (encore selon un expert ).
._x ou ._y sont les coordonnées de notre occurrence Elle partent du point 0 0 en haut à gauche.
+= ou -= sert à retirer ou à ajouter à un nombre. Ici, à ._x.

5 défini le nombre de pixel qui se déplacera à chaque déplacement.

Et, pour finir :
Code : Actionscript

1 2	stop(); // Sinon notre image va clignoter... et on fait un bonhomme, pas un sapin de noël. } // Sert à dire : Jusque là (rappelez vous, plus haut on avait dit : A partir de là ^_^ ).

Note, le texte derrière // est un commentaire, vous pouvez le laisser ou l'enlever.

On lance l'animation grace à Controle => Tester l'animation ou le raccourcis Ctrl + Entrée.

On voit notre bonhomme, rien d'autre, touchez aux fleches, il bouge

. Géniiaal !

Et voilà, vous avez appris les bases de flash, de l'ActionScript, et tout et tout sans probleme

(enfin, je l'espère).

Allez, je vous laisse

.

Blue112 - La 112eme ombre bleue.
Toute faute => problème => incompréhension => demande d'ajout => Par Message Privé

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité