TimelineLite Ultimate Starter Guide werken met labels

In de vorige video heb ik je laten zien hoe je de basisbediening voor afspelen kunt implementeren. Vandaag ga ik het hebben over het gebruik van labels om te markeren en te navigeren naar precieze locaties in een TimelineLite. Labels in TimelineLite werken op dezelfde manier als framelabels werken in Flash IDE-tijdlijnen. Ik zal je meerdere manieren laten zien om labels toe te voegen en een aantal slimme manieren om ze te gebruiken. We zullen ook enkele functies bekijken die exclusief zijn voor TimelineMax.


TijdlijnLite in actie

Laten we eens kijken naar het voorbeeld dat we in de video gaan bouwen:

U vindt alle bestanden die zijn gebruikt om de SWF hierboven te maken in de bronbestanden voor deze zelfstudie.


Bekijk de Screencast


Labels toevoegen aan een TimelineLite

Er zijn twee methoden die u kunt gebruiken om labels aan een TimelineLite toe te voegen

addLabel (label: String, time: Number): void
Voegt een label toe op een bepaald tijdstip. Het is gebruikelijk om de huidige duur van de tijdlijn als de tijd door te geven.

 tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // voeg onmiddellijk een label met de naam transform toe nadat de vorige tween is voltooid. tl.addLabel ("transform", tl.duration) tl.append (TweenMax.to (transform_mc, 1, y: endY));

insert (tween: TweenCore, timeOrLabel: * = 0): TweenCore
Tijdens gebruik voegen () om een ​​tween in te voegen, wordt de tween ingevoegd op het tijdstip of label dat is opgegeven in de tweede parameter. Als u een label invoegt dat nog niet bestaat, plaatst u dat label automatisch aan het einde van de tijdlijn en voegt u vervolgens de tween in. Deze techniek maakt voegen () gedraag je als een toevoegen () met de toegevoegde waarde van het maken van een label.

 tl.append (TweenMax.to (align_mc, 1, x: endX)); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0)); // voeg een tween en het transformatielabel in onmiddellijk nadat de vorige tween is voltooid. tl.insert (TweenMax.to (transform_mc, 1, y: endY), "transform");

Navigeren naar labels

TimelineLite is intuïtief gotoAndPlay () en gotoAndStop () methoden werken precies zoals diezelfde methoden van het MovieClip-object. Hoewel deze video zich richt op het gebruik van gotoAndPlay met een label, kunt u deze ook in een bepaalde tijd invoeren.

 // ga naar het kleurlabel en speel tl.gotoAndPlay ("kleur"); // spring 1 seconde de tijdlijn in en stop tl.gotoAndStop (1);

TimelineMax geeft ons het unieke vermogen om met een bepaald label naar een bepaald label te spelen tweenTo () methode. Als MovieClips zo'n methode had zou het worden genoemd PlayTo (). Aan het einde van deze serie zal ik je laten zien hoe je een gemak aan een kunt toevoegen tweenTo () evenals een aantal andere trucs.

Vanwege het inleidende karakter van deze serie zijn er een aantal labelgerelateerde functies van TimelineLite / Max die ik niet heb besproken. Gevorderde gebruikers willen mogelijk het optionele lezen suppressEvents parameter die kan worden gebruikt met gotoAndPlay () en gotoAndStop () in de documentatie.

TimelineMax's Label Helpers

TimelineMax heeft een aantal functies voor het uitzoeken van de namen van labels op basis van hun relatie tot de huidige positie van de afspeelkop of een opgegeven tijd. Deze eigenschappen en methoden maken het mogelijk om dynamisch te berekenen wat het dichtstbijzijnde label in welke richting dan ook is.

Eigendom

currentLabel - Het dichtstbijzijnde label dat is of eerder de huidige tijd.

methoden

getLabelBefore (time: Number) - Retourneert het vorige label (indien aanwezig) dat vóór de tijdparameter voorkomt. Als u geen tijd verstrijkt, wordt de currentTime gebruikt.

getLabelAfter (time: Number) - Retourneert het volgende label (indien aanwezig) dat zich NA de tijdparameter bevindt. Als u geen tijd verstrijkt, de huidige tijd zal gebruikt worden.

Conclusie

Vanwege de krachtige eigenschappen en methoden van TimelineLite / Max is het uiterst eenvoudig om te navigeren en uw script-gebaseerde tijdlijnen te beheren. De labelgerelateerde functies die we vandaag hebben besproken, krassen eigenlijk alleen maar op wat er kan worden gedaan. Zodra je deze basistechnieken onder de knie hebt, zul je merken dat je tijdlijnen creëert met steeds meer dynamische functies. Stel dat u wilt voorkomen dat een gebruiker op de knop "bibliotheek" klikt als deze zich in het bibliotheekgedeelte bevindt. U kunt gewoon logica toevoegen aan de klikhandler van de knop die het volgende in overweging neemt:

Als het vorige label hetzelfde is als het label van de knop waarop u zojuist hebt geklikt, doet u niets.

U kunt dit converteren naar ActionScript als u extra beltegoed wilt;)

In de volgende tutorial laat ik geavanceerde technieken zien voor het toevoegen van tonnen tweens aan een tijdlijn met zeer weinig code en extreme precisie.

Als u vragen of opmerkingen over deze tutorial heeft, kunt u hieronder een opmerking plaatsen.

Bedankt voor het kijken!