9. Editing Button Symbols

Once you have “converted” each of the three images into button symbols, you can edit the properties of each symbol by double-clicking it to enter symbol-editing mode.

Double-click on the first button, and you’ll notice that your timeline has completely changed! Don’t worry, you’re simply seeing the timeline INSIDE the button.

(Note: The image above represents Flash CS3. In Flash 8 the breadcrumb appears above the timeline)

How do you know you’re inside the button? If you look just below the timeline (above the timeline in Flash 8), you’ll see an area that reads “Scene 1” and another that reads “button1.” This is called breadcrumb navigation. Scene 1 is your main timeline. If you ever want to go back, just click on Scene 1, and it’ll take you back to the main timeline. In complex projects, you might have symbols inside of other symbols. This breadcrumb will show you the hierarchy of where you are and which symbol you’re currently in.

10. Understanding the Button timeline

To understand how the timeline of a button symbol works, you first have to understand how most clickable links work on a Web site. They have certain properties depending on how you interact with them. When you encounter a link on a Web page, several things happen depending on what you do with your cursor:

1. You initially see the link or button displayed.

2. You move your mouse OVER the button or link, and it changes to indicate that it is clickable. Maybe it changes color, gets brighter, or a text description appears.

3. And sometimes you will see a different color when you click down on the button.

On the button symbol timeline, you’ll see four sections or states. Up, Over, Down and Hit.

• Up – The up state is what you see when you first go to the project. It is the default state.
• Over – This is the state you’ll see when you move your mouse arrow over the button.
• Down – This is the state you’ll see when you click down on the button.
• Hit – This is a special state that is never visible to the public. It specifies which area will activate the button. In most cases, you can ignore this state and Flash will deal with the hit state for you. But this state allows for the possibility of creating “hotspots” or invisible buttons for more complex projects.

You now have two Keyframes that are independent of each other. Each one represents a different state. While the red play head is currently on the over state, click on the button image on your stage, and then in your property inspector click on swap.

This allows you to swap the photo on that keyframe for another photo. The advantage to using swap is that the new photo will be placed in the same exact location as the previous photo. If you were to manually delete the photo, and grab another copy from your library, then you might have a tough time remembering the exact position it was in.

Choose button1_down.jpg. This is the same photo, but in color.

After you swap the image, grab the red playhead and drag it back and forth between the UP and OVER states. You’ll see your image change from black and white to color. This shows you the change that will occur when you move your mouse over the image in the published project.

In fact, let’s test it now. You can test a project at any time by going to Control ? Test Movie. Or you can press the shortcut key which is Ctrl + Enter (command + return on a Mac). Try moving the mouse arrow over the image you modified with an OVER state.

Now close the window, and repeat the steps above giving each of your three images an OVER state. Remember, you can go back to the main timeline by clicking on Scene 1.