Accentsconagua

TimelineLite Ultimate Starter Guide afspelen regelen

Code
Share

In de vorige sessie heb ik een begin gemaakt met het maken van een basis TimelineLite. Vandaag laat ik je de methoden en eigenschappen zien die je gaat gebruiken om het afspelen van je TimelineLite te regelen. Door deze methoden en eigenschappen te combineren, kunt u de ingebouwde functionaliteit van TimelineLite uitbreiden om snel vooruit en afspeel- / pauzeerknoppen te maken. Ik zal ook laten zien hoe eenvoudig het is om een ​​Slider-component in te stellen om te gebruiken als een TimelineLite-scrubber.

TijdlijnLite in actie

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:

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

Bekijk de Screencast

TimelineLite-afspeelmethoden

De volgende methoden geven u nauwkeurige controle over het afspelen van uw TimelineLite

  • spelen() -Begint met afspelen vanaf de huidige positie.
  • pauze() - Stopt de tijdlijn.
  • omgekeerde() - Laat de tijdlijn achteruit gaan. Als u alleen de richting van de tijdlijn wilt omkeren en niet in de omgekeerde richting wilt afspelen, kunt u een forceResume-parameter van false doorgeven - d.w.z.. omgekeerd (false).
  • hervatten() - Begint vanaf de huidige positie te spelen zonder van richting te veranderen (vooruit of achteruit).
  • herstarten() - Speelt de tijdlijn vanaf het begin af

Aangepaste afspeelbedieningen

Door de ingebouwde methoden en eigenschappen te combineren, is het eenvoudig om geavanceerde functionaliteit te creëren:

Vooruitspoelen - U kunt een snel vooruitsturen-besturingselement maken door het tijdschaal eigenschap en het gedwongen afspelen in een voorwaartse richting.

 private function fastForwardHandler (e: MouseEvent): void tl.timeScale = 4; tl.play ();

Afspelen / Pauzeren Schakelen - Als u wilt schakelen tussen de spelende en gepauzeerde staten, negeert u de gepauzeerd eigendom. Het is belangrijk om ervoor te zorgen tijdschaal en omgekeerd eigenschappen worden ingesteld op de normale waarden, omdat deze kunnen worden gewijzigd door de snel vooruit- en achteruitknoppen.

 privéfunctie playPauseHandler (e: MouseEvent): void resetTimeScale (); tl.reversed = false; tl.paused =! tl.paused;

Schuifregelaar Component Scrubber - Met het onderdeel Slider kunt u vrij eenvoudig door de tijdlijn bladeren door de huidige vooruitgang van de tijdlijn. De schuifregelaar is ingesteld om waarden tussen 0 en 100 uit te voeren. In de code wordt deze waarde geconverteerd naar een getal tussen 0 en 1.

 import fl.controls.Slider; import fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); privéfunctie sliderChange (e: SliderEvent): void tl.currentProgress = slider.value * .01; // forceert de tijdlijn om te stoppen wanneer de scrubber wordt vrijgegeven. tl.pause ();

Huiswerk

Wat? Je geeft me huiswerk? Ja! Ik wil dat je je beste bent. Buig je hersenspier met deze kleine uitdaging.

  • Maak een TimelineLite die zes items animeert
  • Maak knoppen voor afspelen, pauzeren en omdraaien zoals in het demobestand hierboven
  • Maak knoppen met samengestelde functionaliteit zoals snel terugspoelen en langzaam vooruitspoelen

Om dit materiaal echt te leren is niets beter dan erin duiken en je handen een beetje vies maken.

Conclusie

Tot nu toe heb ik je redelijk wat informatie gegeven over het maken en besturen van TimelineLite-animaties. Hoewel er enkele duidelijke overeenkomsten zijn in de manier waarop je TimelineLite en Flash IDE tijdlijnanimaties beheert, vind ik het geweldig hoe TimelineLite animators zoveel meer controle geeft met de omgekeerde(), herstarten(), en hervatten() methoden. De tijdschaal en huidige vooruitgang eigenschappen openen enkele echt interessante mogelijkheden die in de toekomst nog meer zullen worden besproken.

In de volgende video laat ik je zien hoe je labels aan TimelineLite-instanties kunt toevoegen, zodat je gemakkelijk naar bepaalde secties van je tijdlijnen kunt navigeren. Tijdlijnlabels werken op dezelfde manier als framelabels in de Flash IDE, maar met wat extra functionaliteit. Het gaat heel leuk worden.

Als je vragen of opmerkingen hebt over deze tutorial - of je huiswerk;) - plaats dan gerust een reactie hieronder.

Bedankt voor het kijken!

Code
×