Part Two: Setting up the border

2. Apply these actions to the first frame of the layer as:
   
   //Declare variables xspacing = box._width; yspacing = box._height; depth = 0; box._visible = 0; smoothness = 90; //Calculate positions and values amH = Math.ceil(image._width/box._width); amV = Math.ceil(image._height/box._height); border._height = image._height+1; border._width = image._width+1; border._x = image._x-0.5; 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); depth++; } } function fadeOut(startboxnr, speed) { fadeMC(startboxnr, speed); } function fadeMC(mcnr, speed) { this["box"+mcnr].onEnterFrame = function() { this._alpha -= speed; if (this._alpha<=smoothness) { this.onEnterFrame = null; continueFade(this, speed); mcnr += 1; fadeOut(mcnr, speed); } }; } function continueFade(mc, speed) { mc.onEnterFrame = function() { this._alpha -= speed; if (this._alpha<=0) { delete this.onEnterFrame; } }; } fadeOut(0, 5);

   When you test your movie now, you should have the effect. If parts of the border are missing, then the width of your image can not be divided by the width of your boxes. Read the Notice on the previous page for more information.

Code Explanation:

//Declare variables xspacing = box._width; yspacing = box._height; depth = 0; box._visible = 0; smoothness = 90;

Here, we set variables to be used later on in the code.

xspacing is the amount of horizontal space between each box in the grid. Since we don't want any gaps between the grid, we set this to the width of the box, so that each box fits nicely next to the other. 

yspacing is the same as xspacing, only this is the vertical space between the boxes. This is also set to the height of the box (but it could've also been the width since the box is a square) to make them fit nicely next to each other.

depth is the initial depth of the boxes. This value will change every time a box is duplicated, setting them all on different depths.

box._visible = 0 sets the original box's visible property to false, making it invisible. This line can be deleted if the box is outside the stage.

smoothness is 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.

//Calculate positions and values amH = Math.ceil(image._width/box._width); amV = Math.ceil(image._height/box._height); border._height = image._height+1; border._width = image._width+1; border._x = image._x-0.5; border._y = image._y-0.5;

Here we calculate some positions and values.

amH divides the width of the image by the width of the box, and rounds it upwards.

amV does the same but for the heights.

border._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._width does the same but for the width.

border._x = .. 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._y does the same but for the heights.

//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); depth++; } }

Since this is the code that creates the grid, I'll be referring to Ilyas Usal's tutorial for the explanation.

function fadeOut(startboxnr, speed) { fadeMC(startboxnr, speed); }

 

This defines the function called fadeOut (it does not execute it), with the variables startboxnr and speed. This function will call the function fadeMC and passes startboxnr and speed along to fadeMC. So this function receives the values startboxnr and speed, and calls the function fadeMC and passes the same variables it received along to fadeMC.

function fadeMC(mcnr, speed) { this["box"+mcnr].onEnterFrame = function() { this._alpha -= speed; if (this._alpha<=smoothness) { this.onEnterFrame = null; continueFade(this, speed); mcnr += 1; fadeOut(mcnr, speed); } }; }

function fadeMC : This defines the function fadeMC with the variables mcnr and speed.

this.onEnterFrame = function(){ declares an anonymous function that executes onEnterFrame of the movieclip "box"+mcnr (mcnr is the variable the function receives when called, remember ?). So say that we call the function fadeMC and pass the variables mcnr and speed along with the values of 3 and 5 for example, it will define the onEnterFrame for the movieclip box3. If we'd pass along 4 and 5 for example, it will define the onEnterFrame for box4. Keep that in mind.

this._alpha -= speed decreases the alpha value of this (which is box+mcnr) with the value speed. Since this is inside the function onEnterFrame, this line will keep executing until the onEnterFrame is deleted.

if(this._alpha<=smoothness){ checks if the alpha value of this (box+mcnr) is less than or equal to the value of the variable smoothness (which we defined before). If so, it executes anything inside the brackets { }. The onEnterFrame is still open, so this line will also be executed until the onEnterFrame has been deleted.

this.onEnterFrame = null sets the onEnterFrame of the movieclip of the movieclip targetted by this to null. This is executed when the if statement is true. It sets the onEnterFrame of the movieclip "box"+mcnr to null, so the if statement which is inside the onEnterFrame will no longer be executed. Flash will execute everything left inside the if statement after the onEnterFrame has been deleted.

continueFade(this,speed) executes the function continueFade and passes the variables this ("box"+mcnr) and speed along. These will be used in the function continueFade. We will get back to the function continueFade later.

mcnr += 1 adds the value 1 to the value of variable mcnr. So say mcnr was 5, after this line it will become 6.

fadeOut(mcnr, speed) executes fadeOut and passes the variables mcnr (which has just increased by one) and speed along. So this will redo everything you've read in this explanation, but with an increased mcnr. 

The }'s end the functions and the if statement.

See how it works ? This is a short example: mcnr is 0 (the inital value), fadeOut executes fadeMC and passes mcnr along, fadeMC uses mcnr to define this["box"+mcnr].onEnterFrame (so box0.onEnterFrame), the onEnterFrame decreases the alpha until less or equal to smoothness (which has the value 90, we defined it in the beginning of the code) and if so, it deletes the onEnterFrame, increases mcnr with 1 and does everything over by executing fadeOut and passing mcnr and speed along.

But how come the boxes fade out entirely when the onEnterFrame is deleted and everything is redone at alpha 90 or less ? This is were continueFade comes in. Remember that continueFade was also inside the if statement that is executed when the alpha is equal to or less than 90. So continueFade will also be executed when the onEnterFrame is deleted. Let's have a look:

function continueFade(mc, speed) { mc.onEnterFrame = function() { this._alpha -= speed; if (this._alpha<=0) { delete this.onEnterFrame; } }; }

function continueFade(mc,speed) { - This defines the function continueFade with the arguments mc and speed. But how can you execute it when it hasn't been defined yet ? We executed it in the previous function, right ? Well, we'll see about it later. This is what this it does:

mc.onEnterFrame = function(){ - sets an anonymous function as the onEnterFrame handler of the movieclip mc. It received mc when executing (continueFade(mc, speed)), so it will define the onEnterFrame of the value that was passed along. Now have a look back at the previous function. We called continueFade there. What is the first value we passed along ? Right ! this["box"+mcnr] ! It's onEnterFrame has been deleted in the previous function, so what we're doing now is redifining it. That's right. We first delete it, and then redefine it. So the value this["box"+mcnr] is stored (mcnr has not yet been increased with 1 since we call continueFade before we increase mcnr with 1) in the value of the variable mc.

this._alpha -= speed - decreases the alpha value of this with the value of the variable speed, so we're actually setting the alpha of this["box"+mcnr]. This line is inside the onEnterFrame, so it will be executed until the onEnterFrame has been deleted or set to null.

if (this._alpha<= 0){ - checks if the alpha is less than or equal to 0. If so, it will execute anything inside the { } brackets. This line is also inside the onEnterFrame, so it will be executed until the onEnterFrame has been deleted or set to 0.

delete this.onEnterFrame - deletes the onEnterFrame of the movieclip the onEnterFrame is assigned to. Since the alpha has reached zero now, it is no use to keep the onEnterFrame. In fact, if you'd keep the onEnterFrame, it can slow down your entire movie.

The }'s end the if statement and the functions.

Okay, now we know how and why all the functions work. But no function has been executed yet ! Function1 executes function2, but to be able to do that function1 has to be executed first. fadeOut is the function that sets everything to work. If it's been called once, everything goes automatically. So actually, the function fadeOut is our start trigger. Execute it, and everything will get to work. That's why the last action executes fadeOut. Because it's on the first frame, it will be executed when the first frame of the movie has been entered, which is good if you want the effect to autostart. If not, you can always execute it through a button, for example 

on(release){

fadeOut(0, 5)

}

on a button will start the whole process. That's what I used on the button of the sample movie.

The two values 0 and 5 are the values that are passed along when executed. 0 is the number of the box to start fading at and 5 is the speed at which the alpha decreases. It will decrease 5 every onEnterFrame. So the higher this value, the faster it will fade. The variable smoothness which we defined in the beginning is the alpha value which one box must reach before the following will start fading.

On the next page, you will learn how to modify the effect: