Showing 1 - 2 of 2 total. RSS Feed WordPress RSS Feed

Duplicate SWF or raster content of an Image component

Using the BitmapData class is quite easy and fast copy or manipulate an external image loaded into a Flex application, it's quite interesting the difference between the data type of the content property of an Image component because it changes if a bitmap or a SWF has been loaded:
  • the first one is a Bitmap
  • the second on is a MovieClipLoaderAsset


In order to let you copy the content also with a SWF file loaded into the Image component you can use a Loader and the loadBytes() method.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
import mx.core.MovieClipLoaderAsset;
import mx.core.BitmapAsset;
import mx.collections.ArrayCollection;

[Embed(source="placeholder.swf")]
private const ARTWORK_PLACE_HOLDER_SWF:Class;

[Embed(source="placeholder.png")]
private const ARTWORK_PLACE_HOLDER_PNG:Class;

[Bindable]
private var collection:ArrayCollection = new ArrayCollection();

private function handleImage(e:Event):void{

if(e.currentTarget.selectedValue == "PNG"){

img.source = ARTWORK_PLACE_HOLDER_PNG;

}else{

img.source = ARTWORK_PLACE_HOLDER_SWF;

}

}

private function dumpImage(source:Image):void {

var asset:* = source.content;
var data:BitmapData;
var bitmap:Bitmap;

try{

data = Bitmap(source.content).bitmapData;
bitmap = new Bitmap(data);

collection.addItem({image:bitmap, label:"item #" + (collection.length + 1)});

}catch(error:Error){

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBitmapData);

var swf:MovieClipLoaderAsset = asset as MovieClipLoaderAsset;
loader.loadBytes(swf.movieClipData);

}

}

private function onBitmapData(e:Event):void{

e.target.removeEventListener(e.type, arguments.callee);

var content: MovieClip = MovieClip((e.currentTarget as LoaderInfo).content)
var data:BitmapData = new BitmapData(content.width, content.height);
data.draw(content, null, null, null, null, true)
var bitmap:Bitmap = new Bitmap(data)

collection.addItem({image:bitmap, label:"item #" + (collection.length + 1)});

}

]]>
</mx:Script>

<mx:HBox>
<mx:Panel title="Source image">
<mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Image id="img" source="{ARTWORK_PLACE_HOLDER_SWF}" />
</mx:HBox>

<mx:RadioButtonGroup id="imageSelector" change="handleImage(event)" />
<mx:RadioButton label="SWF" selected="true" group="{imageSelector}" />
<mx:RadioButton label="PNG" group="{imageSelector}" />

<mx:ControlBar>
<mx:Button label="Copy image" click="dumpImage(img)" />
</mx:ControlBar>
</mx:Panel>

<mx:TileList id="tileList" dataProvider="{collection}" width="450" height="500" columnCount="4" verticalScrollPolicy="on">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Image source="{data.image}" />
<mx:Label text="{data.label}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:HBox>

</mx:Application>

Center image content

If you get a bitmap data as source of an image component and you want to center it you have to create a new bitmap, create a new matrix, apply a transformation (in the snippet the translation is done accordingly to the component with) and then use again the BitmapData class to draw the new data accordingly to the transoformation
var imageData:BitmapData = BitmapData(someRawBitmapData);

var bmp:Bitmap = new Bitmap(imageData);

var matrix:Matrix = new Matrix();
matrix.translate(-((imageData.width - this.width) / 2), -((imageData.height - this.height) / 2));

var matriximage:BitmapData = new BitmapData(bmp.height, bmp.width, false, 0x00000000);
matriximage.draw(bmp, matrix);

// Suppose imgThumbnail is the ID of your component
imgThumbnail.source = new Bitmap(matriximage);
Showing 1 - 2 of 2 total. RSS Feed WordPress RSS Feed