tutorial mouvement animé [cours]

 

bienvenue dans le premier cours Flash (8 & mx) aujourd’hui 1 sept/08 nous allons voir comment animé un personnage à l’aide de l’action script.

quesque j’entend par animé ? En faite nous allons donner à notre objet des mouvements gauche, droite, haut tout en lui donnant un sens tel que la rotation l’effet de dégradé suivit…

chaque cours sera en deux partie, une première plutôt théorique ou nous comprendrons ce que nous faisons et la deuxième une mise en place plus évoluée du premier cours.

[cours1]

nous allons commencer ce cours par la base de tout developpeur flash, c’est à dire les mouvements. Il n’est jamais évident de savoir faire bouger un personnage dans un environnement, c’est ce que nous allons voir tout de suite.

commençons par créer un shema qui résume ce que nous allons tenter de faire pour cela deux méthodes possibles :

-la première est d’établir un pseudoscript avec des mots, utile pour les explications

-la deuxième est de dessiner un shema mathématique pour mieux comprendre nos calcul

-sous pseudoscript sa nous donne sa :

quand j’appui sur droite

mon carre avance de X

quand j’appui sur gauche mon carre recule de X

maintenant que nous savons ce que nous voulons faire nous allons le mettre sous forme de script, mais avant créez un movieclip (de préférence un carre) sur votre scène et mettez lui l’instance car ( c’est l’instance que nous utiliserons pour tout les cours )

-ouvrez dans votre première frame de votre timeline l’éditeur de script ( F9 ) et rentrez le script suivant :

l
vit = 7;
onEnterFrame = function () {
 if (Key.isDown(Key.RIGHT)) {
  car._x += vit;
 }
 if (Key.isDown(Key.LEFT)) {
  car._x -= vit;
 }
}

ligne 1 :  la variable de vitesse à combien de pixel car._x va se déplacer

ligne 2 : notre fonction() qui nous permet de rejouer l’animation

ligne 3 – 5 : si on appui DROITE alors car._x augmente par rapport à la vitesse 

ligne 6 – 8 : si on appui GAUCHE alors car._x diminue par rapport à la vitesse

voila testez votre code ( tout les .fla se trouvent en fin de page )

[cours2]

nous allons apprendre à faire un dégradé quand le carre bouge de gauche à droite ou inversement

commencez par mettre un link ( lien ) de votre carre dans votre bibiliothèque. Pour cela allez dans votre bibliothèque à droite et cherchez votre carre, clic droit et linkage, entrez dans identifier, l’instance : c_alpha

une fois ceci fait rajoutez a votre script ceci : ( les parties en rouge correspondent au nouveau script entré )

 

l
vit = 7;
nvx = 1;
nvx1 = 0;
opac_true = false;
onEnterFrame = function () {
 if (Key.isDown(Key.RIGHT)) {
  car._x += vit;
  nvx++;
  nvx1++;
  opac_true = true;
 }
 if (Key.isDown(Key.LEFT)) {
  car._x -= vit;
  nvx++;
  nvx1++;
  opac_true = true;
 }
 if (opac_true == true) {
  opac = attachMovie("c_alpha", "c_alpha_"+nvx1, nvx,
 {_x:car._x, _y:car._y, _alpha:40});
 }
 if (nvx1>500) {
  nvx1 = 0;
nvx = 1
 }
 opac.onEnterFrame = function() {
  if (this._alpha>0) {
   this._alpha -= 1.5;
  }
 };
 opac_true = false;
}

ligne 1 – 4  : les différentes variables ainsi que le boolean false pour opac_true 

ligne 6 – 11 : quand on appui DROITE car._x + vitesse, nvx & nvx1 augmentent de 1 (++) et opac_true devient true.

ligne 12 – 17 : quand on appui GAUCHE car._x – vitesse, nvx & nvx1 augmentent de 1 et opac_true devient true également.

ligne 18 – 20 : si opac_true = true (==) alors on attache un movieclip qu’on nomme opac avec les propriété qu’il suive car._x et car._y

ligne 21 – 24 : si nvx1 est plus grand que 500 alors on relance nvx1 à zéro et nvx à 1

ligne 25 – 29 : quand opac rentre alors = fonction(), si son _alpha est plus grande que 0 alors elle va baisser de 1.5

-essayez votre code

[téléchargez les .fla ]

les téléchargement sont momentanément suspendu suite à un problème avec notre hébergeur

 

 

merci d’avoir suivit ce tutorial

écrit par nonitt

postez un commentaire

pour donner votre avis