Accueiltuto flash : faire bouger un perso animé
3 participants
:: Proffesseur Virtuel :: Tuto
Page 1 sur 1
tuto flash : faire bouger un perso animé
Monster_Kid 23.12.07 1:15
Ceci est mon premier jet, j’attends vos réactions pour vérifier que mon tuto est bien clair et qu'il marche. J’aimerais aussi pouvoir mettre un petit swf fonctionnant dans mon poste (si c'est possible) et mettre le fichier libre de téléchargement.
Voici un petit tuto qui servira peut être pour ceux qui vont (et devront ^^) faire un jeu vidéo en flash.
Il s'agit de déplacer un personnage de gauche à droite qui est en plus animé.
Tout d'abord créer un clip (ctrl + F 8 et nommer le : animation_perso
Puis dans ce clip, faites l'animation de votre personnage allant vers la droite (attention, dans votre clip il doit se déplacer sur place)
Lorsque vous avez finis l'animation de son déplacement créer un nouveaux clip et nommer le : perso
Créer sur ce calque trois images clef.
Placer dans la première l'image de votre personnage au repos (lorsqu'il est inactif)
Dans l'image clef suivante placez le clip animation_perso
Et pour finir à la troisième image clef placez le même clip (et au même endroit) sauf que cette fois vous le renversé horizontalement (onglet modification / transformer / renverser horizontalement)
Créer un nouveau calque que vous appelez codes, placez y 3 images clef vide et à la première frame (image) notez y le code (F9 pour ouvrir la fenêtre action)
stop();
Ainsi il est à l'état repos.
Il nous servira plus tard pour animer le perso quand il va vers la gauche.
Maintenant placez le clip perso sur la scène. Et donnez lui le nom d'occurrence (dans la fenêtre des propriétés) : perso_mc
Créer un nouveau calque et appelez le code
Nous allons y placer le code qui servira au déplacement du personnage.
Sur ce calque code nous allons d'abord créer la variable qui définira le déplacement. Notez :
var deplace = 5;
var veut dire que l'on déclare une variable, déplace est le nom de cette variable (qui aurait très bien put être chaussure...) le chiffre 5 influera sur le déplacement, on peut augmenter ce chiffre pour faire déplacer ce perso plus rapidement.
Maintenant le déplacement:
perso_mc.onEnterFrame = function(){}
En français celà veut dire notre clip perso_mc sera utiliser dans une fonction.
Le .onEnterFrame signifie que la fonction sera utilisée lorsque perso_mc entrera sur la scène.
Les () j'en sais rien (^^) et entre {} on notera les actions qui concerne ce clip.
Alors tout d'abord le mouvement vers la droite :
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc._x = perso_mc._x + deplace;
}
}
Pour permettre le mouvement j'utilise la condition if (Key.isDown(Key.RIGHT)){} qui veut dire que si (la touche abaissée est (la touche droite)) {action}
puis entre accolade on note son action perso_mc._x = perso_mc._x + deplace; qui prendra la position x de notre perso et le modifiera en lui rajoutant la variable deplace
On peut maintenant rajouter la direction gauche en utilisant un else if (sinon aussi)
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc._x = perso_mc._x + deplace;
} else if (Key.isDown(Key.LEFT)){
perso_mc._x = perso_mc._x - deplace;
}
}
La même chose avec la touche gauche sauf que cette fois on soustrait la variable deplace
Il ne reste plus qu'à associer les bonnes animations de déplacement en gérant les clips avec.
Nous utilisons la fonction gotoAndStop qui nous permet un contrôle sur les clips :
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc.gotoAndStop(2);
perso_mc._x = perso_mc._x + deplace;
} else if (Key.isDown(Key.LEFT)){
perso_mc.gotoAndStop(3);
perso_mc._x = perso_mc._x - deplace;
}
}
Lorsque l'on appuis sur la touche droite flash stop le clip perso_mc à partir à la frame 2, sur laquelle il y a le clip animation_perso vers la droite. Idem pour gauche.
Maintenant pour que le perso aie une position neutre lorsque qu'il ne bouge pas on utilise un else (sinon)
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc.gotoAndStop(2);
perso_mc._x = perso_mc._x + deplace;
} else if (Key.isDown(Key.LEFT)){
perso_mc.gotoAndStop(3);
perso_mc._x = perso_mc._x - deplace;
} else {
perso_mc.gotoAndStop(1);
}
}
Voici un petit tuto qui servira peut être pour ceux qui vont (et devront ^^) faire un jeu vidéo en flash.
Il s'agit de déplacer un personnage de gauche à droite qui est en plus animé.
Tout d'abord créer un clip (ctrl + F 8 et nommer le : animation_perso
Puis dans ce clip, faites l'animation de votre personnage allant vers la droite (attention, dans votre clip il doit se déplacer sur place)
Lorsque vous avez finis l'animation de son déplacement créer un nouveaux clip et nommer le : perso
Créer sur ce calque trois images clef.
Placer dans la première l'image de votre personnage au repos (lorsqu'il est inactif)
Dans l'image clef suivante placez le clip animation_perso
Et pour finir à la troisième image clef placez le même clip (et au même endroit) sauf que cette fois vous le renversé horizontalement (onglet modification / transformer / renverser horizontalement)
Créer un nouveau calque que vous appelez codes, placez y 3 images clef vide et à la première frame (image) notez y le code (F9 pour ouvrir la fenêtre action)
stop();
Ainsi il est à l'état repos.
Il nous servira plus tard pour animer le perso quand il va vers la gauche.
Maintenant placez le clip perso sur la scène. Et donnez lui le nom d'occurrence (dans la fenêtre des propriétés) : perso_mc
Créer un nouveau calque et appelez le code
Nous allons y placer le code qui servira au déplacement du personnage.
Sur ce calque code nous allons d'abord créer la variable qui définira le déplacement. Notez :
var deplace = 5;
var veut dire que l'on déclare une variable, déplace est le nom de cette variable (qui aurait très bien put être chaussure...) le chiffre 5 influera sur le déplacement, on peut augmenter ce chiffre pour faire déplacer ce perso plus rapidement.
Maintenant le déplacement:
perso_mc.onEnterFrame = function(){}
En français celà veut dire notre clip perso_mc sera utiliser dans une fonction.
Le .onEnterFrame signifie que la fonction sera utilisée lorsque perso_mc entrera sur la scène.
Les () j'en sais rien (^^) et entre {} on notera les actions qui concerne ce clip.
Alors tout d'abord le mouvement vers la droite :
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc._x = perso_mc._x + deplace;
}
}
Pour permettre le mouvement j'utilise la condition if (Key.isDown(Key.RIGHT)){} qui veut dire que si (la touche abaissée est (la touche droite)) {action}
puis entre accolade on note son action perso_mc._x = perso_mc._x + deplace; qui prendra la position x de notre perso et le modifiera en lui rajoutant la variable deplace
On peut maintenant rajouter la direction gauche en utilisant un else if (sinon aussi)
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc._x = perso_mc._x + deplace;
} else if (Key.isDown(Key.LEFT)){
perso_mc._x = perso_mc._x - deplace;
}
}
La même chose avec la touche gauche sauf que cette fois on soustrait la variable deplace
Il ne reste plus qu'à associer les bonnes animations de déplacement en gérant les clips avec.
Nous utilisons la fonction gotoAndStop qui nous permet un contrôle sur les clips :
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc.gotoAndStop(2);
perso_mc._x = perso_mc._x + deplace;
} else if (Key.isDown(Key.LEFT)){
perso_mc.gotoAndStop(3);
perso_mc._x = perso_mc._x - deplace;
}
}
Lorsque l'on appuis sur la touche droite flash stop le clip perso_mc à partir à la frame 2, sur laquelle il y a le clip animation_perso vers la droite. Idem pour gauche.
Maintenant pour que le perso aie une position neutre lorsque qu'il ne bouge pas on utilise un else (sinon)
perso_mc.onEnterFrame = function(){
if (Key.isDown(Key.RIGHT)){
perso_mc.gotoAndStop(2);
perso_mc._x = perso_mc._x + deplace;
} else if (Key.isDown(Key.LEFT)){
perso_mc.gotoAndStop(3);
perso_mc._x = perso_mc._x - deplace;
} else {
perso_mc.gotoAndStop(1);
}
}
Monster_Kid- Nombre de messages : 33
Age : 37
Localisation : La ville grise
Date d'inscription : 19/12/2007
Simplification
docrenard 26.06.08 2:46
Premièrement, dans Actionscript tu n'es pas obligé de déclarer une varible en indiquant son type.
Par exemple, au lieu d'ecrire:
var cheddar = 256;
boolean brol = true;
tu peux juste écrire:
cheddar = 256;
brol = true;
Deuxièmement, lorsqu'on utilise "else if" c'est surtout pour clôturer avec un "else".
Je m'explique. Si tu as une condition comme celle-ci, le "else if" ne sert à rien, tu peux tout aussi bien mettre un "if".
if (bidule == 1) { chose = 0; }
else if (bidule == 2) { chose = 256; }
Par contre, dans ce cas-ci, le "else if" est très important car il est suivi d'un "else":
if (bidule == 1) { chose = 0; }
else if (bidule == 2) { chose = 256; }
else { chose = 125; }
Le "else" ici est une façon de dire "si aucune de ces deux conditions ne sont pas remplies".
En fait, "le else if" permet de mettre plusieurs "else" dans le code comme ici:
if (bidule == 1) { chose = 0; }
else if (bidule == 2) { chose = 256; }
else { chose = 125; }
if (bidule == 3) { chose = 100; }
else if (bidule == 4) { chose = 200; }
else { chose = 300; }
Troisièmement, il est toujours préférable de nommer la frame où tu places le movie clip avec le personnage en mouvement.
Ainsi, quand tu as 20 mouvement différents par exemple, tu peux identifier facilement la frame dans ton code.
Par exemple, au lieu d'ecrire:
gotoAndStop(2);
tu pourrais mettre:
gotoAndStop("personnage qui court");
C'est tellement plus agréable
Par exemple, au lieu d'ecrire:
var cheddar = 256;
boolean brol = true;
tu peux juste écrire:
cheddar = 256;
brol = true;
Deuxièmement, lorsqu'on utilise "else if" c'est surtout pour clôturer avec un "else".
Je m'explique. Si tu as une condition comme celle-ci, le "else if" ne sert à rien, tu peux tout aussi bien mettre un "if".
if (bidule == 1) { chose = 0; }
else if (bidule == 2) { chose = 256; }
Par contre, dans ce cas-ci, le "else if" est très important car il est suivi d'un "else":
if (bidule == 1) { chose = 0; }
else if (bidule == 2) { chose = 256; }
else { chose = 125; }
Le "else" ici est une façon de dire "si aucune de ces deux conditions ne sont pas remplies".
En fait, "le else if" permet de mettre plusieurs "else" dans le code comme ici:
if (bidule == 1) { chose = 0; }
else if (bidule == 2) { chose = 256; }
else { chose = 125; }
if (bidule == 3) { chose = 100; }
else if (bidule == 4) { chose = 200; }
else { chose = 300; }
Troisièmement, il est toujours préférable de nommer la frame où tu places le movie clip avec le personnage en mouvement.
Ainsi, quand tu as 20 mouvement différents par exemple, tu peux identifier facilement la frame dans ton code.
Par exemple, au lieu d'ecrire:
gotoAndStop(2);
tu pourrais mettre:
gotoAndStop("personnage qui court");
C'est tellement plus agréable
docrenard- Nombre de messages : 24
Age : 39
Localisation : Basècles
Humeur : Mélancolique
Date d'inscription : 20/12/2007
Re: tuto flash : faire bouger un perso animé
Monster_Kid 26.06.08 19:58
Je suis d'accord pour les variables sauf qu'il n'en est pas ainsi pour tout les langages, donc autant prendre l'habitude plutôt que de se demander si il faut ou pas lorsque l'on commence à coder... çà permet aussi une relecture plus rapide lorsque je reviendrai dessus, selon moi.
pour ce qui est de la structure du code, un if + un else if sans else me permet de proposer plusieur actions :
if (appuyer sur A ==true) {
danse;
}else if ( appuyer sur B == true){
dort;
}
ici tu pourrai croire que c'est inutile d'avoir recours au else if mais il me permet de ne pas enclencher l'action dort alors que danse est activé et vice versa.
Ces actions ne peuvent pas être accomplie en même temps ce qui n'aurait pas été le cas avec :
if (appuyer sur A ==true) {
danse; }
if ( appuyer sur B == true){
dort;}
De plus si tu regarde la conclusion de mon code j'utilise bien un else pour faire revenir le personnage à l'animation de sa postion immobile lorsque l'on appuie pas sur les fleches droite ou gauche.
Et sinon pour finir, comment tu fais pour nommer une frame? Ce serai en effet vachement plus agréable ^^
pour ce qui est de la structure du code, un if + un else if sans else me permet de proposer plusieur actions :
if (appuyer sur A ==true) {
danse;
}else if ( appuyer sur B == true){
dort;
}
ici tu pourrai croire que c'est inutile d'avoir recours au else if mais il me permet de ne pas enclencher l'action dort alors que danse est activé et vice versa.
Ces actions ne peuvent pas être accomplie en même temps ce qui n'aurait pas été le cas avec :
if (appuyer sur A ==true) {
danse; }
if ( appuyer sur B == true){
dort;}
De plus si tu regarde la conclusion de mon code j'utilise bien un else pour faire revenir le personnage à l'animation de sa postion immobile lorsque l'on appuie pas sur les fleches droite ou gauche.
Et sinon pour finir, comment tu fais pour nommer une frame? Ce serai en effet vachement plus agréable ^^
Monster_Kid- Nombre de messages : 33
Age : 37
Localisation : La ville grise
Date d'inscription : 19/12/2007
Re: tuto flash : faire bouger un perso animé
docrenard 28.06.08 17:02
Nan nan nan! 
Essaye ce code-ci:
stop();
onEnterFrame=function() {
// code avec des "if" séparés
if(Key.isDown(Key.RIGHT)) {
trace("droite");
}
if(Key.isDown(Key.LEFT)) {
trace("gauche");
}
// code avec "else if"
/*
if(Key.isDown(Key.RIGHT)) {
trace("droite");
}
else if(Key.isDown(Key.LEFT)) {
trace("gauche");
}*/
}
Tu verra que que tu obtiens le même résultat avec les deux. Si il n'y a pas de "else", le "else if" n'a aucune utilité.
Sinon, j'avais oublié un petit truc très utile pour toi!
Lorsque tu dois ecrire une équation du genre:
maVariable = maVariable + uneAutreVariable;
Il vaut mieux écrire ceci:
maVariable += uneAutreVariable;
C'est exactement la même chose, plus court à écrire et plus facile à manipuler
Concernant les noms des frames, c'est très simple. Lorsque tu donnes un nom d'occurence à un movie clip, tu remplis
un champ de texte en bas à gauche, ton clip étant sélectionné. Pour les frames, c'est pareil! Tu cliques sur une frame, tu remplis le champ de texte en bas à gauche et tu verra alors apparaitre un petit drapeau avec le nom de ta frame sur la ligne du temps. Fais un test, crées une image clé sur la frame 1 et une autre sur la frame 20, nommes la frame 1 et tu pourra admirer le beau petit drapeau.
Essaye ce code-ci:
stop();
onEnterFrame=function() {
// code avec des "if" séparés
if(Key.isDown(Key.RIGHT)) {
trace("droite");
}
if(Key.isDown(Key.LEFT)) {
trace("gauche");
}
// code avec "else if"
/*
if(Key.isDown(Key.RIGHT)) {
trace("droite");
}
else if(Key.isDown(Key.LEFT)) {
trace("gauche");
}*/
}
Tu verra que que tu obtiens le même résultat avec les deux. Si il n'y a pas de "else", le "else if" n'a aucune utilité.
Sinon, j'avais oublié un petit truc très utile pour toi!
Lorsque tu dois ecrire une équation du genre:
maVariable = maVariable + uneAutreVariable;
Il vaut mieux écrire ceci:
maVariable += uneAutreVariable;
C'est exactement la même chose, plus court à écrire et plus facile à manipuler
Concernant les noms des frames, c'est très simple. Lorsque tu donnes un nom d'occurence à un movie clip, tu remplis
un champ de texte en bas à gauche, ton clip étant sélectionné. Pour les frames, c'est pareil! Tu cliques sur une frame, tu remplis le champ de texte en bas à gauche et tu verra alors apparaitre un petit drapeau avec le nom de ta frame sur la ligne du temps. Fais un test, crées une image clé sur la frame 1 et une autre sur la frame 20, nommes la frame 1 et tu pourra admirer le beau petit drapeau.
docrenard- Nombre de messages : 24
Age : 39
Localisation : Basècles
Humeur : Mélancolique
Date d'inscription : 20/12/2007
Re: tuto flash : faire bouger un perso animé
Blocks 01.08.11 18:29
Bonjour, je me suis inscrit simplement pour répondre à Docrenard, dont je trouve la réponse aberrante.
Spécifier le type des variables démontre la rigueur du programmeur. Cela permet de garder en tête le type des objets que vous manipulez, et comme Monster_kid l'a précisé, une meilleure relecture du code. Ce sujet étant un tutoriel, cette initiative est bienvenue.
Je rappelle à tout le monde que les variables en ActionScript sont typées.
Pour ce qui est des instructions if, else if, et else, Docrenard veuillez ne pas donner de conseil quand vous n'avez vous même pas de réelles dispositions à la programmation. La structure utilisée par Monster_kid est tout à fait appropriée, le but d'un if n'est pas de coexister avec un else.
If else if revient à dire que deux conditions ne seront jamais vraies en même temps, mais aussi que les deux peuvent être fausses en même temps, tandis que votre code ne donne pas ce genre d’informations.
Pour ce qui est de nommer les frames, le choix de le faire revient à chacun.
Le faire dans ce tutoriel induirait que Monster_kid explique comment faire, là n'est pas le but.
A l'avenir merci de ne pas ternir le tutoriel des autres, surtout avec ce genre de conseil de bas étage.
Spécifier le type des variables démontre la rigueur du programmeur. Cela permet de garder en tête le type des objets que vous manipulez, et comme Monster_kid l'a précisé, une meilleure relecture du code. Ce sujet étant un tutoriel, cette initiative est bienvenue.
Je rappelle à tout le monde que les variables en ActionScript sont typées.
Pour ce qui est des instructions if, else if, et else, Docrenard veuillez ne pas donner de conseil quand vous n'avez vous même pas de réelles dispositions à la programmation. La structure utilisée par Monster_kid est tout à fait appropriée, le but d'un if n'est pas de coexister avec un else.
If else if revient à dire que deux conditions ne seront jamais vraies en même temps, mais aussi que les deux peuvent être fausses en même temps, tandis que votre code ne donne pas ce genre d’informations.
Pour ce qui est de nommer les frames, le choix de le faire revient à chacun.
Le faire dans ce tutoriel induirait que Monster_kid explique comment faire, là n'est pas le but.
A l'avenir merci de ne pas ternir le tutoriel des autres, surtout avec ce genre de conseil de bas étage.
Blocks- Nombre de messages : 1
Localisation : Truc ?
Date d'inscription : 01/08/2011
:: Proffesseur Virtuel :: Tuto
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|