Flash Experiment – Rotation

Eine Rotation über den Abstand der Maus zum Zentrum. Dabei werden hier in diesem Beispiel nur zwei Shapes gezeichnet, um dann eine Animation & Verzerrung über Matrix-Berechnungen und BitmapData.draw() zu realisieren:

This movie requires Flash Player 9

Flash Matrix

Die Matrix Klasse ist eine Transformationsmatrix. Sie legt fest, wie ein Punkt innerhalb des Koordinatensystems einem anderen Koordinatenraum zugeordnet ist. Mit Hilfe dieser Matrix ist es möglich, Objekte zu verschieben, skalieren, drehen und zu scheren beziehungsweise zu neigen. Dabei handelt es sich um affine Transformationen, was bedeutet, dass gerade und somit parallele Linien erhalten bleiben.

Über die transform() Methode lassen sich somit DisplayObjects mit den oben beschriebenen Eigenschaften modifizieren. Aber auch der BitmapData.draw() Methode enthält als Parameter eine Matrix, welche dann bestimmt, wie das neue BitmapData-Objekt gezeichnet wird. Ein weiteres Anwendungsgebiet der Matrix ist die Bestimmung der Fülleigenschaften von display.Graphics (BitmapFill, GradientFill, GradientStyle). Hier lässt sich mit der Matrix die Art der Füllung mit bestimmen.

Die Flash-Matrix ist grundsätzlich gesehen eine 3×3-Matrix:

Flash 3x3 Matrix

Für die oben beschriebenen Transformationen werden jedoch nur die oberen beiden Zeilen verwendet. Die Werte u = 0, v = 0 und w = 1 verhalten sich neutral. Diese untere Zeile wird nicht verwendet, da Flash nur im 2D-Raum operiert und die oben beschiebenen Werte werden somit vorausgesetzt. Dies bedeutet die Flash-Matrix sieht eigentlich so aus:

Flash 2x3 Matrix

Für die Verschiebung werden die tx und ty Eigenschaften verändert:

Flash Matrix Verschiebung

Für die Skalierung werden die Eigenschaften a (sx) und d (sy) verändert:

Flash Matrix Neigung

Bei der Rotation werden die vier Werte a, b, c und d verändert mit der folgenden Werteberechnung:
a -> cos(alpha)
b -> -sin(alpha)
c -> sin(alpha)
d -> cos(alpha)

Flash Matrix Rotation

Das Scheren, beziehungsweisen Neigen lässt sich mit den Eigenschaften b und c definieren:
b -> tan(neigungx)
c -> tan(neigungy)

Flash Matrix Neigung

Anwendungsbeispiel:

Anwendung findet die Matrix zum Beispiel beim „kopieren“ von Bildteilen. Nimmt man ein Bitmap als Ausgangsgrafik und will einen bestimmten Bereichen davon in ein anderes BitmapData-Objekt zeichnen, ist eine Matrix unerlässlich. Zunächst wird ein leeres BitmapData-Objekt erstellt, mit der Größe der zu kopierenden Fläche. Des Weiteren wird ein Rectangle-Objekt benötigt mit ebenfalls der selben Größe. In der nun zu erstellenden Matrix werden die tx und ty Eigenschaften auf den negativen Wert der Koordinaten des Punktes gesetzt, der die linke obere Ecke des zu kopierenden Bereiches darstellt. Mit dem folgenden Script wird nun der gewünschte Bereich in das neue BitmapData-Objekt gezeichnet:

clipBitmapData.draw(originalBitmapData, transformMatrix, null, null, clipRectangle);

Dieses Objekt kann nun als eigenständiges Objekt in Flash weiter verwendet werden.

Mehr zum Thema: Matrix in den LiveDocs

Ein kleiner Nachtrag:

Gelegentlich kann es vorkommen, dass man eine Matrix hat (zum Beispiel die TransformMatrix eines Objektes) und möchte daraus wiederum den Drehungwinkel berechnen. Und wie oben zu sehen ist, geht eine Rotation in der Matrix über die 4 Parameter a, b, c und d. Also nicht ganz einfach, wenn man die Berechnung von Hand bewerkstelligen will. Aber hier hat Adobe im fl.motion-Package ein kleine Helferklasse drin, die eben solche Probleme löst. So liefert die Funktion getRotation(m:Matrix) den gesuchten Rotationswinkel in Grad zurück. Aauch die anderen Transformationen können so ausgelesen werden.

Mehr dazu unter: MatrixTransformer