FlasherDotOrg: AS3 Tutorials Part I (Interactive Buttons)

Interactive Buttons

Return to the Tutorials page

Goal: Create four interactive buttons that trigger four separate actions on the stage, using ActionScript 3.0.

Imported classes: flash.display.Sprite, flash.events.MouseEvent, flash.events.Event, flash.filters.DropShadowFilter, flash.filters.GlowFilter, flash.filters.BlurFilter, flash.text.TextField, flash.text.TextFieldAutoSize and flash.text.TextFormat

Methods: beginFill(), endFill(), drawRoundRect(), addChild() and
addEventListener().

Flash version: Flash 9 Professional

Download final version

The ActionScript 3.0 Foundation Elements can be found in the Members' Section.

In this tutorial we will create four rounded square graphics that will be given button capabilities. Each square will be assigned a different color and each will be given a drop shadow effect. Each "button" (these are Sprites with button capabilities, not button objects) will be given three Event Listeners to listen for: a mouse over event, a mouse out event and a mouse click event. When any of these events are performed, one of the six custom functions will play.

The first function applies a glow filter to the button on a roll over. The second function removes the glow filter. The third function adds a text field on the stage. The fourth function moves the text field diagonally across the stage. The fifth function blurs the text. The sixth function removes the text field from the stage.

Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it InteractiveButtons and save it inside the FlasherAS3_PartI folder. In the Document Class box of the Properties panel, type Buttons and then save the changes.

Open a new ActionScript file, name it Buttons and then save it inside the Code folder.

You now have twenty-six separate files on your computer:

In the FlasherAS3_PartI folder -
LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla, CircleEllipse.fla, Sprites.fla, MovieClips.fla, Filters.fla, InheritingClasses.fla, FormattedText.fla, LoadExternalText.fla, HTMLText_Hyperlinks.fla, ProgrammaticAnimation.fla and InteractiveButtons.fla.

In the Code subfolder -
LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as, MovieClips.as, Filters.as, InheritingClasses.as, FormattedText.as, LoadExternalText.as, HTMLText.as, Animation.as and Buttons.as.

Keep both InteractiveButtons.fla and Buttons.as open as we will be working with both of them simultaneously.

Return to InteractiveButtons.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your changes.

Return to Buttons.as and type in the following code:

Line 01: package
Line 02: {
Line 03: public class Buttons extends Sprite
Line 04: {
Line 05: public function Buttons()
Line 06: {
Line 07: }
Line 08: }
Line 09: }

screenshot 1

Save the changes.

This tutorial will require the Sprite, MouseEvent, Event, DropShadowFilter, GlowFilter, BlurFilter, TextField, TextFieldAutoSize, and TextFormat classes so let's import them now.

Place your cursor at the end of line 2 and press Return/Enter.

On line 3 type: import flash.display.Sprite;

Press Return/Enter.

On line 4 type: import flash.events.MouseEvent;

Press Return/Enter.

On line 5 type: import flash.events.Event;

Press Return/Enter.

On line 6 type: import flash.filters.DropShadowFilter;

Press Return/Enter.

On line 7 type: import flash.filters.GlowFilter;

Press Return/Enter.

On line 8 type: import flash.filters.BlurFilter;

Press Return/Enter.

On line 9 type: import flash.text.TextField;

Press Return/Enter.

On line 10 type: import flash.text.TextFieldAutoSize;

Press Return/Enter.

On line 11 type: import flash.text.TextFormat;

Press Return/Enter to add a blank line on line 12.

Place your cursor at the end of line 16 and press Return/Enter.
A majority of our button code will be placed between the constructor function's opening & closing curly braces.

screenshot 2

Save the changes. The set up is done; let's create those interactive buttons!

Each of the four buttons will consist of a rounded square contained inside a Sprite. Let's create the first button.

Line 17: Declare the variable (btn01), set the data type (Sprite) and then instantiate a new Sprite.

Line 18: Using the beginFill() method, add a dark blue color (#000099).

Line 19: Draw a rounded square using the drawRoundRect() method. Set the x & y to 20, set the width & height to 45 and the ellipse width & height to 15.

Line 20: Using the endFill() method, close the fill.

Line21: Apply a Drop Shadow filter. Set the distance to 4, the angle to 45, the color to #999999, the alpha to 3, set the blurX & blurY to 5, set the strength to 1, the quality to 1, the inner Boolean to false, the knockout Boolean to false, and the hideObject Boolean to false.

Line 22: Using the addChild() method, place btn01 on the stage.

Your code should look like this: [ view code ]

Save the changes and test the movie to see a lovely blue rounded square with a drop shadow.

screenshot 4

Each button will contain virtually identical code. Copy lines 17 - 22. Place your cursor at the end of line 22 and press Return/Enter twice.

On line 24, paste the code. The code will span line 24 - 29.

Change the variable name to btn02 where appropriate, change the fill color to #0000FF and change the y coordinate of the square to 90.

Your code should look like this: [ view code ]

Save the changes, test the movie and there is our second button just below the first.

screenshot 6

Place your cursor at the end of line 29 and press Return/Enter twice. Copy and paste the initial code to create two more buttons. The third button (btn03) has a fill color of #0099FF, the square's y coordinate is 160 and the code spans lines 31 - 36.

Place your cursor at the end of line 36 and press Return/Enter twice. The final button (btn04) has a fill color of #00CCFF, the square's y coordinate is 230 and the code spans lines 38 - 43.

Your code should look like this: [ view code ]

Save the changes, test the movie and all four of our buttons are in a neat and tidy row!

screenshot 8

A visually effective button has an effect that is triggered when the user rolls over it. Creating a roll over effect for btn01 will require two steps:

Create an event listener that "listens" for a mouse over.

Create a function that is triggered when the mouse over occurs.

Place your cursor at the end of line 43 and press Return/Enter twice.

On line 45 type: btn01.addEventListener(MouseEvent.ROLL_OVER, rolloverEffect);

We have given btn01 an event listener that "listens" for a mouse event (MouseEvent). That mouse event is a roll over (ROLL_OVER). When a roll over occurs over btn01 the rolloverEffect function is triggered.

Place your cursor at the end of line 46 and press Return/Enter twice. Beginning on line 48, type the following:

Line 48: internal function rolloverEffect(event:MouseEvent):void

Press Return/Enter.

Line 49: {

Press Return/Enter.

Line 50: event.target.filters = [new GlowFilter(0x0000FF, .25, 15, 15, 2, 2, false, false)];

Press Return/Enter.

Line 51: }

Our custom function has internal scope which makes it accessible package-wide. The function's name is one we created: rolloverEffect. The function's parameter is an event. The function is waiting for something to happen before it can play.

What is it waiting for?
An event.

What type of event?
A Mouse Event.

The action described on line 50 applies a glow filter to the target of the event. When the event listener that triggered this function is activated (by the user rolling over the button), the target (btn01) receives a glow filter.

Your code should look like this: [ view code ]

Save the changes and test the movie. Move your cursor over the top button and a glow appears around it.

Try the example: [ Sample Movie ]

Now the only problem with this is when the cursor moves away from the button, the glow remains. When we roll away from the button, the glow should disappear. Let's fix this with another event handler.

Place your cursor at the end of line 45 and press Return/Enter.

On line 46 type: btn01.addEventListener(MouseEvent.ROLL_OUT, rolloutEffect);

We have given btn01 another event listener that "listens" for a mouse event (MouseEvent). This time, the mouse event is a roll out (ROLL_OUT). When a roll out occurs over btn01 the rolloutEffect function is triggered.

Place your cursor at the end of line 52 and press Return/Enter twice. Beginning on line 54, type the following:

Line 54: internal function rolloutEffect(event:MouseEvent):void

Press Return/Enter.

Line 55: {

Press Return/Enter.

Line 56: event.target.filters = null;

Press Return/Enter.

Line 57: }

Your code should look like this: [ view code ]

Our custom function has internal scope which makes it accessible package-wide. The function's name is one we created: rolloutEffect. The function's parameter is an event. The function is waiting for something to happen before it can play.

What is it waiting for?
An event.

What type of event?
A Mouse Event.

The action described on line 56 removes all filters from the target of the event. When the event listener that triggered this function is activated (by the user rolling out from the button), the target (btn01) has all filters removed from it.

Save the changes and test the movie. Move your cursor over the top button and then move it away again. The glow appears and then disappears.

Try the example: [ Sample Movie ]

Now something else happened during the mouse out. The drop shadow filter was removed as well. For simplicity, let's add the drop shadow back onto the button in the roll out effect.

Place your cursor at the end of line 56 and press Return/Enter.

On line 57 type: event.target.filters = [new DropShadowFilter(3, 45, 0x999999, 3, 5, 5, 1, 1, false, false, false)];

Your code should look like this: [ view code ]

Save the changes, test the movie and now the roll over works seamlessly.

Try the example: [ Sample Movie ]

Let's now apply the same two event listeners to the other three buttons.

Copy lines 45 & 46. Press Return/Enter and paste the code.
Change the variable name on lines 47 & 48 to btn02.

Place your cursor at the end of line 48, press Return/Enter and then paste again.
Change the variable name on lines 49 & 50 to btn03.

Place your cursor at the end of line 50, press Return/Enter and paste a final time.
Change the variable name on lines 51 & 52 to btn04.

Your code should look like this: [ view code ]

Save the changes, test the movie and then roll over and roll out over each of the four buttons. Each has a glowing roll over effect. Well done!

Try the example: [ Sample Movie ]

The buttons look good; now let's make them functional! When a user clicks on a button, a new function is triggered. Place your cursor at the end of line 52 and press Return/Enter twice.

On line 54 type: btn01.addEventListener(MouseEvent.CLICK, addText);

An event listener has been added to btn01. The event being "listened for" is a Mouse Event.

What type of mouse event?
A click (CLICK).

When btn01 is pressed the addText custom function is triggered.

Place your cursor at the end of line 66 and press Return/Enter twice. Beginning on line 68 type:

Line 68: internal function addText(event:Event):void
Line 69: {
Line 70: announcement_txt.text = "Hello Flasher!";
Line 71: announcement_txt.autoSize = TextFieldAutoSize.LEFT;
Line 72: announcement_txt.x = 125;
Line 73: announcement_txt.y = 75;
Line 74: addChild(announcement_txt);
Line 75:
Line 76: var myFormat:TextFormat = new TextFormat();
Line 77: myFormat.font = "Impact";
Line 78: myFormat.size = 55;
Line 79: announcement_txt.setTextFormat(myFormat);
Line 80: }

Your code should look like this: [ view code ]

The addText function creates a text field with a string value of Hello Flasher!. The text field is automatically resized to fit the text value length and is placed at x = 125 and y = 75 on the stage. The text field is formatted to size 55 with an Impact font.

Now the only step left to complete, is to declare the internal variable in the main class itself. This is so the variable can be referenced by all four of the buttons. Place your cursor at the end of line 14 and press Return/Enter.

On line 15 type: internal var announcement_txt:TextField = new TextField;

Press Return/Enter so line 16 is blank.

Your code should look like this: [ view code ]

Save the changes and test the movie. Click on the top button and a text field appears on the stage.

Try the example: [ Sample Movie ]

Now it's starting to get interesting!

When btn02 is pressed, the text on the stage will move diagonally down 15 pixels and right 15 pixels. The name of the function is diagonalMove.

Place your cursor at the end of line 56 and press Return/Enter.

On line 57 type: btn02.addEventListener(MouseEvent.CLICK, diagonalMove);

An event listener has been added to btn02. The event being "listened for" is a Mouse Event.

What type of mouse event?
A click (CLICK).

When btn02 is pressed the diagonalMove function is triggered.

Place your cursor at the end of line 83 and press Return/Enter twice. Beginning on line 85 type:

Line 85: internal function diagonalMove(event:Event):void
Line 86: {
Line 87: announcement_txt.x += 15;
Line 88: announcement_txt.y += 15;
Line 89: }

Your code should look like this: [ view code ]

The diagonalMove function moves the text field to the right 15 pixels and down 15 pixels.

Save the changes, test the movie. Press the top button to place the text on the stage. Now when you press the second button from the top, the text field moves diagonally across the stage. Press btn_02 again, and the text moves further across the stage diagonally.

Try the example: [ Sample Movie ]

When btn03 is pressed, the text on the stage becomes blurred. The name of the function is blurIt. Place your cursor at the end of line 57 and press Return/Enter.

On line 58 type: btn03.addEventListener(MouseEvent.CLICK, blurIt);

An event listener has been added to btn03. The event being "listened for" is a Mouse Event.

What type of mouse event?
A click (CLICK).

When btn03 is pressed the blurIt function is triggered.

Place your cursor at the end of line 90 and press Return/Enter twice. Beginning on line 92 type:

Line 92: internal function blurIt(event:Event):void
Line 93: {
Line 94: announcement_txt.filters = [new BlurFilter(5, 5, 2)];
Line 95: }

Your code should look like this: [ view code ]

The blurIt function blurs the text field on the stage.

Save the changes and test the movie. Press the top button to place the text on the stage. Now when you press the third button from the top, the text field becomes blurred.

Try the example: [ Sample Movie ]

When btn04 is pressed, the text on the stage disappears. The name of the function is removeBtn. Place your cursor at the end of line 58 and press Return/Enter.

On line 59 type: btn04.addEventListener(MouseEvent.CLICK, removeBtn);

An event listener has been added to btn04. The event being "listened for" is a Mouse Event.

What type of mouse event?
A click (CLICK).

When btn04 is pressed the removeBtn function is triggered.

Place your cursor at the end of line 96 and press Return/Enter twice. Beginning on line 98 type:

Line 98: internal function removeBtn(event:Event):void
Line 99: {
Line 100: removeChild(announcement_txt);
Line 101: }

Your code should look like this: [ view code ]

The removeBtn function removes the text field from the stage.

Save the changes and test the movie. Press the top button to place the text on the stage. Now when you press the bottom button, the text field disappears.

Try the example: [ Sample Movie ]

Whew! In this series of tutorials you learned how to draw basic shapes, the difference between Sprites & Movie Clips, how to apply filters, how to inherite code from other AS files, how to import text from an external source and how to format it, how to apply HTML formatting and create hyperlinks, how to perform programmatic animation and create interactive buttons.

This series was designed to give you a basic overview of the foundation elements of ActionScript 3.0 and to help make the transition from 2.0 an easy one. Once you understand the logic and start to see the patterns, everything else begins to fall into place. We hope these tutorials were helpful and useful. Happy Flashing to all!