Programmierte Bewegung

Workshop: Flash Tweening mit Actionscript 2

Immer wieder die gleichen Bewegungen per Tweening umzusetzen, ist sehr aufwendig. Benutzen Sie stattdessen Tweening-Klassen von Actionscript 2.

Flash-Workshop

© Archiv

Flash-Workshop

Programmierte Bewegung

Immer wieder die gleichen Bewegungen per Tweening umzusetzen, ist sehr aufwendig. Benutzen Sie stattdessen Tweening-Klassen von Actionscript 2.

Es wird nicht lange her sein, da haben Sie im Web einen Flash-Animationseffekt gesehen, der mit enormem Aufwand produziert worden zu sein schien.

Flash-Workshop

© Archiv

Inzwischen gibt es jede Menge sogenannter Tweening-Klassen. Diese Klassen enthalten den gesamten Code für eine bestimmte Art von Bewegung und werden mithilfe einfachster Actionscript-Befehle ausgelöst und durch Parameter individuell konfiguriert.

Flash CS4 schafft die Grundlage für einen ganz neuen Markt. Animationseffekte können als Presets gespeichert und auf beliebige Objekte wiederholt angewandt werden.

Durch ein austauschbares XML-Format lassen sich fertige Effekte zum Download anbieten oder verkaufen. Googeln statt Tweening - so könnte der Workflow der Zukunft für ambitionierte Flasher lauten.

Tweening per Script

Im Wesentlichen gibt es drei Disziplinen, bei denen programmierte Animationen zum Tragen kommen: als Ersatz für klassische Tweenings, zur Manipulation von Filtereffekten und zum dynamischen Zeichnen auf der Bühne.

Dank Flash Player 10 gibt es inzwischen auch die ersten programmierten Bitmapmanipulationen im Netz (Stichwort Pixelbender).

Für die meisten Standardeffekte bringt Flash CS 3 Animationsklassen mit. So gibt es Kassen für jede Form der Animation inklusive Alpha-Tweenings. Und es gibt die Beschleuniger-Klassen für Abbremsen und Beschleunigen.

Bevor Sie eine dieser Klassen benutzen können, müssen Sie sie in den Flash-Film importieren. Entwerfen Sie eine Szene, die für einen Elastik-Effekt plausibel erscheinen würde. Im Beispiel extrahieren wir den Buchstaben t aus einem Text und lassen ihn zurück in den Text animieren.

Flash-Workshop

© Archiv

Die Kreativ-Agentur Leo Burnett lässt die Nutzer mit einem Stift auf deren Homepage zeichnen.

Wandeln Sie dazu das Objekt in einen Movieclip um und geben Sie ihm den Instanznamen buchstabe_mc.

Erzeugen Sie eine weitere Ebene, die Sie Aktionen nennen, und platzieren Sie dort im ersten Frame folgende Programmierung.Zunächst werden die Tween-Klassen importiert.

Achten Sie auf den Platzhalter * im zweiten Befehl. Er lädt alle sechs Klassen der Kategorie easing. Weiter unten werden Sie sehen, welche Klassen es gibt.

import mx.transitions.Tween;
import mx.transitions.easing.*;

Übrigens geschieht das Importieren der Klassen in dem Moment, in dem Sie Veröffentlichen drücken. Sie müssen also keine weiteren Dateien auf den Server legen.

Nun definieren wir die Interaktion mit dem Buchstaben. Klickt der Nutzer darauf, kann er ihn ziehen. Gleichzeitig wird er auf 200 Prozent vergrößert.

buchstabe_mc.onPress = drag;
function drag(){
this.startDrag();
buchstabe_mc._xscale = 200;
buchstabe_mc._yscale = 200;
buchstabe_mc.onRelease = bewegung;
buchstabe_mc.onReleaseOutside =
bewegung;
}

Wie Sie sehen, werden in der Funktion drag auch die beiden Listener für das Loslassen und damit die Animation gestartet. Das ist schön einfach, denn losgelassen kann eben nur werden, wenn vorher geklickt wurde.

Der Befehl onReleaseOutside ist eine Sicherheitsmaßnahme, wenn der Nutzer sehr schnell mit der Maus hin und her zieht.

In der dann ausgelösten Funktion wird zunächst jegliche Interaktion verboten. Hierzu werden die Listener gelöscht.

function bewegung(){
delete buchstabe_mc.onPress;
delete buchstabe_mc.onRelease;
delete buchstabe_mc.onReleaseOutside;

Dann wird der Drag-Vorgang gestoppt.

buchstabe_mc.stopDrag();

Jetzt erzeugen wir vier Tween-Programmierungen. Zwei beziehen sich auf die Position und zwei auf die Skalierung des Buchstabens. Der Variablenname vorne ist beliebig. Er dient der späteren Prüfung, ob die Animation komplettiert wurde.

Die Syntax in der Klammer folgt folgender Logik: (zu animierende Instanz, zu animierende Eigenschaft, Animationsart, Ausgangswert, Endwert, Zeit, Zeitmessungsart). Steht der letzte Parameter auf false wird in Frames gemessen, bei true in Sekunden.

var bewegung = new mx.transitions.
Tween(buchstabe_mc, "_x", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._x, 195, 2, true);
var bewegung2 = new mx.transitions.
Tween(buchstabe_mc, "_y", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._y, 26, 2, true);
var bewegung3 = new mx.transitions.
Tween(buchstabe_mc, "_xscale", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._xscale, 100, 2, true);
var bewegung4 = new mx.transitions.
Tween(buchstabe_mc, "_yscale", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._yscale, 100, 2, true);

Da alle Animationen gleich lange dauern, reicht es, wenn wir das Ende einer Bewegung abwarten, um dann die Interaktion wieder zu ermöglichen.

bewegung.onMotionStopped = function()
{
buchstabe_mc.onPress = drag;
}
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".