How to make an amazing button in Flash using ActionScript only — part 3

Making a clean, polished linear gradient fill dynamically with ActionScript

22. Add the three lines of code shown below above of all your existing code, before even the main movie clip was created:

import flash.filters.GlowFilter;
var labelGlow:GlowFilter = new GlowFilter(0xFFFFFF, .30, 4, 4, 3, 3);
var labelFilters:Array = [labelGlow];

...and add this ActionScript piece below the current code, after the text field was associated with the TextFormat object:

myButton1.labelText.filters = labelFilters;

Test your movie and see the result — a small but effective glow changes the visual aspect of the button's label completely:

This filter adds 77 bytes to your SWF movie :). Remember, it is the code for the filter that is being imported and not some graphics. The Flash Player installed on the user's computer is the one who interprets the filter code and subsequently applies the code to the object.

The first line (the one that begins with the keyword import) imports the filter's class into your SWF.

The subsequent one creates a new GlowFilter filter. The parameters that must be defined when a new glow filter is created are:

1. color (RGB hex value).
2. alpha (transparency, ranging from 0 to 1).
3. horizontal blur, ranging from 0 to 255.
4. vertical blur, ranging from 0 to 255.
5. strength, ranging from 0 to 255.
6. quality, ranging from 0 to 15. 1 is low quality, 2 is medium, while 3 is high. Any values above 3 increase the quality but also the rendering time.

There are two more options which can be used, but are not obligatory: inner and knockout. Both are Boolean values, which means that they can be set to either true or false. The inner glow effect doesn't make any significant change when applied to small font sizes like the one used in this tutorial. The knockout effect however, makes a big difference. Try the following:

1. Set the inner option to false and the knockout option to true.
2. Increase the alpha option to .90.

The chunk of code where the filter gets created should look like this...

var labelGlow:GlowFilter = new GlowFilter(0xFFFFFF, .90, 4, 4, 3, 3, false, true);

...and it will result in your button's label looking like this:

Interesting effect, huh? There is no end to what you can do with filter effects in Flash. Learn more by reading my lesson on the dynamic use of the glow filter.

Top of page

Making the button clickable

This one is really easy. Add this at the end of your ActionScript code:

myButton1.onRelease = function() {
getURL("http://www.lukamaras.com");
}

And you're done! The button is made clickable. It will get you to the home page of my website — change the URL to anything you like. But before wrapping up this lesson, I just want to show you the many cool effects and things that you can do with very little code. Have a look at this button:

And yes, it was done entirely with ActionScript! Even the shine in the upper portion of the button and the RSS icon! I won't post the code here — it has about 80 lines. But you can download it with the other source files at the end of this page :). The method used to draw rounded corners for this button is the curveTo() method. The usage of this method was also explained in my basic drawing with ActionScript tutorial. As you can see, with ActionScript you can perform real wizardry!

The great thing about this is that you can create as many buttons as you like with these programming routines — even whole menus — I used a function to that end to create all the buttons shown at the top of the first page of this tutorial. That one is included with the downloads too.

Note: I have removed the fonts from some of the .FLA files so that you can download them quicker.

Download all the source files for buttons shown in this lesson

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!