Weve already seen that frames can have actions assigned to them. A frame action takes place when the playback head encounters a keyframe with an action assigned to it.

We can also make buttons for the user to click on, and assign actions to them! A button action takes place when the user clicks an on-screen button. Buttons are basically symbols with actions assigned to them.

Buttons can be plain text, bitmap images, or vector shapes. You can use the same button over and over again, and if you want to get really fancy, you can set buttons with flashy rollover states.

Buttons can be used to create interactive navigation by, among other things, instructing the playback head to jump to a different frame. Buttons can also activate movie clips, change sound, and stop the movie. Exciting, no?

Creating a Button

Creating a button is easy. First youll need an object you can turn into a button. You can draw a button or use artwork you already have.

FreeButtons.com allows you to use their stylish buttons for free! Check them out at: http://www.freebuttons.com/

After you know what you want your button to look like, follow the steps below to create it in Flash.

1. Draw or place an object.
2. Select the object and convert it to a symbol. (F8)
3. Name the button and choose Button from the behavior choices.

4. Click OK

You just created a button! Youll notice your new symbol appears in the Library with a button icon next to it. You can use the button over and over, attaching a different action to each instance of the button.

Assigning Actions to a Button

When we assigned actions to a keyframe, we selected the frame and added an action, right? When you assign an action to a button, the only difference is that instead of selecting a frame and adding an action, you select the onscreen button and add an action.

Take extra special care not to double click the button when selecting it. Youll enter into editing mode.

To Assign Actions to a Button

To assign an action to a button, follow the below steps.

1. Create a button or drag one from the Library.
   Buttons can be text, bitmaps, or vectors, but must be converted into a button symbol. (F8)
2. Select the button.
   Make sure you only click it once!
3. Open the Actions Palette
   (WINDOW-> ACTION) or (CTRL/CMD + ALT + A)

The Object Actions Palette should open.

4. Open the Basic Actions By clicking on the plus sign
   Youll be able to see the actions.

5. Choose an action.

Any action can be assigned to a button.

Creating Button Rollover States

You can make a rollover button in Flash. Check out ours at the web design course home. Youll do it in the button-editing mode. To enter into button editing mode, just double click any button!

Button editing mode is a little different bit different than the normal symbol-editing mode in that the timeline is only four frames long.

The first frame holds a keyframe that displays the buttons "up" state, what it will look like when it first appears on the screen.

The second frames keyframe will hold the buttons mouse-over state.

The third keyframe will hold the "down" or clicked state.

The fourth keyframe is a little different than the others. It doesnt define what the button looks like, but instead sets the buttons clickable area.

Flash rollover buttons are much less restrictive than JavaScript rollovers. Buttons do not have to be the same size in each state. Each button state can contain new or changed elements like graphics, sounds, or even movie clips!

To Add Rollover States to a Button:

1. Create a button or drag one from the Library.
   Buttons can be text, bitmaps, or vectors, but must be converted into a button symbol to function.
2. Double Click the button to enter its editing mode.

You may notice that the first keyframe is filled already. Its your buttons "up" state. The up state is what the button will normally look like. You can feel free to edit the button and change its up state. Keep in mind that any editing changes you make will apply to every instance of the button used in your movie.

3. Click in the "Over" frame and add a keyframe (F6)

4. Change the image on the screen.
   The button may have to be broken apart into a primitive base level shape (MODIFY-> BREAK APART).
   You can change it in any manner you see fit. The changed button will display when a user rolls over it. You can add text or a movie clip, change its appearance, or replace the button with a totally different image.

The cross in the middle of the button shows you the center point.

5. Click in the "Down" Frame and add a keyframe.
   The Down frame displays the button as it will appear when a user is clicking the button.

6. Change the image on the screen.

Using the Hit Frame

Flash will only recognize a rollover when the mouse is directly over an object. Thats fine, except for images like text that are hard to directly rollover. In the following text button example, Flash will recognize the line as a button, but not the white area around it.

Items in the The "Hit" Frame will never display on screen, but is instead used to define a rollover area. Anything you place on the Hit Frame will activate the buttons Over Frame when rolled over. The "Hit" Frame is optional.

1.      Make sure youre in button editing mode.

2.      Click the "Hit" Frame in the button and add a keyframe.

3. Draw a shape to trigger the rollover state.
   It doesnt matter what color the shape is. It wont show up on screen.

In the above image, anytime a user rolls over the red area, the button will become active.

Thats it! Return to your Flash movie by clicking the Scene Button.

Buttons do not activate directly in Flash. Test your movie by hitting F12.

Dont forget to attach an action to each instance of the button.

Attaching Actions to the Master Button

You can use the same button over and over again. Buttons retain their rollover states, but you must assign an action to the button each time you drag it onto the stage. If you want to assign an action that applies to the button every time it is used, it involves a little bit of clever trickery.

Youre trying to assign an action to the button that will always apply, but Flash wont allow you to assign frame actions in the button editing stage, or youd just assign a "Go To" or "Get URL" action to the buttons Down Frame. But alas, Flash wont allow this to happen

Youre to smart for Flash, though. Heres what youll do. Youre going to create a movie clip with a button inside it! That button can have an action assigned to it. Every time you drag the movie clip on the screen, itll have the button inside it!

1.      Create a movie clip.

2.      Double Click the movie to enter its editing mode.

3.      Select the shape and change it into a button (F8)

4.      Apply an action to the button.

5.      Exit the movie clip editing mode.

6.      Drag the movie clip onto the screen from the Library.

Volia! When a user clicks the movie clip, theyll also be clicking the button, sending your user off to happy navigation land.

Controlling Movie Clips with Buttons

You can control any movie clip with buttons. You can make any movie clip stop, play, or jump to a specific frame of the movie clips time line.

In this way, you can use movie clips to create interactivity without using the timeline.

Naming Movie Clips

Remember that you can drag the same movie clip from the library multiple times. When targeting a command at a movie clip youll probably only want to aim an action at one specific instance of the clip. If we name our movie clip instances as we drag them onto the screen well be able to refer to each one individually. That way we could have the same movie clip on the screen a number of times, but we could control which ever one we wanted.

Youll need to name each instance of a movie clip on the screen so you can target it individually.

1. Select the movie clip instance on the screen. Make sure you dont double click it!
   Remember, when I say an instance of the Movie Clip, I mean the actual item that displays on the screen after being dragged from the Library.
2. Open the Instance Panel
   WINDOW-> PANELS-> INSTANCE
3. Type the instance name in the box.
   You can name it whatever you feel like, as long as youll remember it later.

Targeting a Movie Clip

To aim an action at a movie clip:

1. Make sure that the desired movie clip instance has been named, (See Above), and is on the stage.
2. Select a the button (dont double click it) and open the Actions Palette
3. From the Basic Actions Menu, choose Tell Target

Youre going to "tell" a specific targeted movie clip to do something.

4. Choose the movie clip to target by clicking the little target icon in the lower right corner of the Actions Palette.

5. A window will open listing all of the named movie clip instances. Choose the one you wish to target.

Youve just assigned the movie clip to target. Your Actions palette should look like:

Now that youve targeted a movie clip, you have to tell it what to do!

6. Without leaving the Actions Palette, select another action. This action will only apply to the movie clip.
   For example, if you want the movie clip to stop playing, choose:

BASIC ACTIONS-> STOP

Your new action will be added to the action list window

Now, when a user clicks the button, the targeted movie clip will stop!

Tricks for Playing Movie Clips With Tell Target

Movie clips must be on the stage to be targeted. This can present a problem if youre trying to target a movie clip to start playing. You probably dont want the movie clip to appear before needed.

To solve this dilemma:

1. Set up the movie clip so that the first frame of the movie clip is blank, and contains a stop action.
2. Start the movie clip animation on the second frame.
3. If the movie clip needs to loop, make sure that the last frame contains a Go To action, directing the playback head to Frame 2.

Dont forget to drag your movie clip onto the screen and name it! The movie will be invisible, but will be represented on the screen by a little circle:

To Play the Invisible Movie Clip

1. Click a button and set a "Tell Target" action. Choose your desired instance to target by clicking the little target icon in the lower right corner of the Actions Palette:

2. Without leaving the Actions Palette, select:

BASIC ACTIONS-> GO TO

3. Set the action to jump to frame 2

Continue To Testing and Streamlining |