Using Button Icons and Background Images

Once you have a working application the next step is to improve the UI and user experience.

Your interface should already be laid out how you want it, this lesson shows you how to use button icons, background images and window shapes to make a really polished, attractive application.

Note: The images we use in this example were created in Photoshop.

Attached Files

Our Basic Application

So let's start off with the stack that we want to skin. A common application that is really lifted when skinned is a remote control.

Create a new stack called Remote Control and add Play, Prev, RW, Pause, FF and Next buttons. Resize these buttons to the the sizes you want.

Name the card 'Player'.

Button Icons

One thing we can do to improve the appearance of the stack is to add icons to the buttons. LiveCode allows you to specify images to be used as button icons. You can specify different icons for different button states. The two we use are

Icon - The image displayed in the button's default state
Hover Icon - The image displayed when the mouse is moved over the button

Importing Images

The images we want to use as button icons need to be part of the stack. Every control in LiveCode has a unique id and we use the id to associate images with buttons.

Add a new card to the stack by selecting 'New Card' from the Object menu, name the card 'Images'. We will import all the images we want to use as button icons onto this card so they are available to the rest of the stack.

To import the images onto the card go to

File > Import as control > Image File

and import all the images you will use in your stack.

Note: All the images used in this lesson are contained in the zip file associated with the lesson, the images can be found in the button images folder.

Associating Images

Now we have imported the images we can associate them with the buttons.

1. Go back to the 'Player' card
2. Choose 'Edit' mode
3. Select the 'Play' button
4. Open the Property Inspector
5. Select 'Icons & Border'
6. Click the selector button next to the 'Icon' property
7. Choose 'This Stack' from the Image Library dropdown, this allows us to select any image that is part of the stack
8. Choose the 'Play' button icon
9. Click the selector button next to the 'Hover Icon' property and repeat the process

Repeat these steps for all the buttons.

Setting Button Properties

To dispaly the buttons correcty we also have to set one or two of the buttons basic properties.

1. Select the 'Play' button
2. Open the Property Inspector
3. In 'Basic Properties' turn off the Opaque and Show Name properties
4. In 'Icons and Borders' turn off the Three D, Border and Hilite Border properties and set the Border width to 0

Repeat this for the other buttons then resize the buttons so you can see the whole image and spread them out.

Using an Image as a Window Shape

Like buttons, it is possible to associate an image with a stack. We do this in a similar way to the skinning of buttons but the stack will take on the shape and transparency properties of the image.

1. Import the image as a control on to the main card
2. Open the Property Inspector for the image
3. Select 'Size and Position' from the menu
4. Set the layer of the image to 1

Now open the Property Inspectr for the stack. You will notice a property called Shape which has a wand button just like the 'Icons and Borders' of the buttons. Use it to select the image you have just imported.

Your stack should now be the same shape as the image. You may need to line up both the background image and your buttons to the new window shape.

You will notice that you no longer have access to the minimize and close stack buttons available in a normal window panel. Create two buttons, one to close the stack, the other to minimize it. Set the script of the close button to

on mouseUp
end mouseUp

and the script of the minimize button to

on mouseUp
    set the iconic of this stack to true
end mouseUp

And there you have your fully skinned remote control.

Note: When you choose a shape for your stack the title bar is not shown so you need to add extra handlers to allow the user to move the stack around the screen. You can find these in the script of the background image in the sample stack provided.