|
|
Tutoriaux After Effects Le langage des expressions par
nab
Quelques exemples
Nous allons voir dans cette partie
quelques exemples regroupant la plupart des notions qu'on a abordées dans les deux sections précédentes.
Nous nous intéresserons partiulièrement à l'utilisation des fonctions trigonométriques pour positionner ou animer un calque.
Introduisons d'abord un nouvel attribut, l'attribut "index". Il nous permet de faire référence
à un calque dans la composition en indiquant son rang dans la pile de calque. Le calque au sommet de la pile aura
son "index" égal à 1, le calque juste en-dessous aura son "index" égal à 2, etc. Cet attribut n'en a pas forcément l'air
mais il est très puissant. En effet, il va nous permettre dans nos animations d'avoir un contrôle sur chaque calque indépendamment.
En écrivant par exemple dans un calque une expression utilisant l'attribut "index", nous allons pouvoir
créer des animations simplement en dupliquant ce calque. Les calques dupliqués adopteront
un comportement lié à leur "index" respectif.
Une unique expression donc, mais agissant différemment sur chacun des calques suivant la valeur de leur "index".
Pour notre premier exemple, simplement dans le but de nous faire manipuler des expressions, on va tenter de créer un effet d'optique. Pour cela, nous souhaitons
écrire une seule expression sur un calque (un calque qui nous servira de "base") de telle sorte qu'en le dupliquant
les nouveaux calques viennent se placer automatiquement sous forme circulaire.
Pour produire notre effet visuel nous voulons animer nos calques en rotation.
Nous souhaitons que tous nos calques soient placés selon une forme circulaire en dupliquant le calque de base,
et que tous soient animés de la même rotation.
Commençons par créer une composition (160*120, couleur de fond grise "808080") avec un calque solide de taille 640*480 (on le prend plus grand que la composition car nous allons le faire tourner).
Nous le choisissons noir pour le moment.
Appliquons lui un effet "Volet en diaphragme en x" qui se trouve dans les effets de "Transitions".
Choisissons 10 "pointes" et un "rayon externe" de 30. Nous obtenons un pentagone (le nombre de "pointes" représente le double du nombre de côtés, pour obtenir un triangle par exemple on aurait pris 6 "pointes", 8 pour un carré, etc).
Nous avons notre forme de base et nous voulons maintenant qu'en dupliquant ce calque, d'autres pentagones viennent
se positionner en forme de cercle (et ce de façon équidistante), centrés autour du milieu de la composition. Nous ajoutons cette expression dans
la propriété de position de notre calque:
nb = 15 ; // nombre de figures
r = 30 ; // rayon en pixel
a = degreesToRadians( 360 / nb ) ; // angle entre deux figures
x = r * Math.cos( index * a ) ;
y = r * Math.sin( index * a ) ;
position + [ x , y ] ;
Lorsque l'index du calque va augmenter (calque 2, calque 3,etc), le cosinus et le sinus vont retourner différentes valeurs qui vont positionner le calque sur un point de cercle.
Chaque calque sera décalé de "a" radians (ce qui correspond à 24° ici, 360/15=24) et l'ensemble
des 15 calques formera ainsi un cercle (360°). Nous utilisons ensuite l'équation paramétrique d'un cercle,
à savoir " x=r*cos(t) et y=r*sin(t)".
Rappelons que les fonctions trigonométriques s'attendent à un angle en radians, pas en degré,
c'est pourquoi nous avons utilisé la méthode de conversion "degreesToRadians".
Maintenant animons la propriété de rotation du calque à l'aide de points clés (clé1:0, clé2:360).
Remplaçons la couleur noire du calque par du gris ("808080").
Nous ne voyons plus notre calque à l'écran puisqu'il est de même couleur que celle du fond de la composition.
Passons le maintenant en mode "Ecart" (cela ne changera rien pour l'instant).
Notre fenêtre de montage ressemble à cela:
Maintenant dupliquons notre calque "de base" pour avoir 15 calques au total (15 étant le nombre de figures que l'on a choisi dans notre expression) et regardons ce qu'il se passe.
Le positionnement circulaire et la rotation des calques en mode écart produisent notre effet visuel.
Nous verrons plus tard comment avoir un contôle sur notre animation même une fois le calque de base dupliqué, car dans notre exemple
si l'on souhaite modifier le nombre de figures ou le rayon, nous devons effacer tous les calques dupliqués,
changer la valeur des paramètres dans notre calque de base et dupliquer à nouveau pour obtenir une autre animation.
Cela n'est donc pas très pratique surtout s'il on est amené à vouloir faire plusieurs essais.
Nous verrons un peu plus tard comment résoudre ce problème et avoir tout le contrôle nécessaire pour effectuer autant de tests
qu'on le voudra avec un minimum d'effort. Il s'agira de l'utilisation des "Paramètres glissières".
Dans notre deuxième exemple, voyons comment combiner les fonctions trigonométriques avec la fonction exponentielle.
Nous souhaitons que notre calque (en l'occurence un cercle plein) s'étire puis se
rétracte de façon oscillatoire, avec une intensité de plus en plus faible au cours du temps.
Pour cela nous allons combiner les oscillations apportées par une fonction sinus avec la décroissance
de la fonction exponentielle (décroisance car nous lui passerons un argument négatif).
Ecrivons cette expression sur la propriété d'échelle du calque:
ampl = 50 ; // amplitude en pixel
freq = 3 ; // oscillations par seconde
decroi = 1 ; // facteur décroissance
u = ampl * Math.sin( freq * time * 2 * Math.PI ) * Math.exp( - decroi * time ) ;
scale + [ u , u ] ;
La valeur "decroi" contrôle l'intensité de la décroissance. Une valeur trop importante
pour ce paramètre annulerait notre effet oscillatoire (produit par le sinus) et le calque garderait sa taille initiale.
L'échelle du calque oscillera autour de sa valeur initiale ("scale") et ne sera pas modifiée au début de l'animation puisque "sin(0)=0".
Notre fenêtre de montage ressemble à cela
En prévisualisant nous obtenons ceci:
Dans notre troisième exemple nous voudrions simuler un rebond. De la même façon que
nous avons fait osciller l'échelle de notre calque, nous allons utiliser les oscillations d'une fonction
trigonométrique (qui sera un cosinus cette fois-ci car nous voulons que notre balle commence en haut de la composition, cos(0) = 1)
et la décroissance de l'exponentielle (toujours avec un argument négatif car la balle est censée rebondir de moins en moins haut). L'expression est similaire à la précédente, néanmoins nous
devons faire attention maintenant à ne récupérer que la moitié des oscillations (la moitié positive)
pour empêcher la balle de traverser le sol. On réalise cela grâce à la fonction "Math.abs()" qui
retourne la valeur absolue de l'argument qu'on lui passe (par exemple Math.abs(-2)=2 et Math.abs(4)=4 ).
Nous écrivons l'expression suivante dans la propriété de position du calque.
ampl = 220 ; // amplitude en pixel
freq = 1.1 ; // oscillations par seconde
decroi = 0.5 ; // facteur décroissance
u = ampl * Math.abs( Math.cos( freq * time * 2 * Math.PI ) ) * Math.exp( - decroi * time ) ;
position - [ 0 , u ] ;
Le déplacement horizontal a été animé avec des points clés (un pour le départ,
un pour l'arrivée). En prévisualisant nous avons notre rebond:
Nous finirons notre série d'exemples par la simulation d'un mouvement de pendule.
L'expression est du même type que les précédentes, à savoir un mouvement oscillatoire qui s'atténue avec le temps.
Nous écrivons l'expression suivante dans la propriété de rotation de notre pendule
(que nous avons matérialisé par une ampoule au bout d'un fil) :
ampl = 60 ; // amplitude en pixel
freq = 0.7 ; // oscillations par seconde
decroi = 0.5 ; // facteur décroissance
ampl * Math.sin( freq * time * 2 * Math.PI ) * Math.exp( - decroi * time ) ;
Nous prévisualisons pour obtenir l'animation suivante:
Nous remarquons que l'intensité de la lumière varie pendant l'animation. En effet il lui a été appliqué une expression de
type aléatoire, un tremblement aléatoire plus précisément. Les méthodes aléatoires seront le thème de la partie suivante.
|
|
