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 as 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. You can download all the materials for this lesson here: https://tinyurl.com/ycjxz4xz
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'.
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
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 which you can download here:
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'
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 display the buttons correctly 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' turn off the Opaque, 3D and Show Name properties
4. In 'Icons' turn off the Hilite Border property 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 'Position' from the menu
4. Set the layer of the image to 1
Now open the Property Inspector for the stack. On the Basic tab you will notice a property called Shape which has a wand button just like the 'Icons' selection 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 quit 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.