7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Eine Einführung in das Tweening mit ActionScript 3.0

Scroll to top
Read Time: 11 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Flash ist dafür bekannt, reichhaltige interaktive Erlebnisse mit viel "Augenweide" zu bieten. Oft wird diese Augenweide durch Animation erreicht und Flash verfügt über hervorragende Animationsfunktionen. In diesem Tutorial werden wir das Tweening diskutieren. Die automatisierte Animation von Flash.


Einführung

In diesem Tutorial werde ich Folgendes diskutieren:

  • Was ist ein Tween?
  • Verwenden der Tween-Klasse.
  • Tipps und Tricks zur Verwendung der Tween-Klasse.
  • Tweening-Klassen von Drittanbietern.

Schritt 1: Was ist ein Tween?

Wikipedia erklärt Tweening wie folgt:

Zwischen- oder Zwischenschaltung ist der Vorgang des Erzeugens von Zwischenbildern zwischen zwei Bildern, um den Eindruck zu erwecken, dass sich das erste Bild reibungslos in das zweite Bild entwickelt. Zwischen den Keyframes befinden sich die Zeichnungen, die zur Illusion von Bewegung beitragen. Dazwischen ist ein Schlüsselprozess bei allen Arten von Animationen, einschließlich Computeranimationen.

Die meisten Leute, die jemals Flash verwendet haben, sind schon einmal auf ein Tween gestoßen. Seit dem frühen Beginn von Flash besteht die Möglichkeit, mithilfe der Timeline zu wechseln.

Wir werden nicht diskutieren, wie man mit der Timeline tween, sondern wie man mit ActionScript 3.0 tween!


Schritt 2: Die Tween-Klasse

Die Tween-Klasse ist die Klasse, die die gesamte Animation verarbeitet und alle Eigenschaften animieren kann, die einen numerischen Wert haben. Diese Eigenschaften können sein:

  • x position
  • y position
  • alpha (opacity)
  • usw

Obwohl die Tween-Klasse hauptsächlich zum Animieren von Anzeigeobjekten (sichtbare Objekte) verwendet wird, können Sie sie genauso effektiv zum Tweenen (zum Beispiel) der Lautstärke eines Soundkanals verwenden.


Schritt 3: Syntax der Tween-Klasse

Der Konstruktor der Tween-Klasse ist ziemlich lang, aber keine Sorge, es ist sehr einfach.

Lassen Sie uns die Parameter einzeln durchgehen. Wir möchten als Beispiel einen Movieclip mit dem Namen square einblenden. Ok, lassen Sie uns das machen:

  • Der erste Parameter ist das Objekt, das wir tweenen werden. Dies kann ein Movieclip mit dem Namen square sein.
  • Der zweite Parameter ist die Eigenschaft, die wir tweenen werden. Diese Eigenschaft muss eine Zeichenfolge sein. Wenn wir also das Alpha unseres Quadrats tweenen, verwenden wir "alpha".
  • Der dritte Parameter ist der Übergang, den das Tween verwenden wird. Ein Übergang gibt uns mehr Kontrolle darüber, wie das Tween die Eigenschaft (z.B.) animiert, die es allmählich beschleunigt. Wir werden im nächsten Schritt Übergänge besprechen.
  • Der vierte Parameter ist der Wert, bei dem die Eigenschaft beginnt. Wenn wir etwas einblenden würden, würde das Alpha bei 0 beginnen (oder wir würden das Quadrat bereits sehen).
  • Der fünfte Parameter ist der Wert, mit dem die Eigenschaft endet. Wir blenden unser Quadrat ein, sodass das Alpha am Ende 1 ist (1 Alpha = 100% Deckkraft).
  • Der sechste Parameter ist die Dauer des Tweens. Dies kann in Frames oder in Sekunden erfolgen. Standardmäßig wird die Dauer in Frames gemessen.
  • Der siebte und letzte Parameter ist ein Boolescher Wert. Dieser Boolesche Wert definiert, ob Sekunden als Maß für die Dauer verwendet werden sollen. Wenn es wahr ist, wird die Dauer in Sekunden gemessen. Standardmäßig ist dieser Parameter falsch.

Schritt 4: Übergänge

Übergänge wurden bereits in Schritt 3 erwähnt, aber lassen Sie uns näher darauf eingehen. Ein Übergang ist eine Funktion, die beschreibt, wie sich eine Eigenschaft in Richtung eines Endwerts bewegt. Diese Übergänge können auch bestimmte Effekte erzeugen, beispielsweise einen Sprung oder einen elastischen Effekt.

Es gibt viele Übergänge, die wie folgt in mehrere Klassen unterteilt wurden:

  • Back Durch die Übergänge wird das Objekt zurückgesetzt, bevor zum Endwert gewechselt wird. Stellen Sie sich ein Katapult vor, es beginnt bei 0, zieht sich auf -20 zurück und schießt anschließend auf 200 vorwärts.
  • Bounce Die Übergänge lassen das Objekt springen.
  • Elastic Die Übergänge lassen das Objekt elastisch erscheinen.
  • None Die Übergänge bewirken nichts, die Eigenschaft erreicht in einer konstanten Bewegung den Endwert.
  • Regular Die Übergänge haben einen kleinen Aufbau bis zu einer konstanten Geschwindigkeit. Denken Sie an ein Auto, es muss zuerst beschleunigen, bevor es zur Geschwindigkeit kommt.
  • Strong Die Übergänge haben einen viel größeren Aufbau bis zu einer konstanten Geschwindigkeit. Denken Sie an ein Space Shuttle, es beschleunigt auch, aber viel länger.

Schritt 5: easyIn, easyOut und easyInOut

Was machen Sie also, wenn Sie nicht allmählich beschleunigen, sondern allmählich verlangsamen möchten? Alle Übergangsklassen haben drei Funktionen:

  • easyIn Der Übergang wirkt sich zu Beginn auf die Eigenschaft aus.
  • easyOut Der Übergang wirkt sich am Ende auf die Eigenschaft aus.
  • easyInOut Der Übergang wirkt sich auf die Eigenschaft am Anfang und am Ende aus.

Diese Übergänge können als Funktion gezeichnet werden (und mit Funktion meine ich eine mathematische Funktion, eine Linie). Schauen Sie sich diesen Übergangs-Spickzettel an, um eine Vorstellung davon zu bekommen, was jeder Übergang tut. Einige der Übergänge wurden nicht erwähnt, da diese Übergänge aus der Tweener-Klasse stammen, die ich in Schritt 18 erwähnen werde.

Probieren Sie einfach die Demo aus und überprüfen Sie, wie sich jeder Übergang auf eine Eigenschaft auswirkt. Dies ist der beste Weg, um eine Vorstellung davon zu bekommen, was Übergänge mit einem Tween bewirken.


Schritt 6: Unser erstes Tween

Jetzt machen wir uns endlich an die Arbeit! Wir werden unser erstes Tween erstellen. Zeichnen Sie ein Quadrat und konvertieren Sie es in einen Movieclip. Geben Sie anschließend den Instanznamen square.

Nachdem wir unseren Movieclip haben, erstellen wir ein Tween! Zuerst müssen wir die erforderlichen Klassen importieren, da diese zur Laufzeit nicht importiert werden.

Erstellen Sie anschließend eine Variable mit dem Namen Tween vom Typ Tween.

Übergeben Sie nun die Parameter an den Konstruktor. Die Werte für unsere Parameter sind:

  • Das Objekt, das wir tweenen, ist quadratisch.
  • Die Eigenschaft, die wir tweenen, ist x.
  • Die Übergangsfunktion, die wir verwenden werden, lautet: Regular.easeInOut.
  • Die Startposition des Quadrats ist 0.
  • Die Endposition des Quadrats beträgt 400.
  • Das Tween dauert 1,5 Sekunden.
  • Das bedeutet also, dass useSeconds wahr ist.

Unser Code sieht folgendermaßen aus:

Wenn Sie den Flash-Film testen (Steuerung > Film testen), wird Folgendes angezeigt:


Schritt 7: Unsere App verstehen

Jetzt ist es Zeit, unsere Demo zu erstellen. Da es in diesem Tutorial um Tweening geht, werde ich nicht erläutern, wie die Schnittstelle erstellt wird. Öffnen Sie einfach step7.fla, das sich in den Quelldateien befindet.

Bevor wir überhaupt mit dem Schreiben einer Codezeile beginnen, schauen wir uns an, wie die Datei erstellt wird. Es gibt 4 Ebenen: Aktionen, Benutzeroberfläche, Kaninchen und Hintergrund. Wir werden unseren gesamten Code in die Ebene Aktionen schreiben. Die UI-Ebene enthält alle Komponenten unserer Benutzeroberfläche. Sehen Sie sich alle Instanznamen aller Komponenten genau an. Die Kaninchenebene enthält einen Movieclip mit dem Instanznamen rabbit. Wir werden diesen Movieclip tweenen. Die BG-Ebene enthält einfach einen Hintergrund, der einfach nichts bewirkt. Wir müssen unserem schönen Hasen einen schönen Ort geben, an dem er alles tun kann, was er will, oder?


Schritt 8: Variablen deklarieren

Es empfiehlt sich, zunächst alle (globalen) Variablen zu deklarieren, die wir verwenden werden. Der Code wurde stark kommentiert, um Ihnen eine Vorstellung davon zu geben, was jede Variable tut.

Anmerkung des Herausgebers: Ich fürchte, das ActionScript in diesem Schritt führt dazu, dass unser Syntax-Textmarker Firefox auslöst (dies passiert manchmal und ich habe keine Ahnung warum). Im Moment ist es am besten, wenn Sie es herunterladen, um einen Blick darauf zu werfen. Entschuldigung für die Unannehmlichkeiten.

Wie Sie vielleicht bemerkt haben, verwenden wir ein zweidimensionales Array. Wenn Sie noch nicht so viel Erfahrung mit Arrays haben, lesen Sie das erstaunliche Tutorial von Dru Kepple über Arrays - AS3 101: Arrays. Dieses zweidimensionale Array enthält alle möglichen Übergänge.


Schritt 9: Hinzufügen von Ereignis-Listenern

Obwohl wir Schaltflächen haben, müssen wir Ereignis-Listener hinzufügen, sonst tun unsere Schaltflächen nichts. Wenn Sie nicht verstehen, wie Ereignis-Listener funktionieren, oder mehr über das Ereignis-Framework erfahren möchten, lesen Sie mein anderes Tutorial. Sehen Sie sich das ActionScript 3.0-Ereignis-Framework genauer an.


Schritt 10: Erstellen der Animationsfunktion

Wenn Sie auf tweenButton klicken, möchten Sie mit der Animation beginnen. Dazu müssen wir einige Aufgaben ausführen:

  • Rufen Sie alle Werte von allen Komponenten ab.
  • Stellen Sie die richtigen Werte für transitionPos und easyPos ein.
  • Weisen Sie Transition die richtige Funktion aus dem Transitions-Array zu.
  • Lassen Sie Tween seinen Konstruktor und Tween-rabbit nennen.

Schritt 11: Erstellen der Reset-Funktion

Wenn Sie auf resetButton klicken, möchten Sie alle Eigenschaften von rabbit zurücksetzen. Dies ist zum Glück viel einfacher als das Erstellen der Animationsfunktion.


Schritt 12: Fühlen Sie sich stolz auf sich selbst!

Wenn Sie alles richtig gemacht haben, haben Sie die Demo erfolgreich erstellt. Herzlichen Glückwunsch, Sie haben es geschafft!

Laden Sie den gesamten Code herunter und bewundern Sie alles, was wir geschrieben haben:


Schritt 13: Warten Sie, es gibt noch mehr!

Natürlich reicht es nicht aus, zu wissen, wie man tween. Wir müssen noch Folgendes besprechen:

  • Wie man zwischen mehreren Eigenschaften wechselt.
  • Wie man Ketten von Tweens erstellt.
  • Wie Sie eine Verzögerung vor Ihren Tweens haben.
  • Tweening-Klassen von Drittanbietern.

Alle folgenden Beispiele werden mit einem Movieclip mit dem Instanznamen square erstellt.


Schritt 14: Startwert

Manchmal ist es großartig, einen Startwert für ein Tween festzulegen. In den meisten Fällen möchten Sie jedoch zwischen der aktuellen Position des Objekts wechseln. Verwenden Sie einfach die Eigenschaft des Objekts als Startwert.


Schritt 15: Mehrere Eigenschaften

Das Tweening mehrerer Eigenschaften ist sehr einfach. Verwenden Sie den Konstruktor einfach mehrmals.


Schritt 16: Kette von Tweens

Eine Kette von Tweens besteht darin, dass es mehrere Tweens gibt, von denen jeder beginnt, wenn der vorherige endet. Dazu müssen wir das Ereignis TweenEvent.MOTION_FINISH verwenden. Dieses Ereignis tritt auf, wenn ein Tween das Tween beendet.

Sie können das Ereignis TweenEvent.MOTION_FINISH auch für andere Zwecke als zum Erstellen einer Tweenkette verwenden. Stellen Sie sich eine Flash-Site vor. Nach dem Tweening einer Seite wird eine Funktion aufgerufen, die den anzuzeigenden Text lädt.


Schritt 17: Tweens mit Verzögerung

Das Erstellen eines Tweens mit Verzögerung ist dem Erstellen einer Tweenkette sehr ähnlich. Wir verwenden einen Timer. Wenn das Ereignis TimerEvent.TIMER auftritt, wird das Tween gestartet.


Schritt 18: Überprüfen Sie die Dokumentation

Die Tween-Klasse hat einige Methoden, zum Beispiel lässt die Yoyo-Funktion das Tween umgekehrt spielen. Schauen Sie sich also die Dokumentation zur Tween-Klasse an.


Schritt 19: Tweening-Klassen von Drittanbietern

Manchmal reicht die Tween-Klasse für Ihr Projekt aus. Die Verwendung der Tween-Klasse kann jedoch ein ziemlicher Aufwand sein, wenn Sie viele Eigenschaften tweeten, viele Verzögerungen haben usw.

Glücklicherweise gibt es mehrere (kostenlose) Klassen von Drittanbietern, die über viel erweiterte Tweening-Funktionen verfügen. Schauen wir uns die Vor- und Nachteile der Verwendung einer Drittanbieter-Klasse an.

Die Profis:

  • Die Entwicklungszeit ist viel schneller.
  • Tweening erfolgt viel effizienter als die Tween-Klasse. Die Leistung wird normalerweise verbessert, wenn Klassen von Drittanbietern verwendet werden.

Die Nachteile:

  • Da diese Klassen nicht integriert sind, müssen Sie sie importieren. Dies nimmt Platz in Anspruch und Ihr Flash-Projekt muss mehr geladen werden (beachten Sie, dass diese Klassen derzeit extrem klein sind.
  • Einige Klassen haben keine gute Dokumentation.

Die am häufigsten verwendeten Tweening-Klassen von Drittanbietern sind:

Ich werde nicht diskutieren, wie jede Klasse verwendet wird. Überprüfen Sie einfach die Links und finden Sie heraus, welche für Sie am besten geeignet ist.


Vielen Dank

Vielen Dank, dass Sie dieses Tutorial gelesen haben. Ich hoffe, es gibt Ihnen ein gründliches Verständnis für die Verwendung der Tween-Klasse. Es war eine Freude, für Flashtuts+ zu schreiben! Warum folgst du mir nicht auf Twitter, @DanielApt?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.