We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now

Alpha Fader can be downloaded here >>

Example of Coded Example that took a couple of seconds to create!

One of the most common tasks done in Flash via ActionScript is the opacity fade, and when used cleverly can add a nice touch to your Flash projects.

I tend to use opacity fades quite a lot via ActionScript, and get pretty bored of typing in the names of Movie Clips, and adding the control code. Call me lazy? Nope, I just want to move on to bigger parts of a project, and those valuable seconds saved here and there really add up in the full run of a project.

I created this panel, to alleviate my pain, and it does quite a good job, simply select either a single or group of Movie Clips from the stage (doesn’t matter if they are named instances or not as the code will take care of unnamed instances), and play with the following parameters

Event Handler Checkboxes: The type of interaction with the Movie Clip
Start Opacity: The starting opacity for the effect
End Opacity: The ending opacity for the effect
Fade In Speed: Speed of fading in
Fade Out Speed: Speed of fading out

Once you are happy with your settings, clicking the ‘Generate Code’ button, copies the externalized .as file that we use to hold the Movie Clip prototype code into your working directory for the FLA that you are working with, and add the necessary code to the currently selected frame.

Using this methodology, and the extension, it took about 2-3 seconds to turn this lump of Movie Clips into nicely fading Movie Clips…

…removing the headache of adding this lump of code to the frame as its all done automatically.


#include "alpha.as"
Symbol3.onRollOver = function(){
this.alpha(5,100);
}
Symbol3.onRollOut = function(){
this.alpha(5,10);
}

Symbol6.onRollOver = function(){
this.alpha(5,100);
}
Symbol6.onRollOut = function(){
this.alpha(5,10);
}

Symbol9.onRollOver = function(){
this.alpha(5,100);
}
Symbol9.onRollOut = function(){
this.alpha(5,10);
}

Symbol12.onRollOver = function(){
this.alpha(5,100);
}
Symbol12.onRollOut = function(){
this.alpha(5,10);
}

Symbol2.onRollOver = function(){
this.alpha(5,100);
}
Symbol2.onRollOut = function(){
this.alpha(5,10);
}

Symbol5.onRollOver = function(){
this.alpha(5,100);
}
Symbol5.onRollOut = function(){
this.alpha(5,10);
}

Symbol8.onRollOver = function(){
this.alpha(5,100);
}
Symbol8.onRollOut = function(){
this.alpha(5,10);
}

Symbol11.onRollOver = function(){
this.alpha(5,100);
}
Symbol11.onRollOut = function(){
this.alpha(5,10);
}

Symbol10.onRollOver = function(){
this.alpha(5,100);
}
Symbol10.onRollOut = function(){
this.alpha(5,10);
}

Symbol7.onRollOver = function(){
this.alpha(5,100);
}
Symbol7.onRollOut = function(){
this.alpha(5,10);
}

Symbol4.onRollOver = function(){
this.alpha(5,100);
}
Symbol4.onRollOut = function(){
this.alpha(5,10);
}

Symbol1.onRollOver = function(){
this.alpha(5,100);
}
Symbol1.onRollOut = function(){
this.alpha(5,10);
}

Symbol3._alpha = 10;

Symbol6._alpha = 10;

Symbol9._alpha = 10;

Symbol12._alpha = 10;

Symbol2._alpha = 10;

Symbol5._alpha = 10;

Symbol8._alpha = 10;

Symbol11._alpha = 10;

Symbol10._alpha = 10;

Symbol7._alpha = 10;

Symbol4._alpha = 10;

Symbol1._alpha = 10;

Alpha Fader can be downloaded here >> , and I hope you find it useful!

We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now