TimelineLite Ultimate Starter Guide Arbeide med etiketter

I den forrige videoen viste jeg deg hvordan du implementerer grunnleggende avspillingskontroller. I dag skal jeg snakke om å bruke etiketter for å markere og navigere til presise steder i en TimelineLite. Etiketter i TimelineLite fungerer på samme måte som rammemerker fungerer i Flash IDE-tidslinjer. Jeg vil vise deg flere måter å legge til etiketter og noen smarte måter å bruke dem på. Vi vil også ta en liten titt på noen funksjoner som er eksklusive til TimelineMax.


TimelineLite in Action

La oss ta en titt på eksemplet vi skal bygge i videoen:

Du kan finne alle filene som brukes til å opprette SWF ovenfor i kildefilene for denne opplæringen.


Se på Screencast


Legge til etiketter til en TimelineLite

Det er to metoder du kan bruke til å legge til etiketter på en TimelineLite

addLabel (label: String, time: Number): void
Legger til en etikett på et bestemt tidspunkt. Det er mest vanlig å passere i tidslinjens nåværende varighet som tiden.

 tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // legg til en etikett som heter transformasjon umiddelbart etter at forrige tween er ferdig. tl.addLabel ("transform", tl.duration) tl.append (TweenMax.to (transform_mc, 1, y: endY));

sett inn (tween: TweenCore, timeOrLabel: * = 0): TweenCore
Når du bruker sett inn() For å sette inn en tween, vil tween bli satt inn på det tidspunktet eller etiketten som er angitt i den andre parameteren. Hvis du setter inn på en etikett som ikke eksisterer, plasserer den automatisk etiketten på slutten av tidslinjen, og setter deretter inn tweenen. Denne teknikken gjør sett inn() opptre som en føye () med merverdien av å lage en etikett.

 tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // Sett inn en tween og transformeringsetiketten umiddelbart etter at forrige tween er ferdig. tl.insert (TweenMax.to (transform_mc, 1, y: endY), "transform");

Naviger til etiketter

TimelineLite er intuitivt gotoAndPlay () og gotoAndStop () metoder fungerer akkurat som de samme metodene for MovieClip-objektet. Selv om denne videoen fokuserer på å bruke gotoAndPlay med en etikett, kan du også passere på en tid også.

 // hopp til fargelabel og spill tl.gotoAndPlay ("farge"); // hopp 1 sekund inn i tidslinjen og stopp tl.gotoAndStop (1);

TimelineMax gir oss den unike muligheten til å spille til en bestemt etikett med tweenTo () metode. Hvis MovieClips hadde en slik metode, ville det bli kalt PlayTo (). På slutten av denne serien vil jeg vise deg hvordan du legger til en letthet på en tweenTo () så vel som en rekke andre triks.

På grunn av den innledende karakteren til denne serien er det noen etikettrelaterte funksjoner i TimelineLite / Max som jeg ikke fikk til å dekke. Avanserte brukere vil kanskje lese opp på valgfritt suppressEvents parameter som kan brukes med gotoAndPlay () og gotoAndStop () i dokumentasjonen.

TimelineMax's Label Helpers

TimelineMax har en rekke funksjoner for å finne ut navnene på etiketter basert på deres forhold til gjeldende posisjon for spilleleddet eller en bestemt tid. Disse egenskapene og metodene gjør det mulig å beregne dynamisk hvilken nærmeste etikett er i hvilken som helst retning.

Eiendom

currentLabel - Den nærmeste etiketten som er på eller før Nåværende tid.

metoder

getLabelBefore (tid: Number) - Returnerer forrige etikett (hvis noen) som oppstår før tidsparameteren. Hvis du ikke går forbi en tid, vil nåværende tid bli brukt.

getLabelAfter (tid: Number) - Returnerer neste etikett (hvis noen) som oppstår etter tidsparameteren. Hvis du ikke går forbi en tid, nåværende tid vil bli brukt.

Konklusjon

På grunn av de kraftige egenskapene og metodene til TimelineLite / Max er det ekstremt enkelt å navigere og kontrollere skriptbaserte tidslinjer. De etikettrelaterte funksjonene som vi har diskutert i dag, skraper bare overflaten av det som kan gjøres. Når du får et håndtak på disse grunnleggende teknikkene, vil du finne deg selv å lage tidslinjer med flere og flere dynamiske funksjoner. Anta at du vil forhindre at en bruker klikker på "bibliotek" -knappen når de er i biblioteksseksjonen. Du kan ganske enkelt legge til logikk på knappens klikkbehandler som vurderer følgende:

Hvis den forrige etiketten er den samme som etiketten på knappen som bare ble klikket, gjør ingenting.

Du er velkommen til å konvertere det til ActionScript hvis du vil ha litt ekstra kreditt;)

I neste veiledning skal jeg vise avanserte teknikker for å legge til tonnevis av tweens til en tidslinje med svært liten kode og ekstrem presisjon.

Hvis du har spørsmål eller kommentarer til denne opplæringen, legg inn en kommentar nedenfor.

Takk for at du så på!