In questo tutorial vedremo come ottenere con Adobe Edge Animate un effetto di Countdown utlizzando le API.
In questo tutorial tratteremo i seguenti argomenti:
- Posizionamento di oggetti
- Utilizzo delle API di Adobe Edge Animate
- Creazione di Loop condizionali
CREAZIONE DELL’AMBIENTE
Creiamo un nuovo documento di dimensione 750 x 250 pixels.
Selezioniamo come colore di background #000000.
CREAZIONE DEL TESTO
Realizziamo il testo che eseguirà il nostro Conto alla Rovescia selezionando lo strumento “Text Tool”, cliccando sullo stage e scrivendo al suo interno “9”.
Come colore selezionamo #FFFFFF, come nome per l’oggetto “Countdown”.
Posizioniamo l’oggetto così creato al centro dello stage: utlizzando il drag and drop quando sarete posizionati orizzontalmente e verticalmente al centro apparirano due righe di color fucsia.
ANIMAZIONE TRAMITE API
Muoviamoci avanti di 1 secondo sulla timeline arrivando a 0:01.
A questo punto clicchiamo sul bottone Insert Trigger che potete trovare all’interno della timeline, nella parte sinistra.
Ora vi si aprirà una finestra in cui inserire codice.
All’interno della finestra inserite le seguenti righe di codice
var seconds = sym.$(“Countdown”).html();
if(seconds > 0){
sym.$(“Countdown”).html(seconds – 1);
sym.play(0);
}Il codice esegue queste operazioni:
- recuperiamo il contenuto dell’oggetto “Countdown”
- controlliamo se il testo è maggiore di 0
- diminuiamo il testo di Countdown di 1
- riportiamo il filmato a 0:00
Come avrete notato il codice ricorda molto jQuery, infatti le API di Edge Animate si basano proprio su questa libreria javascript.
In questa maniera avremo un testo che partendo da 9 ad ogni secondo scendera di 1 sino ad arrivare a 0, quindi si fermerà.
La nostra animazione è conclusa e questo sarà il risultato:
Potete trovare la lista completa delle API attualmente disponibili sulla pagina ufficiale di Edge Animate: Edge Preview Resources Runtime API.
Per chi ha riportato errori, questi sono causati dall’utilizzo di una versione di Adobe Edge Animate CC o successiva, Adobe ha cambiato alcune APIs rispetto ad Edge Animate 1.5 che ho utilizzato per scrivere questo Tutorial.
Interessante come tutorial
ora prendendo spunto da questo volevo fare un countdown a un ora/giorno preciso
ho smanettato un po’ ma non viene molto…
non e’ che hai per caso un template da passarmi?
ciao e grazie
Non ho un “template” da passarti, ma posso provare a darti qualche indicazione: dovresti sfruttare le potenzialità della funzione Date() di javascript.
Sottraendo i millisecondi della “data di scadenza” con quelli della “data attuale” e poi passando questo valore a Date() dopo dovresti riuscire a recuperare tutte le informazioni che ti servono per il countdown 😉