data = 'http://sitepointstatic.com/flash/fadingtext.swf'
width = '400'
height = '400'
bgcolor = 'black'
>
Download the sample files here, then follow these steps to create this great effect…
1. Create any text of your choice, and convert the text to a movie clip.
2. Right click the movie clip, and insert these actions:
onClipEvent (load)
{
this._alpha = 20;
}
onClipEvent (enterFrame)
{
ax = Math.abs(this._x-_root._xmouse);
ay = Math.abs(this._y-_root._ymouse);
incr = Math.max(ax, ay);
if (incr<=80)
{
this._alpha = 100-incr;
} else {
this._alpha = 20;
}
}3. Copy this movie clip.
That’s all you need to do! Play the movie, and move the mouse over the text to see the effect at work.
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
