TimelineLite Ultimate Starter Guide Arbeta med etiketter

I den tidigare videon visade jag dig hur man implementerar grundläggande uppspelningskontroller. Idag ska jag prata om att använda etiketter för att markera och navigera till exakta platser i en TimelineLite. Etiketter i TimelineLite fungerar på samma sätt som rammärken fungerar i Flash IDE-tidslinjer. Jag visar dig flera sätt att lägga till etiketter och några kloka sätt att använda dem. Vi tar också lite titt på några exklusiva funktioner till TimelineMax.


TimelineLite in Action

Låt oss ta en titt på det exempel vi bygger i videon:

Du kan hitta alla filer som används för att skapa SWF ovan i källfilerna för denna handledning.


Titta på Screencast


Lägga till etiketter i en TimelineLite

Det finns två metoder du kan använda för att lägga till etiketter i en TimelineLite

addLabel (etikett: String, tid: Number): void
Lägger till en etikett vid en viss tidpunkt. Det är vanligast att passera tidslinjeens nuvarande tid som tiden.

 tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // lägg till en etikett med namnet transformera omedelbart efter det att föregående intervall slutförts. tl.addLabel ("transform", tl.duration) tl.append (TweenMax.to (transform_mc, 1, y: endY));

insert (tween: TweenCore, timeOrLabel: * = 0): TweenCore
När man använder Föra in() För att infoga en tween, kommer tweenen att infogas vid den tidpunkt eller etikett som anges i den andra parametern. Om du lägger in på en etikett som inte existerar kommer den automatiskt att placera den etiketten vid slutet av tidslinjen och sedan infoga intervallet. Denna teknik gör Föra in() agera som en bifoga() med mervärdet att skapa en etikett.

 tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // sätt in en tween och transformeringsetiketten omedelbart efter att föregående mellanrum har slutförts. tl.insert (TweenMax.to (transform_mc, 1, y: endY), "transform");

Navigera till etiketter

TimelineLite är intuitivt gotoAndPlay () och gotoAndStop () metoder fungerar precis som samma metoder för MovieClip-objektet. Även om den här videon fokuserar på att använda gotoAndPlay med en etikett, kan du också skicka in en tid också.

 // hoppa till färgetiketten och spela tl.gotoAndPlay ("färg"); // hoppa 1 sekund i tidslinjen och sluta tl.gotoAndStop (1);

TimelineMax ger oss den unika möjligheten att spela till en viss etikett med tweenTo () metod. Om MovieClips hade en sådan metod skulle det kallas spela till(). I slutet av denna serie kommer jag att visa dig hur man lägger till en lätthet på en tweenTo () liksom ett antal andra knep.

På grund av introduktionsegenskaperna i denna serie finns det några etikettrelaterade funktioner i TimelineLite / Max som jag inte fick täcka. Avancerade användare kanske vill läsa på den frivilliga suppressEvents parameter som kan användas med gotoAndPlay () och gotoAndStop () i dokumentationen.

TimelineMax's Label Helpers

TimelineMax har ett antal funktioner för att räkna ut namnen på etiketter baserat på deras relation till aktuell position för spelhuvudet eller en viss tid. Dessa egenskaper och metoder gör det möjligt att dynamiskt beräkna vad närmaste etikett är i vilken riktning som helst.

Fast egendom

current - Närmaste etikett som är vid eller tidigare den aktuella tiden.

metoder

getLabelBefore (tid: Number) - Returnerar föregående etikett (om någon) som inträffar före tidsparametern. Om du inte skickar in en tid kommer nuvarande tid att användas.

getLabelAfter (tid: Number) - Returnerar nästa etikett (om någon) som inträffar efter tidsparametern. Om du inte skickar in en tid, aktuell tid kommer att användas.

Slutsats

På grund av de kraftfulla egenskaperna och metoderna i TimelineLite / Max är det extremt lätt att navigera och styra dina skriptbaserade tidslinjer. De etikettrelaterade funktionerna som vi har diskuterat idag skrapar verkligen ytan på vad som kan göras. När du väl har tagit hand om dessa grundläggande tekniker hittar du dig själv skapa tidslinjer med mer och mer dynamiska funktioner. Antag att du vill förhindra att en användare klickar på "bibliotek" -knappen när de är i bibliotekets avsnitt. Du kan helt enkelt lägga till logik på knappens klickhanterare som anser följande:

Om den föregående etiketten är densamma som etiketten på den knapp som bara klickades, gör ingenting.

Du kan konvertera det till ActionScript om du vill ha lite extra kredit;)

I nästa handledning kommer jag att visa avancerade tekniker för att lägga till massor av tweens till en tidslinje med mycket liten kod och extrem precision.

Om du har några frågor eller kommentarer på denna handledning, skriv bara en kommentar nedan.

Tack för att du tittade!