Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en juin 2009..
Dans ce tutoriel, nous allons créer un cycle d'exécution quad. L'animation sera créée en utilisant des lignes simples. En cours de route, nous aborderons un peu de théorie du déroulement du travail et de l'animation, puis nous utiliserons Motion Tween et ActionScript pour déplacer l'animal sur l'écran..
Jetons un coup d'œil à l'animation finale que nous visons:
Décidez d’abord ce que vous voulez animer (puisque différents animaux bougent de différentes manières). Je vais animer un félin générique, donc ça bougera comme un lion, un guépard, un tigre, etc..
J'étudie souvent les références si je ne sais pas comment le sujet évolue.
Voici quelques sites / livres que j'ai utilisés:
Il est utile de comprendre l'anatomie de l'animal afin de mieux visualiser ce qui bouge réellement sous la peau..
Voici quelques livres sur l'anatomie animale:
Une fois que vous avez passé suffisamment de temps à analyser et à étudier les références, il est temps de dessiner. Normalement, je préfère commencer par planifier sur papier, bien que certaines personnes préfèrent aller directement à l’ordinateur et commencer à animer. Peu importe la méthode que vous choisissez, tant que cela fonctionne pour vous.
Au fait, vous n'avez pas besoin d'être un grand artiste pour dessiner. Les lignes simples suffisent, à condition que vous puissiez comprendre vos propres dessins. D'habitude, je dessine les poses importantes que j'aimerais voir dans l'animation.
Commençons dans Flash…
Changez les dimensions et les couleurs pour répondre à vos besoins.
Créez les couches suivantes:
Puis verrouillez le calque "actions" car il ne contient que du code ActionScript.
Le nombre d'images par seconde pour l'animation Web varie un peu. Tout le chemin de 4 ~ 48fps. Je vais animer à 24fps.
Voici d'autres normes…
Pour modifier le nombre d'images par seconde, il suffit de le modifier au bas de la timeline ou de cliquer sur Modifier> Document..
Il y a plusieurs façons d'animer en Flash, mais je vais animer dans un style plus traditionnel dans lequel je dessinerai chaque pose de l'animation. Je vais utiliser "l'outil Crayon" pour dessiner. Pour le "Mode Crayon", j'ai sélectionné le paramètre "Lisser", ce qui signifie que Flash lira les traits au fur et à mesure que je dessine..
Sélectionnez d'abord la couche "sol" et tracez une ligne droite pour représenter le sol. Puis verrouillez le calque. Le sol a une couleur de trait blanc (#FFFFFF) et un poids de trait de 3..
Allez dans la couche "animal" et commencez à dessiner les poses importantes. Généralement ce sont les contacts et les poses extrêmes. Pour les poses de l'animal, j'ai utilisé un poids de course de 5. Maintenant, si vous aviez planifié cela à l'avance, vous pouvez simplement le redessiner en Flash. Si vous le souhaitez, vous pouvez également numériser et dessiner vos dessins..
Remarque: vous pouvez regarder les étapes 15 à 21 avant de commencer à animer..
Voici les poses que j'ai dessinées jusqu'à présent.
Pour augmenter le nombre d'images pour le calque "terrestre", cliquez avec le bouton droit de la souris sur la quatrième image et sélectionnez "Insérer une image". Cela fonctionne même si le calque est "verrouillé".
Le petit point noir sur chaque image indique une "image clé" en Flash. Pour créer une image clé, cliquez avec le bouton droit de la souris sur une image et sélectionnez "Insérer une image clé" ou sélectionnez Insertion> Scénario> Image clé..
Il est fort probable que vous souhaiterez apporter des modifications après avoir tracé une pose. Il suffit ensuite de sélectionner "Outil de sélection" et de déplacer la souris près de la ligne que vous souhaitez modifier. Lorsque l'icône en bas à droite de la souris se transforme en "courbe", cliquez et faites glisser la ligne..
Une fois que vous êtes satisfait de vos principales poses, vous pouvez commencer à jouer avec le timing. Si vous testez votre film maintenant, ce sera trop rapide. Insérez quelques images entre les poses et jouez avec le timing. Pour ajouter une image, cliquez avec le bouton droit de la souris sur une image et sélectionnez "Insérer une image" ou choisissez Insertion> Scénario> Image.
Ajoutons maintenant plus de poses entre.
Remarque: n'hésitez pas à réajuster le timing afin que l'animation fonctionne dans son ensemble..
Nous pouvons même le rendre plus lisse en ajoutant plus d'inbetweens.
Lors de l'animation, je trouve utile d'utiliser les "pelures d'oignon" et "contours de pelures d'oignon". Ces outils peuvent afficher le contenu d’une série d’images, avant et après l’image actuelle. Vous pouvez également augmenter ou diminuer le nombre d'images en faisant glisser les cercles à chaque extrémité..
Certains d’entre vous peuvent trouver l’animation facile, d’autres pas. J'ai donc fourni quelques conseils qui, espérons-le, vous aideront dans le processus.
Généralement, les cycles d'animation se déplacent à une vitesse constante. Ainsi, lors de l'animation des jambes, assurez-vous que la différence entre la distance de chaque pied (entre les cadres) est approximativement la même. Sinon, les pieds peuvent sembler glisser.
Déplaçons maintenant le cycle d'animation sur l'écran. Tout d’abord, cependant, nous devrons convertir les images en un "Clip". Pour convertir des images du scénario principal en un clip vidéo:
Vous devriez maintenant être sur le calendrier "cycle animal". Cliquez avec le bouton droit sur le premier cadre et sélectionnez "Coller les cadres"..
Revenez maintenant à la timeline principale en cliquant sur le nom de la scène (sous la timeline). Effacez ensuite tous les cadres du calque "animal" et faites glisser le "cycle animal" de la bibliothèque sur la scène..
À l'aide de Motion Tween, l'animal peut être déplacé sur la scène de manière à donner l'impression qu'il traverse l'écran. La distance que vous souhaitez déplacer pour chaque cadre doit être égale à la différence entre la position du pied planté (entre les cadres)..
Nous ferons référence à la "différence" en tant que "dX". Voici une formule qui trouve le "nombre d'images" étant donné que vous connaissez les positions initiales et finales.
numberOfFrames = (finalXPosition - initialXPosition) ÷ dX
Voici un exemple:
Un animal a une position initiale à -50, une valeur dX de 11,5 et une position finale à 610. Ainsi, le nombre d'images entre sa position initiale et sa position finale est de…
= (610 - -50) ÷ 11,5
= 660 / 11,5
= 57 images (arrondi à l'entier le plus proche)
Pour créer Motion Tween:
Remarque: la trame finale réelle est de 58 puisque la trame initiale est de 1 - le nombre de trames entre la trame initiale et la dernière est de 57.
Résultat:
Il est plus facile de déplacer l'animal à l'aide d'ActionScript, car vous n'avez pas à vous soucier de la formule et tout ce que vous devez savoir, c'est dX..
Tout d’abord, assurez-vous d’avoir une instance du «cycle d’animation animale» sur la scène. Sinon, allez dans le panneau de la bibliothèque et faites-en glisser un. Donnez-lui un nom d'occurrence "animal_mc", puis déplacez l'animal hors de l'écran vers la gauche. Sélectionnez ensuite l'image 1 dans le panneau "Action" et ajoutez le code suivant:
AS3:
var dX: nombre = 11,5; // Ajoute un enterFrame à "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // fonction enterFrame pour "animal_mc". function moveAnimal (evt: Event): void // La position x de l'animal augmente de dX. evt.target.x + = dX; // Déplace l'animal vers la gauche lorsqu'il quitte l'écran. if (evt.target.x> stage.stageWidth + evt.target.width) evt.target.x = -evt.target.width;
AS2:
var dX: nombre = 11,5; // Ajoute un enterFrame à "animal_mc". animal_mc.onEnterFrame = function () // La position x de l'animal augmente de dX. this._x + = dX; // Déplace l'animal vers la gauche lorsqu'il quitte l'écran. if (this._x> Stage.width + this._width) this._x = -this._width;
Résultat:
Disons que vous vouliez que l'animal bouge dans l'autre sens (de droite à gauche). Sélectionnez "animal_mc" et allez à Modifier> Transformer> Retourner horizontalement.
Voici le nouveau code ActionScript:
AS3:
var dX: nombre = 11,5; // Ajoute un enterFrame à "animal_mc". animal_mc.addEventListener (Event.ENTER_FRAME, moveAnimal, false, 0, true); // fonction enterFrame pour "animal_mc". function moveAnimal (evt: Event): void // La position x de l'animal diminue de dX. evt.target.x - = dX; // Déplace l'animal vers la droite lorsqu'il quitte l'écran. si (evt.target.x < -evt.target.width) evt.target.x = stage.stageWidth + evt.target.width;
AS2:
var dX: nombre = 11,5; // Ajoute un enterFrame à "animal_mc". animal_mc.onEnterFrame = function () // La position x de l'animal diminue de dX. this._x - = dX; // Déplace l'animal vers la droite lorsqu'il quitte l'écran. if (this._x < -this._width) this._x = Stage.width + this._width;
Résultat:
Merci d'avoir lu ce tutoriel et j'espère que vous aurez du plaisir à animer!
Accentsconagua