Fading with BitmapData

talk open source
1

Got bored and figured I’d put together a clean little example of fading using the BitmapData object.

This example is a really simple particle effect, but it get’s the point across.

code:


import flash.display.BitmapData;
import flash.filters.DropShadowFilter;

var GRAVITY:Number = 0.98;
var xSpeed:Number = 3;

var width:Number = 400;
var height:Number = 300;
var x:Number = Stage.width/2;
var y:Number = Stage.height/2;000

var container:MovieClip = this.createEmptyMovieClip("container", 10);
var canvas:BitmapData = new BitmapData(width, height, true, 0x00000000);
var white:BitmapData = new BitmapData(width, height, true, 0x11000000);
var background:BitmapData = new BitmapData(Stage.width, Stage.height, false, 0xFF333333);

var shadow:DropShadowFilter = new DropShadowFilter(1, 45, 0x444444, 100, 5, 5, 3, 3, false, false, false);

attachBitmap( background, 99 );
container.attachBitmap( canvas, 100 );

container._x = x - width/2;
container._y = y - height/2;
container.swapDepths( 100 );
container.filters = [shadow];


function onMouseMove()
{
    var x:Number = _xmouse - container._x;
    var y:Number = _ymouse - container._y;
    generateParticle(x, y);
}
function onEnterFrame()
{
    canvas.draw( white );
}

function generateParticle(startX:Number, startY:Number) : Void
{

    var point : Object = new Object();
    point.x = startX;
    point.y = startY;
    point.vy = -Math.random() * 5;    
    point.vx = Math.random() * 10 - 5;
    point.color = Math.random() * 0xFFFFFF;
    
    point.animID = setInterval(point, "move", 40);
    
    point.move = function()
    {
        canvas.setPixel( this.x, this.y, this.color );
        
        this.x += this.vx;
        this.y += this.vy;
        this.vy += GRAVITY;
        
        if (this.y > Stage.height)
        {
            clearInterval( point.animID );
            delete this;
        }
    }
}

And the swf will be posted.

Take Care.
_Michael

2

cool.great work.::thumb:

3

Here is one that is a bit different… just posting this one so you can compare and see where the fade happens, and how to adjust the colors.


import flash.display.BitmapData;
import flash.filters.DropShadowFilter;

var GRAVITY:Number = 0.98;
var xSpeed:Number = 3;

var bgcolor:Number = 0x00FFFFFF;
var fadecolor:Number = 0x11FFFFFF;

var width:Number = 400;
var height:Number = 300;
var x:Number = Stage.width/2;
var y:Number = Stage.height/2;000

var container:MovieClip = this.createEmptyMovieClip("container", 10);
var canvas:BitmapData = new BitmapData(width, height, true, bgcolor);
var white:BitmapData = new BitmapData(width, height, true, fadecolor);
var background:BitmapData = new BitmapData(Stage.width, Stage.height, false, 0xFF333333);

var shadow:DropShadowFilter = new DropShadowFilter(1, 45, 0x444444, 100, 5, 5, 3, 3, false, false, false);

attachBitmap( background, 99 );
container.attachBitmap( canvas, 100 );

container._x = x - width/2;
container._y = y - height/2;
container.swapDepths( 100 );
container.filters = [shadow];


function onMouseMove()
{
	var x:Number = _xmouse - container._x;
	var y:Number = _ymouse - container._y;
	generateParticle(x, y);
	
	updateAfterEvent();
}
function onEnterFrame()
{
	canvas.draw( white );
}

function generateParticle(startX:Number, startY:Number) : Void
{

	var point : Object = new Object();
	point.x = startX;
	point.y = startY;
	point.vy = -Math.random() * 10 - 5;	
	point.vx = Math.random() * 10 - 5;
	point.color = Math.random() * 0xFFFFFF;
	
	point.animID = setInterval(point, "move", 40);
	
	point.move = function()
	{
		canvas.setPixel( this.x, this.y, this.color );
		
		this.x += this.vx;
		this.y += this.vy;
		this.vy += GRAVITY;
		
		if (this.y > Stage.height)
		{
			clearInterval( point.animID );
			delete this;
		}
	}
}

TakeCare.
_Michael

4

This is a really good show of how well the BitmapData performs…

In this iteration everytime the user moves the mouse 100 new particles are created and their animations begin.

On my computer I still have NO lag, but as a disclaimer I’m running an AMD Athlon dual core 4600 processor, 2 gigs of ram, and an NVidea 7800 GTX. So my machine is a little above average.


import flash.display.BitmapData;
import flash.filters.DropShadowFilter;

var GRAVITY:Number = 0.98;
var xSpeed:Number = 3;

var bgcolor:Number = 0x000000000;
var fadecolor:Number = 0x11000000;

var width:Number = 400;
var height:Number = 300;
var x:Number = Stage.width/2;
var y:Number = Stage.height/2;000

var container:MovieClip = this.createEmptyMovieClip("container", 10);
var canvas:BitmapData = new BitmapData(width, height, true, bgcolor);
var white:BitmapData = new BitmapData(width, height, true, fadecolor);
var background:BitmapData = new BitmapData(Stage.width, Stage.height, false, 0xFF333333);

var shadow:DropShadowFilter = new DropShadowFilter(1, 45, 0x444444, 100, 5, 5, 3, 3, false, false, false);

attachBitmap( background, 99 );
container.attachBitmap( canvas, 100 );

container._x = x - width/2;
container._y = y - height/2;
container.swapDepths( 100 );
container.filters = [shadow];


function onMouseMove()
{
	for (var i:Number=0; i<100; i++)
	{
		var x:Number = _xmouse - container._x;
		var y:Number = _ymouse - container._y;
		generateParticle(x, y);
	}
	
	updateAfterEvent();
}
function onEnterFrame()
{
	canvas.draw( white );
}

function generateParticle(startX:Number, startY:Number) : Void
{

	var point : Object = new Object();
	point.x = startX;
	point.y = startY;
	point.vy = -Math.random() * 10 - 5;	
	point.vx = Math.random() * 10 - 5;
	point.color = Math.random() * 0xFFFFFF;
	
	point.animID = setInterval(point, "move", 40);
	
	point.move = function()
	{
		canvas.setPixel( this.x, this.y, this.color );
		
		this.x += this.vx;
		this.y += this.vy;
		this.vy += GRAVITY;
		
		if (this.y > Stage.height)
		{
			clearInterval( point.animID );
			delete this;
		}
	}
}

Take Care.
_Michael