In this tutorial we will see how to create a countdown using the API of Adobe Edge Animate.
On this tutorial the topics discussed are:
- Object positioning
- Edge Animate API
- Conditional loops
STAGE CREATION
Create a new project and set its dimensions to 750 x 250 pixels.
Select #000000 as background color.
TEXT CREATION
Let’s create the text that will be our countdown, select the “Text Tool”, click on the state and write “9” inside it.
Set color to #FFFFFF, set object name to “Countdown”.
Position the object created on the center of the stage: using drag and drop when the object will be on the horizontal and vertical center two fuchsia lines will appear.
ANIMATION USING THE API
Move the timeline cursor to 0:01.
Now click on Insert Trigger button that you can find inside the timeline, on the left side.
A window it will open.
Inside this window insert these lines of code:
var seconds = sym.$(“Countdown”).html();
if(seconds > 0){
sym.$(“Countdown”).html(seconds – 1);
sym.play(0);
}The code execute these operations:
- retrieve the content of object “Countdown”
- control if the content is bigger than zero
- decrease the content of Countdown by 1
- get back the execution to 0:00
As you probably noted the code is very similar to jQuery… correct! Edge Animate API are based on this javascript library.
Now you will have a text that starting from 9 every second it will decrease by 1 and at 0 it will stop.
Our animation is completed and this is the result:
You can find the complete list of current Edge Animate API on the official page: Edge Preview Resources Runtime API.
For the ones reporting errors: these are caused by Adobe Edge Animate CC and following versions, Adobe have changed some APIs respect to Adobe Edge Animate 1.5 that I used for writing this Tutorial.
Beautifully simple. Thanks.
Glad to be useful 🙂
Gostei, obrigado.
Hi! I have a question: can the contents of a text object be dynamical change? I want to write a text like “powered by” where every letter begins from “a” to the correct letter (ex. “a” to p” for the first letter, and so on for the rest o the text), with a delay of 10 ms between two consecutive letter changes. I’ll appreciate if you can post some code. Thank you.
Yes, also text objects could change. You can view an example here: Adobe Edge Tutorial: dynamic content using Ajax.
By the way the effect you are looking for is really different from this tutorial and it surely needs an “ad hoc” tutorial to illustrate it.
But if you need a starting point, try on every loop to increment the character ASCII code:
var string = String.charCodeAt(sym.$("Countdown").html());if(string <= THE_ASCII_CODE_OF_THE_FINAL_CHAR){ sym.$("Countdown").html(String.fromCharCode(string + 1)); sym.play(0); }
and you will get a, b, c, d...
good idea to get started … however I must be missing something basic but I cannot get this sample to work for me …
Mmh WordPress wrongly converted my character… in the code change “seconds > 0” to “seconds > 0” and it should work 😉
Hi!
I have a problem… First I put the “9” number, then I click in the Trigger and I insert the code (click mode) and what? Nothing happens… ¿Can you help me? or send the file… 🙂 (Sorry if my english is bad, Im from Spain 😉
Hello Fernando! If you follow the tutorial step by step it should work 😛
Have you insert the code at 0:01 using Insert Trigger (ctrl + t on keyboard) and not Right Click => Open Actions for Stage?
Is “autoplay” checked in the Stage panel?
Nope, doesn’t work for me either. Maybe they changed something in the API. I guess this part doesn’t work anymore sym.$(“Countdown”).html();
From what I understand, with a simple time base trigger this should change the content to “Test” sym.$(“Countdown”).html(“Test”); but nothing happens.
But thanks for the tutorial anyway.
Shoot. I can’t get it to work… I’m new to edge (and not very tech-y), so I’m sure I missed some step. This is what I did…
1. Opened new file. Made stage black. Added type (“9”). Made it white. Named it Countdown.
2. In actions panel, moved time to :01.
3. Selected the trigger icon.
4. Pasted this code inside. var seconds = sym.$(“Countdown”).html(); if(seconds > 0){ sym.$(“Countdown”).html(seconds – 1); sym.play(0); } Closed trigger window.
5. Selected play fro beginning. Nothing happened. (I tried it with autoplay selected and unselected in stage.)
I noticed that I have two items, one called stage, one called Countdown” in my actions panel, that don’t show up in your screenshots… I’d really like it to be a clock counting down 5 minutes, so from 5:00 to 4:59 to 4:58. etc… But can’t even get this simpler 1 to work. Sigh. Can you help?
maybe it’s because all I have is cc?
For the ones having errors I think it could be that on latest Adobe Edge Animate CC, Adobe have changed something in the APIs respect to Adobe Edge Animate 1.5 I used for writing this Tutorial.
I don’t own an Adobe CC license, so I can’t test and fix it, but if you have any advice or fix for it I’ll update the tutorial 😉
Hey Riccardo,
thanks for the great tutorial , it works like a charm !
I’ve one questions, is it possible to display the countdown
in the following format: “MM:SS” like 1:30 mins ?
Thanks Vince!
Yes Vince:
1. to create the minutes you have to copy the code I’ve made for seconds and call it something like “minutes” and “minutesCountdown”;
2. to lower the minutes you have to add inside seconds controller an “if” to check if seconds are going to zero, and take them back to 60 and also decrese minutes by 1;
3. to fix the leading zero on 1 to 9 numbers you have to add an “if” to check for string length and concatenate the zero on front if length is 1.
And you should have your “mm:ss”” countdown 😉
Thanks for the tutorial I got it to work but was wondering if there was an easy way to reverse it to make it go from 0-9. Ive tried adding a reverse playback trigger but havn’t had any luck. Thanks!
Hello Aram,
if you want to have a count from 0 to 9 instead of a countdown from 9 to 0 you should change the starting number from 9 to 0 and change the code at 0.01 with
var seconds = parseInt(sym.$("Countdown").html()); if(seconds < 10) { sym.$("Countdown").html(seconds + 1); sym.play(0); } else { sym.$("Replay").show(); }Also, I did this in the latest edge 2014.1 and it worked fine!