Programmierte Bewegung

Teil 2: Workshop: Flash Tweening mit Actionscript 2

Testen Sie den Film. Egal, wo Sie den Movieclip loslassen, er strebt immer zurück zur Position 195/26 und verkleinert sich auf 100 Prozent. Statt direkt an die Endposition zu springen, entsteht ein elastischer Effekt.

Malen nach Zahlen

Einer der schönsten Surf-Tipps des letzten Jahres in Sachen Flash war die Homepage der Werbeagentur Leo Burnett. Der User bekommt einen Stift in die Hand und kann damit auf die Bildschirmfläche zeichnen.

Gleichzeitig aber nutzt das Interface die Mauskoordinaten, um die Hauptnavigation im dreidimensionalen Raum perspektivisch zu verändern. Da die Freiheitsgrade begrenzt sind, läuft der Nutzer nicht Gefahr, verloren zu gehen, und somit bleibt die Oberfläche trotz ihrer komplexen Technologie recht einfach bedienbar.

Die virtuelle Haptik ist herausragend. Den Hintergrund dieser Technik bildet die Draw-API. Das ist jene Schnittstelle in Flash, die aus Programmierungen Zeichnungen erstellt.

Das können statische Zeichnungen sein, etwa Geschäftsgrafiken, die sich aus den aktuellen Werten in einer Datenbank speisen. Das können aber auch sehr dynamische Zeichnungen sein, die sich während der Laufzeit vor den Nutzeraugen verändern.

Ein Beispiel hierfür ist die Möglichkeit für den User, selbst auf den Bildschirm zu zeichnen. Das Setup für eine solche Anwendung ist ziemlich einfach. Sie können einen Stift als Mauszeigerersatz definieren, dann wird das Ganze optisch plausibler. Sie können die Maus aber auch lassen, wie sie ist.

Dann benötigen Sie zunächst nur einen ganz normalen Button mit der Aufschrift clear und dem Instanznamen button. Der Rest ist Actionscript und steht im ersten Frame:

button.onRelease = loeschen;

Beobachten Sie, dass der Mauszeiger auch dann zur Hand wird, wenn Sie ein Movieclip als Button eingesetzt haben.

this.createEmptyMovieClip
("arbeitsflaeche", 999);

Hiermit erzeugen wir unseren Maltisch. Sein Z-Index wird zunächst so hoch gewählt, dass er über allem schwebt und dann tauschen wir ihn gegen den Z-Index des Buttons. Hierdurch malen Sie hinter dem Button und nicht darüber.

arbeitsflaeche.swapDepths(button);
function loeschen() {
arbeitsflaeche.clear();
updateAfterEvent();
}

Die Buttonfunktion aus der ersten Zeile räumt die Arbeitsfläche auf und aktualisiert die Darstellung am Bildschirm.

Kommen wir zur Malfunktion:

arbeitsflaeche.onMouseDown = malen;

Zunächst zieht sie mit dem Befehl moveTo den Ausgangspunkt der nächsten Zeichnung zur Maus und weg vom letzten Loslass- Punkt. Dann definiert sie eine onEnterFrame- Funktion. Das ist wichtig, weil die Zeichnung ständig aktualisiert werden soll und nicht nur ein Linien-Segment gezeichnet wird.

Flash-Workshop

© Archiv

Die einfache Zeichenfunktion ist nur ein dynamischer Mausverfolger.

In der nächsten Zeile wird die Funktion wieder eingeschränkt. Sie soll nämlich nur greifen, wenn die Maus auch bewegt wird. Das spart Rechenpower.

function malen() {
arbeitsflaeche.moveTo(_xmouse,
_ymouse);
arbeitsflaeche.onEnterFrame =
function(){
arbeitsflaeche.onMouseMove =
function(){

Nun kommt die eigentliche Zeichenfunktion. Zunächst werden Dicke, Farbe und Transparenz der Linie definiert und dann wird die Linie immer der Maus nachgeführt.

Faktisch besteht auch eine geschwungene Zeichnung aus lauter sehr kurzen Geraden. Sind die Kurven zu eckig, dann erhöhen Sie die Filmgeschwindigkeit.

arbeitsflaeche.lineStyle
(2, 0xFF0000, 100);
arbeitsflaeche.lineTo(_xmouse,
_ymouse);
updateAfterEvent();
}
}

Der Befehl lineTo ist der Zeichenbefehl. Er malt eine Linie von der letzten Position zur neuen Mauskoordinate. Bleibt noch die Funktion zum Beenden. Sie löscht einfach die beiden Event-Handler für das Malen.

arbeitsflaeche.onMouseUp =
function(){
delete arbeitsflaeche.
onEnterFrame;
delete arbeitsflaeche.onMouseMove;
}
}

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​".