While doing a recent project I wanted to create a fade effect that worked well with the 8bit style design of the application. I wanted to use the dissolve effect, and lo and behold, flash has that function built in to the BitmapData class ( pixelDissolve ). Only problem was that the dissolve is on a pixel to pixel basis, so it did not look really authentic to a 8bit based graphics. All that was needed to do was to mimic the pixelDissolve function but apply them to squares of pixels.

First off you need to “flatten” the object you are gonna dissolve, by copying its children to a bitmap, then hiding/removing all children. ( The code is in no way optimized but it works well for small objects. The heaviest part is the copying of all children to a bitmap. )

protected function copyThisAndHideAllVisible() : void {
	if(!_bitmap) {
		_bitmap = new Bitmap();
	}
 
	showAllChildren();
 
	_bitmapData = new BitmapData(width, height, true, 0x00000000);
	_bitmapData.draw(this);
	_bitmap.bitmapData = _bitmapData;
 
	hideAllChildren();
	addChild(_bitmap);
 
}

The dissolve function:

public function chunkDissolve(coverage:Number) : void {
	var bmd:BitmapData = _bitmapData;
	var oh:int = bmd.rect.height;
	var w:int = bmd.rect.width;
	var h:int = bmd.rect.height;
 
	var seed:Number = 0;
	var square:uint = 3;
 
	while(w > 0) {
	    w -= square;
	    while(h > 0) {
		h -= square;
		seed = Math.random();
		if(seed <= coverage) {
			for (var i : int = 0;i < square;i++) {
			    for (var j : int = 0;j < square;j++) {
				bmd.setPixel32(w+i, h+j, 0x00000000);
			    }
			}
		}
	   }
	   h = oh;
	}
	_bitmap.bitmapData = bmd;
 
	if(coverage == 1) {
	    _bitmap.visible = false;
	}
}

use your favourite tween engine to tween the percentage of dissolve over a period of time:

public function get dissolve() : Number {
	return _dissolve;
}
 
public function set dissolve(value:Number) : void {
	_dissolve = value;
	chunkDissolve(_dissolve);
}

Always set dissolve to 0 and tween it up to 1. This will dissolve out the object. If you want a a similar effect dissolving the object in, apply the dissolve to an overlaying object with blendMode = BlendMode.ERASE. If so remember to set the parents blendMode to BlendMode.LAYER.

Tags: 8bit, AS3, dissolve

This entry was posted on Monday, April 26th, 2010 at 12:58 and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.