Button Symbols

Flash Course

Button symbols are used to create buttons in a Flash document, to add interactivity to the Flash presentation.
With buttons, the user can perform various actions, like playing and stoping a movie (or sound), loading a Web page, and others.

Creating a Button symbol

1. Select on Stage the object you want to convert into a Button symbol (usually a shape or an image).
2. Click Modify -> Convert to Symbol (or press F8).
3. Flash will open a "Convert to Symbol" window. Type in a name for the symbol. Click the Type list arrow, then choose Button, and click OK.
   

- Flash will add that Symbol in the Library panel, and the selected object in the Stage become an Instance of that Symbol.

• Another way to create a Symbol is with the New Symbol option:

1. Click the Insert -> New Symbol. Flash will open a Create New Symbol window, with the same Symbol Properties that you see when you use "Convert to Symbol".
2. Type in a name for the symbol. Click the Type list arrow, then choose Button, and click OK.
3. Flash enters a symbol editing mode that contains a blank scene, with a '+' sign in the center, and a specific timeline with four frames (Up, Over, Down and Hit). On the "Edit bar" will be displayed the name of the Symbol, next to Scene name (indicating that you are in the edit symbol mode).
   
   Anything you create in that blank page will be contained in the Button symbol. Create and add the content you want in that Symbol.
4. To return to the main Stage, click on the Scene name, in the Edit bar (or double-click on an empty area).
5. The Button symbol you have created is stored in the Library panel, from this panel you can drag on the Stage instances of that symbol.

Button symbols have their own Timeline with four frames: Up, Over, Down and Hit.

• Up - here it is defined the appearance of the button when in its normal, non-active state.
• Over - the content added in this frame is triggered when the user places their mouse over the button.
• Down - the content added here appears when the user presses the button with their mouse.
• Hit - defines the active area of the button. The content added here is invisible outside of the symbol editing mode.
  - If you not use this frame, the active area of the button will the content created in the last used frame.
  - This frame is useful when you want that only a certain area of the button to be activator (e.g a petal of a flower or its center).

In the next example we create a simple button:

1. Open a new Flash document, select the "Rectangle tool" and draw a rectangle on the Stage.
2. Make shure the rectangle is selected and click Modify -> Convert to Symbol (or press F8). Flash will open the "Convert to Symbol" window.
3. You can let the default "Symbol 1" name or give another name , chose the "Button" type, then click OK.
4. Now, the rectangle in the Stage is an instance of this Button symbol.
5. Open the Library panel, right-click on the name of this symbol and choose Edit (or double-click on it). In this way you'll enter in the edit symbol mode.
   - The Timeline will have the four frames: Up, Over, Down and Hit. Only the "Up" frame has a content (the rectangle), the other frames are empty.
6. Right-click on the Over frame, then Insert Keyframe. This will create a copy of the previous frame (Up) in the Over frame.
7. Select the "Oval tool" from Tools panel, chose a color in the Fill color, then draw a circle in the rectangle area.
8. Right-click on the Down frame, then Insert Keyframe. This will create a copy of the previous frame (Over) in the Down frame.
9. Click on an empty area on the scene, to make shure nothing is selected. Then select the "Free Transform tool" from Tools panel and click on the circle.
10. Once the circle is selected, click and drag one of its edges to transform it into an oval, then change its color (from Fill color).
11. Now the three states of the button are defined. Return to the main scene, by click on the Scene name in the Edit bar (or double-click on an empty area).
    - On the Stage, only the Up state is visible, the content added in the other states (Over and Down) is visible only in the edit symbol mode.
12. Now we test the button. Click Control -> Test Movie -> Test (or Ctrl+Enter). Flash will open an window with the button inside it.
13. Move the mouse cursor over the buton, then hold down the click on it.
    You can notice the Over state when the cursor is over the button area, and the Down state when you click it.
14. Lets define a content in the Hit frame, too. Close the Test window, open the Library panel, right click on the Buton symbol name and choose Edit. You'll enter in the edit symbol mode.
15. Right-click on the Hit frame, then Insert Blank Keyframe. This will create a blank page in this frame.

    The "Insert Keyframe" create in the current frame a copy of the previous frame, but the "Insert Blank Keyframe" create a blank page where you can add a new content.

16. In this blank page, select the "Oval tool" and draw a little circle on the '+' sign (to be included in the rectangle area).
    - The '+' sign indicate the registration point of the symbol, it is de X=0 and Y=0 coords.
    - This little circle will represent the active area of the button.
17. Now we test again the button in the Testing window. Click Control -> Test Movie -> Test (or Ctrl+Enter).
    Move the mouse cursor over the button, click on differen areas on it. The Over and Down states are made visible only when the cursor is on the area where the little circle was drawn. Only that little are activate the button actions.
    - In the active area, the cursor has the appearance of a pointer-hand.

- You can watch this example in the presentation below:

Creating buton

- You can download the FLA file with this example from -> Creating button in Flash.

• If you delete the content in the Up frame, you'll get an invisible button, but with the Over and Down states visible when the mouse cursor acts in the active area.

To can test the button directly on the Stage, click Control -> Enable Simple Buttons.
When this option is enabled, the Over state will be visible when you position the cursor over the button on the Stage, and when you click it, the Down state is displayed.
To disable this option, click again Control -> Enable Simple Buttons.

You can drag and use from Library on the Stage multiple instances of the same Button symbol, but any changes made in the Edit symbol mode is transfered to the master symbol and to all its instances.
The changes made to an instance directly on the Stage (like Rotation, Resizing or Color Effect) not affect the master symbol or the other instances.
If you delete the master Button symbol from Library, all its instances will be deleted.

You can find dozens of templates of ready-made buttons in Flash program. Select menu Window -> Common Libraries -> Buttons. This will open a panel with several folders for different types of buttons. These folders can be opened by double-cklick on them. Then you can drag the buttons on stage (they will be added in the Library).

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}