# Cool Bitmap Transition- Make it Load Xml images

**URL:** <https://forum.kirupa.com/t/cool-bitmap-transition-make-it-load-xml-images/252607>\
**Category:** flash\
**Created:** [February 21, 2008, 5:27pm UTC](https://forum.kirupa.com/t/cool-bitmap-transition-make-it-load-xml-images/252607 "2008-02-21T17:27:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![gdesigner36](https://avatars.discourse-cdn.com/v4/letter/g/57b2e6/32.png) [@gdesigner36](https://forum.kirupa.com/u/gdesigner36)\
**Post date:** [February 21, 2008, 5:27pm UTC](https://forum.kirupa.com/t/cool-bitmap-transition-make-it-load-xml-images/252607/1 "2008-02-21T17:27:32Z")

</div>

I found this really cool transition on [senocular.com](http://senocular.com), How can I make it dynamic and load images from an xml file?

Stage.scaleMode = ‘noScale’;

var speed = 20;  
var rate = 5;  
var focallength = 250;  
var maxheight = 100;  
var origin = new flash.geom.Point(150, 300);  
var images = [“hil”, “mtn”, “ice”];

var blurfilter = new flash.filters.BlurFilter(0,0,1);  
var shadowfilter = new flash.filters.DropShadowFilter(0,45,0x0, .20, 0,0, 1, 1, false,false,false);

var raisedepth = 0;  
var imagesindex = 0;  
var basepoint = new flash.geom.Point(0,0);  
var transbmp = new flash.display.BitmapData(300,300);  
var transclips;

click\_mc.swapDepths(2);

loadTransBitmap( images[imagesindex] );  
var clips = createGrid(this, 1, transbmp, 10, 10);

function onMouseDown(){  
loadTransBitmap( getNextImage() );  
startTransition(clips, transbmp, speed, delay);  
}

function getNextImage(){  
imagesindex++;  
imagesindex %= images.length;  
return images[imagesindex];  
}

function loadTransBitmap(id){  
var tempbmp = flash.display.BitmapData.loadBitmap(id);  
transbmp.copyPixels(tempbmp, tempbmp.rectangle, basepoint);  
tempbmp.dispose();  
}

function createGrid(target, targdepth, sourcebmp, cols, rows){  
target.createEmptyMovieClip(“transition\_mc”, targdepth);  
target.transition\_mc.createEmptyMovieClip(“reveal\_mc”, 0);  
var grid = target.transition\_mc.createEmptyMovieClip(“grid\_mc”, 1);  
var col, row;  
var refRect = new flash.geom.Rectangle(0,0,0,0);  
var clips = new Array();  
clips.reveal = target.transition\_mc.reveal\_mc;  
clips.reveal.bitmap = sourcebmp.clone();  
clips.reveal.attachBitmap(clips.reveal.bitmap, 1);  
var mc;  
var depth = 0;

```
for (col = 0; col &lt; cols; col++){
    refRect.top = 0;
    refRect.left = refRect.right;
    
    for (row = 0; row &lt; rows; row++){
        refRect.right = Math.round(sourcebmp.width * (col+1)/cols);
        refRect.bottom = Math.round(sourcebmp.height * (row+1)/rows);
        
        mc = grid.createEmptyMovieClip("grid"+row+"_"+col, depth);
        mc.depth = depth;
        mc.rect = refRect.clone();
        mc._x = mc.rect.left;
        mc._y = mc.rect.top;
        mc.x = mc.rect.left;
        mc.y = mc.rect.top;
        mc.elevation = 0;
        
        mc.bitmap = new flash.display.BitmapData(mc.rect.width, mc.rect.height, true, 0);
        mc.bitmap.copyPixels(sourcebmp, mc.rect, basepoint);
        mc.attachBitmap(mc.bitmap, 1);
        
        clips.push(mc);
        depth++;
        
        refRect.top = refRect.bottom;
    }
}
return clips;

```

}  
function startTransition(clips, transbmp, speed, delay){  
transclips = clips.slice();  
raisedepth = 2\*transclips.length;  
clips.reveal.bitmap.draw(transbmp);  
onEnterFrame = transOnEnterFrame;  
}  
function transOnEnterFrame(){  
var i = rate;  
var rand, clip;  
while(i–) {  
rand = Math.floor(Math.random()\*transclips.length);  
clip = transclips.splice(rand,1)[0];  
clip.onEnterFrame = transClipOnEnterFrame;  
clip.swapDepths(raisedepth);  
raisedepth–;  
if (!transclips.length){  
break;  
delete this.onEnterFrame;  
}  
}  
}  
function transClipOnEnterFrame(){

```
this.elevation += speed;
if (this.elevation &gt; maxheight){
    resetClip(this);
    delete this.onEnterFrame;
}else{
    renderClip(this);
}

```

}  
function resetClip(mc){  
mc.elevation = 0;  
mc.x = mc.rect.left;  
mc.y = mc.rect.top;  
mc.bitmap.copyPixels(clips.reveal.bitmap, mc.rect, basepoint);  
mc.swapDepths(mc.depth);  
renderClip(mc);  
}  
function renderClip(mc){  
var scaleratio = focallength/(focallength - mc.elevation);

```
mc._x = origin.x + (mc.x - origin.x)*scaleratio;
mc._y = origin.y + (mc.y - origin.y)*scaleratio;
mc._xscale = 100*scaleratio;
mc._yscale = 100*scaleratio;

blurfilter.blurX = blurfilter.blurY = Math.floor(mc.elevation/10);
shadowfilter.distance = mc.elevation;
mc.filters = [shadowfilter, blurfilter];

```

}