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.
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.
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.
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
1) Double click on the button to bring up the Property Inspector
2) Select 'Icons' from the Inspector
The 'Icons' tab
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
Click on the button next to "icon", then in the 'Image Library' selection choose 'This Stack'
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'
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
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!