This is the core component or widget that forms the basis of most CLIK components, including sliders, progress bars, and scroll bars. Many of the other components inherit functionality from the base Button component, and most user interface (UI) work will be done using or extending the Button component. The core Button component is a non-animated, bare bones button. It has the core behaviors of responding to mouseover events, and mouse clicks, keyboard presses, or game controller presses.

A few possible use cases for the core Button component might be:

• Menu buttons
• Ok/Cancel/Apply
• Screen select
• In-game console control buttons
• Mini-game buttons

This Button component and the other variants described in the next sections use the same ActionScript™ 2 (AS) class found in the Button.as file. It has all of the code necessary to make Button work. While it is not necessary to review this file in order to make use of the Button component, it is recommended.

1. To begin, open the CLIK_Components.fla file in Adobe® Flash®. On Windows, this is located at C:/Program Files/Scaleform/GFx SDK 4.6/Resources/AS2/CLIK/components/ CLIK_Components.fla. On Mac, this component file can be found in scaleform_gfx_4.6_macos/Resources/AS2/CLIK/components in the installed Scaleform SDK directory.

2. Hold down the (CTRL) key, then left mouse click on the following components in the Library pane:

   1. Button

   2. ToggleButton

   3. AnimatedButton

   4. AnimatedToggleButton

3. Release the (CTRL) key and then right click on Button. All four button variants should be highlighted.

4. Select Copy.

5. Create a new Adobe® Flash® file (AS2) by pressing (CTRL+N) or selecting File then New from the top Flash menu.

6. Right click on the blank area inside the Library pane of the new Flash file.

7. Select Paste to paste the four button variants into the Library.

8. Select Button in the Library pane by left mouse clicking on it.

9. Click and drag the Button component from the Library to somewhere on the Stage.

10. Repeat steps 8–9 for the remaining three button variants: ToggleButton, AnimatedButton and AnimatedToggleButton.

Figure 1: Click and drag the four button variants to the stage.