looking for a tutorial for THIS type of transition

[FDR]

Im just starting to learn actionscript and I was hoping someone would have a little feedback on how to do something similar to the transitions on this site.

http://www.jiolahy.it/

Im thinking its just a mask with script repeating a pattern which gradually changes, but i need some input from the experts....

thanks

FDR

[jbum]

Your assumption is right. I wrote this bit of code to mimic the effect - it creates a mask movieclip that can be used to mask an image. In this example, it's just masking a big red box.

To view the effect, attach this code to the timeline of a new blank movie. It looks better with a higher framerate (24 fps or better).

The basis of the effect is a cosine wave that is used to oscillate the little boxes a random number of times.

Some of the troublesome math in the script below is based on the property of the cosine wave - it has a cycle which 'ends' every 2*PI. In this code, the little boxes do a complete cycle every second. They are randomized so they are out of phase with each other. They oscillate for a few cycles and than stop.

The duration of oscillation is chosen so that the position of the waveform at the end of the oscillation will be at it's maximum value (so the box will be 'maxed out'.

code:

---

MovieClip.prototype.drawRect = function(x,y,r)

{

  this.moveTo(x-r,y-r);

	this.lineTo(x+r,y-r);

	this.lineTo(x+r,y+r);

	this.lineTo(x-r,y+r);

	this.lineTo(x-r,y-r);

}



// code to oscillate an individual cell in the mask

oscillateBox = function()

{

  var t = getTimer() - this.startTime;

  this.clear();

	this.beginFill(0x00FF00,100);

	if (t > this.durMS) {

		this.onEnterFrame = undefined;

		this.drawRect(0,0,tw/2);

	}

	else {

		w = Math.cos(this.phase + t*(2*Math.PI)/1000);

		this.drawRect(0,0,tw/4+tw*w/2);

	}

	this.endFill();

}



// base represents the picture - replace this code with the code

// that loads the image - in this example, base is just a big red box.

this.createEmptyMovieClip("base",1);

base.beginFill(0xFF0000,100);

base.drawRect(Stage.height/2,Stage.height/2, Stage.height/2);



// Cell dimensions based on dividing the large image into 8x8

tw = Stage.height/8;



// code to setup the mask into a grid of cells

this.createEmptyMovieClip("mask",2);



n = 1;

for (var y = 0; y < 8; ++y) {

	for (var x = 0; x < 8; ++x) {

		var nam = 'tile_'+x+'_'+y;

		var mc = mask.createEmptyMovieClip(nam, n++);

		mc._x = x*tw+tw/2;

		mc._y = y*tw+tw/2;

		mc.phase = Math.random()*2*Math.PI;

		mc.durMS = (1-mc.phase/(2*Math.PI)) + 1 + random(5);

		mc.durMS *= 1000; // milliseconds

		mc.startTime = getTimer();

		mc.onEnterFrame = oscillateBox;

	}

}



// mask the base image

base.setMask(mask);

---