# Buttons

### To add a button

Choose the Button tool and draw a button on the frame

### To change the text label

Double click the button with the Select tool, or press Enter key when the button is selected and edit the text.

### To customize the button

Double click the button to customize it.

glass-button.sfd

To apply a style to a new button do the following:

- Double click the button and type "OK" as the label
- Choose Item > Text Color and set R:255 G:255 B:255, click OK
- Choose Item > Line Width > 4px
- Choose Item > Edge Rounding and put 6 as the radius, click OK
- Press Ctrl+L and set line color to R:188 G:115 B:42
- Choose Item > Gradient Fill and select "Vertical" gradient style
- Click Top Color and set R:255 G:255 B:255, click OK
- Click Bottom Color and set R:255 G:102 B:0, click OK
- Click Add Colors, select Point 4 and click Color 4, set R:182 G:75 B:0, click OK
- Click OK and press F9 for a preview

### To change the shape of a button

Double click the button and change the "shape" option.

### To change the over color

Select the button and choose "Action" > "On Over Color", uncheck "No Color" and choose desired color.

### To change button appearance on mouse events

Select the button and choose "Action" > "On Click Matrix" and "On Over Matrix".

### To change the click color

Select the button and choose "Action" > "On Click Color", uncheck "No Color" and choose desired color.

### To change mouse over color

Select the button and choose "Action" > "On Over Color", uncheck "No Color" and choose desired color.

simple-buttons.sfd

Example of combined "On Over Color" and "On Over Matrix".

# Image Background Button

This example shows a clipart image used as button background.

button-background.sfd | To create image background button: Import the image on a master frame Draw the button on the next frame Select the button and choose "Item" > "Edit Properties" Click "More" Set button background, set the bitmap in the "Custom Background" field and click OK Set Over Color (the button with change the color if the user moves mouse over it)

# Sprite Background Button

The following example demonstrates how to use a sprite as button background.

button-sprite.sfd | To create custom background button: Create a new project and add master frame Create a sprite background object on a master frame Add a new frame inside the sprite so you have Frame 1 and Frame 2, set them to Stop Draw a rectangle on Frame 1 and copy it to Frame 2 On Frame 2 change the color of the rectangle so you can see the difference between frames On Frame 1 set OnOver action as Go to Frame 2 On Frame 2 set OnOut action as Go to Frame 1 Exit the Sprite back to the Main Movie Clone the Sprite to the Next frame Duplicate the clone several times to create more buttons Add description text over each clone (Home, Products etc)