Programmierte Bewegung

Teil 2: Workshop: Flash Tweening mit Actionscript 2

27.4.2009 von Redaktion pcmagazin und Frank Puscher

ca. 2:15 Min
Ratgeber
  1. Workshop: Flash Tweening mit Actionscript 2
  2. Teil 2: Workshop: Flash Tweening mit Actionscript 2
  3. Teil 3: Workshop: Flash Tweening mit Actionscript 2
  4. Teil 4: 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
Die einfache Zeichenfunktion ist nur ein dynamischer Mausverfolger.
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.