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
    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.

Comments (6)

Ian Stewart Friday Oct 19 at 05:18 AM

Hello

How do i set an icon of a button in script?

I have my images in another card right now and i try to call the image for a button by using this code:

set the icon of the btn "button_1" to 3234 of the card "Images"

Where am i going wrong?

thanks
Ian

Hanson Schmidt-Cornelius Friday Oct 19 at 06:10 AM

Hi Ian,

hmm, not sure what is wrong. What exactly is not working? Are you getting an error message? The code you describe works for me.

I am wondering if it may have something to do with the way you imported the images onto the card or if the ID does not actually refer to an image.

Images can be imported directly in the following manner: File -> Import As Control -> Image File ...

Or you can drag an image object onto a stack and then use the Property Inspector to include a link to an image in that.

The Property Inspector should also show you the ID of the image. The ID is normally displayed on the Basic Properties page of the property inspector. Next to that you will also find the size of the image. If the size is 0, then the image is usually included as a link. If the value is >0 then the image is physically available on the LiveCode stack.

If you are using a link, then it is possible that they are not included if you move the images or the stack to a different directory.

Remember also that images are not scaled to the size of the button. Maybe you are creating an icon of a rather large image on a button and the particular area of the image looks like the button background.

These are all just pointers, but I hope this helps you find the reason why the image does not display.

Kind Regards,

Hanson

Anna-Roisin Saturday Mar 23 at 03:52 PM

I really want to make it so that in my program you can change the background of the main card, I've already put in buttons that allow you to change the colour, for example from white to pink of the main cards background, however I want to create a button that allows you to select one of your own photos from your personal files and put the selected image as the background of the main card. However I haven't been able to create or find code which works in Livecode for this.

The code that I have tried allows me to select a file however won't put it as the background as it is not a recognised colour, would you be able to help me at all? Any advice would be appreciated.

Kind Regards Anna-Roisin

Hanson Schmidt-Cornelius Monday Mar 25 at 05:50 AM

Hi Anna-Roisin,

when you say that you want to put a personal image on the background, then I assume that you would like to display the entire image over the areas of the card and not tile the image.

I would use an image object, rather than try to load the image directly onto a card. Have a look at the following lesson on how to drag and drop an image into an image area on a card: http://lessons.runrev.com/s/lessons/m/4071/l/17203

This would be the first step. I would then also add some code that adjusts the size of the image, so it fits directly onto the size of the stack. Use some code like:

set the rect of image "imageArea" to the rect of card "card1"

In this case "imageArea" is the name of the image area and needs to be changed according to your stack. "card1" is the name of the card on which "imageArea" sits, again change this as needed.

You could put that code into a button or into a "resizeStack" message handler. If it is placed in the "resizeStack" handler, then the image is automatically resized, each time you resize the stack.

Kind Regards,

Hanson

Josh Sunday Dec 08 at 06:13 AM

I've got a working program with images. It works fine, but the images don't show in certain cards when I save the application as a standalone. I'm using windows, if it helps.
Is there a quick fix for this? Cheers!

Hanson Schmidt-Cornelius Monday Dec 09 at 11:10 AM

Hi Josh,

it is very difficult to answer your question without seeing the code in front of me. If your application seems to work when you use it interactively in LiveCode (Run mode), then you should generally be able to expect the same behavior when running it as a standalone application.

The only thing I can think of at this point is that you are referring to the images on the filesystem and are not including them in the application bundle. If you then move the application into a different location, as a result of building a standalone, and you have relative file paths, then you will probably not see the images. Images that have been imported or have the full path may still be accessible.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment