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:

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

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.

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

Kommen wir zur Malfunktion:

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.

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.

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.

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.