22 May 2010

Using BitmapSplit function with Tweener

Few posts ago I introduced Dynamic Bitmap Split Function. This function allows you to split any Bitmap into any (reasonable) number of column and rows and use those parts separately.

Here is one quick example of using this function together with Tweener class. Click on image to see live example.

and here is code:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.ByteArray;
import flash.geom.Rectangle;
import flash.events.Event;
import caurina.transitions.*;

var bmd1:BitmapData = new BitmapData(100, 100, false, 0x666666);
var bm1:Bitmap = new Bitmap(bmd1);
bm1.x = 120;
bm1.y = 100;
var expand:Boolean = false;
var bitmapsArray:Array = new Array();

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void
bm1.alpha = 0;
for(var k:uint = 0; k < bitmapsArray.length; k++)
var curr:uint = bitmapsArray[k].length;

for(var l:uint = 0; l < curr; l++)
{x:20*l+10, y:33*k+10, alpha:0.5, time:3, transition:"linear"});
expand = false;

function splitBitmap(_source:BitmapData, _columns:int, _rows:int):void
var _bitmapWidth:int = _source.width;
var _bitmapHeight:int = _source.height;

var _onePieceWidth:Number = Math.round(_bitmapWidth / _columns);
var _onePieceHeight:Number = Math.round(_bitmapWidth / _rows);

var _copyRect:Rectangle = new Rectangle(0, 0, _onePieceWidth, _onePieceHeight);
for(var i:int = 0; i < _columns; i++)
var tempArray:Array = new Array();

for(var j:int = 0; j < _rows; j++)
var _piece:String = "piece"+String(i)+String(j);
var temp:* = [_piece];
temp = new BitmapData(_onePieceWidth, _onePieceHeight, true, 0xFF0000CC);

var newBytes:ByteArray = _source.getPixels(_copyRect);
newBytes.position = 0;
temp.setPixels(_copyRect, newBytes);

var _newBitmap:String = "newBitmap"+String(i)+String(j);
var tempBitmap:* = [_newBitmap];
tempBitmap = new Bitmap(temp);

tempBitmap.x = i * (_onePieceWidth) + bm1.x;
tempBitmap.y = j * (_onePieceHeight)+ bm1.y;

expand = true;

splitBitmap(bmd1, 5, 3);

more examples to come.



wolfgang said...

There is no picture!? I try it and after i fix the BitmapData I have a picture but only 1 single small piece same in each spliting!?

flanture said...

hi wolfgang, can you provide more details about your problem? thanks.

wolfgang said...

H flanture, pity for me it doent work not correctly! I try lot time... until I find no way to fix it! My result is I have from that source picture one single piece from the top left corner which is repeat to all splitBitmap’s. pieces.

For sure understanding: I slit a picture size 300x300 in 3x3 pieces!
My result is a grid for 9 pieces and all contains all the same small piece from the entire source bitmap, that is the the first splitting peace on left top from the picture!
What’s wrong?

flanture said...

wolfgang, can you provide me with your source / fla so I can take a look? thank you
flanture [at] gmail [dot] com


template by blogger templates