Mars 2009

Compte à rebours

Auteur : Galdon

Tags

compte rebours chronometre 24 expression animation

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 :

countdown timer

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

Compte à rebours Projet After Effects : countdown.

Télécharger

Pour commencer, il va falloir installer une police qui correspond à ce qu'on veut faire, comme digital-7 : télécharger la police.

Je vous laisse l'installer, si vous ne savez pas, google vous aidera mieux que moi ^^

Etape 1 : Préparatifs

Créez une nouvelle composition de 640*360 et placez-y un solide noir de la taille de la compo (ça fera office d'arrière-plan).

Créez aussi un calque texte (outil Texte) avec ces paramètres :

Police : Digital-7
Taille : 94px

Vous pouvez écrire n'importe quoi comme texte source, parce que le contenu sera remplacé par l'expression donc ça n'a aucune importance (moi j'ai écrit countdown).

Etape 2 : Expressions

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 :

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 !

A 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 reveil : 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.

Etape 3 : Finitions

Vous pouvez appliquer l'effet Lueur diffus au calque texte pour que ça aie un look plus réaliste :

Et voilà ce que ça donne en images :

Compte à rebours
envoyé par finalclap

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

Compte à rebours Projet After Effects : countdown.

Télécharger

Uluru - dimanche 26 avril 2009, 15:06 - site

bonjour,

J'ai un problème, mon compte a rebours ne s'arrête pas a 00:00:00:00 mais à 00:00:00:04.... Ma composition a une durée de 10s... pourquoi cela ne va pas jusqu'à 0 exactement?

en vous remerciant,
uluru.

Galdon - dimanche 26 avril 2009, 15:55 - site

Le compte à rebours s'arrête à la fin de la composition, à ce moment-là il vaut 00:00:00:00.

Si ça t'affiche 00:00:00:04, c'est parce que le curseur de la timeline est sur l'avant-dernière image de la composition.

Place-toi à la fin et appuies sur la touche page bas, tu verras que le texte disparait parce que tu es à la fin de la compo.

Donc si tu veux faire comme sur ma vidéo, avec le texte qui clignote à la fin, il faut imbriqué le compte à rebours dans une autre composition, et ajouter un calque texte avec la valeur 00:00:00:00 qui prend le relais.

Uluru - dimanche 26 avril 2009, 16:45 - site

Héhé ook!
Merci pour ta réponse =)

stef - dimanche 26 avril 2009, 17:43

Salut, j'avais aussi le problème du 00:00:00:04 maintenant je comprends mieux ta manip. En revanche est-il possible de retirer l'emplacement des heures? Merci

Galdon - dimanche 26 avril 2009, 20:12 - site

Bah oui, tout est possible.

Rien de plus simple, il suffit de mettre un masque en soustraction qui recouvre les 2 premiers chiffres et le ":".

Cf chapitre 6 : http://www.finalclap.com/tuto/9,masques.html

stef - mardi 28 avril 2009, 05:17

Tout simplement, merci pour ta réponse.

samossa - vendredi 1 mai 2009, 12:04

Bonjour merci pour ce petit tutos expressions mais je ne comprends pas la manip pour arriver à ce que la compo ne se finisse pas sur 00:00:00:04.
Comment imbriquer dans une nouvelle composition?
merci de ta reponse je galere vraiment sur la derniere phase de l'anim.
merci merci

Galdon - vendredi 1 mai 2009, 12:35 - site

Glisser déposer une composition A dans une composition B a pour effet d'imbriquer la composition A dans la composition B ;)

Ti_Coco - samedi 9 mai 2009, 11:43

Salut bon tuto . Mais je voudrai savoi coment mettre une lueur diffus (je viens d'avoir le logiciel je ne m'y connait pas très bien ^^) .Merci d'avance

theothoma - dimanche 17 mai 2009, 12:39

salut comment faire pour que le compteur avance au lieu de faire un compte à rebours?
d'avance merci.

Galdon - dimanche 17 mai 2009, 14:18 - site

Tu modifie l'expression !

text.sourceText = timeToTimecode(time, timecodeBase = 100)

Ludo65 - dimanche 21 juin 2009, 16:17

Bonjour, comment fais-tu pour avoir les traits rouges au dessus et en dessous du décompte qui défilent en même que les chiffres ?
Merci pour ce tuto !!!

BobKelso - jeudi 23 juillet 2009, 11:38

Je commence tout juste sur After Effect avec ce tuto et je me demandais comment il fallait faire pour faire clignoter le texte? Je n'ai pas trouvé l'effet nécessaire ni le moyen de mettre des images clés afin de faire varier l'alpha :s
Merci d'avance.

Gaulois - vendredi 24 juillet 2009, 12:19

Salut. Bien cool le tuto, simple et tout, mais j'aimerai savoir comment faire pour faire démarrer le compte a rebours à la durée que l'on veut.
Ma vidéo fait 5mn, je voudrais que le compte a rebours commence environ 3mn après le début de la vidéo, et qu'il commence à 00:00:00:00.
J'espère que je suis clair...
Merci

Galdon - vendredi 24 juillet 2009, 15:49 - site

Facile, tu insère la compo compte à rebours dans une compo plus grande.

Gloubi - dimanche 16 août 2009, 17:04

Salut, j'aurai aimer savoir où tu as trouvé le son pour ton compte à rebours, et, comment tu as fait pour que les barres horizontales se rétrecissent...
J'attend ta réponse :)
Merci et super tuto!

Galdon - dimanche 16 août 2009, 23:02 - site

Les sons je les ai fait moi même, tu peux les télécharger sur stockmotion, catégorie audio.

Les barres c'est juste des solides dont je fait varier l'échelle, avec une expression.

bzik - lundi 31 août 2009, 20:00

salut.
Je voudrais savoir comment faire clignoter le chrono a la fin et comment démarrer a 15 seconde au lieu de 30. Et j'ai un problème mon chrono ne s'affiche pas au milieu mes à droite comment le mettre au milieu. Merci

Gaïdon - vendredi 4 septembre 2009, 09:52

Avec la typo DIGITAL-7 les 1 se decalent, comment fais tu pour que cela restent aligner aux digits de droites ?
Merci

Galdon - vendredi 4 septembre 2009, 11:12 - site

Chez moi, le 1 reste toujours aligner à droite, c'est le cas de toutes les polices dites "mono".

Gaïdon - vendredi 4 septembre 2009, 15:22

Etrange, car moi ca donne ca chez moi
http://img221.imageshack.us/img221/9795/image1cpl.png

Gaïdon - vendredi 4 septembre 2009, 15:23

C'est bon j'ai rien dis
j'vais laisser en REGULAR au lieu de MONO
Desolé du bruit

Galdon - vendredi 4 septembre 2009, 17:53 - site

C'est bizarre, chez moi j'ai que Regular comme style de police pour Digital-7.

c$ nico - vendredi 4 septembre 2009, 21:15

Salut, super tutorial!!
J'ai voulu aller plus loin en simulant l'heure réelle. Pour ce faire j'ai remplacé t=thisComp par t=28800 ce qui signifierait 8h00. Seulement le compteur affiche 3.00.00.00 bref 3H00.
Comment faire pour qu'il soit plus "tard"
Merci d'avance!

skyz - samedi 5 septembre 2009, 13:40

bonjours.
Franchement très bon tuto mais comment vous faite pour commencé le chrono à 3 seconde au lieu de 30 secondes?

Dracula - mardi 13 octobre 2009, 18:18

A gauche normalement tu as le nom de ta composition tu fais un clique droit sur son nom *exemple composition 1* paramètre de la composition et la tu as *Durée* c'est le dernier élément et tu mets 3 au lieu de 30

RouX - mercredi 14 octobre 2009, 12:48

Bonjour,

J'ai le meme petit souci que nico j aimerais que le compte a rebours affiche "plus" d'heure mais je n arrive pas a faire afficher plus de 3h...

help me plzzzzz
merci d avance

Valpokbest - jeudi 15 octobre 2009, 22:08

Skyz > Tu peux aussi rajouter "-27" dans ton expression ("thisComp.duration - time - 27") mais attention ça passera en négatif après 3 secondes. Pour l'arrêter à 0 il faut ajouter la fonction Math.max qui choisit le plus grand des 2 nombres à afficher:
timeToTimecode(t = Math.max(thisComp.duration - time - 27, 0), timecodeBase = 100)

Merci pour le tuto, j'ai réussi à faire les 2 barres comme sur la vidéo finale et j'ai rajouté un effet laboratoire de particules sur la fin pour faire une mini-explosion...
Merci bcp :)

skyz - vendredi 30 octobre 2009, 14:53

merci de m'avoir aider.

Facy5 - samedi 14 novembre 2009, 10:45

Merci de ce tuto, mais j'ai une question, je voudrais savoir si on pouvait affiché le compte à rebours uniquement avec les secondes et les centième (du genre 76:24) au lieu de 00:01:16:24, sans refaire un calque par dessu le "00:" pour le cacher ?

Koulechov - mercredi 24 février 2010, 15:36

Juste une petite remarque qui ne change rien au schmilblick, mais ton timecode affiché est surréaliste ! En effet un TC, c'est HH:MM:SS:II ou I=Image. Les vidéos sont (en france du moins) en mode 25i/s (image par seconde)

Pour changer ça, il suffit de mettre timcodeBase=25 à la place de 100.

Merci quand même pour le tuto ! Et désolé d'être pointilleux ^^

pagho - vendredi 26 février 2010, 14:31 - site

slt à tous, grand merci pour le tuto je suis captivé. mais j'ai une préoccupation je suis un jeune passionné et je réside en Afrique au Cameroun et il y'a que sur internet que je me ressource. je ne suis pas bon mais je recherche quelqu'un qui voudrai bien m'aider à avoir des connaissances dans le domaine, quelqu'un de bonne fois merci.

pagho - vendredi 26 février 2010, 14:50 - site

alors pour quiconque voudrai m'aider je laisse mon adresse mail et je ne sais pas si c'est parmi. jijikada2007@yahoo.fr
soyez les bienvenue
merci

tyboy60 - samedi 3 avril 2010, 11:11

slt bon tuto c'est vrais mais tout le monde a trouver le truc que je chercher sauf moi donc vous pourer petétre m aidé j'ai télécharger digital 7 mais comment l'introduire dans after effect svp

qwerty - vendredi 16 avril 2010, 05:47

allo,
J'Aurais besoin de faire un décompte de se style : http://www.youtube.com/watch?v=eiXwaP7zSRk&feature=related

Mais de style feux.... flammes.. Tu peux m'Aider? Idealement sa serait poru demain apres midi loll

Aky669 - lundi 26 avril 2010, 01:47

Sous Mac OS X 10.3 ou plus

Pour ajouter la police "Digital 7" sur After Effect.

Tu double clic justement sur ce fichier dont tu viens de télécharger : "digital.tff"

Et celui-ci devrait ouvrir une fenêtre qui te demandera de l'installer. Tu cliqueras "ok"...

A installer avant de lancer n'importe quel logiciel de la suite adobe.(photoshop, after effect etc.)

Ci-dessous, un lien expliquant comment l'installer sous d'autre supports :

http://www.dafont.com/fr/faq.php

dri2s - lundi 26 avril 2010, 20:59

Merci beaucoup pour ce tuto !

milka66 - samedi 5 juin 2010, 00:28

salut à tous quelqu'un serait il faire un tuto pour faire un compte a rebours comme celui de www.megagong.fr (avec les mêmes fonction)???

hermione35 - vendredi 11 juin 2010, 22:49 - site

Bonjour,

je viens de me mettre a AE et j'ai bien suivi le tuto. Sauf que...quand je mets ma deuxième compo avec le rebours à 00 afin qu'il s'arrête en clignotant, impossible, la boucle recommence sur la compo 1 du rebours. De plus je n'arrive pas à aller à la fin de ma timeline (je cherchais à placer la 2e compo à la fin de l'autre, mais je n'arrive pas à le faire), Impossible de dépasser le temps de la 1e compo, du coup comment rajouter des choses également à la suite???

Merci de votre réponse...

fifi - dimanche 27 juin 2010, 21:59

Bonsoir
J’aimerai faire partir le compte a rebours a 35s comment faire ?
Merci

clecle13 - dimanche 18 juillet 2010, 16:47

Comment fair pour n'afichez que les minutes et les secondes

20 min = 20:00 et pas 00:20:00:00

pititrusse - jeudi 29 juillet 2010, 18:04

Comment faire pour que mon compte a rebours soit en temps réel , a chaque lecture celui ci n'est pas en temps réel, la composition est a 15sec , le compte a rebours est a 21
merci de m'éclairer un peu plus

Vava74 - mercredi 4 août 2010, 22:40

Bonjour,

Je voudrais pouvoir savoir faire la même chose mais avec un compteur d'années. Commet dois-je faire ?

Merci :)

Vava74 - jeudi 5 août 2010, 11:36

Bon je m'auto-répond. A ceux qui en auraient besoin, pour faire un compteur d'année sous after effect, aller sur ce site:
http://help.adobe.com/fr_FR/aftereffects/cs/using/WS3878526689cb91655866c1103a9d3c597-7a65a.html
Il explique qu'avec l'effet nombre on peut mettre n'importe quel type de compteur. Après si vous souhaitez comme avoir que les années ils suffit de mettre un masque pour effacer ou cacher le jour et le mois.

Voilà ! En espérant avoir aidé ceux qui cherchaient comme moi. :)

AdobeKen......... - mardi 17 août 2010, 10:14

Yhello a tous , il est tres cool ce site enfin des leçon d'after effects en français
ça vas faire des mois que je suis chez Andrew K sans tous comprendre au 100/100 surtout quand il sort les expression mais bon,j'voulais demandez tu peut faire un cour sur le tracking je ne reussis pas a comprendre avec Andrew bien que je fasse la meme chose que lui le resultat n'est pas le meme , merci
P.S: Pour installer la Police fastoche :copiez la police et allez dans Disque dur (C:)=Windows=Fonts(vous verrez un A bleu)= et ici vous y coller la police

Tuqmas - jeudi 7 octobre 2010, 21:10

Bonjour si à la fin de votre compo vous avez
00:00:00:04 et bien il suffit de remplacer le 100 par 20 dans le code source du texte.

manu - jeudi 28 octobre 2010, 14:14

salut malgré tes dif métope je n'arrive tjrs pas a arriver a 00:00:00:00 mais a 00:00:00:03 (j'ai fait touche page bas puis aussi mettre la compo une dans nouvel compo).Je suis sous mac osX bonne journée.

Al - mardi 16 novembre 2010, 23:50

Salut, j'ai aucun problème pour le compte à rebours,

seulement à la fin je n'arrive pas à le faire clignoter, les expressions que j'ai trouvé sont du genre:

blinkSpeed = 1;
t = (Math.cos (blinkSpeed*time*Math.PI*2)+1)/2;
v = linear(t, 0, 1, 0, 1);
Math.round(v)*100

mais je ne comprends rien à ce quelle signifie. Y a-t-il un tuto là dessus? je galère depuis deux jours et je trouve rien, et comment faire clignoter du texte? cette expression ne fait clignoter qu'un "100" et un "0",

voilà merci, j'espère qu'on puisse me répondre le plus tôt possible

Mathieu - lundi 21 mars 2011, 10:23

Salut, J'aimerais faire un décompte, mais qui n'a pas de rapport avec la durée de ma composition, c'est à dire en locurence avec un nombre beaucoup plus élevé. Cela n'a aucune importance s'il n'arrive pas à zéro

Lilo - mercredi 21 septembre 2011, 11:31

Bonjour,
c'est génial ton tuto mais j'ai une question..(comme tout le monde :)) Enfaite, j'aimerais réaliser un compteurs qui avance en année.. je m'explique, que je mette par excemple 2010 qui va jusqu'en 2050, et la vitesse varie.. cad de 2010 a 2030 une vitesse rapide puis entre 2030 a 2050 ralenti.. fin si tu me comprends ?
j'attends ton aide..

Galdon - mercredi 21 septembre 2011, 20:11 - site

@Lilo: très facile à faire, il suffit de créer un calque texte auquel tu ajoute un effet glissière.

L'idée est d'utiliser la valeur de la glissière (qu'on peut animer avec des clé comme n'importe quel propriété) comme texte source, on fait ça avec une expression :

Math.floor(effect("Paramètre glissière")("Curseur"))

Après y'a plus qu'à animer la valeur de la glissière avec 2 clés d'animation (à passer en interpolation temporelle Bézier).

[Compte à rebours exponentiel (After Effects CS4)]

Lilo - jeudi 22 septembre 2011, 10:55

@Galdon : Merci de ton aide, ça ma vraiment aider. J'utilisais l'effet nombre mais le hic c'est que je n'arrivais pas le deplacer... et comme je dois l'animer c'est la galère. Encore Merci !

Lilo - dimanche 25 septembre 2011, 19:08

@Galdon : Est ce que tu peux faire un tuto sur la courbe de bezier ? Ralentir un objet vers la fin...

SanneHusky - mercredi 5 octobre 2011, 00:10

Comment tu fais ça? Je veux dire est-ce que c'est sur le site ou avec un programme téléchargé ou acheté?

Galdon - jeudi 6 octobre 2011, 23:11 - site

@SanneHusky : Merci pour l'offre mais je ne vais pas pouvoir, je n'ai vraiment plus beaucoup de temps libre :s.

tibo - jeudi 29 décembre 2011, 17:39

Hello,
Merci pour le tuto très clair, je voudrais développer un compte à rebours d'une date précise 01/01/2010 00h00 vers 01/01/2012 13h00 avec la possibilité de l'accélerr et de le ralentir… avez vous une solution ?

Galdon - jeudi 29 décembre 2011, 23:42 - site

@tibo : oui il y a moyen de faire ce genre de compte à rebours avec des dates, mais pas avec la méthode présentée dans ce tuto (qui utilise la durée de la composition, et donc une échelle de temps réduites aux secondes voir minutes).

Il va falloir que tu utilises l'objet Date, il s'utilise de la même façon qu'en javascript, puisque le langage des expressions est basé sur javascript.

Je te conseille d'aller voir ici pour plus de précisions :
http://forums.creativecow.net/thread/227/13353.

tibo - vendredi 30 décembre 2011, 13:01

L'idée s'est de simuler le temps d'une année en quelques secondes. La séquence fera 30 secondes au total dont 15 secondes de 01 01 2011 00:00:01 à 12 12 2011 23:59:59 avec toutes les images de l'année qui défile à 25 images secondes puis 15 secondes sur la première image de l'année au ralenti…

tibo - vendredi 30 décembre 2011, 13:05

je suis photographe (www.tibo.org) et je travaille sur mon premier film qui se passe entre tokyo et singapour. J'aurais besoin d'un sérieux coup de main sur after effect et final cut qui pourrais être rémunéré même si le budget est plutôt mini. Tu es peut être le bon contact ou quelqu'un que tu connais…

Galdon - vendredi 30 décembre 2011, 15:51 - site

Merci pour la proposition, mais j'ai pas le temps malheureusement.

Je vais essayer de jeter un œil à ce que tu veux faire, si j'y arrive rapidement je t'enverrai le projet After Effects.

tibo - vendredi 30 décembre 2011, 21:10

merci, c'est sympa…

Galdon - samedi 31 décembre 2011, 13:07 - site

C'est bon j'ai réussi, j'ai mis le fichier sur Stockmotion :

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

Télécharger

tibo - dimanche 1 janvier 2012, 09:43

top, merci… à suivre…
Belle année à finalclap !…

Laisser un commentaire