AS2 Image Explosion to be Converted to AS3

Question

Here is the situation. I'm creating a flash website in cs5.5 for a project and fora page trasition I would like to explode the background image into random pieces and then load the next frame (In CS3 there was a timeline effect to do this but was removed by cs4+). I have found the AS2 script to explode the image (with Tweener.as V1.33 (for AS2)) but does anyone know how to get it to work with AS3? Thanks

Code follows:

    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Point;
    import caurina.transitions.Tweener;
    //
    var container:MovieClip = this.createEmptyMovieClip("container_mc", this.getNextHighestDepth());
    var bmp:BitmapData = BitmapData.loadBitmap("careca");
    var grid:Number = 20;
    var rect:MovieClip;
    var depth:MovieClip = this;
    var spacement:Number = 0;
    var count:Number = 0;
    var rows:Number = 0;
    var a:Number, b:Number, c:Number, d:Number;
    var rects:MovieClip = depth.createEmptyMovieClip("rects_mc", depth.getNextHighestDepth());
    var pieces:Array = new Array();
    //
    container.attachBitmap(bmp, container.getNextHighestDepth());
    container._visible = false;
    //
    function init() {
    create();
    }
    function randRange(min:Number, max:Number) {
    var randomNum:Number = Math.round(Math.random()*(max-min+1)+(min-.5));
    return randomNum;
    }
    function clearBitmaps() {
    rects.swapDepths(0);
    rects.removeMovieClip();
    }
    function create() {
    for (a=1; a<=Math.round(container._height/grid); a++) {
    drawLine();
    rows++;
    }
    rects._x = Stage.width/2-rects._width/2;
    rects._y = Stage.height/2-rects._height/2;
    }
    function drawLine() {
    for (b=0; b<Math.round(container._width/grid); b++) {
    rect = rects.createEmptyMovieClip("rect"+String(rows)+String(b)+"_mc", rects.getNextHighestDepth());
    bmp[i] = new BitmapData(grid, grid, true);
    //
    bmp[i].copyPixels(bmp, new Rectangle(grid*b, grid*rows, grid, grid), new Point(0, 0));
    rect.attachBitmap(bmp[i], rect.getNextHighestDepth());
    rect.initX = (rect._width+spacement)*b;
    rect.initY = (rect._height+spacement)*rows;
    rect.randomX = randRange(-Stage.width, Stage.width);
    rect.randomY = randRange(-Stage.height, Stage.height);
    rect.randomRotation = randRange(10, 360);
    rect.randomScale = randRange(0, 100);
    rect.randomAlpha = 0;
    rect.cacheAsBitmap = true;
    rect._x = rect.initX;
    rect._y = rect.initY;
    //
   pieces.push(rect);
   }
   setTimeout(animPieces, 1000);
   }
   function animPieces() {
   for (c=0; c<pieces.length; c++) {
   rect = pieces[c];
   Tweener.addTween(rect, {_scale:rect.randomScale, _rotation:rect.randomRotation, _x:rect.randomX, _y:rect.randomY, _alpha:0, time:5, transition:"easeOutExpo", onComplete:clearBitmaps});
   }
   }
   //
   init()

Source : Lemlinh.com

pioSko pioSko · Accepted Answer · 2011-11-24T13:51:27

Honestly, the code looks pretty AS3 friendly. Sure, there are modifications you have to implement, but overall you shouldn't have a problem.

First this is delete all the underscores in the properties (eg from _x to x). Also, if you have a function that returns a value you have to declare the type of variable it returns ie. String, Number, Boolean....

So, your range function would looks like this:

function randRange(min:Number, max:Number):Number {
    var randomNum:Number = Math.round(Math.random()*(max-min+1)+(min-.5));
    return randomNum;
}

Download AS3 version of Tweener or have a look at TweenMax: http://www.greensock.com/tweenmax and just replace the Tweener code to TweenMax. Very easy to do.

from:

Tweener.addTween(rect, {_scale:rect.randomScale, _rotation:rect.randomRotation, _x:rect.randomX, _y:rect.randomY, _alpha:0, time:5, transition:"easeOutExpo", onComplete:clearBitmaps});

to:

TweenMax.to(rect, 5, { scaleX:rect.randomScale, scaleY:rect.randomScale, rotation:rect.randomRotation, x:rect.randomX, y:rect.randomY, alpha:0, ease: Sine.easeOut, onComplete:clearBitmaps});

Try it. Should be easier than you think ;) If you get stuck or have quesions, fire away!

AS2 Image Explosion to be Converted to AS3

1 Answers