facebook google plus twitter
Webucator's Free Adobe Flash CS6/CC Tutorial

Lesson: Button Symbols

Welcome to our free Adobe Flash CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Flash CS5 Training course.

So far we have worked with only one of the three symbol types (the graphic symbol). Now, let's examine the Button Symbol.

Lesson Goals

  • Learn to create button symbols.
  • Learn to create text buttons.
  • Learn to create animated buttons.

Creating Button Symbols

Buttons are created like any symbol. You have two options:

  1. Create the content first, select the content and choose Modify > Convert to Symbol (F8).
  2. Choose Insert > New Symbol. Then create the content.

When you first create a Button Symbol, you will notice the biggest difference between it and the Graphic Symbol is the timeline. Button Symbols have timelines, but they are different in that rather than playing from the beginning to end, they have four special frames: Up, Over, Down and Hit.

These frames allow you to specify what changes will take place as the mouse interacts with the button. This file is saved as Buttons/demos/Buttons.fla.

Just like any other timeline, you may only edit keyframes. Add keyframes or blank keyframes just as you would normally. Any change that occurs between the up and down states will appear to the user when the mouse rolls over the button. Down is what appears when the mouse is pressed down.

The hit state is used to designate the trigger area. If you do not specify an area, all the visible content will serve as the trigger area. You need not use the hit frame unless you want to specify an alternate area for the trigger area. The hit state is great to use when dealing with irregular shapes that involve transparency.

As you will see below, the Hit state is commonly used with a text button.

Text Only Buttons (Using the Hit State)

By default, the trigger area for the button is your content. That means, if you have small narrow text, your user's mouse will have to be right on the individual letters to trigger the button. The Hit State will fix this problem by allowing you to designate a bigger trigger area.

Add a keyframe in the hit state then draw a shape that matches your desired trigger area. This shape will not be visible in the final product. Fill and stroke color do not matter, however any solid area will react as the hit area.

Open the demo saved as Buttons/demos/TextButtons.fla. Drag the playhead to the hit frame and you will find the shape setting the trigger area.

Animated Buttons

The frames of a button indicate what will be visible when the mouse is over or presses down. Any animations placed on a keyframe will run when that frame is called.

Symbols can be placed inside other symbols. Believe it or not, graphic symbols may be placed in movie clips which are placed in button symbols which are placed in another symbol!

Adding Buttons to the Web site

Duration: 20 to 30 minutes.

We will continue work on the web site from the earlier exercises. You may open your file from earlier (called Website.fla). You may also use the one saved as, Buttons/exercises/Website.fla.

We are going to create buttons out of the navigation text. So far, the text has been sliding in from the left into position. We want the text to be turned into buttons after it's in position. To do this, we will duplicate the navigation symbol and place the new duplicate on the next frame. Follow the steps below to get it done.

Position a new instance of the navigation in a new Keyframe

  1. In the last frame (frame 75) of the text links layer, add a blank keyframe.
  2. Click on Frame 74 in the text links layer. Single click on the navigation text symbol and copy it (Ctrl+c will work.)
  3. Click on the new blank keyframe in frame 75 and Paste in Place (Ctrl+Shift+v). This will paste the navigation in the exact position as the previous frame. Duplicate the Navigation Symbol and Swap Symbol
  4. Open the Library and find the navigation symbol.
  5. Right-click on it to duplicate the symbol. Name the new symbol "navigation buttons".
  6. Since we want the new symbol in the exact same position as the last one, we can use Swap Symbol to replace one for the other.
  7. Single click on the instance of navigation in Frame 75 on the text links layer. Open the Properties window and click Swap...
  8. Browse to the newly created navigation buttons.Convert Text into Buttons
  9. Find the new symbol called navigation buttons and open it.
  10. Click on the word "home" and select Convert to Symbol (or press F8) and name it "home button".
  11. Add a new Keyframe into the down state.
  12. Select the text in the over state and add a glow filter using the Properties Inspector.
  13. Add a Keyframe in the down state and change the color of the glow to yellow. Also check knockout.
  14. Add a Keyframe in the hit state to set the size of the clickable area of the button.
  15. Now, test your movie to see if it is working (ctr + Enter on Windows or cmd + Enter on a Mac).
  16. Since the new buttons have been placed at the end of the timeline, they will only appear on the screen for the length of one frame - only a small fraction of a second.
  17. Add additional Frames to each layer so that they all extend to Frame 100.
  18. Test your movie again (ctr + Enter on Windows or cmd + Enter on a Mac). If you are satisfied with the home button, repeat the above steps for the other four buttons. Name them facilities button, photos button, videos button, contact button.

If you are done early...

  • Add additional changes in the Down state.