Making Buttons: It's a Real Event

What you'll learn:
• Buttons sense "events"
• Buttons have an interactive timeline
• Buttons have "states" that can call up different pictures
• Buttons can use layers internally

Interactive Buttons: you use them every day on the Web. Most links are in essence buttons, and certainly any link made to look like a pushbutton is. Here are some pushbuttons from your Turtle Project profile page:

On that page, push any of these, and you'll go to a new page.

Flash makes great buttons, in fact it’s easy. But like everything else in Flash, there's more to buttons than that. With your mouse, roll over the orange letters below:

A button is an object that responds to an EVENT.

So what is a button?

Buttons are interactive objects. Buttons “interact” with your mouse movements. These mouse interactions are called user events. So …

What is an event?

An event means simply that something happens in Flash. If your movie is running at 12 fps, every 12 seconds an event takes place: Flash "enters the frame" and re-reads the code; it's a frame event (onEnterFrame). If you move the mouse, it's a user event a.k.a. a "mouse event." If the event triggers some code left there like a beartrap, it can cause an "action" to occur.

Let's Start Small by Making a Simple Push-Button.

We're going to make a simple pushbutton like the one I used on the sample movie last week. It's made to look like a glass light with a brass collar.

Go to the main menu and select Insert > New Symbol (F8) > Button: your screen should look like this in the timeline panel:

There are layers, like the timelines for most symbols, but look — there are four boxes rather than proper frames! The timeline of a button responds to input, it's timeline is wholly interactive. The first box contains a keyframe for whatever your button-object looks like before the mouse has rolled into it. It's called the "Up" position.

Draw a circle with a green circular gradient fill and a black stroke:

Your panel should now look like this as the object fills the empty keyframe:

Now place a keyframe in the box marked "Over" … this is the picture that will show or movie that will play when the mouse cursor rolls over your button-object.

Go to the stage, and change the green circular gradient fill to a red circular gradient fill:

What's going to happen, then, when your done is that when someone looks at your button, they will see the green, but when they roll over it with a mouse, it will seem to glow red instead.

In the panel, place a keyframe in the box marked "Down" … this keyframe will play the picture when the user presses the mouse button down.

As before, change the fill to a gray circular gradient fill. When the user clicks the mouse button, the red light will seem to drain to gray.

Now place a keyframe in the last box marked "Hit" … this will interpret the shape as being the area of the button activated by the mouse rollover.

As with other objects, you can layer buttons! We're going to put a "brass" collar around the button. First name the button layer, then create a new layer and name it collar.

Lock the button layer, and draw a yellow orange circle with a black stroke; it will, of course show up behind the button. Note that after being keyed in the "Up" box, it plays all through the other boxes.

Let's add "shine" to the button by adding dots of white. Make a new layer called "hi-light" above the button layer.

Draw dots of white, and the finished button looks like this.

You're ready to drag the finished button to the stage. You can test it by going to the Main Menu and pulling down Control > Enable Simple Buttons. This lets you see the button work without producing a SWF file (remember to turn this function off or you won't be able to work with you buttons! It should work like this:

If you put ActionScript on this button, it would call move the movie along the timeline, call up other movie clips, or change the propertie of Flash objects.

PART II: Button Assignment -- "Before & After"

GOALS:
• Understand multiple timelines: the button's and the movie's.
• Learn to think of buttons as interactive devices, not just "pushbuttons".
• Envision how code can create action, then write the code.

Examples of the in-Class Assignment, "Before & After"

Study the following examples. Your assignment is pretty simple: make a little story using the animation possibilities of a button mixed with normal animation on the main timeline. It should go like this:

You have an object, like my bug or my little bud of a plant:
• State One: the object before the change
• Then: the button is the force that changes the object
• When you use the button, the object enters State Two: in my movies, the bug is squished or the plant grows.

Your object, before and after, and any button state can be either a graphic or a movie clip.

How to Code the Project with ActionScript

Our "Before & After" project uses the states of a button as an animation itself. In the little story, the button is what causes a subsequent thing to happen. Look at the hammer above: it's an object that's going to cause something to happen, right? It's threatening to squish the poor, innocent little bug movie clip object. When the "hammer" is activated by clicking the mouse, an animation ensues on the main timeline (Scene 1) that gives us a squished bug. That is, although the hammer is moving because of its own interior timeline, the main movie doesn't move until the button is pushed — at that point, the rest of the movie can play and the plant grows or the bug is squished.

All coding starts with creating a picture in your mind of what the code will do. Here's what our code must do.

• We must stop the movie so that the button can cause it to go on.
• Where the movie is stopped is the Before state of the story.
• We must then program the button so it makes the movie continue.
• The animation that plays is the After part of the story.

Here's a picture of how it works … just push the button:

To do this, we will place ActionScript on the first frame of the movie telling the playhead to stop the movie at frame 1. This will cause the movie to loop, playing frame one over and over again. THEN we will place a script on the button that will — when the button is pressed — send the playhead past the "stop" and let it play the rest of the timeline starting at frame 2. Simple, huh?

Stop the Movie: To place the "stop" script on frame 1, go to the blank keyframe on frame 1 of the "ACTIONS" layer and highlight it. Our "stop" will be a FRAME ACTION, or, simply, an action that takes place when the playhead enters the frame. With the keyframe selected, go to Windows > Development Panels > Actions [F9] … in the panel that comes up, we will code the first frame. Note that the top of the panel says "Actions: Frame". In the panel type in this code:

stop( );

Note that a script "a" appears over the little circle in the keyframe. An "a" like this should never appear anywhere but in the "ACTIONS" layer! Test the movie and ensure that it in fact will not play past frame 1. Testing the movie: Control >Test Movie or [command + return]; again, "testing the movie" outputs a SWF file to the folder your FLA is in.

You've Stopped the Action, Now, Start It Back Up: Now that you've created what happens "Before" the button is pushed, we need to have the button start the movie to play the "After" sequence on the main timeline. When the button is pushed, we will simply send the playhead to frame 2, where nothing will be in the way of it playing the rest of the timeline! Click on the button, and open the Actions Panel: the panel should say "Actions — Button", or this code will not work. Write in the panel:

on (release) {
    gotoAndPlay(2);
}

In this code, the user caused "event" is the release of the button after the mouse click. The "on" signals the button that there is an event to watch for. Between the squiggly braces is what will happen when the event has taken place, in this case, it is ActionScript that tells the playhead to go to frame (2) and play the frame.

Summary: Event and Event Handler

Look at the code above: as we've discussed, "release" is an event. But think about it: the user could press his mouse button many times as the movie plays without anything happening. The mouse action must happen on the right part of the screen and at the right point in the timeline. Each press is an event, but the movie ignores them all — unless there is code in place for the movie to "listen" for the event, then take some action. Above, the code that goes around the event "release" is called an "event handler"; the code listens for the "release" event, which enables the statement "gotoAndPlay" frame 2. It "handles" the event. Below is the general structure of an event handler, where you can fill in your own event and command (statement):

on (some_event) {
    some_statement( );
}