Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 1
Vous allez réaliser une animation d’un personnage sur Adobe Animate.
Voici le tuto
Largeur : 1000 pixels
Hauteur : 400 pixels
Cadence : 30 images
Enregistrer son fichier
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 2
Glisser le modèle de marche dans la
bibliothèque.
Ouvrir le personnage sur illustrator.
Sélectionner le personnage et faire un
«copier».
Puis aller le coller sur le plan de travail
dans animate.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 3
Aller sur l’outil «transformer» pour le
changer d’échelle.
Renommer le calque «personnage»
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 4
Création du ciel sur un nouveau calque
puis de la rue sur un autre calque.
Créer ces éléments à l’aide de l’outil
rectangle et en choisissant sa couleur.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 5
Y appliquer un dégradé.
Choisir ses couleurs de dégradé.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 6
Puis retourner le dégradé à 90 degrés
pour avoir le dégradé du haut vers le
bas.
Même procédure pour le dégradé de la
rue (le sol).
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 7
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 8
Aller sur le calque du personnage.
Convertir le personnage en symbole.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 9
Attention à bien respecter ces données.
Puis vous aller «entrer» dans le person-
nage par un double clic. Vous devez
avoir un seul calque
Vous devez bien voir cela au dessus.
Renommer le calque dans la timeline.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 10
Créer un nouveau calque que vous
nommerez modele.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 11
Vous devez aller sur le bureau et séléc-
tionner le modèle de marche puis faire
un glissé déposé dans la bibliothèque
comme ici.
Ajuster la taille du personnage et la
taille du modèle avec l’outil transfor-
mation.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 12
Positionner le personnage sur la pre-
mière étape de marche.
Convertir le modèle en symbole.
Soyez bien attentif aux données à
saisir.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 13
Vous «entrez» dans le modèle par un
double click dessus. Soyez attentif à
ce que vous devez voir au dessus de la
fenêtre.
Afficher les règles.
Mettez un repère au niveau du centre
de la tête pour vous faire un guide avec
le personnage à animer. A chaque posi-
tion différente, vous bouger d’une case
dans la timeline. Comme ci dessous.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 14
Vous renommer le calque pose.
Déplacez vous d’une case dans la ti-
meline puis déplacer le modèle d’une
position vers la gauche jusqu’à la pose
suivante et surtout en restant appuyé
sur maj. Le faire pour chaque position
du modèle.
Vous revenez sur le «perso marche» au
dessus en clickant dessus.
Bloquer le calque avec le modèle
(cadenas) et aller sur le calque perso.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 15
Il faut séparer les éléments du person-
nage pour pouvoir les animer donc
sélectionner le personnage et un click
droit : séparer.
Pareil pour le bras, les jambes, la tête
et le buste.
Sélectionner le pied et le convertir en
symbole.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 16
Le nommer pied droit.
Vous devez le voir apparaître dans
la bibliothèque. Ensuite, supprimer
l’autre pied et faites un copié coller du
pied symbole (ce sera plus simple pour
après).
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 17
Mettez le dans la bonne position avec
l’outil transformer.
En affichant le modèle, vous aurez plus
facile.
Même opération pour la main :
sélection de la main gauche,
convertir en symbole.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 18
Copier coller : raccourcis : sélection
de la main et appuyer sur alt tout en
déplaçant la main, elle se copiera
automatiquement.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 19
Quand on colle un nouvel élément,
il se met en premier plan par défaut.
A l’aide du click droit, vous pouvez le
remettre en arrière plan.
Vous pouvez modifier la couleur de la
main qui est plus clair au premier plan.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 20
Créer un symbole pour la tête.
Mettez la bien en arrière plan.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 21
Créez aussi un symbole avec le buste.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 22
Sélectionner tous les éléments du
personnage et ensuite, en faisant un
click droit, vous faites répartir dans les
calques.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 23
Renommer bien les calques en repé-
rant jambe droite et gauche, bras droit
et gauche, etc.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 24
Transformer le modèle de marche en
guide en faisant un click droit sur le
calque «modèle».
Ensuite, pour chaque élément du per-
sonnage qui est à animer il va falloir
créer un squelette et le créer.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 25
Sélectionner le bras par exemple et
aller sur l’outil squelette.
Tracer le squelette sur chaque élément
en faisant un cliqué glisser déposer.
Faites cela pour chaque bras et chaque
jambe.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 26
Puis vous pouvez renommer les
calques squelette dans le bon membre
et supprimer l’ancien calque.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 27
Vous allez sélectionner les éléments
qui ne sont pas squelette et créer une
interpolation de mouvement.
Vous devez obtenir ça.
Allonger le scénario jusque 115. Rac-
courcis F5.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 28
En se basant sur 5 images pour
chacune des poses différente, vous dé-
placez le modèle jusqu’à la deuxième
pose et vous faites «enter».
Vous faites ainsi de 5 images en 5
images jusqu’à la dernière pose du
modèle.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 29
Vous revenez au début de la timeline.
Vous allez pouvoir animer chaque
membre du personnage sur chaque
pose l’une après l’autre. C’est le travail
le plus long.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 30
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 31
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 32
Faites les mouvements jusque la tête
qui peut être montée ou descendue
selon le mouvement de marche.
Vous pouvez regarder ce que cela
donne en déplaçant le curseur de la ti-
meline et faire des retouches si besoin.
Masquez le modèle avant.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 33
Il faut faire boucler le mouvement du
personnage.
Séléctionner chaque image clé du dé-
but la glisser vers la fin de la timeline
en appuyant sur «ctrl+alt».
Vous pouvez le faire tourner en boucle
en cliquant sur le bouton en boucle en
bas de la timeline.
On va sortir du personnage et aller
dans le scénario en clickant sur scéna-
rio.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 34
Il va maintenant falloir animer le
personnage qui va aller de la gauche
vers la droite.
On allonge le scénario jusque 50.
On ajoute des images clé au bout du
scénario.
On déplace le surceur de la timeline au
début.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 35
On amène le personnage hors champ
En clickant sur le calque du person-
nage on exécute une interpolation de
mouvement puis on amène le curseur
de la timeline en fin de scénario et on
amène le personnage hors champ à
droite.
Géraldine Creusot Tuto animati on ADOBE AN IM ATE CC # Page 36
Pour terminer, vous pouvez publier
votre travail et aller l’ouvrir sur un navi-
gateur web en ouvrant le doc en .html.
Bravo !
