Version en ligne

Tutoriel : Deplacement avec le clavier

Table des matières

Deplacement avec le clavier
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'ActionScript

Deplacement avec le clavier

Création d'un fichier flash

Bienvenue !

Donc, dans ce tuto, on va apprendre à faire bouger un clip à l'aide des touches du clavier :) .

C'est quoi, un clip ?

Alors, on commence ^^ ?

Création d'un fichier flash

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

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".

Vous tombez sur une grande fenêtre, avec une plus petite à l'intérieur.
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) :Image utilisateur

Maintenant, un bonhomme :) .


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

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

Création d'un fichier flash Vous avez déjà l'image

Occurrence ? C'est quoi, ce nom barbare ?

Il faut déjà savoir que tous les clips que vous créerez seront stockés dans la bibliothèque (pas celle de la ville, hein :p ). 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 :) .


Création d'un fichier flash Vous avez déjà l'image

Vous avez déjà l'image

Création d'un clip et d'une occurrence Vous n'avez pas d'image

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

Fichier => Importer => Importer dans la scène.

Une 'tite capture pour bien voir ^^ :
Image utilisateur
(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 :p .


Création d'un clip et d'une occurrence Vous n'avez pas d'image

Vous n'avez pas d'image

Vous avez déjà l'image Création de clip

Bon, si vous n'avez pas d'image représentant d'un personnage, il y a deux solutions :

Créons un petit carré :) .

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

Hop ! un screen :
Image utilisateur
(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 :

Cliquez sur chacun d'eux 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.

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


Vous avez déjà l'image Création de clip

Création de clip

Vous n'avez pas d'image Donner un nom d'occurrence à notre personnage

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électionnez Clip !
Pour ce tutoriel, nous l'appellerons bonhomme, mais son nom n'a aucune influence :) .

Passons au déplacement.


Vous n'avez pas d'image Donner un nom d'occurrence à notre personnage

Donner un nom d'occurrence à notre personnage

Création de clip La puissance de l'ActionScript

Très simple, partie courte :) .

Cliquez sur le personnage (le clip). En bas, dans le panneau Propriétés, 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 terminée :) .

Déjà o_O ?

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


Création de clip La puissance de l'ActionScript

La puissance de l'ActionScript

Donner un nom d'occurrence à notre personnage

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

Ensuite, cliquez sur la flèche près de Actions.
Cela ouvre un truc tout blanc :p .
Cette fenêtre est séparée en deux, des fonctions préconstruites pour les débutants, et le champ texte blanc. On ne veut pas de fonctions préconstruites, 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'ActionScript pour faire bouger votre personnage :) .

Dans le blanc, tapez ou copiez-collez cette ligne :

this.perso.onEnterFrame = function(){

C'est quoi, ce truc avec des point et des =)({ partout ?

C'est de l'ActionScript.
Allez, hop, petite explication :)

Ensuite, ceci :

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.

Et, pour finir :

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 : à partir de là ^_^ ).

On lance l'animation grâce à Contrôle => Tester l'animation ou le raccourci Ctrl + Entrée.

On voit notre bonhomme, rien d'autre, touchez aux flèches, il bouge :) . Géniiaal !

Et voilà, vous avez appris les bases de Flash, de l'ActionScript, et tout et tout sans problème :) (enfin, je l'espère).

Allez, je vous laisse :) .

Blue112 - La 112e ombre bleue.
Toute faute => problème => incompréhension => demande d'ajout => par Message Privé ;) .


Donner un nom d'occurrence à notre personnage