Wwwebber's Blog

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

%d bloggers like this: