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'.
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 which you can download here:
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'
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 mouseUpand the script of the minimize button to
on mouseUp
set the iconic of this stack to true
end mouseUpAnd 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.
Ian Stewart
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
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
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
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
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
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
roberto
Having a button with an icon and the show name set to on, is it possible to get the icon location of it?
What I am trying to do is to hide/show another control right on the center of the icon of the button, no matter how the gravity of the same is set.
Elanor Buchanan
Hi Roberto,
There is not a built in way to do this but you should be able to calculate the loc of the icon. You will need to take into account the size of the button, the size of the image file used as the icon, the iconGravity, margins of the button and borderWidth of the button.
I hope that helps.
Kind regards
Elanor