# Rising Grid Transition with External Images

**URL:** <https://forum.kirupa.com/t/rising-grid-transition-with-external-images/235655>\
**Category:** flash\
**Created:** [August 13, 2007, 7:45pm UTC](https://forum.kirupa.com/t/rising-grid-transition-with-external-images/235655 "2007-08-13T19:45:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ekusuki](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ekusuki/32/3988_2.png) [@ekusuki](https://forum.kirupa.com/u/ekusuki)\
**Post date:** [August 13, 2007, 7:45pm UTC](https://forum.kirupa.com/t/rising-grid-transition-with-external-images/235655/1 "2007-08-13T19:45:55Z")

</div>

Hello,  
Here is my little contribution after some time…  
First thanks Senocular for this transition… I made some modifications to the code to be able to load external images.  
Works fine, but i didn’t finish to load the first image, if someone would like to contribute… feel free…

================================  
import flash.display.BitmapData;

function loadXML(loaded) {  
if (loaded) {  
xmlNode = this.firstChild;  
//declare image and description as array  
image = [];  
description = [];  
total = xmlNode.childNodes.length;  
for (i=0; i\<total; i++) {  
//image\* will store value from the inner tag \<image\>XXXX\</image\>  
image\* = xmlNode.childNodes\*.childNodes[0].firstChild.nodeValue;  
//description\* will store value from the inner tag \<caption\>XXXX\</caption\>  
description\* = xmlNode.childNodes\*.childNodes[1].firstChild.nodeValue;  
}  
firstImage();  
} else {  
content.text = “file not loaded!”;  
}  
}  
xmlAlbum = new XML();  
xmlAlbum.ignoreWhite = true;  
xmlAlbum.onLoad = loadXML;  
xmlAlbum.load(“album.xml”);  
p=0;

Stage.scaleMode = ‘noScale’;

var speed = 25;  
var rate = 5;  
var focallength = 250;  
var maxheight = 100;  
var origin = new flash.geom.Point(320, 480);

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(640,480);  
var transclips;

click\_mc.swapDepths(2);

function firstImage() {  
var primeira = true;  
loadTransBitmap(image[p]);  
}

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

function getNextImage(){  
p++;  
p %= image.length;  
return image[p];  
}  
var clips = createGrid(this, 1, transbmp, 10, 10);

function loadTransBitmap(id){  
// create an empty movie clip to load the image into  
this.createEmptyMovieClip(“holder\_img”, this.getNextHighestDepth());

```
// create the movie clip loader and movie clip loader listener objects
var mcl:MovieClipLoader = new MovieClipLoader();
var mcll:Object = new Object();

// when the image finishes loading
mcll.onLoadInit = function (mc:MovieClip) {
	// create another empty movie clip to attach the bitmap to (duplicate of the image)
	var temp_mc = this.createEmptyMovieClip("bmd_mc", this.getNextHighestDepth());
	// create the BitmapData Object
	// the BitmapData object has the same width and height as the original image
	var tempbmp:BitmapData = new BitmapData (mc._width, mc._height);
	// copy/duplicate the content of a movie clip
	tempbmp.draw(mc);
	transbmp.copyPixels(tempbmp, tempbmp.rectangle, basepoint);
	tempbmp.dispose();
	mcl.unloadClip(holder_img);
	mcl.removeListener(mcll);
	if (primeira = true) {
		var banana = createGrid(_root, this.getNextHighestDepth(), transbmp, 10, 10);
		primeira = false;
	}
}
// load the image, add the listener
mcl.loadClip(id, holder_img);
mcl.addListener(mcll);

```

}

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];

```

}