Accentsconagua

TimelineLite Ultimate-Starterhandbuch Steuern der Wiedergabe

Code
Share

In der vorigen Sitzung habe ich die Erstellung eines einfachen TimelineLite durchgegangen. Heute zeige ich Ihnen die Methoden und Eigenschaften, mit denen Sie die Wiedergabe Ihres TimelineLite steuern. Durch die Kombination dieser Methoden und Eigenschaften können Sie die integrierte Funktionalität von TimelineLite erweitern, um Steuerelemente für den Schnellvorlauf und die Wiedergabe / Pause zu erstellen. Ich zeige Ihnen auch, wie einfach es ist, eine Slider-Komponente als TimelineLite-Scrubber einzurichten.

TimelineLite in Aktion

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:

Sie finden alle Dateien, die zum Erstellen der SWF-Datei oben verwendet wurden, in den Quelldateien für dieses Lernprogramm.

Schauen Sie sich den Screencast an

TimelineLite-Wiedergabemethoden

Mit den folgenden Methoden können Sie die Wiedergabe Ihres TimelineLite präzise steuern

  • abspielen() -Startet die Wiedergabe von der aktuellen Position vorwärts.
  • Pause() - Stoppt die Zeitleiste.
  • umkehren() - Lässt die Zeitleiste rückwärts laufen. Wenn Sie nur die Richtung der Timeline umkehren und die Wiedergabe nicht in umgekehrter Richtung fortsetzen möchten, können Sie den forceResume-Parameter false übergeben - d. H. umgekehrt (falsch).
  • fortsetzen() - Startet die Wiedergabe von der aktuellen Position aus, ohne die Richtung zu ändern (vorwärts oder rückwärts).
  • Neustart() - Spielt die Zeitleiste von Anfang an ab

Benutzerdefinierte Wiedergabesteuerungen

Durch die Kombination der integrierten Methoden und Eigenschaften ist es einfach, erweiterte Funktionen zu erstellen:

Schnellvorlauf - Sie können eine Schnellvorlaufsteuerung erstellen, indem Sie die Option erhöhen Zeitstrahl Eigenschaft und erzwingen die Wiedergabe in Vorwärtsrichtung.

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

Play / Pause umschalten - Um zwischen dem Spiel- und Pausestatus umzuschalten, negieren Sie einfach das pausierte Eigentum. Es ist wichtig, sich zu vergewissern Zeitstrahl und rückgängig gemacht Die Eigenschaften werden auf die normalen Werte gesetzt, da sie durch die Schaltflächen „Schnellvorlauf“ und „Rückwärts“ geändert werden können.

 private Funktion playPauseHandler (e: MouseEvent): void resetTimeScale (); tl.reversed = false; tl.paused =! tl.paused;

Schieberegler Komponentenwäscher - Die Slider-Komponente macht es relativ einfach, durch das Ändern der Zeitleiste durch die Zeitleiste zu scrubben laufender Fortschritt der Zeitleiste. Mit dem Slider werden Werte zwischen 0 und 100 ausgegeben. Im Code wird dieser Wert in eine Zahl zwischen 0 und 1 konvertiert.

 import fl.controls.Slider; import fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); private Funktion sliderChange (e: SliderEvent): void tl.currentProgress = slider.value * .01; // zwingt die Zeitleiste zum Stoppen, wenn der Scrubber freigegeben wird. tl.pause ();

Hausaufgaben

Was? Du gibst mir Hausaufgaben? Ja! Ich möchte, dass du dein bester bist. Bauen Sie Ihren Verstand mit dieser kleinen Herausforderung.

  • Erstellen Sie ein TimelineLite, das sechs Elemente animiert
  • Erstellen Sie Schaltflächen für Wiedergabe, Pause und Rücklauf wie in der obigen Demodatei
  • Erstellen Sie Schaltflächen mit zusammengesetzten Funktionen wie schnelles Zurückspulen und langsames Vor- und Zurückspulen

Um dieses Material wirklich zu erlernen, ist nichts besser, als einzutauchen und sich die Hände etwas schmutzig zu machen.

Fazit

Bisher habe ich Ihnen eine Menge Informationen zum Erstellen und Steuern von TimelineLite-Animationen gegeben. Obwohl es einige offensichtliche Gemeinsamkeiten bei der Steuerung von TimelineLite- und Flash IDE-Timeline-Animationen gibt, liebe ich es sehr, wie TimelineLite den Animatoren mit dem System so viel mehr Kontrolle bietet umkehren(), Neustart(), und fortsetzen() Methoden. Das Zeitstrahl und laufender Fortschritt Immobilien eröffnen einige wirklich interessante Möglichkeiten, die in Zukunft noch mehr diskutiert werden.

Im nächsten Video werde ich Ihnen zeigen, wie Sie Beschriftungen zu TimelineLite-Instanzen hinzufügen, damit Sie problemlos zu bestimmten Abschnitten Ihrer Zeitleiste navigieren können. TimelineLite-Labels funktionieren sehr ähnlich wie Frame-Labels in der Flash-IDE, verfügen jedoch über zusätzliche Funktionen. Es wird viel Spaß machen.

Wenn Sie Fragen oder Kommentare zu diesem Tutorial haben - oder zu Ihren Hausaufgaben;) -, schreiben Sie bitte einen Kommentar.

Danke fürs zuschauen!

Code
×