We talked about symbols in Lesson 3 when I introduced the timeline. Since Flash is created for the web, creating small file sizes is of paramount importance. One of the ways of assuring fast download time (also known as optimizing your file) is using symbols. Let's take a look and see how symbols really impact our work.

When you create a Flash file, you are working in the .fla Flash authoring environment. In order to make the file available for the web, you 'publish' the movie. This creates a .swf file. If you want to test your movie at any time during its development, you can go to the Control Menu - Control>Test Movie or press Control + Enter or Command + Return on your keyboard. This creates a .swf file and opens the Flash player where you can see your movie.

Warning: Your movie elements may appear distorted. Don't fret - they won't appear distorted when you embed the .swf file into an html document. This is merely a testing environment.

Flash has some other ways to help you be aware of how your final swf will download over different connections. This is called the Bandwidth Profiler and we'll get more familiar with the Bandwidth Profiler towards the end of the course. When you view your file in the bandwidth profiler, you can see how many Kb are being used in each frame, enabling you to make choices either to rearrange material, remove material that isn't absolutely necessary, etc. The Bandwidth Profiler is a visual graph of all the data in your current movie.

Let's do a little exercise revealing the simple power of symbols.

1. Open a new movie and name it 'forest'. Name layer 1 "tree".

2. Draw a quick sketch of an outline of a tree similar to mine. By default, a keyframe will be entered in frame 1. Save your movie.

3. Check the file size of your movie by going to the Control Menu - Control>Test Movie or Control + Enter on your keyboard. Open the Bandwidth Profiler by going to View Menu - View>Bandwidth Profiler.

Back to Top

4. The tree movie is currently using less than 800 bytes. Return to the workspace by closing the window of the Flash Player in which you're testing your movie. Click on the lower x in the toolbar. Clicking on the upper x will quit Flash.

5. Now you're going to add a drop shadow to this tree. Select the entire tree either by using the arrow tool and dragging a selection box around the tree or double clicking on the tree to get all the lines. You can hold the shift key to add to your selection. Copy the tree by going to Edit Menu - Edit>Copy or Control + C.

6. Create a new layer and name it "shadow". Drag the shadow layer below the tree layer. Select frame 1 of the shadow layer and paste the tree in the same location on the stage by pasting in place. Edit Menu - Edit>Paste in Place or Control + Shift + V. With the shadow selected, use the arrow keys on the keyboard to offset the shadow to the right and down a few pixels. Change the shadow color to black.

7. Save your movie. View the Bandwidth Profiler again by going to the Control Menu - Control>Test Movie or Control + Enter on your keyboard. How much larger is your movie with the shadow? I'm up to 1528 bytes which is almost double the original tree movie before the shadow.

8. Return to the workspace by closing the bottom X on the bottom toolbar and delete the content on the stage in frame 1 of the shadow layer.

9. Select frame 1 of the tree layer. This will select the entire tree. Convert the tree to a symbol by going to the Insert Menu - Insert>Convert to Symbol or F8. Name the symbol "tree" and make it a graphic symbol. Save your movie.

10. Return to frame 1 of the shadow layer. Drag an instance of the tree symbol from the library into frame 1 and position it on the stage so it's a few pixels to the right and a few pixels down from the original tree.

11. Go to the Properties Panel's Color: drop-down menu and select Tint. Select black 100% for the tint. Save your movie.

12. Return to the Bandwidth Profiler (Control + Enter) and check the file size using the symbol. Mine's down to 836 - just a few bytes higher than the single tree and almost 1/2 less the size of the original shadow that was not a symbol. I hope this illustrates to you the power of using symbols. Now let's fill in the forest by dragging on many instances of trees and transforming their size, rotation, skew, tint, opacity with the alpha slider, etc. I added 7 more instances of trees and my file size was only 900 bytes. My trees were 280 wide by 330 tall. That's a lot of graphic for a small file size.

13. Close the Flash Test Movie environment and return to the Flash authoring environment.

Back to Top

Button Symbols

When I introduced symbols several lessons back, I mentioned that each symbol has its own timeline. When we went to edit the symbol of the mouse, we noticed that the symbol was listed above the timeline to the right of the text Scene 1. This is one way to know if you're on the main timeline or in the timeline of a symbol. When we edit Button Symbols, the symbol's individual timeline will be more obvious.

Open a new Flash file and name it button06.fla.

Draw a red rounded rectangle with corner radius set to 16 and no stroke. Center it on the stage using the Align Panel by selecting the To Stage: button and clicking the horizontal and vertical center buttons on the top row. We've done this already in a previous lesson.

Select the shape and convert it to a symbol by using the Insert Menu - Insert>Convert to Symbol or F8. Name the button "but-red" and select "button" for its behavior. Click OK. Save your movie.

Open your Library. Window>Library or Control + L. Select the but-red symbol in the library and double click on the name to open the timeline for the button in symbol editing mode.

Notice the button icon with the name of the button at the top of the timeline to the right of Scene 1. The button name is in bold text on a gray rectangular background indicating that we are now in the timeline for this particular button symbol. The button is selected in frame 1 which is why the red button on the stage has little white dots over its surface.

The registration point for the button is the crosshair inside a small white circle. For our example, the registration of this button is centered in the middle of the button. The timeline of this button has 4 built-in frames or states: Up, Over, Down, and Hit. All Flash buttons have these 4 states even if the button has no perceptible or obvious visual or auditory change on any of the states.

Back to Top

Defining Button States

Here is a brief overview of the button states:

• Up - the cursor is not over the button.
• Over - the cursor rolls over the button.
• Down - the user clicks the mouse when the cursor is over the button.
• Hit - the area of the button that triggers the above states. The hit field may or may not be the same shape, size, and location of the button. We'll talk about this state later.

It is your turn to try it:

1. Move the playback head to the Over frame and insert a keyframe.
2. Move the playback head to the Down frame insert a keyframe.
3. Move the playback head to the Hit frame and insert a keyframe.
4. Return to the Over state and select the button. Change the fill to orange as below.

5. Now select the button in the Down state. Change the fill to green.
6. Change the fill to hot bubblegum bright pink in the Hit state.
7. Now click on the Scene 1 link to return us to the main timeline. Save your movie.

Back to Top

Let's test our button:

• Go to the Control Menu - Control>Enable Simple Buttons.
• Roll your mouse over your red button. Click. What happens? Your button should have turned orange on the rollover, green on the click, and back to red when you rolled off the button. The bubble gum pink doesn't show up. The Hit state does not show in a button. The Hit state defines the shape of the rollover area of the button. Right now our Hit state is the same shape as our button.

Let's go back into the button symbol and change the shape of the button in the hit state.

Double click on the button in the library to open the button's timeline. Select the pink Hit state and grab the scale or resize tool. Resize the button as below.

You can also use the scale modifier of the free transform tool or the W: and H: fields of the Properties Panel to resize objects.

the free transform tool the scale modifier option of the free transform tool

The Info Panel and the Properties Panel have input fields for width and height as well as X: and Y: positioning for each object. Enter the width in the W: field and the height in the H: field to resize any object.

Save your movie. Click on the Scene 1 link to return to the main timeline. Now roll your mouse over the area below the button. This triggers the button state changes even though your mouse is not over the actual button.

Go back into the button's timeline and open the Info Panel. Select the pink shape in the Hit state and enter these numbers for width and height, x and y values.
W: 550.0, H: 400.0, X: -275.0, Y: -200.0

Do you recognize the width and height values?

They're the default values for the size of the stage of our movie. This button's Hit area is now the size of the entire stage.

Let's test it out.

Save your movie and return to Scene 1. Is your entire stage a hot spot? In other words, has the cursor turned into a hand everywhere you go on the stage? If so, you should never see a red button because you're always in the Over state which we filled as orange.

Back to Top

The Button Hit State

Go back into the button timeline and clear the keyframe in the Hit state. Save your movie and return to Scene 1. The button still works without an apparent Hit state. Flash is using the shape from the previous keyframe to define the Hit state because that keyframe's shape extends into the Hit state. You don't need to have all the states filled in.

You're going to think I'm really nuts with this one but go back into your button timeline and insert a keyframe in the Hit state by going to the Insert Menu - Insert>Keyframe or right clicking on the keyframe to bring up the context-sensitive menu or pressing F6. The shape and color should automatically be the same as the previous keyframe - green. Save your movie. Now clear the keyframes of all the other frames. That's right. Clear the keyframe of the Down, Over, and Up states. To clear the keyframe - select the keyframe and right click and select clear keyframe from the context-sensitive menu. Do not use the remove frames command. You can also go to the Insert Menu - Insert>Clear Keyframe.

Flash will not let you clear the keyframe of frame 1 of a layer. The Up State is frame 1 so the workaround is to select the shape on the stage and press delete. When you have cleared all the keyframes except the green original shape in Hit state, save the movie and return to Scene 1. If you still have Control>Enable Simple Buttons on, you won't see a thing right? But move your cursor around in the middle of the stage and you should find a button.

Go ahead and turn off the Enable Simple Buttons command. Do you see your green button? Nope, - I get a turquoise swimming pool colored shape. If you have this turquoise shape with enable simple buttons off and nothing visible with enabled simple buttons on...congratulations, it's Flash Magic and you've just created your first Invisible Button.

Invisible buttons are a wonderful way to add button functionality to images or text without turning each one into a button. In other words, I can have one invisible button in one library and use it in all my Flash movies. I can drag the symbol from the library and resize it, rotate it, etc. to cover just about any shape or size and by using this one symbol, keep my file size small. Each instance of the invisible button can have a script sending the viewer to different locations even though they are all coming from one button symbol. I like that!

The disadvantage of the invisible button is that the button won't change states when the viewer rolls over or clicks down. You can correct this by adding keyframes to one or both of those states. The button will remain invisible as long as you don't have anything in the Up state.

You don't have to think of buttons in the traditional button sense. For Flash programmers who create games, buttons often take on unlikely shapes such as guns, tanks, etc.

The Foundation Flash book has a great explanation about making buttons from text. If you move your mouse over a text button and it flickers on and off, remember that the Hit State of the button is defined, by default, as the actual text itself - the gaps between the letters and the holes in the letters don't respond to the mouse.  If all buttons were like this, we couldn't use them effectively.  This is where the Hit State comes in handy.  Make sure to edit your button in Edit Symbols mode and select the Hit state keyframe. Use the Rectangle tool to drag a rectangle with a fill that covers an area of just about all your text. Don't worry about not being able to see your text in the authoring environment.  The Hit state image is invisible in the published movie."  Please make sure all text buttons have a filled rectangular Hit state so that the user does not have to place the cursor directly on a part of a letter to make the link active.

INTERACTIVE Flash DEMO

Here's a simple nontraditional button. Roll your mouse over the button and click.

Please continue to the next section of this lesson.

Back to Top

Up » 6.1 Symbols » 6.2 Scripting Buttons » 6.3 The Actions Panel » 6.4 Using getURL action » 6.5 Usability Tips