Saturday, 16 July 2011

Pixelated transition in Actionscript 3

In this post I have created a pixelated transition effect by using the copyPixels() method to create individual bitmaps. The bitmaps are added into sprite containers and randomised on the stage. The pieces return back to there original position when the stage is clicked.

I have defined the constants, created a new Array to hold instances of the holder and the x and y positions, and used the Loader class to loader an external image.

import utils.number.randomSign;

const SWF_WIDTH:uint = 400;
const SWF_HEIGHT:uint = 300;
const ROWS:uint = 40;
const COLS:uint = 30;

var imagesArr:Array = new Array();

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(new URLRequest(“image.jpg"));   

In the loaded function I have stored the image as a bitmap and assigned the height and width of each individual intended bitmap. I have used a double For Loop to create a copy of each bitmap piece using the copyPixels() method. Then I have added the bitmaps into a holder sprite. The pieces are shuffled by randomising the x and y positions. I have used the randomSign() method which returns a random positive or negative number. The class can be downloaded here. Finally, I have added a mouse click event to the stage.

function loaded(e:Event):void{
 var bp:Bitmap = Bitmap(;
 var bpHeight:Number = bp.width/ROWS;
 var bpWidth:Number = bp.height/COLS;
 for(var x:uint = 0; x < ROWS; x++){
  for(var y:uint = 0; y < COLS; y++){
   var newBp:Bitmap = new Bitmap(new BitmapData(bpWidth,bpHeight));
          new Rectangle(x * bpWidth, y * bpHeight, bpWidth, bpHeight),
          new Point(0,0));
   //add image holder
   var holder:Sprite = new Sprite();
   holder.x = x * bpWidth ;
   holder.y = y * bpHeight;
 //shuffle pieces 
 if(imagesArr.length == (ROWS*COLS)){
  for(var i:uint = 0; i < imagesArr.length; i++){
   var xPos:int = randomSign() * Math.random() * SWF_WIDTH/2;
   var yPos:int = randomSign() * Math.random() * SWF_HEIGHT/2
   imagesArr[i].x = xPos;
   imagesArr[i].y = yPos;

 stage.addEventListener(MouseEvent.CLICK, clicked);
This function will return the bitmap pieces back to there original position using the TweenNano class. I have tweened the x and y positions of each bitmap piece.
function clicked(e:MouseEvent):void{  
 for(var i:uint = 0; i < imagesArr.length; i++){[i],2, {x: 0,y: 0});


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP