Above is a little example menu I made for a fake game called “Top Secret.” Don’t expect a game to start when you click on the Play button. Instead, when you click a button you will get a little menu to change the rollover effects of said button.

What I’m going to be talking about for the next… however long you read this, is how to recreate these cool effects for your own projects. Hopefully you will come up with some better ideas for using filters then just rollover effects.

Setting Up The Example:
I simply typed all the text you see using whatever font seemed nice. I then selected each TextField and broke them apart by pressing Ctrl+B twice. After making each button into a MovieClip and giving them appropriate instance names (i.e. the Play button has a name of “play_mc” and you can see this in the popup menu) I felt like it was high time to make some cool rollover effects!

Working w/ The Code:
I’m just going to talk about the one filter here, since the others are all pretty much the same.

To make a blur effect we need to create a new AS class file (one for each button). We are going to use Tweens, Filters, Events, and we are extending a MovieClip, so we need to import the apropriate library classes for those:

The star in flash.events.*; just means “all of them” and it’s a quick way of importing lots of stuff at once.

Start out with making and applying our filter to get an idea of what we want:

This is the default value/filter you see before you change any settings in my example movie above.

The filters property that I’m setting in the above code is an Array property of any DisplayObject (including Sprites, MovieClips, and any other children thereof). That is why I need the square brackets, because it’s an Array.

With the filter in place we need to check for our MOUSE_OVER and MOUSE_OUT events and tween the blur filter.

A Tween object can change any Number property of almost any object over time using easing functions. To read more on Tweens you can check out Intro to ActionScript 3.0 Tweening.

Ah! Well there we go. We now have a tween that effects our X&Y blur. Notice that we have an event listener on those two tweens for TweenEvent.MOTION_CHANGE. This is because the blur filter that we are tweening is NOT the filter that is on our MovieClip. So for every step that the tween changes the blur values, we need to reapply the filter to our Button.

I’m sure you have noticed that I am making most of my functions and variables protected. This is because protected is just like private, but private will not be inherited by child classes and protected will. I want to keep inheritance because this way I can (and have) make a base class with all my effects and just have my button classes extend that base.

If you download the source for my example movie HERE, you will notice that I have almost all my code within the Rollover class and all my button classes are extending that one.

Once again, you can download the source for this tutorial and example movie here: TopSecret Example Source Code (ZIP - 958 KB)

If you are interested in some of the components I used or want to know more about working with colors, let me know in a comment and maybe I will make a separate tutorial on them.