MovieClip mit AS3 als JPEG und PNG speichern

CIX Blog / Kategorie / Flash Programmierung,

MovieClip mit AS3 als JPEG und PNG speichern

verfasst 26.03.2010 von MediaCix | kurze URL: /t979 | 3 Kommentare

Auf der Suche nach brauchbaren Anleitungen oder Tutorials wie man mittels Flash AS3 die Inhalte von MovieClips (z.B. dynamisch erzeugte Bilder oder Videos) als Grafik auf dem Server speichern kann, waren unzählige Beispiele die entweder falsch waren oder wo Teile fehlten. Nach einigen Stunden fummeln ist dann doch eine brauchbare Lösung entstanden.

Im folgenden Beispiel wurden 3 Klassen benutzt:

» Flash ActionScript

// Base64 für Flash

import encoding.Base64;

// PNG erstellen

import encoding.PNGEncoder;

// JPEG erstellen

import encoding.JPGEncoder;

Die Base64-Klasse wird dazu benutzt, um später (und auch besser) den Images-Stream über POST zu übertragen. Bei vielen Tutorials klappte diese gar nicht.

Im Beispiel wurde ein MovieClip mit dem Namen "box" benutzt.

» Flash ActionScript

// BitmapData vom MC box erstellen

var bitmapData:BitmapData = new BitmapData(box.width, box.height);

Als nächstes werden die Klassen für die Übertragung definiert.

» Flash ActionScript

var reg:URLRequest = new URLRequest("/as3_mc_to_img.php");

var loader:URLLoader = new URLLoader();

var variables:URLVariables = new URLVariables();

reg.method = URLRequestMethod.POST;

Für diese Beispiel wurden 2 Button erstellt. Einer soll aus dem MC eine PNG-Grafik erzeugen, und der andere soll eine JPEG-Grafik erzeugen. Beim Klick auf den jeweiligen Button erzeugt dann das jeweiligen Image-Stream und wandelt diesen Stream mit Bas64 als String um:

» Flash ActionScript

// PNG erstellen

btn_png.addEventListener(MouseEvent.CLICK, SavePNG );

function SavePNG(event:MouseEvent) {

 bitmapData.draw(box);

 var img:ByteArray = PNGEncoder.encode(bitmapData);

 variables.png_file = 'file.png';

 variables.stream = Base64.encodeByteArray(img);

 reg.data = variables;

 loader.load(reg);

 navigateToURL(reg, "_blank");

}



// JPEG erstellen

btn_jpg.addEventListener(MouseEvent.CLICK, SaveJPG );

function SaveJPG(event:MouseEvent) {

 bitmapData.draw(box);

 var myEnc:JPGEncoder = new JPGEncoder(70);

 var img:ByteArray = myEnc.encode(bitmapData);

 variables.jpg_file = 'file.jpg';

 variables.stream = Base64.encodeByteArray(img);

 reg.data = variables;

 loader.load(reg);

 navigateToURL(reg, "_blank");

}

Wichtig ist bei dynamischen Grafiken oder Videos, dass die Inhalte für bitmapData zur Laufzeit erstellt werden. Im Beispiel wurde mit Absicht eine Uhr eingebaut um zu zeigen, dass auch aus dynamsichen MCs eine Grafik jederzeit erzeugt werden kann.

Hier nun das Online-Beispiel:

Natürlich gibt es auch das komplette Beispiel hier auch als Download:

Datei: as3_mc_to_img.zip
Größe: ca. 3.878 MByte
Upload: 2010-12-26 12:29:10
Downloads: 298

bisherige Kommentare

29.04.2010

Philip meint dazu:
Toll! Herzlichen Dank. Weisst du ob es möglich ist, transparente PNGs zu erstellen?

Viele Grüsse

Philip

30.04.2010

Unbekannt meint dazu:
Hmmm, habe ich noch nicht probiert. Aber im Prinzip ist ja dem Flash immer eine Hintergrundfarbe definiert. Müsste mal ausgetestet werden.

06.10.2011

manu meint dazu:
voll gut, genau das was ich gesucht habe :)
vielen dank!

neuen Kommentar schreiben

Themen mit ähnlichen Inhalten

- keine weiteren Themen gefunden -

Tags zum Beitrag

pngencoder jpgencoder bitmapdata