Avant de nous consacrer à notre première animation, le Bouncing Ball, je voudrais d'abord relever un défi technique : le texte doit être tracé proprement, comme s'il était écrit à la main. Le Fig Leaf Rag a une belle introduction avec un accent à la fin, où nous placerons le point d'exclamation.
Il existe plusieurs méthodes, plus ou moins bonnes selon la situation. Comme je travaille avec une tablette graphique, je vais dessiner le texte et vous montrer comment animer. Avant cela, je vais vous montrer comment on pourrait le faire aussi, bien que ce ne soit pas ma préférence :
Étapes 1–10
Étape 1
Je veux supprimer le calque de texte et à la place créer un calque de composition, un simple calque de pixels sur lequel je peux peindre. Le texte doit être à l'intérieur de ce calque. Je crée donc une sous-composition avec Ctrl+Maj+C ou via Calque > Créer une sous-composition. Je l'appelle "Typo_Intro".
Étape 2
Tous les attributs ont été conservés, y compris Décalage turbulent.
Comme je ne le veux pas, je sélectionne Décalage turbulent, fais Ctrl+X et colle cela dans une autre composition ("Fig Leaf Rag") un peu plus haut.
Étape 3
Retournons à la composition "Typo_Intro". Nous avons maintenant le texte dégagé et pouvons animer le tout.
La première option serait par les trajectoires. Je prends l'outil Plume et trace la première ligne de la lettre A sur le texte. Ensuite, je clique quelque part dans le vide en maintenant la touche Ctrl enfoncée pour terminer le chemin fixé, avant de tracer la seconde ligne du A.
Je répète cela pour chaque trait, jusqu'à ce que tout le texte ait été tracé.
Étape 4
Maintenant, j'applique un effet. Nous le trouvons sous Contour dans la version CC sous Générer. Avant CS6, il s'appelait Effet de contour.
Nous choisissons un masque ou cocherons Tous les masques pour dessiner ces masques.
Étape 5
Je masque les masques avec ce petit symbole et colore le tracé en rouge. Je peux également changer la taille, mais cela s'applique globalement à tous les masques.
Et je peux, en réaffichant les masques, déplacer et ajuster les points individuellement, de manière à recouvrir le texte blanc en dessous.
Étape 6
Le bon côté est que j'ai ici un curseur de début et de fin : Je déplace de début à fin et peut ainsi tracer tout le texte.
Cela fonctionne très bien, mais on n'a pas un contrôle précis. Par exemple, il faut toujours utiliser la même épaisseur de trait, donc on ne peut pas varier entre les traits fins et épais.
C'est pourquoi je souhaite vous montrer une autre méthode que, à mon avis, est un peu plus rapide que de tout redessiner individuellement …
Étape 7
Dans ce cas, je préfère la méthode un peu plus rapide avec le pinceau.
Ce pinceau ne peut toutefois pas être appliqué aux calques de texte. Nous devons donc créer une nouvelle sous-composition et la nommer "Typo_Statisch". Nous pouvons travailler directement dans cette sous-composition.
Étape 8
Lorsque nous voulons travailler avec le pinceau et double-cliquons en mode pinceau, l'onglet des calques s'ouvre et c'est là que l'on peut utiliser le pinceau.
Deux nouveaux panneaux ont également été créés : Pinceau et Peindre. Dans le panneau Pinceau, nous pouvons régler la taille, la dureté, etc. du pinceau.
Et dans le panneau Peindre, nous pouvons choisir le mode de peinture. Au début, c'est par défaut constant, mais je le change en Peindre animé.
Je trace une ligne, puis une autre et une autre - mais dès que j'ai terminé une ligne, elle disparaît bizarrement.
Étape 9
Quand je reviens à l'autre onglet et que je me déplace le long de la timeline, je vois que tous les traits sont là et sont tous tracés automatiquement.
Étape 10
Si j'appuie sur UU pour toutes les propriétés modifiées, alors nous obtenons ici beaucoup de sous-propriétés.
Pour chacune, le début et la fin sont également affichés.
De plus, nous pouvons modifier l'espacement, la dureté et même la position de chaque trait - même après qu'il ait été tracé.
Continuer simplement : Étapes 11 à 20
Étape 11
Je supprime à nouveau tout, pour avoir une meilleure vue d'ensemble.
Je trace à nouveau une nouvelle ligne et lorsque vous êtes dans la vue des calques, vous voyez le tracé. C'est ce qui est enregistré.
Supposons que je n'aime pas le trait dessiné, je peux le redessiner en le sélectionnant puis simplement le refaire. Il sera mis à jour et simplement écrasé.
Étape 12
Je veux également retracer le texte, car c'est le moyen le plus rapide d'animer quelque chose de cette façon.
Je réduis donc mon diamètre et je repasse sur le texte avec la tablette graphique pour le dessiner ici.
Étape 13
J'ai tracé tous les traits et si nous lisons le tout dans la timeline, nous voyons également que tout est là.
Si j'appuie sur U, nous récupérons tous les keyframes.
Étape 14
Si j'appuie sur la touche Ü, la fenêtre sur laquelle la souris est actuellement survolée est maximisée. Dans ce cas, la timeline. Ainsi, j'ai plus d'espace et je reconnais mieux les éléments qui ressortent. Je les fais reculer un peu pour que tout dure à peu près de la même façon.
Étape 15
Laissons-le jouer.
Par ailleurs: Si vous avez accidentellement appuyé sur la touche Verr. maj., After Effects ne se met plus à jour. Vous recevrez alors le message Désactivez Verr. maj. pour mettre à jour la vue.
Lorsque nous le laissons jouer maintenant, After Effects commence à dessiner tous les caractères en même temps. Mais il devrait commencer par l'avant et ensuite passer à l'arrière. Et c'est là que le bât blesse. Pour obtenir ce que je veux, je devrais synchroniser le tout manuellement - un trait après l'autre. C'est un sacré effort. Je voudrais rendre les choses plus rapides.
Je vous expliquerai comment faire exactement dans la prochaine étape, mais d'abord nous sélectionnons tous les traits.
Étape 16
C'est pourquoi j'utilise un script pour définir ces keyframes les uns après les autres.
J'ai écrit ce script moi-même et je vous l'ai bien sûr également fourni. Vous le trouverez dans le dossier Scripts sous le nom de Séquence de traits. Ceux qui connaissent le film "Séquences de calques à partir d'After Effects" peuvent avoir une idée approximative de ce que fait le script.
J'ouvre le script dans Extend Script et je l'exécute.
Étape 17
Maintenant, nous avons en quelque sorte une série de keyframes et le texte est dessiné étape par étape. Mais encore très lentement.
Nous devons accélérer cela. Pour ce faire, nous sélectionnons tout, prenons le dernier keyframe trouvé, appuyons sur la touche Alt- et le tirons jusqu'à 5 secondes.
Alors ça ira beaucoup plus vite.
La dernière étape doit encore être un peu retardée, mais nous nous en occupons tout de suite.
Étape 18
J'aimerais encore parler de la valeur de décalage. Cela affecte les transitions entre les keyframes :
Si nous regardons actuellement les transitions entre les keyframes, le suivant commence toujours exactement là où le précédent se termine (a).
Si je ne veux pas cela et que je préfère par exemple avoir deux images de pause entre deux traits, je saisis un 2 pour décalage.
Évidemment, je dois à nouveau sélectionner tous les pinceaux avant de pouvoir activer le script. Avec Ctrl+A, je peux tous les sélectionner en même temps.
Ou je veux que les images se chevauchent, alors je mets la valeur -2 pour le décalage. Ainsi, le trait irait toujours deux images en arrière par rapport à la position actuelle. Mais si vous avez raccourci cela aussi rapidement que nous l'avons fait ici, cela n'a aucun sens. Je suis satisfait tel quel et je le laisse à 2.
Étape 19
Ce que je veux changer absolument, c'est le moment de l'exclamation. Je veux l'ajuster plus précisément à la musique.
Je vais donc avoir besoin de la musique dans la composition. Je vais donc dans l'onglet "Fig Leaf Rag" et je copie le fichier.
Ensuite, je reviens éventuellement dans la composition en faisant un Alt-Clic et je l'insère ici.
Étape 20
Voyons maintenant où sont les deux positions dont nous avons besoin. Pour cela, je prends le pavé numérique et j'appuie sur la touche Virgule pour créer un aperçu. J'appuie sur la touche étoile * du pavé numérique pour placer un repère. Sur les appareils sans pavé numérique, notamment sur Mac, ce serait cmd+Virgule pour l'aperçu et cmd+8 pour le repère.
Je laisse maintenant la musique jouer et je place les repères exactement là où la barre et le point de l'exclamation doivent apparaître (1). C'est-à-dire exactement aux deux accents de la mélodie.
J'ai donc placé deux repères : le premier pour que la barre de l'exclamation soit prête et le deuxième pour que le point soit placé.
Je positionne la Ligne d'aide sur le premier repère et je passe à la composition "Typo_Statisch". Là, je déplace le cadre sur la Ligne d'aide qui représente la ligne de l'exclamation (2).
Je fais la même chose avec le deuxième repère, qui indique la position pour le point : je place la Ligne d'aide sur le repère, je passe à la composition et je déplace le cadre en conséquence.
Les dernières étapes
Étape 21
Je voudrais que la barre de l'exclamation soit dessinée plus lentement que l'écriture précédente, afin d'accentuer l'ensemble lors de l'exclamation (1).
Et l'écriture doit être globalement un peu plus rapide. Je sélectionne donc tout ce qui précède (2) et je les déplace légèrement vers l'avant (3).
Ainsi, le timing est parfait.
Étape 22
Nous avons peint le texte par-dessus et nous allons apporter une modification à cela.
Je duplique d'abord le calque "Typo_Statisch" et je supprime l'effet Peindre-.
Étape 23
Sur le calque supérieur, nous avons le texte peint par-dessus le texte blanc original en dessous.
Sur le calque inférieur, nous avons le texte blanc normal.
Si nous cochons la case Peindre en transparence sur le calque supérieur, seules les lignes rouges peintes resteront visibles.
Étape 24
Le calque supérieur servira donc de masque pour le calque inférieur.
Si le masque n'est pas visible, il suffit de cliquer en bas sur Activer/Désactiver les modes de fusion, puis le masque en mouvement BewMas sera affiché.
Je peux alors sélectionner un masque alpha et obtenir exactement le résultat dont j'ai besoin. C'est-à-dire que partout où ces traits sont dessinés, la signature originale sera également visible.
Cependant, j'ai décalé quelque chose, parce qu'au tout début, il y a déjà le A.
Étape 25
Donc, nous sélectionnons de nouveau tous les pinceaux de bas en haut avec une sélection de type rectangle (1) et retirons ensuite les deux trames de l'exclamation en maintenant la touche Shift enfoncée (2). Les deux sont déjà parfaitement positionnés dans le temps.
Ensuite, nous déplaçons légèrement vers la droite la première trame en bas, de sorte que le A ne soit pas encore visible tout au début.
Maintenant cela convient.
Étape 26
Nous avons fait cela dans la sous-composition, et ici nous avons l'effet Décalage turbulent.
Si nous regardons le tout dans cette composition, ce n'est pas seulement en jaune et la couleur change, mais ça tremble aussi.
Étape 27
C'est magnifique et parfait, mais la couleur devrait changer seulement après, ou pas du tout pour le moment. Changer les couleurs reste donc éteint pour l'instant.
Nous avons donc terminé les premières 4 secondes de la bande-annonce et nous nous retrouverons dans la prochaine partie du tutoriel, avec le Bouncing Ball.
