Creating a Button Symbol

1. Start off by making a new symbol: Insert > New Symbol and add the settings shown in the diagram below:

2. The first thing you may notice is that the Timeline looks different and that it says Scene1 Button1 on the left-hand side of the Edit Bar.

3. A Button symbol has four frames in its Timeline and they represent the following states:
Frame 1 - UP = how the button looks when the mouse/cursor is no-where near it;

Frame 2 - OVER = how the button looks when the mouse/cursor is over it;

Frame 3 - DOWN = how the button looks when it is clicked on;

Frame 4 - HIT = the size and shape of the area that will trigger a response when the mouse/cursor interacts with it. This shape must always be a solid filled shape.

4. If all of these four frames are the same, then you have a simple button. If each is different then the button will change with user interaction: in other words it will be a rollover button.

5. You can create invisible buttons by only having a solid shape in the HIT state and none in the other three frames. This can be useful for placing over an illustration to trigger a response.

6. Start off by creating a basic button design on the stage with the Up frame selected. The cross hair in the center of the Stage represents the center of the button, so make sure your design takes this into consideration.

7. In order to change the button states in the four different frames you will need to insert a keyframe to record the changes between frames. Click in the second Over frame and choose Insert > Timeline > Keyframe.

8. The Over frame is now filled with a black dot showing you that it contains a keyframe. Until you change it, this keyframe has the same contents as the one before, that is, your Up frame button design.

9. Click on the background of the Stage to deselect the shape and then change the color of your button.

10. Repeat the process on the Down frame. When a frame is selected, the keyboard shortcut F6 will also insert a keyframe and F7 will create a blank keyframe.

11. Finally, create a keyframe for the Hit state, but this time just create a filled solid that will cover the whole area that the user will click on to trigger this button.

12. Exit the Button symbol by clicking on the word Scene1 on the Edit Bar and go back to the main Stage. Make sure that you can see the Library panel. Select to Window > Library or CMND/CTRL + L if it is not visible.

13. Drag a copy of the Button symbol onto the Stage from the Library panel’s thumbnail and re-scale it if necessary.

14. Now to preview this button in action, select Control > Enable Simple Buttons. You are now able to move the mouse/cursor over your button and click on it to see the difference. Deselect Enable Simple Buttons when you have finished otherwise you will have problems moving and manipulating your button.