HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

Flash Basics III: The Button Symbol

download .fla file here Flash_basics.fla

 

OK, so you've created a graphic symbol named 'dot' (do that if you haven't already). Now, we'll create a set of buttons.

 

 

Part 1 - Making The Button Symbol

 

Go to the Insert menu and select New Symbol. Choose Button, name it 'dot button' and click OK.

Note that we have a different icon for buttons, and that we are now editing 'dot button'. Notice also that the timeline is a little different: it has just four frames, and they are labeled Up, Over, Down, and Hit. These are the Four States of all button symbols in  Flash (more on that a little later).

 

 

 

And finally, notice you now have two symbols in the Library, your 'dot' graphic and the newly minted 'dot button'.

 

 

 

While the dot button symbol is still empty (above), the dot graphic symbol has a black circle in it (below).

 

 

Now we're going to put instances (copies) of the dot graphic into the 4 states of the dot button. Make sure you have Layer 1 and Up State selected in the dot button timeline, then select and drag the dot graphic symbol to the central editing area of dot button and release. In the ALIGN window, with To Stage selected, press the ALIGN LEFT and ALIGN TOP buttons (go to previous tutorial if you need to review how to do this).

 

You should have a perfectly aligned (top and left) instance of your dot graphic in the Up state of the button:

 

 

We want to duplicate an instance of the dot graphic in each of the four states of the button. We may do this a number of ways: on older keyboards, click on the F6 (Keyframe) key three times.  You may copy this graphic (command + C), select the next frame in the timeline, and paste in place (command + shift + V). You'd repeat this process two more times. 

 

You may also duplicate the graphic in the Up state by selecting the Up state frame, and select Insert > Timeline > Keyframe.  Repeat this two more times.

 

 

You should now have an instance of the dot graphic in each of the four frames (four states) of the button. Note that these are KEYFRAMES, not just frames (that is, there's a little dot in each frame, and a line separating one frame from the other). Keyframes imply that we are going to CHANGE some aspect of the content in that layer from one keyframe to the next.

 

 

The four states will show us what the button will look like in relation to the mouse when we publish our Flash movie. Up is what the button looks like when the cursor is not over the button, Over is what it looks like when it is. (Note: when the cursor is over an active button, the cursor icon turns to a pointing finger). When you click and hold down a button, you get the Down state. The Hit state corresponds to the Hotspot (see Dreamweaver-Image Maps): it shows you what area will activate the cursor, but what is visible in the hit state of a button while you edit your Flash movie will NOT be visible when your movie is PUBLISHED.

 

With the cursor (MOVE) tool selected, select the Up state frame:

 

 

When you click on the instance of the dot graphic in the editing area, you should see the PROPERTIES BAR change to reflect the PROPERTIES (characteristics) of that dot graphic instance. We are going to change the properties of each of the instances in the button; that way, we build everything with one symbol, even though the individual instances may exhibit different properties. Later, we will see how this way of building symbols out of instances of other symbols is one of the great strengths of Flash: one change to one graphic can then change every instance of that graphic in other symbols.

 

In Flash, we need to know not only WHERE WE ARE (in this case, editing the button symbol 'dot button'), but WHAT WE ARE LOOKING AT, and in this case, we turn to the Properties Bar. If on the right side of the bar you see indications for Sound, you haven't clicked on the dot graphic. Click on the dot graphic, and you should see in the Properties Bar (on the left side) that we have a graphic symbol, instance of dot, that we are currently examining.

 

Beside the Color: label, select Alpha, and set that to 35%. Alpha is a property an instance of a symbol that designates opacity or transparency.

 

 

Now, click on the Over state frame, click on the instance of the dot graphic on the editing area, and select an Alpha value of 65%.

 

 

 

We'll keep the Down state at 100%, so when you publish your movie, your buttons will initially be dark (35%, Up state), they will be less transparent when you roll over them (65%, Over State), and they will be not transparent at all when you click on the (100%, Down state). The visual appearance of the Hit state will not matter here, but it will determine what area is an active hot spot. If you don't have a Hit state, the button will not work.

 

Part 2: Putting Buttons On The Main Stage

 

Now, we're going to put INSTANCES of the BUTTON SYMBOL out on the Main Stage. We do this so we can attach interactivity (written in ActionScript)  to the buttons so they can control other things on the stage (mainly, Movie Clips).

 

Click on the cursor (Move) tool, and click on the Main Stage (Scene 1) icon. Double-click on the Layer Name on the single layer of the main timeline. It will highlight, so change the name of that layer to buttons:

 

 

 

Select the dot button symbol in the Library . . . 

 

 

 . . . and drag six instances of that symbol, one at a time, to the left side of the main stage:

 

 

(Make sure you've selected your cursor [Move] tool)

 

Click and drag from the upper left corner of that column of six buttons, to the lower right corner. You'll get a solid rectangle while you draw . . .

 

 

. . . and all six buttons selected when you release your mouse:

 

 

In the Align window, DE-select the To stage: button, and align the buttons vertically to center, and distribute them evenly horizontally ( second button from left of top two rows of buttons):

 

 

One cosmetic touch: With the cursor tool, select the top button on the main stage. In the PROPERTIES bar, select Tint next to the Color label, and select  a color from the drop-down selection when you press the lower-right corner of the selection swatch. Set the percentage to 100%

 

 

 

 

Repeat this procedure for the other five buttons, each a different color:

 

 

Now, let's change some of the document properties to get a less default-looking design. With the cursor (Move) tool selected, click on the Main Stage  or the grey background of the stage. If you look at the Properties Bar, you'll see properties applying to the entire Flash movie. Click on the 550X400 size to open the Document Properties window.

 

Change the Dimensions to 800 pixels wide and 450 pixels high, change the background color to black, and change the Frame rate to 24 frames per second:

 

 

Now you're ready to test your movie. Do this by selecting Control > Test Movie, or by pressing command + return (Mac) or control + return (Windows).

[Note: Testing movie will create an .swf file of your Flash project, but it's not going to be the same as Publishing your project, which gives you more format and control options.]

 

 

An .swf file should pop up, and you should be able to roll over the buttons and click on them to see their different states:

Save your project as an .fla file, the editable envirnonment of Flash:

 

 

 

Remember, if you have multiple versions of Flash running on various desktops or laptops, you need to agree on a standard format, ideally the latest version most of your team has. Flash will save back to one previous version ( i.e., CS3 can save as Flash 8; CS4 can save as CS3, etc. Not all features will be supported when saving to earlier version.)

 

Those brave few can continue to the next tutorial, where we'll create an interface out of a timeline.