Avatar de l’utilisateur
yohantison
Gobelet
Messages : 165
Enregistré le : 02 Avr 2015, 08:48
Localisation : Toulouse
Contact : Site Internet

Contrôle de l’animation avec les expressions

25 Avr 2015, 07:16

Ce tutoriel qui est en quelques sortes une introduction à l’utilisation des expressions vous permettra d’animer un personnage en fonction des basses et des aigus d’une musique et cela sans aucune clés d’animation.

A la fin de ce tutoriel vous devriez obtenir un rendu similaire à celui ci :
phpBB [video]


Etape 1 : Importation de la musique
La première chose à faire est d’importer la musique qui nous servira à animer notre personnage. Pour cela double cliquez dans le panneau projet et venez charger le fichier « beat.mp3 » présent dans les sources en bas de page.

Image

Etape 2 : Importation d’un fichier PSD
Nous allons maintenant importer notre personnage, il à été au préalable préparé dans Photoshop, afin de garder la gestion des calques nous devons l’importer en tant que Composition After effects. Pour cela, double cliquez à nouveau dans le panneau projet, et charger le fichier « cartman.psd » en sélectionnant dans le menu « importer sous » le mode composition. Dans la fenêtre qui s’ouvre, ne touchez rien et validez simplement par OK.

Image

Etape 3 : Création d’une composition
Nous allons à présent créer une nouvelle composition que nous appellerons « Final », pour cela utilisez le raccourcis clavier CTRL+ N (ou CMD+N si vous êtes sous Mac). Nommez votre composition et dans « Paramètres prédéfinis » choisissez « PAL D1/DV Grand écran Pixel carré » ce qui aura pour but de créer une composition de 1050 pixels de large sur 576 pixels de haut cadencé à 25 images par secondes. Dans la durée de la composition indiquez 0:00:16:11 qui est la durée de notre bande sonore.

Image

Etape 4 : Importation de la bande sonore dans la composition
Afin de permettre à notre bande son d’être présente dans la composition, sélectionnez la dans le panneau projet et glissez la simplement vers notre timeline.

Image

Etape 5 : Séparer les basses fréquences
Pour cela sélectionnez calque sonore dans la timeline et appliquez lui l’effet « Effet/Audio/Basses-Aigus ». Cet effet est composé de deux réglages, les basses et les aigus, afin d’isoler uniquement les basses passez ce paramètre à +100 et le réglage des aigus à -100.

Image

Etape 6 : Convertir les informations sonore en images clés
Dans la timeline, faite un clic droit sur votre calque sonore et dans « Assistant d’images clés » choisissez « Convertir les données audio en images clés ».Ce qui aura pour effet de créer un nouveau calque ou chaque information sonore sera enregistré sur une image clé. Renommez ce calque en « Basse » à l’aide de la touche entrée de votre clavier et dans les options d’effets supprimez la « couche de gauche » ainsi que la « couche de droite ».

Image
Image

Etape 7 : Séparer les hautes fréquences
Répéter les mêmes étapes en indiquant 100 dans les aigus, et -100 dans les basses, et refaite la même manipulation que précédemment, afin d’isoler les aigus. Une fois les images clés crées et renommer, supprimer l’effet « Basses/Aigus » de votre bande sonore.

Image

Etape 8 : Importer notre personnage
Pour importer notre personnage, ouvrez le dossier « Cartman Calques » dans votre panneau de projet et glissez simplement les deux éléments qui y sont contenus dans votre composition. Puis sélectionnez le calque « Tête » pour le replacer au dessus du calque « Corps ».

Image

Etape 9 : Lier la tête au corps
Pour que notre tête suive les mouvement du corps une fois celui ci animé nous devons lier la tête au corps. Pour cela dans le menu déroulant « Parent » du calque « Tête » présent dans la timeline, choisissez de parenter la tête au calque « Corps/cartman.psd »

Image

Etape 10 : Séparer les dimensions
Afin d’animer simplement notre corps sur chacun de ses axes nous allons devoir séparer ses dimensions, pour cela sélectionnez le calque « Corps » et appuyez sur la touche P pour faire apparaître les paramètres de positions. Faite un clic droit sur ce paramètre et choisissez « Séparer les dimensions ». Puis mettre la position en Y sur 375 afin de placer notre personnage en bas de la composition.

Image

Etape 11 : Faire sauter le personnage sur les basses
Nous voulons que notre personnage saute dans les airs à chaque fois qu’il y à une basse. Pour cela faite ALT+Clic sur le chronomètre à droite de la position en Y afin d’ouvrir l’éditeur d’expressions. Et tapez l’expression suivante :

Code : Tout sélectionner

value-thisComp.layer(« Basses »).effect(« Les deux couches »)(« Curseur »)


pour l’explication, value correspond à la position initiale de notre personnage.et thisComp.layer(« Basses »).effect(« Les deux couches »)(« Curseur ») correspond à la valeur de basses indiqué par le calque « Basses ». Sachant que le point 0 de l’axe Y se situe tout en haut de la composition, afin d’avoir un mouvement vers le haut nous devons effectuer une soustraction de valeurs.

Image

Etape 12 : Animer la position du personnage sur les X
Afin de casser l’aspect trop linéaire de notre animation, nous allons animer de manière automatique la position de notre personnage sur les X, histoire qu’il se déplace lentement de manière latérale. Faites ALT + Clic sur le chronomètre de la position X du corps de notre personnage et tapez l’expression suivante :

Code : Tout sélectionner

 wiggle(.5,20)


Explication : l’expressions wiggle agit comme un tremblement de la valeur autour de sa valeur initiale la première valeur correspond à la fréquence d’oscillation par seconde et la seconde à l’amplitude.

Image

Etape 13 : Animation de l’échelle de la tête du personnage sur les basse
Afin d’accentuer notre effet cartoon, nous voulons que la tête de notre personnage s’agrandisse à chaque basse. Nous aurions pu utiliser la même méthode mais j’ai choisis de vous montrer une variante et ainsi introduire le concept de variable dans After Effects. Sélectionnez la tête du personnage afin d’afficher ses paramètres d’échelle en appuyant sur la touche S. Faite un Alt+Clic sur le chronomètre et tapez l’expression suivante :

Code : Tout sélectionner

h = value[0]+thisComp.layer(« Basses »).effect(« Les deux couches »)(« Curseur »)/2;

l = value[1]+thisComp.layer(« Basses »).effect(« Les deux couches »)(« Curseur »)/2;

[l,h]

Explication : h= et l= correspondent à la déclaration de mes variables, elles sont nommées ainsi en rapport avec la hauteur et la largeur. Value[0] correspond à la valeur initiale sur les X, en effet dans un espace tridimensionnel X,Y,Z, 0 correspond à X, 1 à Y et 2 à Z. thisComp.layer(« Basses »).effect(« Les deux couches »)(« Curseur ») cible comme tout à l’heure notre calque de basses. La valeur affichée était trop importante du coup nous l’avons divisé par 2, d’où le /2. Et enfin le [h,l] nous permet d’indiquer à After effects que l’on veut qu’il utilise la valeur contenue dans h pour les X et la valeur contenue dans l pour les Y.

Image

Etape 14 : Suite de l’animation de la tête, sur les aigus
Nous allons à présent simuler des tremblement de la tête de notre personnage en utilisant l’expression wiggle, que nous avons déjà utilisée. Pour cela appuyez sur P pour afficher les paramètres de position de la tête et faite ALT+clic sur le chronomètre et tapez l’expression suivante :

Code : Tout sélectionner

 wiggle(time,thisComp.layer(« Aigus »).effect(« Les deux couches »)(« Curseur »)*2)


L’expression inconnue ici est l’expression time qui en fait sert à récupérer la valeur de temps indiqué par la timeline. Dans notre cas elle nous servira à créer des mouvement de tête de plus en plus nerveux.

Image

Etape 15 : Animation de la rotation de la tête de notre personnage
De la même manière que précédemment animé la Rotation de la tête du personnage en appuyant sur la touche R et après avoir activé les expressions, tapez :

Code : Tout sélectionner

wiggle(5,thisComp.layer(« Aigus »).effect(« Les deux couches »)(« Curseur »))


Image



Etape 16 : Activer le flou de bougé

Afin de dynamiser notre animation un peu plus, nous allons activer le flou de bougé, pour cela vous devez cocher la petite case représentant trois cercles devant les deux calques animés à savoir la tête et le corps. Puis l’activer de manière générale dans les options de la timeline en cliquant sur l’icône présentant le même symbole.

Image

Conclusion
Vous pouvez à présent lancer un rendu de votre travail et admirer le résultat. Ceci était une petite initiation aux expressions et leur capacité à traiter le flux audio pour créer des animations dynamiques et automatiques en peu de temps. J’espère que vous n’aurez pas trop de mal à suivre ce tutoriel et qu’il vous aura donné envie d’en savoir plus sur les expressions.

Vous pouvez télécharger les sources gratuitement en vous rendant sur cette page.
0
"If you can dream it, you can do it" - Walt Disney

Site Pro | Le blog Aftereffects.fr | Facebook

Avatar de l’utilisateur
David Oldani
Administrateur
Messages : 536
Enregistré le : 06 Mar 2015, 14:21

Re: Contrôle de l’animation avec les expressions

25 Avr 2015, 09:13

Merci du partage Yohan c'est du lourd !
0

Avatar de l’utilisateur
yohantison
Gobelet
Messages : 165
Enregistré le : 02 Avr 2015, 08:48
Localisation : Toulouse
Contact : Site Internet

Re: Contrôle de l’animation avec les expressions

25 Avr 2015, 09:58

David Oldani a écrit :Merci du partage Yohan c'est du lourd !


Avec plaisir David, j'espère que cette astuce sera utile a quelqu'un :D, surtout ceux qui débutent car je pense que les séniors sur Afx parmi nous connaissent déjà cette astuce :D :D
0
"If you can dream it, you can do it" - Walt Disney

Site Pro | Le blog Aftereffects.fr | Facebook

Avatar de l’utilisateur
David Oldani
Administrateur
Messages : 536
Enregistré le : 06 Mar 2015, 14:21

Re: Contrôle de l’animation avec les expressions

25 Avr 2015, 10:48

Yes chest clair que cette technique a fait ses preuves depuis longtemps, je suis sûr qu'elle va servir à plus d'un sur le forum ! T'as assuré merci
0

Avatar de l’utilisateur
Pichade
Administrateur
Messages : 1090
Enregistré le : 06 Mar 2015, 08:27

Re: Contrôle de l’animation avec les expressions

25 Avr 2015, 13:29

Il s'arrête plus le yohan !!!!

Merci, du partage, il me semble que j'étais tombé dessus une fois il est vraiment bien expliqué merci ;)
0

Avatar de l’utilisateur
MartinGir
Touillette
Messages : 3
Enregistré le : 11 Nov 2016, 17:22

Re: Contrôle de l’animation avec les expressions

11 Nov 2016, 17:41

Déja merci Yohan pour ce tuto.

J'ai un soucis avec l'expression pour les aigus et graves: value-thisComp.layer(« Basses »).effect(« Les deux couches »)(« Curseur »)

Je suis sur AE version anglais. J'ai pris soin de modifier les termes "Les deux couches/Both Channels" et "Curseur/Slider" mais pas moyen d'activer l'expression.

Quelqu’un voit le problème ?
0

Avatar de l’utilisateur
Pichade
Administrateur
Messages : 1090
Enregistré le : 06 Mar 2015, 08:27

Re: Contrôle de l’animation avec les expressions

11 Nov 2016, 17:59

t as modifié Basses? qui doit sûrement être Bass (je me trompe sûrement)
0

Retourner vers « Vos tutos! »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité