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

Creiamo un nuovo documento di dimensione 750 x 250 pixels.

Selezioniamo come colore di background #000000.

Adobe Edge Tutorial - Countdown tramite API #1

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.

Adobe Edge Tutorial - Countdown tramite API #2

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.

Adobe Edge Tutorial - Countdown tramite API #3

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

Come avrete notato il codice ricorda molto jQuery, infatti le API di Edge Animate si basano proprio su questa libreria javascript.

Adobe Edge Tutorial - Countdown tramite API #4

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.