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)
|