logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

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;
}


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.

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);
}


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).

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
{
if ( newBio.alpha > 1 )
{
stage.removeEventListener(Event.ENTER_FRAME, appearBio);
}
else
{ newBio.alpha += .05; }

}

}

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




Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Twitter Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Facebook Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to MySpace Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Del.icio.us Digg Controlling+the+Alpha+Property+for+Fade%2Din+Effect Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Yahoo My Web Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Google Bookmarks Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Stumbleupon Add Controlling+the+Alpha+Property+for+Fade%2Din+Effect to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor