Motion Design – des pistes pour After Effects

Références

https://helpx.adobe.com/pdf/after_effects_reference.pdf
https://helpx.adobe.com/after-effects/tutorials.html

bases animation :

https://helpx.adobe.com/after-effects/how-to/aftereffects-understanding-animation-cc.html?playlist=/ccx/v1/collection/product/after-effects/segment/designer/explevel/beginner/applaunch/orientation/collection.ccx.js?ref=helpx.adobe.com

bases du motion design
typo kinétique – techniques d’animation en AE
importer calque PSD mais possible de les éditer en texte : clic droit > Créer > Convertir en texte modifiable
espace de travail : standard ou usuel
durée 10 secondes, 25 fr/sec
dépendance, rassembler les fichiers, incrémenter et enregistrer
créer un objet nul (menu calque), permet de contrôler un ou plusieurs calques en parentant les calques à cet objet
Lettres en MotionDesign

Projet de base : animation d’un camion par Team 8 tuto

Ce projet est libre d’accès et permet de bien comprendre le mouvement.
Sources : création en illustrator, fichier téléchargeable à cette adresse, didacticiel :
didacticiel After Effects :

Résumé du cours, captures d’écran
importer bibi.ai avec cette option :
import
Vérifier les paramètres de composition :
  • 25 images/seconde
  • format type (1280×720 ou 1920×1080)
  • durée en secondes de l’animation
paramètres
Créer précomposition avec clic droit sur tous les calques du camion pour grouper ces éléments
Il est important de créer une sauvegarde ! pas seulement d’enregistrer le fichier.
Menu Fichier > Dépendance > Rassembler les fichiers;
puis incrémenter et enregistrer pour créer une version. Cela vous permettra de revenir en arrière si vous faites une erreur.
Faire se déplacer le camion, sur 1 seconde, puis arrivé à la seconde, appuyer sur N pour raccourcir la zone de travail et barre d’espace pour prévisualiser.
Lisser la vitesse car les mouvements ne sont jamais linéaires alors qu’en AE ils le sont par défaut
Sélectionner les 2 moments clés puis faire un clic droit, « modifier le graphique de vitesse » et cliquer sur l’éditeur de graphique :
éditeur de graphique
Puis activer le graphique en cliquant sur la ligne, et cliquer sur lissage de vitesse (en bas à droite)
lissage de vitesse

 

Résultat :
Donc la vitesse part de rien, augmente et puis diminue
Si je veux que le camion démarre très vite et puis diminue on tire la poignée de droite :

poignée de droite

On commence sur la composition du camion :
avec la roue
sur 5 secondes, 20 rotations avec F9 (lissage) puis sélectionner les 2 moments clés, éditeur de graphique, clic droit > modifier le graphique de vitesse, puis tirer celle de droite :
tirer celle de droite
Copier animation sur 2e roue.
Parenter les calques, burger sur camion, flag sur burger etc pour que tous les éléments du camion soient liés.
Puis sur position du camion créer tremblement vertical, 3 seconde + 3, sélectionner les deux clés d’animation, puis Fenêtre > Tremblement, fréquence = 8, appliquer au graphe temporel
Puis burger, changer point d’ancrage en bas; rotation sur 10 images, +3 – 3, lissage de vitesse, loopOut(« pingpong »)
Puis drapeau, Effet > Déformation > Onde progressive. A t = 0, cliquer sur chronomètre de l’axe
Onde progressive
A t = 3, axe = 15
Lisser deuxième image,
Créer solide de forme noir, en haut de tous les calques, effet Bruit et grain > Bruit fractal :
Bruit fractal
Créer un masque avec l’outil plume, dès que l’on active cet outil et que l’on clique dans la forme de solide le masque se crée et on le voit sous le calque en question :
masque
Puis animation de la fumée avec évolution de 0 à 15 sur toute la durée de l’animation, et changer mode de fusion de normal à produit (à côté du nom du calque, clic droit pour faire apparaître la colonne)
Revenir sur animation globale
masquer presque tout, reprendre montagne et faire revenir montagne Effet > Esthétique > juxtaposition directionnelle
position 0 en t=0, 5000 en t=5

text formatting and animating:
https://helpx.adobe.com/after-effects/how-to/aftereffects-create-text-elements-cc.html?playlist=/ccx/v1/collection/product/after-effects/segment/designer/explevel/beginner/applaunch/basictraining/collection.ccx.js?ref=helpx.adobe.com

https://fr.tuto.com/formation-motion-designer.htm
https://cgi.tutsplus.com/courses
https://www.youtube.com/results?search_query=after+effect+motion+design

character animator
https://youtu.be/ofAMSw-OW5g

typo kinétique
https://www.youtube.com/watch?v=4s_oO210Fm4

Une piste amusante

Terry Gilliam Reveals the Secrets of Monty Python Animations: A 1974 How-To Guide

Motion Design sur le thème des monstres et de la fête foraine

https://fr.tuto.com/after-effects/creer-un-motion-design-sur-le-theme-des-monstres-et-de-la-fete-foraine-after-effects,82271.html

début Monsters

Animation de l’œil 30 secondes de composition !
grouper presque tous les calques de l’œil en précomposition
parenter les calques = les grouper pour que les mouvements suivent
serpentin lueur sur iris et iris à paupière
repositionner le point d’ancrage de la paupière : appuyer sur touche y et déplacer au sommet
premier point d’anim à 0, 2e à 15 via menu animation > ajouter une image clé ou cliquer sur losange dans ligne du temps à gauche
et 5 frames plus loin passer à 110%

échelle110

 

 

5 frames plus loin repasse à 100%
+5 passer à 90%

puis lueur et iris, passer à T0 et créer une image clé de position.
ensuite, passer à 2:05 et image clé
idem sur paupière en 2:10
en 2:10 sur paupière et iris changer position sur la gauche
puis aller sur 3:00, recréer 2 images clé aller sur 3:10 et revenir avec iris et lueur à l’origine et copiant-collant le losange de la valeur d’origine en 0:00 sur 3:05
en 3:20 recrée des images clés
en 4:00 décaler iris et lueur vers la droite

quand tout est fini on va lisser le mouvement en faisant Animation > Assistant d’image-clé > Lissage de vitesse (F9) en ayant sélectionné tous les losanges (images-clés) dans la ligne du temps
puis cliquer sur éditeur de graphique en haut à gauche au-dessus de la ligne du temps :

éditeur de graphique

 

 

 

clic droit pour obtenir l’éditeur de graphique de vitesse et pas de valeurs et tirer sur la sortie du graphique pour le rendre plus sec en sortie

Faire une boucle : cliquer sur le chronomètre en enfonçant la touche ALT pour ajouter une expression, ouvrir le triangle pour voir expression : xxx et dans la ligne de temps taper loopOut()

loopOut

 

 

 

deuxième expression loopOut(« pingpong ») qui fait un retour

PANCARTE

remonter un peu, sélectionner calque corde et appuyer sur touche Y pour activer le point d’ancrage et le remonter sur le nœud
parenter la pancarte à la corde
du coup les deux sont liés.
On fait un effet de rotation « R » en se remettant au début de l’animation : mettre – 10° puis avancer de 20 images et mettre + 10°
faire une rotation de la pancarte seule (appuyer sur R et mettre le point d’ancrage en haut de la pancarte
Puis F9 pour lissage du mouvement (animation > assistant d’image clé > lissage de vitesse)
alt clic sur chronomètre pour loopOut(« pingpong »)

Effet marionnette sur texte

sélectionner le calque de texte et activer l’outil marionnette
réf :
https://helpx.adobe.com/fr/after-effects/using/animating-puppet-tools.html
Mettre des coins aux angles avec valeur expansion =0 et triangles = 350 :

pour les afficher appuyer 2 fois sur P

wiggle = expression qui fait animer le texte : alt clic sur chronomètre et taper expression wiggle(1,200)

1 = fréquence (1=lent) 200 = amplitude légère
graphique = chemin

Activer le calque de texte, aller chercher le coin marionette 1 du filet 1 et appliquer wiggle(10,1)
sélectionner l’expression et aller dans le menu édition pour « copier l’expression seulement » puis la coller dans tous les filets sur tous les coins marionettes !
Parenté corde sur texte et œil blink sur texte pour bouger le tout ensemble (je ne vois pas de ≠)
activer précomposition œil blink, activer touche Y pour déplacer le point d’ancrage sur le centre de l’œil
puis en rotation appliquer l’expression wiggle(10,1), puis en position la même chose
parenter les trait œil sur la composition œil blink afin qu’ils bougent ensemble
bouche : agrandir un peu puis wigle(10,1)

Lettre S

Aller dans le calque texte sélectionner le filet 8 (le S) puis les options d’effets > options pour expressions > paramètre glissière,
puis dupliquer et renommer en fréquence et amplitude (si possible!)
Les piques : pique4, à la 2e seconde l’échelle verticale passe de 0 à 100 en 5 images
ensuite la pique3 passe de 0 à 100 en échelle globale en 5 images
POUR LES 2 INVERSER LES IMAGES CLE (clic droit sur échelle, assistant image-clé, inverser les images-clé pour que la piques sorte
pique2 échelle verticale à 2e seconde, cliquer sur la courbe, clic droit sur échelle, assistant image-clé, inverser les images-clé pour que la piques sorte
pique 1 échelle de 0 à 100 sur 5 images

Puis ajouter des points de marionnette sur les piques pour homogénéiser
wiggle(10,1)
Et petites piques idem

Flaque : effet ondulation Effet > ondulation 90 – 100 -16

Nuage wiggle(1,6)

Composition Park
wiggle sur les tentacules, : pour zoomer, masquer icône rose, points de marionettes sur tenta 01-02-03

wiggle sur les tentacules

ALT CLIC SUR chronomètre wiggle(1,3)
copier expression seulement et coller 21 fois
après avoir appuyé 2 fois sur V

rotation 10 /-10 sur pancartes
sur 4 secondes, puis F9 en ayant sélectionné les deux points clé pour lisser la vitesse (Animation > Assistant d’image clé > lisser la vitesse
alt clic sur chronomètre et expression loopOut(« pingpong »)

requins : position sur 4 secondes, ±40 vers la droite
maj S : échelle image clé à 0, déplacer sur 4 secondes et 23 images
et refaire une image clé puis un autre à 5 secondes avec une échelle -100/100 pour inverser son trajet
se replacer à 10 secondes, image clé et alt-clic loopOut()

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. Apprenez comment les données de vos commentaires sont utilisées.