Edge Animate Tutorial: Restart, Rewind e Loop infinito

Edge Animate Tutorial: Restart, Rewind e Loop infinito

In questo tutorial vedremo tre metodi su come rieseguire un’animazione creata con Adobe Edge Animate.

In questo tutorial tratteremo i seguenti argomenti:

  • Gestione della timeline
  • Eventi mouse legati ad oggetti
  • Utilizzo delle API di Edge Animate

PREMESSA

Edge Animate mette a disposizione due metodi per gestire l’esecuzione sulla timeline:
play() e playReverse().

Per aver più chiaro sin da subito la differenza fra questi due metodi,
qui sotto potete già vedere quel che sarà il risultato

Il pulsante RESTART, che utilizza play(), fa ripartire l’animazione dall’inizio,
il pulsante REWIND, che utilizza playReverse(), ricorda il riavvolgimento di un nastro.

COME REALIZZARE UN RESTART

Adobe Edge Tutorial: Restart, Rewind e Loop infinito #1Creiamo un oggetto sul nostro stage, clicchiamo su questo col pulsante destro e selezioniamo “Open Actions for”,
si aprirà una nuova finestra.


Adobe Edge Tutorial: Restart, Rewind e Loop infinito #2All’interno della nuova finestra clicchiamo sul pulsante [+] in alto a sinistra, si aprirà un menù a tendina.
Selezioniamo da questo il tipo di evento che scatenerà il restart, nel nostro caso “click”.


Adobe Edge Tutorial: Restart, Rewind e Loop infinito #3A questo punto inseriamo il codice che effettuerà il restart

sym.play(0);

Il codice inserito segnala ad Edge Animate di eseguire l’animazione dall’inizio (0:00 sulla timeline).

COME REALIZZARE UN REWIND

Adobe Edge Tutorial: Restart, Rewind e Loop infinito #4Creiamo un oggetto sul nostro stage, clicchiamo su questo col pulsante destro e selezioniamo “Open Actions for”,
si aprirà una nuova finestra.


Adobe Edge Tutorial: Restart, Rewind e Loop infinito #5All’interno della nuova finestra clicchiamo sul pulsante [+] in alto a sinistra, si aprirà un menù a tendina.
Selezioniamo da questo il tipo di evento che scatenerà il restart, nel nostro caso “click”.


Adobe Edge Tutorial: Restart, Rewind e Loop infinito #6A questo punto inseriamo il codice che effettuerà il rewind

sym.playReverse(sym.getPosition());

Il codice inserito segnala ad Edge Animate di eseguire l’animazione al contrario partendo dalla posizione corrente ed arrivando sino all’inizio.


Adobe Edge Tutorial: Restart, Rewind e Loop infinito #7Per fare in modo che ritornati all’inizio l’animazione riparta,
portiamo la timeline a 0:00 ed aggiungiamo al frame un’azione cliccando sul pulsante “Insert trigger” che potete trovare sulla timeline in alto nella parte sinistra.

Vi si aprirà una finestra, all’interno inserite il seguente codice

sym.play();

In questa maniera diremo ad Edge Animate, che ritornati a 0:00 di rifare partire l’animazione.

COME REALIZZARE UN LOOP INFINITO

Adobe Edge Tutorial: Restart, Rewind e Loop infinito #8Per fare in modo che giunti al termine dell’animazione questa riparta, portiamo il cursore sulla timeline al termine della nostra animazione ed aggiungiamo un’azione cliccando sul pulsante “Insert trigger”, che potete trovare sulla timeline in alto nella parte sinistra.

Vi si aprirà una finestra, all’interno inserite il seguente codice

sym.play(0);

In questa maniera direte ad Edge Animate che quando giunge al termine della vostra animazione di ripartire da 0:00.


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

Potete trovare la lista completa delle API attualmente disponibili sulla pagina ufficiale di Edge Animate: Adge Preview Resources Runtime API.

Lascia un commento

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