# Grid Transition

**URL:** <https://forum.kirupa.com/t/grid-transition/262415>\
**Category:** flash\
**Created:** [June 5, 2008, 6:45pm UTC](https://forum.kirupa.com/t/grid-transition/262415 "2008-06-05T18:45:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![swtiemiss](https://avatars.discourse-cdn.com/v4/letter/s/45deac/32.png) [@swtiemiss](https://forum.kirupa.com/u/swtiemiss)\
**Post date:** [June 5, 2008, 6:45pm UTC](https://forum.kirupa.com/t/grid-transition/262415/1 "2008-06-05T18:45:13Z")

</div>

Hello everyone,

I got this script from senocular’s tutorials (thanks!), but I want to modify it.

Instead of “on mouse down,” I’d like it to play automatically after say, 5 seconds. How do I do that?

Please help!

Stage.scaleMode = ‘noScale’;

var speed = .3;  
var delay = 3;  
var switchblur = 9;

var images = [“dressy”, “casual”];  
var index = 0;  
var transbmp = new flash.display.BitmapData(627,300);  
var blurfilter = new flash.filters.BlurFilter();

loadTransBitmap(images[index]);  
var clips = createGrid(this, 1, transbmp, 40);

function onMouseDown(){  
index++;  
index %= images.length;  
loadTransBitmap(images[index]);  
startTransition(clips, transbmp, speed, delay);  
}

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

function createGrid(target, targdepth, sourcebmp, size){  
var home = target.createEmptyMovieClip(“transition\_mc”, targdepth);  
var depth = 0;  
var clips = new Array();  
var row, rows = Math.ceil(sourcebmp.height/size);  
var col = Math.ceil(sourcebmp.width/size);  
var mc;  
var offset = new flash.geom.Point(0,0);  
while(col–){  
row = rows;  
clips[col] = new Array();  
while(row–){  
mc = home.createEmptyMovieClip(“grid”+row+"\_"+col, depth);  
mc.rect = new flash.geom.Rectangle(size_col, size_row, size, size);  
mc.\_x = mc.rect.left;  
mc.\_y = mc.rect.top;  
mc.rotate = 0;  
mc.speed = 0;  
mc.bitmap = new flash.display.BitmapData(mc.rect.width, mc.rect.height, true, 0);  
mc.bitmap.copyPixels(sourcebmp, mc.rect, offset);  
mc.attachBitmap(mc.bitmap, 1);  
mc.transition = null;  
clips[col][row] = mc;  
depth++;  
}  
}  
return clips;  
}

function startTransition(clips, sourcebmp, speed, delay){  
var row, rows = clips[0].length;  
var col = clips.length;  
while(col–){  
row = rows;  
while(row–){  
clips[col][row].onEnterFrame = transOnEnterFrame;  
clips[col][row].transition = sourcebmp;  
clips[col][row].rotate = -(delay\*(col+row)/2)/Math.PI;  
clips[col][row].speed = speed;  
}  
}  
}

function transOnEnterFrame(){

```
this.rotate += this.speed;

if (this.rotate &lt; 0) return;
if (this.rotate &gt; Math.PI){
    this.rotate = Math.PI;
    delete this.onEnterFrame;
}

if (this.transition && this.rotate &gt;= (Math.PI/2)){
    this.bitmap.copyPixels(this.transition, this.rect, new flash.geom.Point(0,0));
    this.transition = null;
}

var sin = Math.sin(this.rotate);

var matrix = new flash.geom.Matrix();
matrix.tx = this.rect.left + sin*this.rect.width/2;
matrix.ty = this.rect.top + sin*this.rect.height/2;
matrix.b = matrix.c = -sin/2;
matrix.a = matrix.d = 1 + matrix.b;

this.transform.matrix = matrix;

blurfilter.blurX = blurfilter.blurY = Math.floor(switchblur*sin);
this.filters = [blurfilter];

```

}

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [June 5, 2008, 7:13pm UTC](https://forum.kirupa.com/t/grid-transition/262415/2 "2008-06-05T19:13:41Z")

</div>

[QUOTE=swtiemiss;2337453]Hello everyone, I got this script from senocular’s tutorials (thanks!), but I want to modify it. Instead of “on mouse down,” I’d like it to play automatically after say, 5 seconds. How do I do that? Please help![/QUOTE]

You can use setInterval. For example replace this function:

```auto
function onMouseDown() {
	index++;
	index %= images.length;
	loadTransBitmap(images[index]);
	startTransition(clips, transbmp, speed, delay);
}

```

With this code (basic example):

```auto
function doTransition() {
	index++;
	index %= images.length;
	loadTransBitmap(images[index]);
	startTransition(clips, transbmp, speed, delay);
}
var seconds = 5;
callTransition = setInterval(doTransition, seconds * 1000);
// 1 second = 1000 milliseconds
// so we multiply the seconds you input by 1000
// if you ever want to clear the interval use
// clearInterval(callTransition);

```

Also to learn more about setInterval, Senocular has some tutorials you might like.  
[http://www.kirupa.com/developer/actionscript/setinterval.htm](http://www.kirupa.com/developer/actionscript/setinterval.htm)  
[http://www.senocular.com/flash/tutorials/faq/#setintscope](http://www.senocular.com/flash/tutorials/faq/#setintscope)

Plus from the Flash help  
[http://livedocs.adobe.com/flash/8/main/00001766.html](http://livedocs.adobe.com/flash/8/main/00001766.html)

---

<div class="post-metadata">

**Author:** ![swtiemiss](https://avatars.discourse-cdn.com/v4/letter/s/45deac/32.png) [@swtiemiss](https://forum.kirupa.com/u/swtiemiss)\
**Post date:** [June 5, 2008, 8:08pm UTC](https://forum.kirupa.com/t/grid-transition/262415/3 "2008-06-05T20:08:31Z")

</div>

PERFECT!! Thank you so much for your help. I’ll def look into those tuts. Thanks again! 🍺