Tutoriel pour débutant #2 : votre première animation avec TVPaint Animation

Ce second tutoriel va vous permettre d'aborder les bases de l'animation avec le logiciel.


Nous allons apprendre à :

* Ajouter, dupliquer, supprimer des images.

* Faire jouer une animation.

* Créer et positionner des calques.

1) Lancer le logiciel

Commencez par double-cliquer sur l'icône du logiciel et réinitialisez la configuration. Bien que beaucoup de formats vidéos soient disponibles dans le menu déroulant (voir ci-dessous).

Nous allons rester avec un affichage classique VGA en 640x480 pixels et 30 images secondes.

Sélectionner un type de projet

2) La ligne de temps

Nous l'avons vu dans le tutoriel n°1, dès que l'interface du logiciel est chargée, il est possible de dessiner dans la fenêtre de dessin. Commencez par y inscrire le nombre "1".

Regardons maintenant, la ligne de temps : votre dessin, le nombre " 1 " y est représenté. Cette image est la première de notre animation :

Dessiner '1' dans la fenêtre du projetUn aperçu apparaît dans la TimeLine

3) Ajouter une image à une image

Si vous lisez ces tutoriels, vous n'ignorez sans-doute pas qu'un dessin-animé est en réalité une succession plus ou moins rapide d'images fixes. Il suffit en effet d'atteindre la cadence de 24 images par secondes pour donner à l'oeil humain l'illusion d'un mouvement.

Mais, commençons par les choses simples : nous allons ajouter une image à notre animation.

Pour ce faire, il vous suffit de cliquer sur le second bouton de la section image dans l'animator panel.

Ajouter une image avec l'Animator PanelLe résultat dans la TimeLine

Une nouvelle image vient alors s'ajouter à droite de la première dans votre ligne de temps, et votre fenêtre de dessin est redevenue vide. (voir ci-dessus).

Nous allons en profiter pour y dessiner le nombre '2'.

Dessiner un '2' dans la fenêtre du projetRésultat dans la TimeLine

4) Passer d'une image à l'autre

Passer d'une image à l'autre dans la ligne de temps s'effectue le plus simplement du monde à l'aide des touches fléchées de votre clavier.
Vous pouvez également cliquer sur l'image sur laquelle vous désirez travailler pour y accéder ou utiliser les boutons du panneau de l'animateur.

Cliquer ici pour naviguer dans la TimeLineNaviguer dans la TimeLineBouton gauche de la souris

Vous noterez que l'image courante est entourée de deux lignes rouges verticales et qu'elle est affichée à gauche de la ligne de temps.

Se déplacer dans la TimeLine

5) Ajouter plusieurs images

Ajouter une image à la fois peut s'avèrer vite fastidieux. Il est possible d'ajouter le nombre d'images de votre choix en une opération.
Pour ce faire, cliquez sur la ligne de temps à l'aide du bouton droit de votre souris et sélectionnez l'option "insérer des images".
Ajoutez 9 images à notre animation.

Insérer des images avec le bouton droit de la souris

Maintenant, ajoutez un nombre dans chaque image comme indiqué ci-dessous :

TimeLine avec des numéros dessinés colorés

Ici encore, le passage d'une image à l'autre à l'aide des flèches du clavier ou du panneau de l'animateur sera visible directement à l'écran.

L'image courant est toujours dessiné dans la fenêtre du projet

6) Supprimer des images

Notre petite animation a pour vocation d'afficher les nombres jusqu'au numéro 8, puis d'inscrire le nom "TVPaint". Nous n'avons donc pas besoin des trois dernières images.

Vous pouvez les supprimer de deux manières :

Soit en vous plaçant sur la dernière image à supprimer puis en cliquant trois fois de suite sur le bouton "supprimer" de l'animator panel.

Click gaucheClick gaucheSupprimer des images

Soit en sélectionnant plusieurs images (en utilisant le bouton gauche de la souris) et en utilisant l'option "supprimer les images" du menu contextuel (en utilisant le bouton droit de la souris).

Supprimer plusieurs images

Attention : ne confondez pas le fait d'effacer le contenu d'une image (Tutoriel pour débutant #1) et le fait de supprimer une image d'une animation.

7) Dupliquer une image

Nous allons dupliquer la dernière image (celle avec le nombre "8") en trois autres exemplaires. Pour ce faire, vous avez à nouveau deux possibilités :

Vous pouvez vous placer sur l'image à dupliquer et cliquer sur l'un des boutons "duplication" de l'animator panel.

Ajouter une imageClick gaucheImage dupliquée

Vous pouvez vous placer sur l'image à dupliquer et utiliser l'option dédiée de son menu contextuel.

Dupliquer des imagesClick gaucheNombre d'images dupliquées

Nous pouvons maintenant retravailler les trois images dupliquées en y indiquant le nom de notre logiciel favori.

Première image=>Deuxième image=>Troisième image=>Quatrième image

Vous obtenez la ligne de temps suivante :

Résultat

8) Jouer l'animation

Nous avions vu qu'il était possible de naviguer au travers des différentes images de notre animation à l'aide des touches du clavier ou des boutons de l'animator panel. Il est bien-entendu possible de jouer l'animation dans sa totalité. Pour cela il suffit d'appuyer sur l'un des boutons lecture proposés dans votre fenêtre de dessin et dans le panneau de l'animateur. Une seconde utilisation de l'un de ces boutons stoppe la lecture.

Bouton lectureClick gaucheBouton lecture

Pour jouer une animation en boucle, pensez à activer le bouton cerclé ci-dessous avant la lecture :

Boucler une animation

9) La fréquence d'affichage des images

Ok, ça y est, vous avez appuyé sur le bouton lecture ... vous n'êtes pas vraiment satisfait ? L'animation est trop rapide !! Cela est normal. En effet, la fréquence d'affichage du mode VGA est de 30 images par seconde. Si cette vitesse est bien adaptée pour des animations de professionnels ou pour l'industrie du jeu vidéo, elle est trop rapide pour notre modeste travail. Il est possible de pallier à ce problème de deux manières :

Vous pouvez modifier la vitesse d'affichage des images à partir du bouton approprié dans la fenêtre de dessin. Une liste de fréquences prédéfinies sera alors affichée :

Fréquence d'affichage des imagesClick gaucheProchaine étapeFréquence d'affichage des images

Vous pouvez également dupliquer plusieurs fois chaque image de votre animation. Pour ce faire, commencez par sélectionner toutes les images de l'animation à l'aide du bouton approprié du panneau de l'animateur :

Sélectionner toutes les imagesClick gaucheToutes les images sélectionnées

Maintenant reprenez l'une des méthodes présentées au paragraphe n°7. Vous obtenez la ligne de temps suivante :

TimeLine courante

Et voici votre animation :

L'animation correspondante

10) Notion de calque d'image et de calque d'animation

Nous venons de disposer plusieurs images à la suite le long de notre ligne de temps et nous avons créé une petite animation.

Cette premère série d'images est appelée calque d'animation.

On distingue deux types de calques dans TVPaint Animation :

* Les calques d'image dont les images restent identiques à elles-mêmes au cours du temps

* Les calques d'animation dont les images changent au cours du temps.

Comme dans la plupart des logiciels de dessin ou de retouche photographique, il est possible de superposer spatialement plusieurs calques pour travailler.

Dans le cadre d'un véritable dessin-animé, nous aurions par exemple :

* Un premier calque avec un décor de fond fixe (calque d'image),

* Un calque avec le contour des personnages (calque d'animation),

* Un calque avec les plages de couleurs résultant des contours (calque d'animation également).

Mais revenons à notre animation...

11) Créer un calque d'image

Pour illustrer le propos du chapitre précédent, nous pouvons par exemple ajouter un calque d'image qui sera une image de fond derrière l'animation actuelle.

Pour ce faire :

* Revenez sur la première image de votre animation,

* Sélectionnez l'option nouveau calque d'image du menu nouveau de votre ligne de temps.

Nouveau calque imageClick gauche

* Sélectionnez une couleur grise pour couleur A de votre palette,

* Sélectionnez l'outil de dessin plume et ajustez sa taille à 30 pixels,

* puis dessinez une tache grise sur l'image actuelle à l'aide de votre stylet.

Taille de l'outilRésultat

Vous devriez obtenir l'écran suivant :

TimeLine courante

A ce stade, le calque sur lequel vous dessinez est celui qui apparaît en gris clair, l'image du calque sur lequel vous dessinez est bordée de deux lignes verticales rouges. Vous pouvez utiliser les boutons ci-dessous du panneau de l'animateur pour changer le calque sur lequel vous allez dessiner.

Changer l'ordre des calquesRésultat

Vous constatez que le tracé a été disposé au-dessus du chiffre "1" (le logiciel est sensible à la pression exercée sur la tablette par le stylet, il est donc normal que le chiffre ne soit pas totalement recouvert ...).

Si vous jouez l'animation, vous constatez que la tache grise n'est disposée que sur le chiffre "1" et pas sur les suivants.

Nous n'avons pas encore atteint l'objectif que nous nous étions fixés, mais nous allons rapidement remédier à la situation...

L'animation

12) Positionner son calque spatialement et temporellement

Il est possible de faire en sorte que notre calque d'image soit placé sous notre calque contenant l'animation avec les chiffres.

Vous l'aurez sans-doute deviné, ici encore vous pouvez employer le panneau de l'animateur.

Ordonner les calquesRésultat

Vous noterez que maintenant, c'est le chiffre "1" qui est placé au devant de la tache grise.

L'image résultat

Il ne reste plus qu'à dupliquer l'unique image de notre calque d'image (cf. paragraphe 7) pour pouvoir avoir un fond derrière tous nos chiffres.

Vous noterez qu'aucune icône ne s'affiche au niveau d'un calque d'image. Il n'y a qu'une vignette sur la gauche (cerclée ci-dessous) :

Pas d'îcone sur un calque image

Voilà, notre petite animation est terminée!

L'animation finale