Contact
Subscribe
Sep 27, 2008 
Updated on 04/27/2009: Class with some improvements to skip transparent pixels. The two images should however share the same amount (or similar) of visible pixels.
Lot of space for improvements here, if someone want to contribute very appreciated.
Ok, lot of time passed since I posted my PixelMorphing class experiment.
Seemed to me that post passed quite unobserved but then I received a lot of feedback and e-mail asking to share the source code.
Well, the first time I wanted to speed up posting and do further experimentation/optimization so I din’t prepare the source but since the main believe of this blog is that if someone ask for code I release it, here we are. Optimization still not done… I am a lazy one, so if someone want to help improve it is really welcome.
Now the steps to play with it:
- Download the PixelMorphing class
- Use it with this code:
import com.oaxoa.fx.PixelMorphing;
var pm:PixelMorphing=new PixelMorphing(pic1, pic2, 200);
addChild(pm);
pm.start();
//pm.reset();
or certainly you can place some buttons or some combo and wait for some event for it to start or reset. The main code of the previous post is this:
import com.oaxoa.fx.PixelMorphing;
import fl.controls.Button;
import fl.controls.ComboBox;
var pm:PixelMorphing=new PixelMorphing(pic1, pic2, 200);
addChild(pm);
var button1:Button=new Button();
button1.label="Start";
button1.y=203;
button1.x=3;
addChild(button1);
button1.addEventListener(MouseEvent.CLICK, onstart);
var button2:Button=new Button();
button2.label="Reset";
button2.y=203;
button2.x=3;
addChild(button2);
button2.addEventListener(MouseEvent.CLICK, onreset);
button1.width=button2.width=60;
button1.height=button2.height=25;
button2.visible=false;
function onstart(event:MouseEvent):void {
pm.start();
button1.visible=false;
button2.visible=true;
}
function onreset(event:MouseEvent):void {
pm.reset();
button2.visible=false;
button1.visible=true;
}
var ls:ComboBox=new ComboBox();
ls.addItem({label: "Sample 1", value: 1});
ls.addItem({label: "Sample 2", value: 2});
ls.addItem({label: "Sample 3", value: 3});
ls.addItem({label: "Sample 4", value: 4});
ls.addEventListener(Event.CHANGE, onpreset);
ls.x=66;
ls.y=203;
ls.height=25;
addChild(ls);
function onpreset(event:Event):void {
button2.visible=false;
button1.visible=true;
pic1.gotoAndStop(ls.selectedItem.value);
pic2.gotoAndStop(ls.selectedItem.value);
pm.reset();
}
You can find more parameters in the constructor method of the class, but only the first two are needed.
No setters & getters for the main variables but they are public so change them then invoke reset/start method if you wanna play with their values.
Parameters names are quite self-explainatory about what they do but remember one thing:
3rd and 4th parameters are offsetX and offsetY which influence if the starting and the resulting images will bel overlapped in the same position or offsetted. However I needed jsut one bitmapData to be able to move pixels across the two images. So if you have the 2 pictures that are 200x200px (as in the linked previous post) and offset them of 200 on the x, the resulting bitmapdata for the pixelMorphing will be 400x200px. If you offset of 1000px on x axis and 1000px on y axis the resulting bitmapdata will be 1200x1200px. So pay attention with CPU load and memory consumption.
Leave some comment if something not clear or just want to say hello 
19 Comments 
