Share
Im ersten Teil dieser Serie haben wir uns einen Überblick über die Fähigkeiten von TimelineLite verschafft. In diesem Video zeige ich Ihnen, wie Sie mit Ihrer ersten TimelineLite-Animation loslegen können. Sie lernen die verschiedenen Methoden und Eigenschaften kennen, die eine Grundlage für alle Lektionen bilden, die in der Zukunft entwickelt werden.
Sie finden alle Dateien, die zum Erstellen der SWF-Datei oben verwendet wurden, in den Quelldateien für dieses Lernprogramm.
Die folgenden Methoden werden verwendet, um einem TimelineLite Tweens hinzuzufügen. Es ist sehr wichtig, die subtilen Unterschiede im Video zu verstehen.
einfügen() - Fügt einer Timeline zu einem bestimmten Zeitpunkt Tweens hinzu. Wenn keine Einfügungszeit angegeben wird, wird das Tween bei einer Startzeit von null Sekunden eingefügt.
// Dieses Tween wird am Anfang der Zeitleiste eingefügt. tl.insert (TweenLite.to (mc, 1, x: 100)); // Dieses Tween wird 2 Sekunden in die Timeline eingefügt. tl.insert (TweenLite.to (mc, 1, x: 100), 2);
anhängen () - Fügt einer Zeitleiste relativ zum Ende der Zeitleiste Tweens hinzu. Der Offsetwert kann positiv oder negativ sein. Bei einem negativen Versatz können sich die Tweens überlappen.
// Dieses Tween wird direkt nachdem alle vorherigen Tweens beendet sind tl.append (TweenLite.to (mc, 1, x: 100)); // Dieses Tween wird 1 Sekunde gespielt, bevor alle vorherigen Tweens beendet sind tl.append (TweenLite.to (mc, 1, x: 100), -1);
vorangestellt () - Fügt dem Anfang einer Zeitleiste Tweens hinzu und drückt alle vorhandenen Tweens rechtzeitig vorwärts.
// Dieses Tween tritt vor allen anderen in der Zeitleiste vorhandenen Tweens auf. tl.prepend (TweenLite.to (mc, 1, x: 100));
Die folgenden Eigenschaften sind sehr nützlich, um Ihren Zeitleisten Funktionalität hinzuzufügen und um Fehler zu beheben:
Beim Erstellen eines TimelineLite können Sie eine Reihe von "speziellen Eigenschaften" an den Konstruktor übergeben. Das Video zeigt onUpdate, onComplete und pausiert. Die speziellen Eigenschaften sind alle in einem vars-Objekt enthalten.
// Diese Zeitleiste wird anfangs angehalten, und wenn sie fertig ist, // wird eine Funktion aufgerufen, die completeHandler heißt. tl = new TimelineLite (onComplete: completeHandler, paused: true);
TimelineLite bietet viele weitere Methoden, Eigenschaften und "spezielle Eigenschaften", die zu zahlreich sind, um sie hier aufzulisten. Ich bitte Sie dringend, alles in der offiziellen TimelineLite-Dokumentation enthaltene Informationen zu untersuchen. Die oben aufgelisteten sind die wichtigsten, die Sie beim Einstieg verstehen müssen. Im weiteren Verlauf dieser Serie werde ich Ihnen weitere Werkzeuge vorstellen, mit denen Sie erweiterte Einstellungen für das Setup und die Wiedergabe Ihrer Animationssequenzen erhalten.
Das nächste Video dieser Serie konzentriert sich auf die Steuerung eines TimelineLite während der Wiedergabe. Es wird alles von basic abdecken abspielen() und umkehren() Hinzufügen eines interaktiven Scrubber-Steuerelements.
Nachfolgend finden Sie ein Beispiel für den im Video verwendeten Code, um die grundlegende Struktur eines TimelineLite zu veranschaulichen.
// Konstruktor tl = new TimelineLite (); // Tweens, die Auto einführen. // insert () setzt sie alle zu einer Zeit von 0 Sekunden tl.insert (TweenMax.from (gti_mc, .5, x: -500, blurFilter: blurX: 140))); tl.insert (TweenLite.from (gti_mc.wheel1_mc, .5, Drehung: -180)); tl.insert (TweenLite.from (gti_mc.wheel2_mc, .5, Drehung: -180)); // append () fügt Tweens relativ zum Ende der Timeline hinzu //,5 Sekunden nach dem Ende der vorherigen Tweens wird dieser Text für 1 Sekunde angezeigt und dann tl.append ausgeblendet (TweenMax.from (hello_mc, .5, alpha: 0, wiederholen: 1, repeatDelay: 1, yoyo: wahr), .5); // zweiten Text einführen, 5 Sekunden nach vorherigem Tweenende tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // Farbtonfolge tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: blue), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: red), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: black), .5); // letzter Text tl.append (TweenMax.from (black_mc, .5, alpha: 0), 1); // optional: fügt am Anfang der Zeitleiste eine Blackbox-Einblendung ein tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua