Flash: CopyPixel mit BitmapData

Mit der Bitmap-Data Klasse in Flash lassen sich bestimmte ausgewählte Pixel von einem BitmapData-Objekt in ein anderes kopieren. Diese Funktion lässt sich besonders dann nutzen, wenn bestimmte Bereich eines Bildes wieder verwendet werden sollen, ohne zum Beispiel einen weitern Auschnitt laden zu müssen.

Die erforderlichen Klassen hierfür sind die BitmapData, Rectange und Point Klassen. Die BitmapData-Klasse beinhaltet die benötigte copyPixel() Funktion. Zur Verwendung werden die anderen beiden Klassen benötigt, um die erforderlichen Paramter übergeben zu können. Der eigentliche Kopiervorgang lässt sich innerhalb einer Zeile Quellcode bewerkstelligen:
bitmapData_1.copyPixels(bitmapData_2, new Rectangle(0, 0, 50, 80), new Point(51, 0))

Hier wird eine Kopie des BitmapData_1 Objektes erstellt. Als erforderliche Parameter werden nun das Zielobjekt, die Gröe des Ausschnittes als Rechteck und zuletzt der Zielpunkt im Zielobjekt angegeben. Damit sind die Pixel kopiert.
Durch die Kombination dieser Möglichkeit mit der bereits beschriebenen Umrechnung von extern geladenen Bildern (JPG) in BitmapData-Objekte lassen sich zum Beispiel einfache Puzzles erstellen. Auch eine Zoomansicht des Ausschnittes lässt sich durch die freie Skalierbarkeit des BitmapData-Objekte mittles AS ohne große Qualitätsverluste umsetzen.

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 Experiment – Pixelhole

Ein weiteres Experiment, das ein Bild auf Pixelbasis animiert. In Bezug auf die Mausposition zum jeweiligen Pixel wird eine Verschiebung generiert. Einfach klicken und ausprobieren:

This movie requires Flash Player 9

Flash Experiment – Curving

Ein kleines Experiment unter Verwendung eines Zusatzpackages von Lee Brimelow. Es wird alle 50 Millisekunden eine neue Linie mit zufälliger Farbe, Position und Winkel erzeugt und animiert. Um die Performance nicht ins unermessliche zu belasten, werden fertig animierte Linien auf ein BitmapData reduziert und von der DisplayList genommen.

This movie requires Flash Player 9

Flash Experiment – Lines

Ein kleines Flash-Experiment das knapp 1300 gebogene Linien mittels der Graphics Klasse zeichnet. Diese Linien werden dann aber nicht dem DisplayStack hinzugefügt, sondern über BitmapData.draw in ein Bitmap-Objekt gezeichnet. Damit ist eine relativ performate Animation möglich.

This movie requires Flash Player 9

Baut man diese Animation weiter aus, kann man die Überlagerungen und Alpha-Werte dazu nutzen, einen DisplacementMapfilter zu verwenden. Durch dessen Einsatz bekommt die Animation einen fluiden Eindruck.

This movie requires Flash Player 9

Video Snapshot in Flash

Wie schon ein paar mal berichtet, bietet Flash mit den Bitmap- und BitmapData-Klassen sehr viele Möglichkeiten im Umgang mit Grafiken. Diese können in vielen erdenklichen Weisen modifiziert und verändert werden. Die Möglichkeiten dieser beiden Klassen sind damit aber noch nicht ausgeschöpft.

Vielmehr lassen sich mit diesen auch Snapshots von Videos erstellen. Dazu wird zunächst eine Videokomponente erstellt in der ein Video abgespielt wird. Wird nun der Event zum Erstellen eines Snapshots ausgelöst, wird zunächst ein BitmapData-Objekt in der Größe des Videoobjektes erstellt. In dieses wird dann das Video über die draw-Methode gezeichnet. Damit ist der größte Aufwand vollzogen. Das BitmpData-Objekt kann nun über addChild einem anderen Objekt zugewiesen werden.

Vielmehr als die oben beschriebenen Schritte sind nicht nötig um Snapshots von Videos zu erstellen. Obwohl es nur ein sehr kurzes Beispiel ist, lässt sich abschätzen, wie vielseitig anwendbar dieser Ablauf ist. So lassen sich nicht nur Videos capturen, sondern auch andere, auf der Bühne befindliche Szenerien „fotografieren“. Denkbar wäre auch, ein 3D-Model über Papervision3D einzubinden und zu animieren, um so ein virtuelles Fotoshooting zu inszinieren.

Über eine Kombination mit weiteren Funktionen von Flash lassen sich die erstellten Bilder auch nachbearbeiten. Auch eine Kombination mit PHP ist möglich, welches ein JPG aus den Bitmap-Daten generiert, was wiederum heruntergeladen werden kann.

Beispiele:
campaigns.mykindaplace.com/superman
www.fullofpotential.ca

Bildskalierung per ActionScript (AS2)

Sobald ein Bild per Skript skaliert wird hat Flash ein großes Problem dieses Bild sauber darzustellen. Es entstehen Fragmente und unsaubere Bildstörungen. Ein Variante wäre das Bild in zwei Zuständen (groß, klein) zu laden und am Ende des Tweenvorganges per ActionScript auszutauschen. Jedoch ergeben sich hieraus die Probleme, dass zum einen zwei Bilder geladen werden müssen und zum anderen das Bild während des Tweens unansehnlich wird. Diese beiden Probleme lassen sich mit einer Scriptvariante lösen.

Dazu wird das Bild zunächst einmal geladen und in einem MovieClip zwischengelagert. Dieses Bild wird als Parameter an eine Funktion übergeben, die zunächst in leeres Rechteck, in der Größe des Bildes, erzeugt. Des weiteren wird das Bild als BitmapData umgerechnet. Diese Daten lässen sich über die draw-Methode in das erzeugte Rechteck legen. Somit dient das BitmapData als Füllung für das Rechteck und verhält sich somit wie zum Beispiel ein gezeichnetes Bild mit einem Verlauf. Der MovieClip mit geladenen Bild kann nun gelöscht werden, da diese Daten nicht mehr nötigt werden. Das entstandene BitmapData-Bild lässt sich nun sauber per Script skalieren und die oben beschiebenen Fragmente sind nicht mehr vorhanden.