Controlling the Alpha Property for Fade-in Effect

So far we have programmed our Bio movie clip to open on to the stage when a button is clicked and we have a "Close" button that will tell Flash to remove both the Bio movie clip and itself from the Display List. We have a nice program but it can be even better if we work on the ActionScipt code some more. We can program a fade-in effect for the Bio movie clip.

What would be the movie clip property that we need to control to create this effect? Did you say the Alpha property? We can tell Flash to increase the Alpha for the Bio movie clip progressively until the movie clip is 100% visible.

In our ActionScript code, we have told Flash to add our Bio movie clip to the Display List and place it at certain X and Y positions on the stage. Because we did not tell Flash otherwise, it sets the alpha property to 100% visibility. The first thing that we need to change is to set the Alpha property to 0% so that the movie clip will be invisible at the start of the effect.

Now we can write the code that will gradually increase the visibility of the movie clip. We are still working inside the goBio function. First, we will add an Event Listener that we will attach to the stage. This Event Listener will listen for each new frame of our main movie and ,with each new frame, it will call the Event Handler (appearBio) which is the function that will increase the Alpha by a set percentage. That's a lot to say with one line of code. Here it is.

Next, we will write the appearBio function. It contains only one line of code that will increase the Alpha property by .05% with each new frame.

AboutButton.addEventListener(MouseEvent.CLICK, goBio);
function goBio (e:MouseEvent):void
{
var newBio:BioParch = new BioParch();
this.addChild(newBio);
newBio.x = 25;
newBio.y = 45;
newBio.alpha = 0;

stage.addEventListener(Event.ENTER_FRAME, appearBio);
function appearBio(event:Event):void
{
newBio.alpha += .05;
}
}

Here is the new code. Test your movie. Works fine but we can optimize it a little. After the Alpha for the movie clip has reached 100%, we do not need to keep running the Event Listener. Let's use an If statement to remove the Event Listener after the Alpha is greater than 100% (alpha > 1).

We can use this same technique to control other movie clip properties and create other effects when adding something to the Display List.