Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4

You are going to learn how to adjust the properties of an object just by moving the mouse across the stage. First thing is to create a movie clip on stage, basically create a rectangle covering the whole stage, first lets change the canvas color to black, now choose a white fill color, do not select a stroke color, draw a white rectangle covering the black stage, by selecting the rectangle tool, draw a rectangle which covers the whole stage like this one below. You can call this layer fader.

Now convert this rectangle to a movie clip, so click on it and press F8 to convert it to a symbol and call it fader_mc and click OK like this one below.

Now we need to add some action script to point to this object, we need to give this object an instance name, so let’s click on the object and in the instance name type fader_mc like this one below.

All we have to do now is add an action script which makes the opacity or alpha of this movie clip change depending upon the “x” value of our cursor, in other words when our mouse when the cursor touches the left side of the stage, the white box is going to be completely transparent and all you see is the black stage, as you move the cursor across to the right its going to get brighter and brighter and becomes fully white when the cursor is on the extreme right. So let’s go and do that,
First of all you need to lock the fader layer and create a new layer called actions above the fader layer, always do the actions in their own layer,  click on frame 1 in the actions layer and press F9 to open up your actions panel like this one below.

Now what we want to do is, we want to change the alpha of this white rectangle depending on where our mouse cursor is, and needs to be constantly updating, every 10 milliseconds or so we need to check where the mouse cursor is, so we can change the alpha property of this rectangle accordingly, so we need to use an interval to do that. So we are going to create a variable and assign an interval to that variable, first of all lets name the variable, you can name what ever you want to, lets call it ‘mouse Interval’ and we are going to set this equal to a ‘set Interval function’ so when you are using an interval, we are going to type an open bracket like this one ‘(‘ here, the first thing you type in is the name of the function that you want to repeat over and over again, and that function we have not created yet, so lets go and call this function ‘change Alpha’ then type coma like this ‘,’  and then you want to put the interval here, the interval is in milliseconds so what ever number you put in here, is how often in milliseconds our function is going to run, in other words if you put 10 here, then every 10 milliseconds this interval is going to run this change alpha function, so close the bracket like this ‘)’ and type semicolon like this ‘;’ to end our statement there.
Skip a couple of lines and lets create that function that change alpha function, so type ‘function’ and then the name of the function, ‘change Alpha’ remember Alpha is Capital ‘A’  then type open and close brackets like this one ‘( )’ and then open and close flower bracket like this one ‘{ }’  now in-between the flower bracket we are going to put in the function, remember what we are going to do is change the alpha property of the fader_mc movie clip, the big white rectangle, so first we need to point  to the fader_mc movie clip, so lets type ‘fader_mc’ and we are going to access the alpha property so type a dot, you will see right away a pop up menu, you can scroll down to _alpha and hit enter, we are going to set that equal to so type equal to like this ‘=’  what we are going to do is, since alpha is in percentage, we can just take what percentage of the pixels we are at, in other words our stage is  550 pixels, if we are at pixel 0, then we are at 0%, if we are at pixel 275, then we are at 50% because that’s half way across the stage, so we need to figure out a function that’s going to do that for us, so basically we need to figure out a percentage. So we are going to take the  x position of the mouse and we are going to divide that by the total width of the stage, and that’s going to give us a number with decimals and then multiply that by 100 in order to get the percentage and round that off.
So  first we need to point to the x value of the mouse, we get to that by typing in ‘_root’ dot ‘.’  ‘_xmouse’  and divide that by the total width of the stage which is 550 pixels and multiply by 100, so put this entire command in brackets like this ‘(_root.xmouse/550*100)’ we will get a decimal when we do this, so lets round it off by type ‘Math.round’ before ‘(_root.xmouse/550*100)’ remember to out the Math in capital ‘M’ or else it may not work, now put a semicolon at the end of the statement like this ‘;’ and that should do it. Your action script is going to look like something like this.

So let me explain again, above what we have a function is change Alpha () and what that’s going to do is look at the xposition of the mouse and using the xposition wherever  your mouse is on stage, is going to use that to calculate an alpha percentage for our fader_mc, in other words our big white rectangle, so if your mouse is on the extreme left side, this side will be completely transparent and while you move the cursor to the right, then its going to become completely opaque so that you can see it white instead of black, so its going to run this changeAlpha function every 10 milliseconds as written here that’s what this interval is there that we set, so we can run it over and over again, by test your movie clip to test this.
You will notice that while your mouse is on the extreme left the screen is black and as you roll it across the right you will see it slowly fading it to grey and then to white.
So what practically value does this have, first of all it teaches you little bit about action script, but you can also use this in some creative ways, lets say that you had two different menu’s on your site, and on the left, you had a menu in white and to the extreme right you had another menu in black, here on your left, you  will not be able to see the menu in white and in the right you will not be able to see the menu in black,  so lets try doing this, now locking both your fader layer and action layer, create a new layer above the fader layer and call it menu like this one below.

Lets create a menu on the left in white, remember that the stage is going to be black on the left, so go out of the stage and make your menu’s because if you pick the white color and start typing on the stage you will not see anything since the stage is white, so type in your menu like home, blog, pictures, links. Like shown below.

After typing it outside the stage, drag and place it on the left of the stage, now you will not be able to see anything, since its white menu written on white stage, now pick a black color and make another menu and type on the right side of the stage like this, say you want menu like resume, portfolio, contacts, education like the one shown below.

Now test your movie by pressing Ctrl+Enter, you will be able to see the menu on the left written in white since the background is black and as you move your cursor across to the right you will see the other menu written in black on a white background.
That’s it, you will see for yourself, now you know how to create a movie clip that fades as the user moves the cursor away from it in Flash CS4.