Creating a Four-State Button With the Flash Timeline and ActionScript 3.0

This tutorial came about after looking online for help with the very same topic. A lot of people seem to be asking the same question, but it was hard to find a neatly packaged set of instructions to follow.

So, like any decent netizen, I cobbled together this article, gaining inspiration from a couple of other blogs and using experience from some trial and error on my own. And now I offer it to you, hoping this will end your own search.

This tutorial uses Flash CS4 in combination with ActionScript 3.0, but you can apply these principles in Flash CS3. It presumes you already have a pretty good handle on creating animations in the timeline and a fair understanding of how to apply ActionScript to the timeline.

The aim is to have a navigation button in the form of a tab, tucked away to the side, for stepping backwards through an image presentation. I want it to slide open, change color and display its label. When the user clicks on it, it will navigate back one slide. If the user mouses out before clicking on it, it will slide back to its original position and color.

Note: remember to save often to avoid starting from scratch should something go wrong.

Limits of the Button Symbol

Flash gives you the ability to create a button symbol, but it's limited to three states: Up, Over and Down. There is also Hit which defines the interactive area around the button. This is fine for most uses of a simple button. In fact, this button symbol is actually a member of the SimpleButton class. But what if you want to change the appearance of the button or animate it when the user mouses over and then mouses away without clicking? In that case, you will need a fourth state called Out.

The built-in button symbol sadly doesn't have an out state.

Here's the takeaway: any symbol, like a graphic symbol or a movie clip symbol, can become a button. You just need to apply the proper ActionScript. In this tutorial, a movie clip will be turned into a button with four states.

Step 1: Storyboard or Sketch the Button

It will make your life a lot easier if you already have a clear visual idea of how your button will behave in each of the four states. Sketch it out on paper or use Illustrator or Photoshop to prototype the visual elements which can in turn be imported into Flash. This is a bit of work up front, but it's a lot better than working blind and having to go back and fix something because the concept wasn't thought through logically.

Step 2: Set Up the Document

Create a new document and choose Flash File (ActionScript 3.0). Set up the stage with the proper size and background color.

Step 3: Create an Empty Movie Clip Symbol

Instead of creating a button symbol, we'll create a new movie clip symbol. Press Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu. We'll call it "four state button".

Step 4: Add an Actions Layer

In the "four state button" movie clip, add a new layer and call it "actions".

Step 5: Add Labels for the Four States

Create another layer and call it "labels". Insert four blank keyframes at roughly equal intervals just enough so that you can leave enough room to read each label. Here I've put them at 20 frame intervals. Give label names of up, over, down and out in the Properties panel. These will be your button states.

Step 6: Create Action Keyframes

Add keyframes in the actions layer which correspond to the four states in the labels layer.

Step 7: Add Stop Actions

For each blank keyframe in the actions layer, add this.stop(); in the ActionScript Editor. This will make sure that the movie clip doesn't play through to other button states.

Step 8: The Up State

Create a new movie clip symbol by pressing Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and call it "up animation".

Step 9: Up State Graphic

For the button, draw a green box in one layer and add a white arrow in a layer above. Make sure it's registered in the top left corner. As this is static, there's no need for a series of frames for animation, but you always have the flexibility should you decide to animate it, such as a box that fades up into view.

Step 10: Add a Stop Action

Create a new layer and call it "actions". Make sure it's at the top. Select the blank keyframe and add this.stop(); to the ActionScript Editor. It's not completely necessary in this case since it's just a static image, but it's good practice to keep each state from looping.

Step 11: Define the Hit Area

The one thing missing from the button symbol editing mode that you don't have with movie clips is a special frame reserved for the hit area. This would define the boundaries where mouse events occur like clicks and hovers. Create a new layer and call it "hit area".

Draw a shape on the layer and set its alpha value to 0 in the Properties panel, making it invisible. This hit area will be as large as the button when it's fully extended. Note: If you have an animated sequence, make sure the hit area frames span the entire length of the animation.

Step 12: Instantiate the up state movie clip

Create a new layer in the four state button movie clip symbol called button states. Drag an instance of the up animation symbol from the Library panel and into the four state button movie clip symbol editing area in the button states layer. Make sure its X and Y coordinates are set to 0. Insert a frame at frame 20.

Step 13: The Over State

Press Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and choose Movie Clip. We'll call it "over animation".

Step 14: Shape Tween Animation

Return to the "up animation" movie clip, click on the green button and copy it. Return to the "over animation" movie clip and add a new layer called "button morph". Right-click to paste the green button in place in the blank keyframe.

Create another blank keyframe at frame 20 and right-click to paste in place again. With this shape, increase its width and change its color to orange. It should be the same size as the hit area created in Step 10. Select the entire range of frames and right-click to create a shape tween.

Step 15: Fade up the Label

To add a button label, create a new layer called "text appear" and use the type tool to create a static text object, in this case, PREVIOUS in a blank keyframe.

Right-click to insert a frame at frame 20. Select a frame in the layer and right-click to create a motion tween. I want the label to fade up starting in the middle of the animation, so I'll go to the motion editor and create keyframes in the middle and at the end, making three keyframes. The first keyframe will add a color effect with an alpha of 0% and the last two will have an alpha of 100%.

Step 16: Define the Hit Area

Add a new layer called "hit area". You can select the longer orange shape from the end of the shape tween, copy it and paste it in place into a blank keyframe on the "hit area" layer. Select it and give it an alpha value of 0% in the Properties panel. Insert a frame at frame 20 to make the hit area span the entire animation.

Step 17: Add a Stop Action

Add a new layer at the top and call it "actions". Add a blank keyframe at frame 20 and add a this.stop(); action in the actions panel. This will prevent the animation from looping.

Step 18: Instantiate the Over State

Return to the "four state button" movie clip. Insert a blank keyframe in frame 21 on the button states layer and drag an instance of the over animation movie clip from the Library. Make sure its coordinates are set to 0. Insert a frame at frame 40.

Step 19: The Down State

Create a new graphic symbol by pressing Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and call it "down graphic". There is no explicit animation required since it will only be displayed instantaneously when the mouse button is being clicked.

Step 20: Down State Graphic

For this state, all that is required, optionally, is to change the color of the fully extended button. You can copy and paste in place the orange box as well as the PREVIOUS label from the "over animation" movie clip in their respective layers. Change the orange box to red. Only one frame is required, there is no need for a hit area as the button covers the full area. And, since it's a graphic symbol, no stop(); action is needed.

Step 21: Instantiate the Down State Graphic

Return to the "four state button" movie clip. Insert a blank keyframe in frame 41 on the "button states" layer and drag an instance of the "down graphic" symbol from the Library. Make sure its coordinates are set to 0. Insert a frame at frame 60.

Step 22: The Out State

Press Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and choose Movie Clip. We'll call it "out animation".

Step 23: Reverse the Shape Tween

The out state will essentially be a reversed version of the over state. Return to the "over animation" movie clip and copy the shape tween frames, then come back to the "out animation", create a layer called "button morph" and paste the frames into the blank keyframe. Then select all the frames in that layer and choose Modify > Timeline > Reverse Frames from the menu.

Step 24: Fade Out the Label

Return to the "over animation" movie clip and copy the PREVIOUS text object, then go back to the "out animation", create a new layer called "text disappear" and paste in place.

Insert a frame at frame 20 then select the range of frames and create a motion tween. You will do the reverse of the motion tween created in Step 15 and create keyframes in the middle and at the end in the Motion Editor, but the first and middle keyframes will have an alpha of 100% while the last keyframe will have an alpha of 0%.

Step 25: Add the Arrow

To return the appearance of the button to its original up state, add a layer called "arrow" and place a keyframe in frame 20, leaving the first 19 frames blank. Copy the arrow from the "up animation" and paste in place back in the "out animation" in that last keyframe.

Step 26: Define the Hit Area

Again, we need to create a new layer called "hit area" and place a box large enough to cover the full size of the extended button. Give it an alpha of 0 to make it invisible.

Step 27: Add a Stop Action

Again, to keep the "out animation" from looping, we need to add a layer called "actions", put a blank keyframe in frame 20 and add a this.stop(); action in the Actions panel.

Step 28: Instantiate the Out State

Return to the "four state button" movie clip. Insert a blank keyframe in frame 61 on the "button states" layer and drag an instance of the "out animation" symbol from the Library. Make sure its coordinates are set to 0. Insert a frame at frame 80.

Step 29: Add Event Listeners

Now comes the ActionScript to make it all work. To detect mouse events like clicks and hovers, we need to add event listeners.

Click on the first keyframe of the actions layer in the "four state button" movie clip where we first added a stop action and open the Actions panel. We will add event listeners as shown below to detect a mouse ROLL_OVER, a MOUSE_UP (when the mouse button is released) and a MOUSE_DOWN (when the mouse button is pressed).

We use the ROLL_OVER event instead of the MOUSE_OVER event because of how it treats the child elements of the movie clip in context with the parent movie clip which is more suitable for this setup. We add false, 0, true to the parameters as a good practice to mark these listeners for garbage collection for when they're no longer needed.


this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true);

this.addEventListener(MouseEvent.MOUSE_UP, onMouseClick, false, 0, true);

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownButton, false, 0, true);

Step 30: Toggling Functions

For each event listener, a function will be called. Each function essentially advances the timeline to the appropriate state within the four state button movie clip and plays that section by referring to the label name.

You'll notice there's no event listener created for a MOUSE_OUT event. Instead of creating a standalone event listener, we will simply use the ROLL_OVER event to call up a function which will in turn remove its own event listener and add a new event listener for a ROLL_OUT event. In this setup, a ROLL_OUT event will work better than a MOUSE_OUT event.

The same goes for the opposite, where a ROLL_OUT event removes its own listener and reinstates the event listener for a ROLL_OVER event. By toggling these rollovers and rollouts, we keep the code clean and free from potential conflicts.


function onMouseRollover(e:MouseEvent):void {       e.target.gotoAndPlay("over");
		this.removeEventListener(MouseEvent.ROLL_OVER, onMouseRollover);
		this.addEventListener(MouseEvent.ROLL_OUT, onMouseRollout, false, 0, true);
	}

function onMouseRollout(e:MouseEvent):void {
		e.target.gotoAndPlay("out");
		this.removeEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
		this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true);
	}

Step 31: onMouseDownButton Function

To play the down state, create a function that corresponds to the MOUSE_DOWN event set up by the event listener.

1
2	function onMouseDownButton(e:MouseEvent):void {
3	e.target.gotoAndPlay("down");
4	}

Step 32: onMouseClick Function

Finally, we need to actually tell the button what to do when it's clicked. Add a function that corresponds to the MOUSE_UP event. A MOUSE_UP event is essentially the same thing as the last part of a CLICK event (down, then up).

For test purposes, I created a web link in a URL variable (in this case, to Adobe's website) then added the navigateToURL() method to the function so that I could verify that it's working. However, you can substitute this method with a call to navigate to another frame label, number or scene using gotoAndPlay or any other method you prefer.


var linkToAdobe:URLRequest = new URLRequest("http://www.adobe.com");

function onMouseClick(e:MouseEvent):void {       e.target.gotoAndPlay("up");
		navigateToURL(linkToAdobe); // you can substitute this with any other method or function
	}

Step 33: Instantiate the Button

The four state button is now ready to be used. Return to the main timeline and drag the four state button movie clip symbol to the stage on its own layer. A substitute background is added on another layer to better see the effect in context with other elements on the stage.

Step 34. Test the Movie

Make sure the file is saved and press Control-Enter (Command-Enter on a Mac) to test the movie.

Acknowledgements

Much thanks goes to Alex at Sanctified Studios for inspiring the original idea to use a movie clip as a button and to Dominic Gelineau of Zedia Flash Blog for showing the best way to create rollovers and rollouts in ActionScript 3.