Edge Animate Tutorial: Countdown API

Edge Animate Tutorial: Countdown tramite API

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

Adobe Edge Tutorial - Countdown tramite API #1Creiamo un nuovo documento di dimensione 750 x 250 pixels.

Selezioniamo come colore di background #000000.

CREAZIONE DEL TESTO

Adobe Edge Tutorial - Countdown tramite API #2Realizziamo 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

Adobe Edge Tutorial - Countdown tramite API #3Muoviamoci 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:

  1. recuperiamo il contenuto dell’oggetto “Countdown”
  2. controlliamo se il testo è maggiore di 0
  3. diminuiamo il testo di Countdown di 1
  4. riportiamo il filmato a 0:00

Adobe Edge Tutorial - Countdown tramite API #4Come 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.

2 commenti su Edge Animate Tutorial: Countdown tramite API

  1. 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

    1. 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 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *