How to create a rollover button with icon images

This lesson shows you how to skin a button with an image

Find the button you want to skin.

Find the button you want to skin.

If you don't already have a button in mind, drag a new button from the tools palette onto your stack.

Import the images you want to use.

Import the images you want to use.

Go the the file menu and select 'Import As Control' and then 'Image'. This will bring up a dialog allowing you to browse to your files.

Select as many images as you want to import.

Select as many images as you want to import.

The image selection dialog will let you import more than one image at a time. In this case I have selected my button image and its rollover image. Note the images will import on top of each other, so drag them around to arrange them where you can see them.

Open the Property Inspector for the button

Open the property inspector for the button

1) Double click on the button to bring up the Property Inspector

2) Select 'Icons' from the Inspector

The 'Icons' tab

The 'Icons & Border' pane

You can see that this pane lets you specify a range of images for a button. We are only interested in the 'icon' which is the main image, and the 'hovericon' which will be displayed when a mouse hovers over the button.

1) The buttons on the left load an image chooser dialog which can be used to select the images we have just imported.

Select the images for the states of the button you want to set

Select the images for the states of the button you want to set

Click on the button next to "icon", then in the 'Image Library' selection choose 'This Stack'

Choose the specific image

Choose the specific image

Set one of the images for your 'icon' state and the other for your 'Hover Icon' state.

Finish by making the button 'transparent'

Finish by making the button a 'transparent'

1) Resize your button to fit the image

2) Set the style to 'transparent'

3) Set the 'showName' property to false

4) Set the 'autoHilite' property to false

5) Set the 'sharedHilite' property to false

6) Set 3-D to false

7) Set Show Border to false

 

Last step to finish

Last step to finish

The images you imported are still showing. Select these, and in the Property Inspector set each of them to invisible. You are done. One fully skinned rollover button. Switch to Run mode and try it!

0 Comments

Add your comment

E-Mail me when someone replies to this comment