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
Creiamo un oggetto sul nostro stage, clicchiamo su questo col pulsante destro e selezioniamo “Open Actions for”, si aprirà una nuova finestra.
All’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”.
A questo punto inseriamo il codice che effettuerà il restart
sym.play(0);
COME REALIZZARE UN REWIND
Creiamo un oggetto sul nostro stage, clicchiamo su questo col pulsante destro e selezioniamo “Open Actions for”, si aprirà una nuova finestra.
All’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”.
A questo punto inseriamo il codice che effettuerà il rewind
sym.playReverse(sym.getPosition());
Per 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();COME REALIZZARE UN LOOP INFINITO
Per 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);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: Edge Preview Resources Runtime API.
