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

Making a clean, polished linear gradient fill dynamically with ActionScript

11. Update your current code with these lines (shown in bold):

this.createEmptyMovieClip("myButton1", this.getNextHighestDepth());
myButton1._x = 200;
myButton1._y = 100;
var fillType:String = "linear";
var colors:Array = [0xFAD4DB, 0xEC748B, 0xC13A59, 0xA81230];
var alphas:Array = [100, 100, 100, 100];
var ratios:Array = [0, 126, 127, 255];
var matrix:Object = {matrixType:"box", x:0, y:0, w:80, h:30, r:90/180*Math.PI};
myButton1.createEmptyMovieClip("buttonBkg", myButton1.getNextHighestDepth());
myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");
myButton1.buttonBkg.beginGradientFill(fillType, colors, alphas, ratios, matrix);
myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);
myButton1.buttonBkg.endFill();

12. Test your movie by choosing Control > Test Movie. You should see a beautiful gradient fill appear, like the one shown in the screenshot below.

It looks really sleek, doesn't it? Very modern and Web 2.0-ish :). I will show you now how this works.

The method that triggers the filling of the rectangle is the beginGradientFill() method, and must be placed before any lines are drawn with the lineTo() method:

myButton1.buttonBkg.beginGradientFill(fillType, colors, alphas, ratios, matrix);

This method has several parameters that tell Flash what type of fill should be used, the colors involved in the gradient, their transparency values, placement within the gradient and how the fill should be laid out.

The method that closes the fill is the endFill() method. This one comes after the last line of the rectangle was drawn and doesn't have any parameters, which is logical, because it only serves to close the fill.

myButton1.buttonBkg.endFill();

The values that dictate the appearance of the fill must be defined before the filling starts. Here they are:

var fillType:String = "linear";
var colors:Array = [0xFAD4DB, 0xEC748B, 0xC13A59, 0xA81230];
var alphas:Array = [100, 100, 100, 100];
var ratios:Array = [0, 126, 127, 255];
var matrix:Object = {matrixType:"box", x:0, y:0, w:80, h:30, r:90/180*Math.PI};

The fillType variable is used to define the fill either as a linear or radial one. The colors array is used to store the RGB hex values of all the colors that are going to be used in the fill. The alphas array stores the transparency values of those colors. The ratios array tells Flash how to place those colors within the fill.

IMPORTANT The number of values in the alphas and ratios arrays must match the number of colors! If you fail to do that, you won't get your fill at all.

Last but not least, the matrix object stores many values which define the type, placement, size and rotation of your gradient fill. For a more detailed explanation of this and all the preceding parameters of your fill, check out my lesson that explains the creation of gradient fills with ActionScript.

Top of page

Creating a dynamic text field from scratch with ActionScript

13. Add these lines of ActionScript code right at the end of the existing one:

myButton1.createTextField("labelText", myButton1.getNextHighestDepth(), 0, 5, myButton1._width, 24);
myButton1.labelText.text = "webdesign";

Note that the above are two lines of code. The first one is very long, so it may be split into two rows in your browser.

If you test your SWF movie now, you will see the following:

That button label looks pretty crappy. It definitely needs to be embellished. But let me first explain you how it was created in the first place.

The createTextField() method is used to make text fields on the fly. This method was used by the myButton1 movie clip directly and not by the buttonBkg movie clip. The reason why is because you want the buttonBkg movie clip and the labelText text field to exist as independent objects inside the myButton1 movie clip, so that you can apply different filters to each one of them.

Here are the parameters of the createTextField() method:

1. The Instance name of the text field. The same naming rules apply to it as those mentioned for the movie clips, on the previous page of this tutorial. I chose "labelText" because it makes sense to me.
2. Now comes the depth level of the text field. Again, I used the myButton1.getNextHighestDepth() construct to have Flash assign the text field the next unoccupied depth level inside the myButton1 movie clip.
3. The horizontal position of the text field (its x coordinate) is a number, which specifies the horizontal distance of the text field from the movie clip's origin point (0,0 — its upper left corner) in pixels.
4. The vertical position of the text field (its y coordinate) is a number, which specifies the vertical distance of the text field from the movie clip's origin point (0,0 — its upper left corner) in pixels.
5. The width of the text field is expressed in pixels. I used the text field's parent movie clip width to specify this value.
6. The height of the text field is expressed in pixels.

To clarify the last four parameters (x, y, width, height) a little bit more, add this line to the end of your existing code:

myButton1.labelText.border = true;

Test your movie and you'll see a border appear around the text field.

If you watch closely, you'll see that the text field's left border coincides with the movie clip's left border. This is because the x coordinate of the text field is defined as 0. And the y coordinate places the text field 5 pixels from the movie clip's upper border.

The text field is wide as the movie clip, and a little less high than it. I made this on purpose because the text inside the text field isn't exactly in the middle of it and I don't want the field to come out of the button. You'll always have to play with these values a little bit, until you get what you want. And different values will be needed for different fonts and font sizes. There is no magical formula to adjust the size and position every single text field perfectly. Create a border, test your movie to see the results and start tweaking the values until you get them right.

You can remove the line of code that sets the border around the text now.

The label "webdesign" was inserted into the text field easily, by using its text property:

myButton1.labelText.text = "webdesign";

OK, time to make it look professional now. This button has a file size of only 520 bytes! ActionScript rules! However, your SWF will gain in file size in a few moments, because you are going to import an entire font into it.

Top of page

Importing an entire font into a Flash document

14. Open the Library by selecting Window > Library.

15. Click on the Library Preferences button (it is marked with a red arrow on the image below) and select New Font from the menu that shows up.

The Font Symbol Properties window will show up.

16. In the Font drop-down menu, select a font that you'd like to see on your button. I chose the Windows built-in Tahoma font, because it looks good to me on the button.

In the Name field, type a name for this font. You can type the same name as the font's if you like. However, if your font of choice is Times New Roman for example, write the name as TimesNewRoman. In other words, avoid spaces and special characters.

Leave the Bold, Italic and Bitmap text options unchecked and also don't change the Size option. You will manipulate the font size via ActionScript later. Click OK. The font will appear in your Library.

17. Right-click on the font inside the Library and select Linkage from the context menu.

18. In the window that appears, click the Export for ActionScript option to check it (the Export in first frame will automatically be checked too).

You can leave the Identifier name as it is, just make sure to write it exactly in the same way in your ActionScript code later. Click OK.

NOTE Importing a font into Flash means importing the information on every character defined inside it, such as rendering, spacing, etc. So, this can increase your final SWF's file size much, especially if complex fonts are being imported. In my case, the Tahoma font added 24 kilobytes to the size of my SWF. Pixel and bitmap fonts are cool, not only because they look that way, but also because they tend to be very simple and don't usually have as much characters defined inside them as other fonts might have — which results in smaller weight of your SWF movie.

Onwards! Let's format that button label now!

Top of page

Embellishing a dynamic text field

19. Add these lines of ActionScript before the line in which the text field was created:

var myFormat:TextFormat = new TextFormat();
myFormat.align = "center";
myFormat.font = "Tahoma";
myFormat.size = 13;
myFormat.color = 0xFFFFFF;

You are creating here an instance of the TextFormat object, which is used to change and set the various properties of a text field. I chose to call it myFormat.

var myFormat:TextFormat = new TextFormat();

The four lines that follow the creation of the myFormat TextFormat object define the following:

• The align property is used to align the text either to the: left, right, center or justify it. Centering it makes sense in this case, because the text will be the label of your button.
• The font option defines the font to be used by the text field. Here, you must write the same exact Linkage name that you have given to your font in the Library in the previous step. If you don't do it, the text won't appear at all!
• The size option is a numerical value that sets the font size for your text field. It is specified in points, not pixels.
• The color option sets the color of your text field's text. This is a hexadecimal RGB value.

20. Add the four lines shown in bold after the line that sets the text "webdesign" in your text field:

myButton1.labelText.text = "webdesign";
myButton1.labelText.embedFonts = true;
myButton1.labelText.selectable = false;
myButton1.labelText.antiAliasType = "advanced";
myButton1.labelText.setTextFormat(myFormat);

21. Test your movie (choose Control > Test Movie). Now don't get alarmed if you see the following window appear and stay on your screen a little bit longer than usual:

Flash needs some time to export the movie which contains an imported font inside it. This is normal.

Once the short wait is over, you will see your new button in all it's glory, with the label rendered so good that it looks really amazing:

Mondo cool. The characters are rendered so sharply and smoothly, that it makes me cry :).

The piece of code that actually associates the font with the text field is the following:

myButton1.labelText.embedFonts = true;

The embedFonts property of your text field set to true makes this possible. Of course, a prerequisite for this is to have the font imported, a linkage name given to it and a TextFormat object created where you reference it.

Setting the selectable property of your text field to false disables the possibility of selecting its text:

myButton1.labelText.selectable = false;

I urge you to make this for text fields nested inside buttons, because it makes no sense to leave this option as true (the default value) if the object in question (a button) will be clicked by the user.

Now comes the antiAliasType property of your text field, which, when set to "advanced" does the rendering magic for your button's label:

myButton1.labelText.antiAliasType = "advanced";

Its default value is "normal". Don't use it for eye candy like this button.

And finally, the myFormat TextFormat object gets associated with the text field, via the setTextFormat() method:

myButton1.labelText.setTextFormat(myFormat);

Move on to the next page to see how to add really cool filter effects to your button, and more!