Tweening cut up bitmaps

[xFlashStudentx]

Hello, I'm trying to cut up a bitmap image into pieces, and then tween each piece away sequentially. Cutting up the pieces and placing those pieces in an array is where I'm at. But to tween each piece on a timer is where I'm stuck; here's the code:


package
{
import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.geom.*;

import flash.utils.*;
import flash.utils.Timer;
import com.greensock.plugins.*;
import com.greensock.*;
import com.greensock.easing.*;

public class bitmapManipulation extends MovieClip
{

public var bitmapsArray:Array;

public function bitmapManipulation ()
{
loadBitmap ("hurricanebmw.jpg");
}

// get the bitmap from an external source
public function loadBitmap (bitmapFile:String)
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadingDone);
var request:URLRequest = new URLRequest(bitmapFile);
loader.load (request);
}


private function loadingDone (event:Event):void
{
// get loaded data
var image:Bitmap = Bitmap(event.target.loader.content);

// compute the width and height of each piece
var pieceWidth:Number = image.width / 6;
var pieceHeight:Number = image.height / 4;

// loop through all pieces
for (var x:uint=0; x<6; x++)
{
for (var y:uint=0; y<4; y++)
{

// create new piece bitmap
var newBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth,pieceHeight));
newBitmap.bitmapData.copyPixels (image.bitmapData,new Rectangle(x*pieceWidth,y*pieceHeight,pieceWidth,pi eceHeight),new Point(0,0));

// create new sprite and add bitmap data to it;
var newPiece:Sprite = new Sprite();
newPiece.addChild (newBitmap);

// add to stage;
addChild (newPiece);

// set location
newPiece.x = x*(pieceWidth+5)+20;
newPiece.y = y*(pieceHeight+5)+20;


}
}

bitmapsArray.push (newBitmap);

/*THIS IS WHERE I'M STUCK. I'm trying to learn how to cut up an image and then move each piece sequentially. I tried the code below but Im gettings errors
var timer:Timer = new Timer(1000);

timer.addEventListener (TimerEvent.TIMER, onTimer);
timer.start ();

function onTimer (evt:TimerEvent):void
{
for (var b:uint = 0; b<bitmapsArray.length; b++)
{
TweenLite.to (bitmapsArray[b+1], 1, {x:1300});
}
}

*/


}
}
}


Thanks a million for any direction.

[ifmi]

hey.

First of all these 2 logics issues:

bitmapsArray = new Array(); // you need to initialize the Array

// loop through all pieces
for (var x:uint=0; x<6; x++)
{
    for (var y:uint=0; y<4; y++)
    {

        // create new piece bitmap
        var newBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth,pieceHeight));
        newBitmap.bitmapData.copyPixels(image.bitmapData,new Rectangle(x*pieceWidth,y*pieceHeight,pieceWidth,pieceHeight),new Point(0,0));

        // create new sprite and add bitmap data to it;
        var newPiece:Sprite = new Sprite();
        newPiece.addChild(newBitmap);

        // add to stage;
        addChild(newPiece);

        // set location
        newPiece.x = x*(pieceWidth+5)+20;
        newPiece.y = y*(pieceHeight+5)+20;

        bitmapsArray.push(newBitmap); // you need to add the bitmap here in the loop
    }
}

And then:

for (var b:uint = 0; b<bitmapsArray.length; b++)
{
    TweenLite.to(bitmapsArray[b], 1, {x:1300});
}

because you are trying to access the bitmapsArray[b+1], if it will try to access the last item it always will be null.
so you need to start with:

for ( var b:uint = 1 ...

or

... b < bitmapsArray.length - 1; ...

[xFlashStudentx]

Thanks for the reply. Still having a problem. When I push the pieces in array while in the for loop, when I publish, I only see one piece that's visible. When I take it out the for loop, I see all the cut up bitmaps, but they are not tweening via the onTimer function. I tried both of your solutions. Thanks for any more assistance and thanks for the first reply.

[ifmi]

Have no idea what is wrong there...

please check this link, there is everything working:

http://goo.gl/KrNYh

[xFlashStudentx]

BINGO! The code is absolutely tight. THANK YOU !!! I AM CERTAINLY GRATEFUL FOR THE PROMPT ASSISTANCE; now I have to learn from your code and take it to the next level as I learn how to manipulate cut up bitmaps... good one ifmi!

But one more thing if you don't mind: I want to tween one piece at a time off the stage. So every time the timer runs (it is set to run at one second), I need just one piece to tween off the stage, then one second later another piece until all the pieces are off the stage.

In any event, thanks a million ifmi!

[ifmi]

Then you need a variable:

var currentPiece : uint = 0;

then in the timer function:

function onTimer(evt:TimerEvent):void
{
    if ( currentPiece < bitmapsArray.length )
    {
        TweenLite.to(bitmapsArray[currentPiece], 1, {x:1300});
        currentPiece++;
    }
    else
    {
        // do something else
    }
}

[xFlashStudentx]

Thanks again ifmi. The code is great, but the code only moves one piece and stops. I can figure the rest out from here; you helped me a lot and I appreciate it. I'll figure out why only one piece is tweening every second;


THANKS BIG-TIME!!!