TimelineLite Ultimate-Starterhandbuch Mit Labels arbeiten

Im vorherigen Video habe ich Ihnen gezeigt, wie Sie grundlegende Steuerelemente für die Wiedergabe implementieren. Heute werde ich über die Verwendung von Labels zum Markieren und Navigieren zu genauen Positionen in einem TimelineLite sprechen. Labels in TimelineLite funktionieren ähnlich wie Frame-Labels in Flash IDE-Timelines. Ich zeige Ihnen mehrere Möglichkeiten, Etiketten hinzuzufügen und einige clevere Möglichkeiten, sie zu verwenden. Wir werden auch einige Features näher betrachten, die exklusiv für TimelineMax sind.


TimelineLite in Aktion

Schauen wir uns das Beispiel an, das wir in das Video einbauen werden:

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


Hinzufügen von Labels zu einem TimelineLite

Es gibt zwei Methoden, um einem TimelineLite Beschriftungen hinzuzufügen

addLabel (label: String, time: Number): void
Fügt ein Label zu einem bestimmten Zeitpunkt hinzu. Es ist am gebräuchlichsten, die aktuelle Dauer der Zeitleiste als Zeit zu übergeben.

 tl.append (TweenMax.to (align_mc, 1, x: endX))); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0))); // füge ein Label mit dem Namen transform unmittelbar nach Beendigung des vorherigen Tweens hinzu. tl.addLabel ("transform", tl.duration) tl.append (TweenMax.to (transform_mc, 1, y: endY));

insert (Tween: TweenCore, timeOrLabel: * = 0): TweenCore
Beim Benutzen einfügen() Um ein Tween einzufügen, wird das Tween zu der im zweiten Parameter angegebenen Zeit oder Beschriftung eingefügt. Wenn Sie ein Label einfügen, das noch nicht vorhanden ist, wird dieses Label automatisch am Ende der Zeitleiste platziert und dann das Tween eingefügt. Diese Technik macht einfügen() benimm dich wie ein anhängen () mit dem zusätzlichen Wert der Erstellung eines Labels.

 tl.append (TweenMax.to (align_mc, 1, x: endX))); tl.append (TweenMax.to (align_mc, .2, autoAlpha: 0))); // Fügen Sie ein Tween und das Transformationsetikett unmittelbar nach Abschluss des vorherigen Tween ein. tl.insert (TweenMax.to (transform_mc, 1, y: endY), "transform");

Zu Labels navigieren

TimelineLite ist intuitiv gotoAndPlay () und gotoAndStop () Methoden funktionieren genauso wie die gleichen Methoden des MovieClip-Objekts. Obwohl sich dieses Video auf die Verwendung von gotoAndPlay mit einem Label konzentriert, können Sie auch eine bestimmte Zeitspanne passieren.

 // Springe zum Farbetikett und spiele tl.gotoAndPlay ("color"); // 1 Sekunde in die Timeline springen und tl.gotoAndStop (1) stoppen

TimelineMax gibt uns die einzigartige Fähigkeit, mit einem bestimmten Label zu spielen tweenTo () Methode. Wenn MovieClips eine solche Methode hätte, würde sie aufgerufen spielen(). Am Ende dieser Serie werde ich Ihnen zeigen, wie Sie eine einfache Möglichkeit hinzufügen können tweenTo () sowie eine Reihe anderer Tricks.

Aufgrund des einleitenden Charakters dieser Serie gibt es einige markenbezogene Funktionen von TimelineLite / Max, auf die ich nicht eingehen konnte. Fortgeschrittene Benutzer möchten sich möglicherweise mit dem optionalen Produkt vertraut machen suppressEvents Parameter, der mit verwendet werden kann gotoAndPlay () und gotoAndStop () in der Dokumentation.

TimelineMax-Labelhelfer

TimelineMax verfügt über eine Reihe von Funktionen, mit denen Sie die Namen der Labels anhand ihrer Beziehung zur aktuellen Position des Abspielkopfs oder einer bestimmten Zeit ermitteln können. Diese Eigenschaften und Methoden ermöglichen es, dynamisch zu berechnen, was das nächstgelegene Etikett in eine beliebige Richtung ist.

Eigentum

currentLabel - Das nächstgelegene Etikett bei oder vor die aktuelle Uhrzeit.

Methoden

getLabelBefore (Zeit: Anzahl) - Gibt das vorherige Label (falls vorhanden) zurück, das vor dem Zeitparameter auftritt. Wenn Sie keine Zeit vergehen, wird die aktuelle Zeit verwendet.

getLabelAfter (Zeit: Anzahl) - Gibt das nächste Label (falls vorhanden) zurück, das NACH dem Zeitparameter auftritt. Wenn Sie keine Zeit vergehen, wird die aktuelle Uhrzeit wird verwendet.

Fazit

Aufgrund der leistungsstarken Eigenschaften und Methoden von TimelineLite / Max ist es äußerst einfach, in Ihren skriptbasierten Zeitleisten zu navigieren und sie zu steuern. Die Label-bezogenen Funktionen, die wir heute besprochen haben, kratzen wirklich nur an der Oberfläche dessen, was getan werden kann. Sobald Sie sich mit diesen grundlegenden Techniken vertraut gemacht haben, erstellen Sie Zeitleisten mit immer mehr dynamischen Funktionen. Angenommen, Sie möchten verhindern, dass ein Benutzer auf die Schaltfläche "Bibliothek" klickt, sobald er sich im Bibliotheksabschnitt befindet. Sie können einfach dem Click-Handler der Schaltfläche eine Logik hinzufügen, die Folgendes berücksichtigt:

Wenn die vorherige Beschriftung der Beschriftung der Schaltfläche entspricht, auf die gerade geklickt wurde, müssen Sie nichts tun.

Fühlen Sie sich frei, dies in ActionScript umzuwandeln, wenn Sie zusätzliche Gutschrift wünschen;)

Im nächsten Tutorial werde ich fortgeschrittene Techniken zeigen, um Tonnen von Tweens zu einer Timeline mit sehr wenig Code und extremer Präzision hinzuzufügen.

Wenn Sie Fragen oder Kommentare zu diesem Tutorial haben, schreiben Sie einfach einen Kommentar.

Danke fürs zuschauen!