Share
Nel video precedente ti ho mostrato come implementare i controlli di riproduzione di base. Oggi parlerò dell'utilizzo di etichette per contrassegnare e navigare in posizioni precise in un TimelineLite. Le etichette in TimelineLite funzionano in modo simile a come funzionano le etichette dei fotogrammi nelle timeline di Flash IDE. Ti mostrerò diversi modi per aggiungere etichette e alcuni modi intelligenti per utilizzarli. Daremo anche uno sguardo ad alcune funzionalità esclusive di TimelineMax.
Diamo un'occhiata all'esempio che costruiremo nel video:
Puoi trovare tutti i file usati per creare il file SWF sopra nei file sorgente per questo tutorial.
Esistono due metodi che è possibile utilizzare per aggiungere etichette a un TimelineLite
addLabel (label: String, time: Number): void
Aggiunge un'etichetta in un momento particolare. È più comune passare la durata attuale della timeline come il tempo.
Accentsconagua
tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // aggiungi un'etichetta chiamata transform immediatamente dopo che l'interpolazione precedente è terminata. tl.addLabel ("transform", tl.duration) tl.append (TweenMax.to (transform_mc, 1, y: endY)); insert (tween: TweenCore, timeOrLabel: * = 0): TweenCore
Quando si usa inserire() per inserire un'interpolazione, l'interpolazione verrà inserita all'ora o all'etichetta specificata nel secondo parametro. Se inserisci un'etichetta che non esiste ancora, posizionerà automaticamente quell'etichetta alla fine della timeline e quindi inserirà l'interpolazione. Questa tecnica fa inserire() agire come un aggiungere() con il valore aggiunto di creare un'etichetta.
tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // inserisce un'interpolazione e l'etichetta di trasformazione immediatamente dopo aver completato l'interpolazione precedente. tl.insert (TweenMax.to (transform_mc, 1, y: endY), "transform");
TimelineLite è intuitivo gotoAndPlay () e gotoAndStop () i metodi funzionano esattamente come quegli stessi metodi dell'oggetto MovieClip. Sebbene questo video si concentri sull'uso di gotoAndPlay con un'etichetta, puoi anche passare in un momento.
// salta all'etichetta colorata e gioca a tl.gotoAndPlay ("color"); // salta 1 secondo nella timeline e ferma tl.gotoAndStop (1); TimelineMax ci offre la capacità unica di suonare su un'etichetta particolare con tweenTo () metodo. Se MovieClip avesse un tale metodo sarebbe chiamato PlayTo (). Alla fine di questa serie ti mostrerò come aggiungere una facilità ad a tweenTo () così come una serie di altri trucchi.
A causa della natura introduttiva di questa serie ci sono alcune caratteristiche legate all'etichetta di TimelineLite / Max che non sono riuscito a coprire. Gli utenti esperti potrebbero voler leggere sull'opzionale suppressEvents parametro che può essere usato con gotoAndPlay () e gotoAndStop () nella documentazione.
TimelineMax ha un numero di funzioni per capire i nomi delle etichette in base alla loro relazione con la posizione corrente dell'headhead o un tempo specificato. Queste proprietà e metodi consentono di calcolare dinamicamente quale sia l'etichetta più vicina in qualsiasi direzione.
currentLabel - L'etichetta più vicina che è prima o dopo l'ora corrente.
getLabelBefore (time: Number) - Restituisce l'etichetta precedente (se presente) che si verifica prima del parametro time. Se non passi un tempo, verrà utilizzato il tempo corrente.
getLabelAfter (time: Number) - Restituisce l'etichetta successiva (se presente) che si verifica DOPO il parametro tempo. Se non passi un tempo, il ora attuale sarà usato.
Grazie alle potenti proprietà e ai metodi di TimelineLite / Max, è estremamente semplice navigare e controllare le timeline basate su script. Le caratteristiche relative all'etichetta che abbiamo discusso oggi in realtà non fanno altro che scalfire la superficie di ciò che può essere fatto. Una volta che avrai imparato queste tecniche di base, ti troverai a creare timeline con caratteristiche sempre più dinamiche. Supponiamo di voler impedire a un utente di fare clic sul pulsante "biblioteca" una volta nella sezione della biblioteca. Potresti semplicemente aggiungere la logica al gestore dei clic del pulsante che considera quanto segue:
Se l'etichetta precedente è uguale all'etichetta del pulsante appena cliccato, non fare nulla.
Sentiti libero di convertirlo in ActionScript se desideri un credito extra;)
Nel prossimo tutorial mostrerò tecniche avanzate per aggiungere tonnellate di tweens a una timeline con pochissimo codice e estrema precisione.
Se avete domande o commenti su questo tutorial, semplicemente postate un commento qui sotto.
Grazie per la visione!
