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)

Php Script-Process, Display and Watermark all images in a Directory

Posted in free php scripts, image effects by wwwebber on December 13, 2009

I needed a bit of break from some large projects I’ve been working on so I made up a little script that will process, display and watermark all images in a directory. The script makes use of 2 classes. One class is a ImageViewer . This takes an image and watermerks it with whatever text you want.(font size and text is hard coded..so doesn’t work well for really small images…sorry just don’t have the time for that level of finesse at the moment)

The other class processes(DisplayImageDir) a directory by –it gets a list of all images in a given directory (anything with .jpg, .jpeg, .png, or .bmp)

The script will output a double columned display of all of the images in the directory with the watermark added!

You can download the scirpt

Here’s are some demo pages
Images of Linear Equations

This script could definitely be improved and generalized. I simply wanted to make it easier for search engines and users of my site to be able to find, and if possibly download the many, many images I have over at Math Warehouse. However, I did want to ensure that there was a copyright watermark on each file.

The script works right out of the box, is open source and hopefully will be useful for someone.

This script ran on a Godaddy shared hosting account–about as budget as it gets so if you’re host doesn’t support the features for the script…it might be time for you to upgrade your account!

Also, note that I named one of the files .php5 to ensure that it was processed by php 5–this was necessary on teh GoDaddy server…you might need to rename the file as well as teh associated variable which is located in DisplayImageDir.class.php

Comments Off on Php Script-Process, Display and Watermark all images in a Directory

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