Grid Transition

programming flash
1

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(sizecol, sizerow, 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 < 0) return;
if (this.rotate > Math.PI){
    this.rotate = Math.PI;
    delete this.onEnterFrame;
}

if (this.transition && this.rotate >= (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];

}

2

[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:

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

With this code (basic example):

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.senocular.com/flash/tutorials/faq/#setintscope

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

3

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