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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…