How to make an amazing button in Flash using ActionScript only

In this easy ActionScript lesson I will explain to you how to create professional, clean and polished buttons. No design tools will be used in this tutorial. Just pure ActionScript code! Please note that this is a lesson made for Flash 8 pro. You will learn how to:

• Create new movie clips from scratch,
• Create nested movie clips with ActionScript too,
• Create stunning gradients and other graphics via ActionScript,
• Import and embed fonts into Flash, understand how they work and add to the size of your SWF movie,
• Create dynamic text fields from scratch and format them using the myriad properties available in ActionScript,
• Import, create and apply filter effects to movie clips and text fields, and more.

Below are a few examples of the many buttons, menus and designs that you can create via ActionScript.

Creating empty movie clips with ActionScript from scratch

1. Open a new Flash document. Call the first layer actions. This is the only layer in your Flash document that you are going to need in this lesson. No others will be created. Lock this layer. You don't need to have it unlocked to be able to insert ActionScript code into it.

2. Select the first and only keyframe of this layer by clicking on it. This is where all the ActionScript code will be situated.

3. Open the Actions panel by selecting Window > Actions. Insert the following line of ActionScript code inside it (it is a single line of code — if your browser window is not wide enough, you may see it split into two lines):

this.createEmptyMovieClip("myButton1", this.getNextHighestDepth());

This line creates a movie clip instance from scratch. The createEmptyMovieClip method (a method is a command, something that an object does) is used to create movie clips at runtime. At runtime means while the SWF movie is running, as opossed to working in Flash and creating movie clips with design tools.

The createEmptyMovieClip method has two parameters inside it. The first one is the Instance name of the new movie clip. An Instance name is needed to control a movie clip via ActionScript, no matter if it was created programmatically or with design tools.

REMEMBER The Instance name of a movie clip must be unique. No two symbols in Flash can share the same Instance name, whether they are movie clips, buttons or text fields. Also, the Instance name can not contain special characters (like $, @, !, &, etc) or spaces. Stick to letters, numbers and the underscore ( _ ) and you'll be fine. While an Instance name can contain a number, it can not begin with a number (for example, button3 is fine, while 3button is not). Keep in mind that ActionScript is a case-sensitive programming language, meaning that, for example, myMovieClip, mymovieclip and Mymovieclip are all different Instance names.

As you have seen, the new Instance name is written between quotation marks, but only during the creation of the movie clip. Later, you will reference this movie clip by writing the Instance name without the quotation marks.

The second parameter is the depth assigned to the new movie clip. Think of the depth property of a movie clip as the third imaginary dimension on the screen. While you have two dimensions on your screen, the horizontal and vertical one, depth enables you to stack many movie clips on the screen, without having them interfere with one another. This is understandable, because if all movie clips shared the same depth, they wouldn't be able to display normally — in other words, it would be impossible to create more than one.

So, the depth of a movie clip is used by ActionScript in a similar way that layers are created in your Flash projects when you want to have graphics and other objects stacked one above the other. The thing to remember is that the main timeline (the root timeline, meaning the Flash movie itself) has the depth level 0 (zero). Depth levels are like invisible layers. Here is a nice graph explaining that:

You can specify the new depth as a number (1, 2, 3, etc) or you can use the getNextHighestDepth() method which finds the next empty depth level and assigns it automatically to the movie clip in question. I recommend that you use the latter, because that will spare you from making errors, and also you won't have to keep track of the dpeth level numbers yourself.

NOTE If you do choose to assign numbers for depth levels, bear in mind that each movie clip must have its own unique depth. If you, say, assign a depth level of 14 to a movie clip and do the same thing for a movie clip that has been created afterwards, the second movie clip will completely replace the first one. Only one movie clip can be present on a single depth level. Also, each movie clip has its own depth level hierarchy, independent from the main timeline and other movie clips. This makes possible for the creation of other movie clips nested inside it. In its own depth level hierarchy, a movie clip has the depth 0.

You may have noticed the ActionScript keyword this preceding both the createEmptyMovieClip() and getNextHighestDepth() methods. The keyword this denotes (points to) the timeline it is situated on. So in the line of code that you just wrote, this points to the main timeline, on which it resides. This means that the myButton1 movie clip will be created on the main timeline.

4. You can check if the movie clip was really created very easily: test your movie by selecting Control > Test Movie. The SWF file window ill appear, completely blank, which is normal.

5. Still in the testing window, select Debug > List Objects.

6. Flash will show you the objects that exist in this movie:

As you can see, the myButton1 movie clip is nicely displayed, and it resides on the main timeline (_level0).

The main movie clip was just made — think of it as the shell, the holder of all graphical content. You can start drawing the graphics dynamically inside it directly, but there is a small problem: I found out that you can't apply any filter to this movie clip that was created directly on the main timeline (if you find out how, post it in the forums, I'll be glad to see how to pull that off :). So you have to make another one inside it, that will store all the graphics and will be able to have filters (like a shadow, blur, etc) applied to it.

7. Insert the following line of code right after the first one:

myButton1.createEmptyMovieClip("buttonBkg", myButton1.getNextHighestDepth());

This piece of code is very similar to the previous one: it creates an empty movie clip, but inside the myButton1 movie clip. As you can see, the ActionScript keyword this was replaced by the main movie clip's instance name, myButton1. The new movie clip, which I chose to call buttonBkg (because it will hold the main button graphics — its background) has a new depth assigned to it, inside the myButton1 depth level hierarchy. You will now proceed to create graphics for this movie clip, using nothing but ActionScript.

Top of page

Creating the main button shape at runtime with ActionScript

8. Following the existing code, insert the new one:

myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");
myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);

9. Test your movie (select Control > Test Movie). You will see a rectangle appear, placed right in the SWF's upper left corner.

This is perfectly normal. Flash places any new empty movie clips created via ActionScript in the main movie's upper left corner, which is the origin point of Flash coordinate system. Before I explain to you how the rectangle was created, you will move the myButton1 movie clip so that you can more easily see what you are creating.

10. Add the following two lines to the existing code (shown in bold):

this.createEmptyMovieClip("myButton1", this.getNextHighestDepth());
myButton1._x = 200;
myButton1._y = 100;
myButton1.createEmptyMovieClip("buttonBkg", myButton1.getNextHighestDepth());
myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");
myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);

These two lines move the myButton1 movie clip along the X and Y axis. If you test your movie now, you will see the rectangle appear somewhere around the middle of your SWF.

Let me show you now how the rectangle was made. Before any ActionScript drawing can be started, you must define the type of line with which Flash will draw:

myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");

Since you are creating graphics inside the buttonBkg movie clip, you must reference it by writing myButton1.buttonBkg, because it is nested within the myButton1 movie clip.

The next thing that comes is the lineStyle method, which defines the type of line. There are many parameters inside it, I will list them here as they appear inside the method's parenthesis:

1. Thickness. This is the line thickness, expressed in points. The value can be any number from 0 to 255. The value of 0 creates a hairline thickness, the finest possible line. Remember that this value must be defined, otherwise the line won't be drawn.
2. RGB Color. This is a hexadecimal value, indicating the chosen line color. If you need a specific color, all you have to do is open any one of the color picker palettes in Flash, find the color you like and copy its hex code, then paste it here. Note that the color isn't written as in Flash working space (for example, green: #00FF00), but with a zero and a lowercase x following it: 0x00FF00.
3. Alpha. This is the transparency of the line, which can range from 0 to 100. 0 indicates complete transparency (i.e. invisibility), while 100 is a completely opaque line.
4. Pixel Hinting. This is a Boolean value (meaning either true or false). It tells Flash if the drawn lines should be placed on full pixels or not. A value of true is a good option for straight lines, but may make the graphics blurry if curves are drawn. Experiment and see what works best for you.
5. No Scale. This is a String (text) value, which indicates if the lines that are going to be drawn should scale if the movie clip is scaled (scaling is like zooming in or out on an object). The possible values are:
   • "normal" — this is the default value which always scales the thickness of the line.
   • "none" — the line thickness never scales.
   • "vertical" — line thickness won't be scaled if the movie clip is scaled only in the vertical direction.
   • "horizontal" — line thickness won't be scaled if the movie clip is scaled only in the horizontal direction.
6. Caps Style. This parameter tells Flash which type of cap to use at the end of the drawn lines. The possible values are:
   • "round"
   • "square"
   • "none"
     
     Here is a nice image explaining these values. Notice that in each case I drew a white line which has the same length as the thick red line below it, so that you can more easily see what caps are and how do they get rendered.
     
     
     
     
7. Joint Style. This parameter tells Flash how to join lines at angles. The possible values are:
   • "round"
   • "miter"
   • "bevel"
     
     This parameter basically boils down to this: If "round" is used, the corners will be rounded, if "miter" is used, the corners will be sharp and protruding, and the last value, "bevel", cuts off an angle.

There is one more parameter that can be used, miterLimit. This last option comes into play only if the Joint Style was set to miter. Since it wasn't, you can leave it out.

Now that the line type was defined, the drawing can begin. Here is how the rectangle was drawn by Flash:

myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);

This is done via the lineTo method, which uses coordinates to trace lines from point to point. The starting point is the upper left corner of the movie clip (this is the origin, where both X and Y coordinates equal zero). You can find more on this method in my tutorials that explains how to draw with ActionScript, since I don't wish to repeat myself here. A nice figure will quickly make clear how the rectangle was drawn:

To see how this rectangle will be filled, continue onto the next page.