Buttons

 

VIEW:  Visit http://www.interactivenarratives.org

and select: All Info and Interactive Graphics

Review some fascinating interactive graphics driven by simple buttons.

 

A button is a Flash movie clip with different (4) frames that represent the button in all its possible states.  The button symbol has three button-state frames:  Up, Over, Down, plus one frame that defines the active button area.  To create the most basic button symbol, choose a simple shape and use it for each frame; change its color and add or modify internal elements for the various states.  When you complete all four frames, your button is ready to use.  Return to document-editing mode, and drag an instance of the button symbol from the Library panel to the Stage.

 

 

When you see the Blue arrow, you know youÕre in button editing mode.  You click on the blue arrow to get back to the main timeline.  Doubleclick on the button symbol to get you into button editing mode.

 

 

Demonstrate

1.     Open up a New Flash Document.

2.     Draw a circle on the stage and convert it to a button (Modify/Convert to symbol/Button):

 

 

Double click on the button to enter button editing mode. 

 

3.  When the button is Up, itÕll appear as it is in the main timeline.  Add more keyframes to the Over, Down and HIT frames (F6)

4. On the Over frame, change the circle somehow.  Here we have changed the color blue and added a yellow insideÉwhen the user brings the mouse over the button, this is the image theyÕll see. 

 

 

5. On the Down button, change the image once again. 

 

6. On the Hit button, leave it as it is.

 

 

Add some Timeline Effects to your buttons.  Insert/TimeLineEffects/.  On the Over frame, try adding a Blur. 

On the Down frame, try adding a Drop Shadow

 

 

Adding SFX

Go to some free SFX sites and download some sounds to your desktop:

Animal sounds: http://simplythebest.net/sounds/MP3/sound_effects_MP3/animals_mp3.html

Industrial sounds: http://simplythebest.net/sounds/MP3/sound_effects_MP3/industrial_mp3.html

Cartoon sounds: http://simplythebest.net/sounds/MP3/cartoon_mp3.html

 

Go to File/Import and import a few sound effects to your library.  Grab the sound icon of the sound you want and drop it on the button frame (frames, if you have an effect placed on the button).

 

Practice in Class:

1. Find a photo (online) to import that would be good for button animation:  a painting with specific elements you want to emphasize; a map that has certain features you want to note; a graphic that has elements youÕd like to highlight. Put this image on your FIRST LAYER of your Flash document, and lock the layer.

 

2. Create a sequence of buttonsÉa MINIMUM of 5 buttons.  Make the buttons original and INTERESTING.  Make them relate to the image you have chosen.  Draw them with your graphic tools. 

 

4. Work with the Over, Down and Hold keys, and animate your buttons.

 

5.  Put a different sound on each button.  (You can find the SFX in a folder provided) That means that each button needs to be different.  You canÕt just keep the same button and add on different SFX. 

 

You are welcome to also search online for your own SFX.

 

 

 

Invisible Buttons:

 

Sometimes you want to make a clickable area on top of an image, but you do not want a button graphic. The way to do this is by creating an "invisible" button.

 

Step 1: Have your image positioned on the Stage, and create a new layer to hold the button. In this example, we will make a button out of the woman walking in the photo shown below.

 

 

 

Step 2: Select the Brush tool and a bright contrasting color. Then paint to cover the area you want to behave as a button, or "hot" area.

 

Step 3: After covering the entire area with the Paint color, click once to select it.

 

 

Step 4: Open the Modify menu and select Convert to Symbol.

 

 

Step 5: Name your symbol, select Button, and click OK.

 

 

Step 6: Double-click the button area (the shape you painted on the Stage) to go into Symbol Editing Mode. You will see the distinctive button Timeline (below). Click and hold the frame under the label "Up."

 

 

Step 7: Drag the frame horizontally to the label "Hit," and drop it there.

 

.

 

 

 

Step 8: Exit from Symbol Editing Mode (Ctrl-E/Win or Cmd-E/Mac). Your button area will look like the pedestrian below -- a transparent blue overlay indicates the area of the button while you are in the FLA. When you save and export the SWF, you will not see the blue area in the final file. But when you roll over the button area, the hand cursor will appear.

 

 

Now that you have an invisible button, you can script it to do whatever you like on (rollover) and on (release).