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 it's rollover image.

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 & border' from the inspector

The 'Icons & Border' pane

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 images, and the 'hovericon' which will be displayed when a mouse hovers over the button.

1) The buttons on the right load a 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 'Image Library' selection and 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 a '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

 

Last step to finish

Last step to finish

Set the images to invisible and you are done. One fully skinned rollover button.

0 Comments

Add your comment

E-Mail me when someone replies to this comment