Share
Nella prima parte di questa serie abbiamo dato uno sguardo generale alle funzionalità di TimelineLite. In questo video ti mostrerò come attivarti con la tua prima animazione TimelineLite. Imparerai i vari metodi e proprietà che saranno alla base di tutte le lezioni che andranno avanti.
Puoi trovare tutti i file usati per creare il file SWF sopra nei file sorgente per questo tutorial.
I seguenti metodi vengono utilizzati per aggiungere tweens a un TimelineLite. È molto importante capire le sottili differenze coperte dal video.
inserire() - Aggiunge le interpolazioni a una timeline in un momento specifico. Se non viene specificato alcun tempo di inserimento, l'interpolazione verrà inserita ad un orario di inizio di zero secondi.
// questa interpolazione verrà inserita all'inizio della timeline tl.insert (TweenLite.to (mc, 1, x: 100)); // questa interpolazione verrà inserita per 2 secondi nella timeline tl.insert (TweenLite.to (mc, 1, x: 100), 2);
aggiungere() - Aggiunge le interpolazioni ad una timeline relativa alla fine della timeline. Il valore di offset può essere positivo o negativo. Un offset negativo consentirà alle interpolazioni di sovrapporsi.
// questa interpolazione sarà direttamente dopo che tutte le interpolazioni precedenti hanno terminato tl.append (TweenLite.to (mc, 1, x: 100)); // questa tween suonerà 1 secondo prima che tutte le interpolazioni precedenti abbiano terminato tl.append (TweenLite.to (mc, 1, x: 100), -1);
prepend () - Aggiunge le interpolazioni all'inizio di una timeline e spinge tutte le interpolazioni esistenti in avanti nel tempo.
// questa interpolazione si verifica prima di qualsiasi altra interferenza esistente nella timeline tl.prepend (TweenLite.to (mc, 1, x: 100));
Le seguenti proprietà sono molto utili per aggiungere funzionalità alle timeline e per il debug:
Quando costruisci un TimelineLite puoi passare un numero di "proprietà speciali" nel costruttore. Il video mostra suUpdate, onComplete e pause. Le proprietà speciali sono tutte contenute in un oggetto vars.
// questa timeline verrà inizialmente messa in pausa e quando sarà terminata // chiamerà una funzione chiamata completeHandler tl = new TimelineLite (onComplete: completeHandler, pause: true);
TimelineLite ha molti altri metodi, proprietà e "proprietà speciali" che sono troppo numerosi per essere elencati qui. Vi esorto a indagare su tutto ciò che c'è da offrire nella Documentazione ufficiale TimelineLite. Quelle sopra elencate sono le più importanti da capire quando si inizia. Mentre questa serie avanza, introdurrò più strumenti che userete per ottenere un controllo avanzato sull'impostazione e sulla riproduzione delle sequenze di animazione.
Il prossimo video di questa serie si concentrerà sul controllo di una TimelineLite durante la riproduzione. Coprirà tutto da base giocare() e inverso() per aggiungere un controllo interattivo dello scrubber.
Di seguito è riportato un esempio del codice utilizzato nel video per illustrare la struttura di base di un TimelineLite.
// constructor tl = new TimelineLite (); // Tween che introducono l'auto. // insert () li mette tutti in un momento di 0 secondi tl.insert (TweenMax.from (gti_mc, .5, x: -500, blurFilter: blurX: 140)); tl.insert (TweenLite.from (gti_mc.wheel1_mc, .5, rotation: -180)); tl.insert (TweenLite.from (gti_mc.wheel2_mc, .5, rotation: -180)); // append () aggiunge le interpolazioni relative alla fine della timeline //.5 secondi dopo le interpolazioni precedenti e questo testo verrà mostrato per 1 secondo e quindi attenuerà tl.append (TweenMax.from (ciao_mc, .5, alpha: 0, ripetere: 1, repeatDelay: 1, yoyo: true), .5); // introduce il secondo testo .5 secondi dopo l'interpolazione precedente termina tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // sequenza di tinte tl.append (TweenMax.to (gti_mc.body_mc, .2, tinta: blu), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tinta: rosso), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tinta: nero), .5); // ultimo testo tl.append (TweenMax.from (black_mc, .5, alpha: 0), 1); // opzionale: inserisce black box reveal all'inizio della timeline tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua