Wwwebber's Blog

Meteor Based Blitter Engine

Posted in bitmapdata, image effects by wwwebber on February 21, 2010

Following up on my last post on how to dynamically, scale and apply filters to display objects and then copy these into bitmapdatas , I wanted to implement the following

Source Code

1) A Meteor class that pre calculates and precaches its rotation, scale etc.. into arrays (thus gaining a performance boost ) Again, I feel the need to give a link out to 8bitrocket.com here regarding this entire idea of bitmapdata blitting for performance gains . Unlike the last post, this one would require also rotating the meteors (just a few extra lines) and storing all of the rotations into an array (I’m actually using the new Vector class…but same idea) Here’s the updated meteor class.
2) Create a Meteor Manager class (self descriptive) for adding new meteors etc..

It ended up working pretty well. Here’s about the only code you need in your main document class to get the meteors going

//create a bitmapdata --which our MetoerManager can blit to
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x0000);
//create a bitmap to house the bitmapdata
var bmp = new Bitmap(canvas);

//create the Manager object
var mFact:MeteorSpawnFactory = MeteorSpawnFactory.getInstance();;
//pre-cache the bitmapdata

//let the manager know about the bitmapdata that it'll blit to
mFact.canvas = super.canvas;

//"spawn" a new at x = 100 and y = 200
mFact.addSpawn(100, 200);

Source Code

Tagged with:

Comments Off on Meteor Based Blitter Engine

Actionscript 3: BitMapData–how to Dynamically Apply a filter, scale and then center BitmapData

Posted in bitmapdata, image effects, Uncategorized by wwwebber on February 21, 2010

Basically, if you are wondering how to create a new BitmapData by scaling a display object and also applying a filter and you would like to keep track of the new center of your scaled bitmapdata …this example is for you.

I was working on a new game for my online math games site and I wanted to be able to create a new BitmapData that was a scaled down version of a library item. This in itself is easy but it required a bit of extra to work to also be able to scale the display object dynamically as well as dynamically apply a filter , and all the while keep track of the center of the ‘real object’ (ie the radius of a original circular meteor). Knowing the true center of the bitmapdata as well as the radius of the ‘real’ object (ie not counting the filter) is necessary for doing collision testing in the math game.

I have attached a flash cs3 version of the file whose demo you can see here and download the cs3 file here. As an aside, I hate using timeline code but I wanted to provide this example in a single file…so I put all the code in the main time line. The code does all of the work and places a red dot at the calculated center of the bitmap. This sort of stuff is useful in games that requiring blitting aka 8bitrocket.com style

1) create instance of library item (in my case a meteor)
2) Scale down or up the item
3) apply filter around item
4) create a new bitmapdata based on the size of the scaled meteor and the size of the filter (both dynamic)
5) keep track of the ‘actual’ radius of the scaled meteor (ie sans the filter)

Bitmapdata .disose()

Posted in actionscript 3, bitmapdata, fraction games, math games by wwwebber on November 30, 2008

This is just some venting…I am working a fraction game..i’ve tentatively called “Fraction Wars”..basically you blast up equivalent fractions. Anyway, I’m using a fair amount of blitting ala 8 bit rocket style. I decide to create and cache some text animations that use this blitting technique. The logic is that I would cache all the text animations that were likely to occur during the more intense parts of the game and then just blit them to the main canvas, a single bitmapdata object that spans most of the screen. (for in between levels when not much action was occuring, I used regular old text fields and transitionmanagers).

The morale of my wasted time is that bitmapdata’s dispose() method is DESTRUCTIVE. Only use it if you don’t need ANY reference that given bitmapdata. I knew this before today , just didn’t see how it

I wasted more time than I care to share over the following embarrising fact that I had a timer loop that

1) created new bitmapdata by drawing from a text field
2) store bitmapdata in a slot in an array
3) before moving on to the next iteration of the timer, I called .dispose() on the new bitmapdata

I know it seems obviuos now

Comments Off on Bitmapdata .disose()

Loading External BitmapData into Vector of Type BitmapData

Posted in actionscript 3, bitmapdata, flash player 10, vector by wwwebber on November 22, 2008

I’m working on a math game that requires many external images to be loaded into Actionscript 3’s new Vector class (typed array) . It took me a bit of experimenting to determine how to properly load external images into a Vector of type BitmapData. Before the new the typed arrays of our new Vector class, I didn’t have to worry about the type of the data that I was storing (arrays can handle any type)…now, it’s a whole new ball game

. In the end, you just cast the content of the loader object to a Bitmap then access that Bitmap’s “.bitmapData” property…see a simplified version of my code below.

//Here’s my BitmapData Vector
var explosionVec:Vector. = new Vector.();

//load external png
var _loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded,false,0, true);
_loader.load( new URLRequest(“bath/To/Image/explosion.png”));

function loaded(e:Event):void{
//cast content to bitmap
var bmp:Bitmap = Bitmap(_loader.content);
//store the bitmapData from the Bitmap!
explosionVec[0] = bmp.bitmapData;


Comments Off on Loading External BitmapData into Vector of Type BitmapData

Bitmapdata Image Effects in Actionscript 3 demo with code

Posted in bitmapdata, image effects by wwwebber on November 17, 2008

Well, I started this Blog for a few reasons, one of which is to share code that others might find useful.. Today I had to create some classes that I assumed would be easy to find on the internet…well, now they are (at least if you can find my blog)

Here’s a Demo

I work on several websites and am currently doing some work on site for a Dentist’s website…anyway, I needed an image slideshow that would provide some neat transition effects.

I expected to be able to find something on the web that I could just copy paste and pawn off as my own, but there was nothing out there that was perfect. There’s something close at Flep Studio. However, after downloading their code I realized, I’d just have to write my own to acheive what I wanted.

In the end, my code is pretty far from Flep Studio. I ended up writing 2 distinct Actionscript 3 classes that manipulate Bitmapdata. It was easier to create a separate object for each square that would flash bright white then fade away. The codes’ much sloppier than it could be, but if you like the code you can download the source (.fla and classes). If you’re going to just copy and paste this code, you will need some images in your library. The ImageTrans class which is the document class assumes that there are five images (jpg, png or whathave you) with the following linkage identifiers

  • Picture1
  • Picture2
  • Picture3
  • Picture4
  • Picture5

You can see the final product below.

import flash.display.MovieClip;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Point;
import flash.events.TimerEvent;
import flash.geom.*;
import flash.display.*;
import flash.net.*;
import flash.events.*;
import flash.geom.*;
import flash.utils.*;

public class ImageTrans extends MovieClip{

private var timer:Timer;
private var updateInterval:int = 10;
const NUMBER_ROWS: Number = 13;
const NUMBER_COLS:Number = 13;
var currentRow:int=0;
var currentCol:int =0;
private var index:int =1;

private var currentBD:BitmapData;
private var nextBD:BitmapData;
private var canavsBD:BitmapData;
private var arrayofImg:Array;
private var bmp:Bitmap;

//delay betwen pics
var delayTimerTimer:int =1000;

private static var delayTimer:Timer;

private function initOnce():void{
delayTimer = new Timer(delayTimerTimer,1);
arrayofImg = new Array();
canavsBD = new BitmapData(stage.stageWidth*2,stage.stageHeight*2,false);
arrayofImg.push(new Picture1(0,0) );
arrayofImg.push(new Picture2(0,0));
arrayofImg.push(new Picture5(0,0));
arrayofImg.push(new Picture4(0,0));
arrayofImg.push(new Picture3(0,0));

canavsBD.copyPixels(arrayofImg[0],arrayofImg[0].rect,new Point());

currentBD = arrayofImg[1];
nextBD = arrayofImg[2];

bmp = new Bitmap(canavsBD)//canavsBD);

timer = new Timer(updateInterval);


public function ImageTrans():void{

function nextOne(e:TimerEvent):void{
var nextIndex:int;

if(index == arrayofImg.length-1)

nextIndex = index+1;

if( index == arrayofImg.length)
index = 0;
nextIndex = 1;

currentBD= new BitmapData(nextBD.width,nextBD.height);
currentBD.draw(arrayofImg[index] );

nextBD= new BitmapData(nextBD.width,nextBD.height);


public function go(e:TimerEvent):void{

var w:Number =currentBD.width/ NUMBER_COLS;
var h:Number = currentBD.height/NUMBER_ROWS;

var rect:Rectangle=new Rectangle(w*currentCol-1, h* currentRow-1,w+2,h+2);
var _point:Point =new Point( currentCol*w, currentRow*h);

//add one point toeither isde to make up for any small gaps in bitmapdata size
var tmpBd:BitmapData = new BitmapData(rect.width,rect.height,false);
canavsBD.copyPixels(currentBD,rect, _point);

var f:FadingBD = new FadingBD(rect,_point,tmpBd);
stage. addChild(f);

if(currentCol != NUMBER_COLS)
currentCol ++;
else if(currentCol == NUMBER_COLS )

if(currentCol == NUMBER_COLS && currentRow == NUMBER_ROWS )

private function delayNext():void{



}//end of imageTrans class

import flash.display.*;
import flash.filters.*;
import flash.geom.*;

import flash.events.*

public class FadingBD extends Sprite{

private static var rootRef:DisplayObjectContainer;
private var mc:MovieClip;
private var rect:Rectangle;
private var _point:Point;
private var myBd:BitmapData;
private var bmp:Bitmap;

public static function setRoot(t:DisplayObjectContainer):void{
rootRef = t;

public function FadingBD(r:Rectangle,p:Point,bd:BitmapData){

_point =p;
myBd = new BitmapData(r.width,r.height,false,0xffffff);
bmp = new Bitmap(myBd);
mc = new MovieClip();
var b:BlurFilter =new BlurFilter(4,4,1);

mc.filters =[b];

mc.x =p.x;


private function go(e:Event):void{
mc.alpha -= .1;
if(mc.alpha <= 0) end(); } private function end():void{ removeEventListener(Event.ENTER_FRAME,go); mc.removeChild(mc.getChildAt(0)); rootRef.removeChild(mc); bmp=null myBd.dispose(); mc.filters=[]; mc = null; myBd.dispose(); myBd = null; } } }

Comments Off on Bitmapdata Image Effects in Actionscript 3 demo with code