Hello. I played around with Voetsjoeba’s modified random fading grid (http://www.kirupaforum.com/forums/showthread.php?s=&threadid=47220&) as code and the
results were just what I was looking for. What changes would I have to
make in order to achieve the reversal of it? For example, let’s say I
have an image and I want to ‘fade it out’ with this random fading grid
effect. Each box would fade into a ‘white box’ until the whole
background is white. I tried playing around with the alphas but
couldn’t find any luck. Any help would be greatly appreciated. Thanks
so much!
// Array to store the number of the movieclips
var mcs_array:Array = new Array();
// Prototype to randomize an array
Array.prototype.randomize = function() {
return this.sort(function (a, b) {
return (Math.floor(Math.random()*2) == 0) ? 1 : -1;
});
};
/*** DECLARE VARIABLES ***/
// Sets the height and width of the box
box._width = box._height = 196;
// The amount of horizontal and vertical space between each box in the grid
xspacing = box._width;
yspacing = box._height;
// The initial depth of the boxes
depth = 0;
// Sets the original box's visible property to false, making it invisible
box._visible = 0;
// Sets the border's visible property to false, making it invisible
border._visible = 0;
// The number that a box must reach before the following one starts to fade. The higher this number, the faster they will start fading and the smoother the effect will be
smoothness = 90;
/*** CALCULATE POSITIONS AND VALUES ***/
// Divides the width of the image by the width of the box, and rounds it upwards
amH = Math.ceil(image._width/box._width);
// Divides the height of the image by the height of the box, and rounds it upwards
amV = Math.ceil(image._height/box._height);
// Sets the height of the border, which is the height of the image + 1, to make sure that it would be nice and clear
border._height = (image._height+1);
// Sets the width of the border, which is the width of the image + 1, to make sure that it would be nice and clear
border._width = (image._width+1);
// Sets the x position of the border to the x position of the image. Since we added 1 to the width of the border, we will now move it half that value (1) to the left, so 0.5, to have the same space left and right between the border and the image
border._x = (image._x-0.5);
// Does the same but for the heights
border._y = (image._y-0.5);
/*** CREATE GRID ***/
for (i=0; i<amH; i++) {
for (var k = 0; k<amV; k++) {
box.duplicateMovieClip("box"+depth, depth);
cur = this["box"+depth];
cur._x = image._x+(xspacing*i);
cur._y = image._y+(yspacing*k);
mcs_array.push(depth);
depth++;
}
mcs_array.randomize(); // Randomize array
}
/*** FUNCTIONS ***/
function fadeOut(startboxnr, speed) {
fadeMC(startboxnr, speed);
}
function fadeMC(mcnr, speed) {
this["box"+mcnr].onEnterFrame = function() {
this._alpha -= speed;
if (this._alpha<=smoothness) {
delete this.onEnterFrame;
continueFade(this, speed);
fadeOut(mcs_array.pop(), speed); // Fade out the last element from the array
}
};
}
function continueFade(mc, speed) {
mc.onEnterFrame = function() {
this._alpha -= speed;
if (this._alpha<=0) {
delete this.onEnterFrame;
}
};
}
fadeOut(mcs_array.pop(), 5); // Start fading the last element fof the array