Basées sur le langage JavaScript, les expressions dans After Effects servent à créer des animations sans avoir à utiliser des images clés.

Musique : cinq premières notes de la Sonate pour piano no. 2 de Alexander Mosolov.

Lissitzky

Pour cet exercice sur les expressions dans After Effects, j'ai choisi de travailler avec le vocabulaire graphique de l'oeuvre de l'artiste russe Lazar Lissitzky datant du début du xxe siècle. Lissitzky est considéré comme un pionnier dans le domaine de la typographie et du photomontage. Ses affiches au design simplifié et son style épuré ont influencé toute une génération d'artistes européens de son époque et continuent encore aujourd'hui à laisser des traces sur le travail de nombreux designers graphiques du monde entier. Son nom est étroitement associé à plusieurs mouvements artistiques du début du xxe siècle :

avant-garde russe
suprématisme (triomphe de l'Homme sur la nature ainsi que sa supériorité obtenue par la machine)
constructivisme (le but est d'exclure le réel de l'œuvre en créant une tension au sein de celle-ci).

Étape 2

Créez un nouveau Projet. Appelez-le « expressions ».
Créez dans ce projet une nouvelle composition (+ N). Choisissez le format HDV/HDTV 720 25.

Étape 3

Téléchargez les fichiers nécessaires au tutoriel :

Lissitzky.ai (format Illustrator)
vieux_papier.jpg

Étape 4

Importez les fichiers téléchargés. Pour l'importation du fichier Illustrator, utilisez les mêmes paramètres que dans l'image ci-dessous.
Une fois importés, double-cliquez sur la composition Lissitky pour automatiquement placer les calques dans la fenêtre de montage.
Glissez également l'image vieux_papier.jpg dans la fenêtre de montage et placez le calque en dessous de tous les autres : c'est l'arrière-plan.

Étape 5

Activez l'icône PIXELLISATION (icone pixellisation After Effects) pour préserver la qualité des images vectorielles.

Dès que vous importez des images vectorielles (ai, eps, pdf) After Effects les pixellise automatiquement. Pour préserver la qualité des images vectorielles il faut pixelliser le calque en continu. Par contre, cela a pour effet de ralentir la prévisualisation et le rendu. (référence : Adobe).

Étape 6

Pour chaque élément grahique de Lissitky, appliquez une expression différente. Vous devrez chercher au moins une expression nouvelle et l'appliquer sur un des éléments graphiques.
Pour pouvoir entrer une expression, vous devez enfoncer la touche ALT tout en cliquant sur l'icone chronomètre de la propriété sur laquelle vous désirez appliquer l'expression.

Voici quelques expressions :

Fondu automatique
Ajoutez à la propriété OPACITÉ.
  
//------------------------------     
transition = 20;       // transition time in frames
if (marker.numKeys<2){
tSecs = transition / ( 1 / thisComp.frameDuration); // convert to seconds
linear(time, inPoint, inPoint + tSecs, 0, 100) - linear(time, outPoint - tSecs, outPoint, 0, 100)
}else{
linear(time, inPoint, marker.key(1).time, 0, 100) - linear(time, marker.key(2).time, outPoint, 0, 100)
} 
//------------------------------      


Zoom In / Zoom out
Ajoutez à la propriété ÉCHELLE (S).
  
//------------------------------          
snapScale = 300; //percent of scale to zoom
trans = 4; //  transition time in frames
trans = trans * thisComp.frameDuration;
inTrans  = easeOut(time, inPoint, inPoint + trans, [snapScale,snapScale], [0,0]);
outTrans = easeIn(time, outPoint, outPoint - trans, [0,0], [snapScale, snapScale]);
value+ inTrans + outTrans
//------------------------------     


Bounce : rebondissement
Ajoutez à la propriété POSITION. Vous devez avoir deux images-clé où l’objet se trouve à deux positions différentes : en haut pour commencer, en bas pour finir.
  
//------------------------------          
amp = .1;
freq = 14.0;
decay = 1.0; 
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0 && t < 1){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

//------------------------------     


Sautillement (jitter) sur l'axe Y
Ajoutez à la propriété POSITION (P).
  
//------------------------------          
probability = 8 ;  //higher is less likely
pos = 50;
val  = random(-probability-2, 1);
m = clamp(val, 0, 1);
y = wiggle(10, pos*m)-position;
value + [0, y[1]]
//------------------------------     


Wiggle en boucle, fluide, comme poussé par l'air...
Wiggle = se tortiller, gigoter, remuer.
Ajoutez à la propriété POSITION.
  
//------------------------------          
freq = 1;
amp = 110;
loopTime = 3;
t = time % loopTime;
wiggle1 = wiggle(freq, amp, 1, 0.5, t);
wiggle2 = wiggle(freq, amp, 1, 0.5, t - loopTime);
linear(t, 0, loopTime, wiggle1, wiggle2)
//------------------------------     


Tremblement simplifié
Ajoutez à la propriété POSITION (P).
  
//------------------------------          
wiggle(5, 5)
//------------------------------     


Boucle (loop)
Ajoutez à n'importe quelle propriété comportant deux images-clé.
  
//------------------------------          
loopOut("cycle");
//------------------------------     


Déplacement sur l'axe X à une vitesse constante
Ajoutez à la propriété POSITION.
  
//------------------------------          
veloc = -10;
x = position[0] + (time - inPoint) *veloc;
y = position[1];
[x,y]
//------------------------------     


Temps
Expression utile pour créer un mouvement perpétuel. Elle renvoie une valeur numérique en lien avec la position de la tête de lecture dans la barre temporelle (timeline).
  
//------------------------------          
time*150
//------------------------------   

//------------------------------ 
time*time*time*time  
//------------------------------  


Voici le résultat de time*time*time*time appliqué sur la propriété ROTATION :

animation After Effects Lissitky



Rotation de 360 degrés par seconde
Ajoutez à la propriété ROTATION.
  
//------------------------------          
veloc = 360; 
r = rotation + (time - inPoint) *veloc;
[r]
//------------------------------     


Fade In / Fade Out (Fondus)
Ajoutez à la propriété OPACITÉ.
  
//------------------------------          
fadeInTime = .25; // fade in time (seconds)
fadeOutTime = .25;

Math.min(linear(time,inPoint,inPoint + fadeInTime,0,100),linear(time,outPoint - fadeOutTime,outPoint,100,0))
//------------------------------     


Jouer un clip vidéo en boucle
Allez dans le menu CALQUE > TEMPS > ACTIVER LE REMAPPAGE TEMPOREL. Cliquez ensuite sur le chronomètre tout en enfonçant la touche ALT et copiez/collez l’expression suivante (n'oubliez pas d'étirer la plage d’animation) :
  
//------------------------------          
loopOut ("Cycle",1) 
//------------------------------     


Placer des objets 2D dans un espace 3D
Cette expression permet de placer un objet en 2D dans un espace 3D. Étant donné que beaucoup d'effets ne s'appliquent qu'aux objets en 2D, cette expression est pratique pour placer des objets 2D dans un espace 3D. Voir le tutoriel sur la lumière et la typo pour savoir comment l'appliquer.
  
//------------------------------          
.toComp([0,0,0,]);
//------------------------------     


Déterminer un début et une fin pour une expression
Cette expression permet de spécifier à quel moment l'effet commencera et se terminera. Remplacez la ligne
wiggle(3,25);
avec votre expression et indiquez le début (frameToStart) et la fin (frameToStop).
  
//------------------------------  
timeToStart = 3;
frameToStart = 36; 
timeToStop = 5;
frameToStop = 120; 

d = thisComp.frameDuration;
if ((time > (timeToStart + frameToStart*d)) && (time < (timeToStop + frameToStop*d))){ 
wiggle(3,23); 
}else{ 
value; 
}
//------------------------------     


Effet feuille/plume qui tombe du ciel
Pour créer cet effet, vous devez insérer 2 expressions : une sur la propriété POSITION et l'autre sur la propriété ROTATION.



  
Expression à mettre sur la propriété POSITION
//------------------------------  

yVelocity = 200; //pixels per second
oscFreq = 1.5; //oscillations per second
oscDepth = 35; //oscillation depth (pixels)
drift = 25; // drift (wind?) (pixels per second: - = left, + = right)

value + [oscDepth*Math.sin(oscFreq*Math.PI*2*time) + drift *time, 
yVelocity*time,0]

//------------------------------ 
Expression à mettre sur la propriété ROTATION
//------------------------------  

seed_random(index,true);
random(360);

oscFreq = 1.5;
maxTilt = 15; //degrees
maxTilt*Math.cos(oscFreq*Math.PI*2*time)
//------------------------------     

Étape finale

Essayez de créer une animation harmonieuse, pas simplement d'appliquer à chaque élément une expression. Vous pouvez intégrer de la musique, des effets sonores.
Une fois terminée, exportez votre animation au format Quicktime.

Fin

Auteur : Gilles Thibault.