Compte à rebours

Compte à rebours

Tutoriel publié en mars 2009 par Galdon dans la catégorie After Effects

Dans ce tuto, nous allons apprendre à créer un compte à rebours (un peu comme dans la série 24) à l'aide des expressions dans After Effects :

Compte à rebours / chronomètre avec les expressions dans After Effects

On peut aussi utiliser la même technique pour créer un chronomètre (c'est exactement la même chose : un compte à rebours c'est juste un chronomètre qui compte dans l'autre sens).

Vous pouvez télécharger le projet final sur Stockmotion :

Compte à rebours Projet After Effects : countdown.
Télécharger

Étape 1 : préparatifs

Pour commencer, il va falloir installer une police qui ressemble à celle d'une minuterie ou d'un radio-réveil, comme digital-7 : télécharger la police digital7. Je vous laisse l'installer, si vous ne savez pas, lisez ceci : installer une police de caractère.

Lancez After Effects et créez une nouvelle composition de 1280x720 d'une durée de 10 secondes, avec un fond de couleur noir.

Créez un calque texte (avec l'outil texte) avec la police Digital-7 en rouge, et écrivez-y "countdown" (ce texte n'est pas très important puisqu'il va être remplacé par le décompte, mais il faut quand même lui donner une valeur initiale).

Nommez ce calque "countdown", attention c'est très important pour la suite, car nous allons utiliser ce nom dans les expressions.

Étape 2 : une expression pour le décompte

Maintenant on va passer aux choses sérieuses : les expressions (non, ne partez pas...).

Le paramètre qui sera contrôlé par l'expression, c'est le contenu de notre calque texte, qui correspond à la propriété Texte source. L'idée c'est donc d'écrire une expression pour l'animation de cette propriété, qui affiche un décompte, qui varie au cours du temps (à chaque image clé).

Pour contrôler cette variation du compte à rebours, nous allons utiliser l'effet glissière (un effet qu'on utilise très souvent lorsqu'on travaille avec les expressions), qui va représenter le pourcentage d'avancement du compte à rebours (0% : début du compte à rebours, 100% : fin du compte à rebours).

Créer une glissière

Ajoutez donc l'effet glissière à votre calque texte "countdown", en allant dans Effet > Options pour expressions > Paramètre glissière.

Déroulez ensuite les propriétés du calque countdown dans la Timeline, et renommez la glissière : countdown_percent(par défaut, son nom est "Paramètre glissière") :

Créer la glissière d'avancement

Il ne reste plus qu'à animer la glissière. Placez le curseur dans la timeline à l'instant 0:00:01:00 (1 seconde), puis cliquez sur le petit chronomètre à gauche de "Curseur", donnez lui la valeur 0 (c'est la première image clé, le début du compte à rebours).

Maintenant déplacez-vous à l'instant 0:00:04:00 (soit 3 secondes plus tard), et changez la valeur du curseur à 100 (100%, la fin du compte à rebours) :

Animation du curseur de la glissière
Cliquez sur l'image pour agrandir

Et c'est terminé pour la glissière, sa valeur varie de 0 à 100 en 3 secondes.

Expression du compte à rebours

Dépliez les propriétés du calque texte "countdown" et faites Alt + clic sur le petit chronomètre de la propriété Texte sourcepour activer les expressions :

Ajouter l'expression

Et copiez le code source ci-dessous dans la zone de texte à droite (comme sur la capture ci-dessus) :

// Configuration chronomètre
var config = {}
config.start = {
	hour   : 0,
	minute : 0,
	second : 3
}
config.stop = {
	hour   : 0,
	minute : 0,
	second : 0
}

// Conversion en millisecondes
chrono_start = (config.start.hour*3600 + config.start.minute*60 + config.start.second)*1000;
chrono_end   = (config.stop.hour *3600 + config.stop.minute *60 + config.stop.second )*1000;

// Calcul de l'avancement du chrono à l'instant courant, défini par la valeur de la glissière à cet instant
chrono_amplitude = chrono_end - chrono_start;
pourcentage = effect("countdown_percent")("Curseur");
time_walk = chrono_start + Math.floor( chrono_amplitude * pourcentage / 100 );

// Extraction des heures, minutes, secondes
reste = time_walk;

nb_hour = Math.floor(reste/3600000);  // heures
reste = reste%3600000

nb_minute  = Math.floor(reste/60000); // minutes
reste = reste%60000;

nb_second = Math.floor(reste/1000);   // secondes
reste = reste%1000;

nb_ms = reste;                        // milliseconde
nb_cs = Math.floor(nb_ms/10);         // centième de seconde

// Ajout des zéros devant, pour l'affichage
str_hour    = ("0" + nb_hour  ).slice(-2);
str_minute  = ("0" + nb_minute).slice(-2);
str_second  = ("0" + nb_second).slice(-2);
str_cs      = ("0" + nb_cs    ).slice(-2);
str_ms      = ("00"+ nb_ms    ).slice(-3);

// Affichage
text.sourceText = str_hour+":"+str_minute+":"+str_second+":"+str_cs;

Vous deviez maintenant voir le décompte s'afficher !

Je ne vais pas expliquer dans le détail le fonctionnement du code, mais voilà le principal :

On commence par définir 2 variables de configuration qui servent à régler l'heure de début et l'heure de fin du compte à rebours (heure, minute, seconde). Dans cet exemple, le compte à rebours commence à 3 secondes : 00:00:03, et termine à 0 : 00:00:00.

Vous noterez que j'ai pris le même écart de 3 secondes qu'entre les 2 images clés du curseur de la glissière countdown_percent, ainsi le compte à rebours va défiler à vitesse réelle, et pas en accéléré (ex: timelapse) ou au ralenti. Vous n'êtes pas obligé, mais si vous voulez une animation réaliste il faut faire ça.

Ensuite on convertit ces 2 variables de configuration en millisecondes :

  • 1 seconde = 1000 millisecondes
  • 1 minute = 60 secondes
  • 1 heure = 60 minutes = 3600 secondes

Donc il suffit de multiplier le nombre d'heures par 3600, d'y additionner le nombre de minutes multiplié par 60, et enfin d'y additionner le nombre de secondes. Cela donne donc un résultat en secondes, on le multiplie par 1000 pour avoir le résultat en millisecondes.

À l'étape suivante, on calcul l'avancement du décompte à l'instant courant, et c'est là qu'on a besoin de la fameuse glissière countdown_percent. La variable time_walk contient ainsi la valeur du décompte à l'instant courant, en millisecondes.

Après il n'y a plus qu'à faire l'opération inverse : reconstruire le nombre d'heures, minutes, secondes et même millisecondes et centième de secondes, à l'aide de divisions et des modulo (%). On récupère tout ça dans des variables que j'ai toutes préfixées par nb_.

La dernière étape consiste juste à ajouter des zéros devant chacune de ces variables nb_ à l'aide d'une petite bidouille avec la fonction slice de JavaScript (le langage des expressions After Effects). Ça permet par exemple de pouvoir afficher ça : 00:01:37 au lieu de 0:1:37.

Et il n'y a plus qu'à définir le texte à afficher à partir des différentes variables str_. Là vous faites comme bon vous semble, c'est là tout l'intérêt de cette expression : les calculs sont séparés de l'affichage, du coup vous pouvez entièrement personnaliser le format du compte à rebours en modifiant simplement la dernière ligne.

Pour ceux qui n'ont pas tout compris, voilà une synthèse :

Résumé

Pour régler le compte à rebours, vous n'avez que 3 "leviers" sur lesquels agir :

  1. Réglage des 2 images clés de la glissière d'avancement : countdown_percent
    Il vous suffit de les déplacer sur la timeline pour modifier la durée d'animation du compte à rebours
  2. Partie configuration dans l'expression
    Si vous voulez faire un décompte : choisissez une heure de fin (config.stop) plus petite que l'heure de début (config.start)
    Si vous voulez faire un chronomètre : choisissez une heure de fin plus grande que l'heure de début
  3. Format d'affichage, à la fin de l'expression : text.sourceText = ...

Voici un petit exemple des différents formats qu'on peut créer :

Format compte à rebours vertical retour vers le futur

Étape 3 : les finitions

Le gros du travail est fait, mais on va voir comment ajouter quelques derniers effets.

Glow

Sélectionnez le calque texte countdown et ajoutez-lui un effet de glow (afin d'obtenir une légère lueur autour des chiffres) en allant dans Effet > Esthétiques > Lueur diffuse. Utilisez ces paramètres :

Réglage glow lueur diffus

Jauge horizontale

Un dernier petit effet de jacky pour la route : nous allons créer 2 barres horizontales qui vont se réduire automatiquement à mesure de l'avancement du décompte, là encore avec une expression !

Créez un nouveau solide de taille 750x10 et de couleur rouge (la même couleur que le texte), et renommez-le "barre haut" dans la Timeline.

Placez le solide au dessus du texte dans le panneau Vue, et ajustez son échelle horizontale s’il dépasse un peut du texte, ou au contraire s’il n'est pas assez long (pour cela il faut décocher la case avec la petite chaine qui sert à relier l'échelle verticale et horizontale).

Modifiez la position horizontale du point d'ancrage pour que celui-ci se trouve à gauche du solide.

Barre haut, réglage du solide
Cliquez sur l'image pour agrandir

Maintenant, déroulez les propriétés du calque et activez les expressions pour l'échelle :

Expression d'animation de l'échelle

Voilà le code source de l'expression à copier-coller dans la zone de texte :

// Récupération valeurs définies
var scaleX = transform.scale[0];
var scaleY = transform.scale[1];

// Calcul de la longueur en fonction de la glissière
scaleXnew = scaleX * (100 - thisComp.layer("countdown").effect("countdown_percent")("Curseur")) / 100;

// Affectation valeur finale
transform.scale = [scaleXnew, scaleY];

Son fonctionnement est assez simple : cette expression redéfinit l'échelle horizontale en fonction de la valeur de la glissière à l'instant courant. Par contre elle utilise le pourcentage restant à la place du pourcentage écoulé, c'est pour ça qu'il y a une soustraction (100 - ...).

Il ne reste plus qu'à appliquer au calque barre haut le même effet glow que sur le calque countdown.

Pour créer la barre du bas, dupliquez le calque barre haut, renommez la copie "barre bas" puis positionnez ce calque sous le texte dans le panneau Vue.

Changez simplement la position du point d'ancrage, pour le placer cette fois-ci à droite, comme ça la barre va se replier de l'autre côté : vers la droite.

Vous obtenez ceci :

countdown timer

Faire clignoter un texte

Dernier petit détail : faire clignoter le calque texte lorsqu'il arrive à 0. Pour cela c'est très simple : on active l'animation de la propriété Opacitédu calque countdown, et on fait varier l'opacité de 100 à 0 et vice-versa en une seule image (j'ai ajouté une capture de l'éditeur graphique pour mieux voir les variations de l'opacité sur les images clé) :

Texte clignottant
Cliquez sur l'image pour agrandir

Dans ma version, j'ai aussi ajouté des bip audio à chaque seconde (ils sont fournis dans le projet final à télécharger sur stockmotion) :

Compte à rebours Projet After Effects : countdown.
Télécharger

Le tutoriel est terminé, les deux parties ci-dessous sont des annexes.

Annexe : compte à rebours en années

Suite à une demande dans un commentaire sur ce tutoriel, j'ai développé une variante de l'expression utilisée dans ce tuto, qui permet de créer un compte à rebours sous forme de date.

Le principe général reste le même : on définit une date de début et de fin au début de l'expression, et on utilise une glissière pour gérer l'avancement du chronomètre.

Cependant, le code est assez différent, puisque j'utilise l'objet Date de JavaScript à la place de l'objet perso "config".

Voilà le code de l'expression à utiliser pour ça, en remplacement du code original (à appliquer sur la propriété Texte source:

time_start = new Date(2011,11,29,15,30,00).getTime();
time_end   = new Date(2011,11,31,00,00,00).getTime();

pourcentage = effect("countdown_percent")("Curseur");
time_walk   = Math.floor( (time_end - time_start) * pourcentage / 100 );
time_now    = time_start + time_walk;
date_now    = new Date(time_now);

str_day   = ("0" + date_now.getDate()).slice(-2);
str_month = ("0" + (date_now.getMonth()+1)).slice(-2);
str_year  = date_now.getFullYear();
str_hour  = ("0" + date_now.getHours()).slice(-2);
str_min   = ("0" + date_now.getMinutes()).slice(-2);
str_sec   = ("0" + date_now.getSeconds()).slice(-2);

text.sourceText = str_day+"/"+str_month+"/"+str_year+" "+str_hour+":"+str_min;

Voici ce que ça peut donner :

Décompte nouvel an

Vous pouvez télécharger le projet After Effects sur stockmotion :

Countdown YearCompte à rebours "année" - projet After Effects (.AEP)
Télécharger

Annexe : ancienne version (utilisant le Timecode)

Ce tutoriel a été entièrement réécrit le 03/01/2013, l'ancienne version datant de 2009 utilisait une autre technique beaucoup moins pratique, et présentant de nombreux inconvénients par rapport à la technique expliquée plus haut :

  • Impossible de contrôler le compte à rebours en le faisant commencer et finir à un instant précis
  • Impossible de mettre en pause le compte à rebours
  • Vitesse réelle : impossible d'accélérer ou de ralentir le décompte
  • Décompte "linéaire" : impossible de faire varier la vitesse de décompte au cours du temps

Cette ancienne version utilise le Timecode de la composition à la place d'une glissière. Je la laisse uniquement pour la postérité, et parce qu'elle peut-être utile pour d'autres utilisations.

En fait il n'y a que l'étape 2 qui diffère par rapport à la version actuelle, voici donc l'ancienne étape 2 :

Maintenant on va passer aux choses sérieuses : les expressions (non, ne partez pas...)

Le paramètre qui sera contrôlé par l'expression, c'est le contenu de notre calque texte. Donc déroulez le calque countdown > Texte puis cliquez sur le petit chrono à gauche de Texte source tout en maintenant la touche Alt enfoncée.

La zone de texte apparaît :

timeline expressions

Tapez ceci dans la zone de texte :

text.sourceText = timeToTimecode(t = thisComp.duration - time, timecodeBase = 100)

Explications

Pas de panique, je vais vous expliquer ce que signifie ce charabia !

À un instant t, le compteur doit afficher le temps restant avant la fin de la composition. Pour connaitre ce temps, nous disposons de 2 informations :

  • le temps écoulé depuis le début de la compo (la position du curseur sur la timeline)
  • la durée de notre composition

Donc il suffit de calculer durée totale - temps écoulé pour connaître le temps restant. Dans le langage des expressions, ça donne quelque chose comme ceci :

thisComp.duration - time

Si vous essayez avec cette simple soustraction, le compteur va afficher 2.92 par exemple. Or nous on veut un affichage style radio réveil : 00:00:02:92.

On appelle ça un timecode, les différents nombres indiquent HEURE:MINUTE:SECONDE:CENTIEME.

Et il existe une fonction qui peut transformer un temps (2.92) en timecode, c'est timeToTimecode.

Fini de lire cette page ? allez faire un tour ici : dessiner un ballon de plage, ça peut vous intéresser.

83 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°2589 par obalone
obalone mardi 18 juin 2013, 00:09
Salut,

Merci pour le tuto !
Il fonctionne parfaitement.
Une question : Peut-on enlever les millisecondes et n'avoir que les secondes, minutes et heures qui défilent ?

Merci à vous !
commentaire n°2657 par kerclem
kerclem vendredi 4 octobre 2013, 12:38
Hello, j'ai un petit problème, lorsque les millisecondes passent à 10 (avec le 1 en décimale) le compteur se décale... Comment puis-je y remédier et ou comment supprimer les millisecondes.
Merci d'avance

kerclem
commentaire n°2712 par Youpi
Youpi mercredi 18 décembre 2013, 16:35
Bonjour,
tout d'abord merci pour ces explications très claires et précises, c'est la première fois que j'ouvre after effect et j'ai réussi !
Je voulais savoir :
le fait que tout se décale quand le chiffre 1 arrive, peut-on y remédier ?
merci beaucoup
commentaire n°2771 par Greg
Greg lundi 17 mars 2014, 21:02
Bonsoir et merci pour ces explications claires et simples. C'est ma première créa sous AE et ça fonctionne. Par contre j'aurais besoin d'un format d'affichage en multiple de 1000 comme ceci : 455.357
Pourriez vous m'aider car je n'ai pas encore compris le fonctionnement des codes.
Merci d'avance
commentaire n°2817 par shingougui
shingougui vendredi 16 mai 2014, 22:22
Bonjour,

J'ai essayé de faire un compte à rebours de date avec le code donné en fin de TUTO mais je ne suis pas parvenue à le faire fonctionner.
Je ne maîtrise pas AE à vrai dire je ne m'en suis jamais servi mais j'aurai vraiment besoin de cette petite vidéo avec le compte à rebours.

Si quelqu'un peu me venir en aide je lui en serais grandement reconnaissant.

Merci par avance,
commentaire n°2887 par coop
coop mardi 16 septembre 2014, 20:50
Bonjour, j'aimerais rallonger le temps mais ça m'indique code incorrect :
message d'erreur : résultat numérique incorrect (diviser par zero?)
// Configuration chronomètre
var config = {}
config.start = {
    hour   : 0,
    minute : 0,
    second : 1
}
config.stop = {
    hour   : 0,
    minute : 4,
    second : 54
}
 
// Conversion en millisecondes
chrono_start = (config.start.hour*3600 + config.start.minute*60 + config.start.second)*1000;
chrono_end   = (config.stop.hour *3600 + config.stop.minute *60 + config.stop.second )*1000;
 
// Calcul de l'avancement du chrono à l'instant courant, défini par la valeur de la glissière à cet instant
chrono_amplitude = chrono_end - chrono_start;
pourcentage = effect("countdown_percent")("Curseur");
time_walk = chrono_start + Math.floor( chrono_amplitude * pourcentage / 100 );
 
// Extraction des heures, minutes, secondes
reste = time_walk;
 
nb_hour = Math.floor(reste/3600000);  // heures
reste = reste%3600000
 
nb_minute  = Math.floor(reste/60000); // minutes
reste = reste%60000;
 
nb_second = Math.floor(reste/1000);   // secondes
reste = reste%1000;
 
nb_ms = reste;                        // milliseconde
nb_cs = Math.floor(nb_ms/10);         // centième de seconde
 
// Ajout des zéros devant, pour l'affichage
str_hour    = ("0" + nb_hour  ).slice(-2);
str_minute  = ("0" + nb_minute).slice(-2);
str_second  = ("0" + nb_second).slice(-2);
str_cs      = ("0" + nb_cs    ).slice(-2);
str_ms      = ("00"+ nb_ms    ).slice(-3);
 
// Affichage
text.sourceText = str_hour+":"+str_minute+":"+str_second+":"+str_cs;
commentaire n°2948 par Galdon
Galdon dimanche 21 décembre 2014, 16:49
J'ai essayé ton expression (sur After Effects CS6 @ Windows 7 64 bit) sur la base de "countdown CS4.aep" (dans le zip), et ça fonctionne.
commentaire n°3002 par Paroliver
Paroliver vendredi 13 février 2015, 19:19
Bonjour,
Merci pour le travail et les conseils !
J'ai un petit pb de code : je voudrais faire un animation 1 image par seconde.
J'ai configuré ma composition de la sorte.
J'ai repris votre en y ajoutant la variable Jour.

J'attends que le décompte se fasse une image par seconde... Et ça ne marche pas !!!
Un p'tit coup de pouce, m'sieur, s'iou'plait !!!
commentaire n°3003 par Paroliver
Paroliver vendredi 13 février 2015, 19:20
// Configuration chronomètre
var config = {}
config.start = {
    day : 7,
    hour   : 0,
    minute : 0,
    second : 0
}
config.stop = {
    day : 0,
    hour : 0,
    minute : 0,
    second : 0
}
 
// Conversion en milli -secondes
chrono_start = (config.start.day*86400 + config.start.hour*3600 + config.start.minute*60 + config.start.second)*1000;
chrono_end  = (config.stop.day* 86400 + config.stop.hour*3600 + config.stop.minute*60 + config.stop.second)*1000;
 
// Calcul de l'avancement du chrono à l'instant courant, défini par la valeur de la glissière à cet instant
chrono_amplitude = chrono_end - chrono_start;
pourcentage = effect("countdown_percent")("Slider");
time_walk = chrono_start + Math.floor( chrono_amplitude * pourcentage / 100 );
 
// Extraction des jours, heures, minutes, secondes
reste = time_walk;
 
nb_day = Math.floor(reste/86400000);  // jours
reste = reste% 86400000;

nb_hour = Math.floor(reste/3600000);  // heures
reste = reste%3600000;
 
nb_minute  = Math.floor(reste/60000); // minutes
reste = reste%60000;
 
nb_second = Math.floor(reste/1000);   // secondes
reste = reste%1000;
 
nb_ms = reste;                        // milliseconde
nb_cs = Math.floor(nb_ms/10);         // centième de seconde
 
// Ajout des zéros devant, pour l'affichage

str_day      = ("0" + nb_day      ).slice(-2);
str_hour    = ("0" + nb_hour    ).slice(-2);
str_minute = ("0" + nb_minute).slice(-2);
str_second = ("0" + nb_second).slice(-2);
str_cs        = ("0" + nb_cs        ).slice(-2);
str_ms       = ("00"+ nb_ms     ).slice(-3);
 
// Affichage
text.sourceText = str_day+":"+str_hour+":"+str_minute+":"+str_second;
commentaire n°3004 par Paroliver
Paroliver vendredi 13 février 2015, 19:32
J'ai trouvé mon erreur : la durée de ma timeline n'était pas égale à l'écart de mon slider !!!
merci encore pour le travail !!!
commentaire n°3006 par paul56
paul56 lundi 16 février 2015, 11:14
Merci pour ce tuto

c'est parfait et l'explication est très précise.

au plaisir de suivre un nouveau tuto
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré