Perhaps the most powerful aspect of LiveCode is the ability to write a small tool or application in a matter of minutes. Even large scale projects can be completed in a fraction of the time it would take to write them in one of the traditional languages. But how can you make your tool or application different to all the others out there? Welcome to the world of 'skinning'! LiveCode makes it easy to transform your application into a rich, visually appealing tool in a few very simple steps.
Download stack and resources here:
Our Basic Application
So lets 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. Align them if you wish using the Align Control tab in the Property Inspector - to do this you need to select all the controls together.
First lets skin the buttons. LiveCode allows you to associate a number of images to a button. This is done using the properties palette of the button in the 'Icons' section (1). We will use two of these associations in this tutorial:
Icon (2) - The image displayed in the button's default state
Hover Icon (3) - The image displayed when the mouse is moved over the button
Next we need to choose two images, a standard state and a rollover state for each button. To associate them to a button, we have to import them as controls to the stack. A standard way to do this is to create another card, in this case a second card called images, onto which we import the images. Create a new card from the Object menu.
The images in this tutorial were produced in Photoshop, but there are many places where great icon sets can be purchased and even applications that let you build your own icons. Note: You must use images that have transparent edges for this tutorial to work, .png and .gif files are ideal.
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. Instead of importing them one by one, you can import them using "All Images in Folder..."
We can now return to the 'player' card and associate all of the images to the buttons. Open the properties palette of the first button and select 'Icons' (1).
* Click on the button to the left of the Icon field (2) which will open the image chooser.
* From the pull down menu, select 'This Stack' (3) which will display all images located anywhere within this stack, including our 'images' card.
* Then choose the image you want as the standard state for the button (4).
Repeat these steps for the hover state by clicking on the wand to the right of the 'Hover Icon' (5) field and then repeat the whole process for each button on the remote control.
Setting button properties
To make the buttons blend into the background we have to alter one or two of the buttons basic properties.
In the buttons properties palette, select the 'Basic' tab (1) and change the style of the button to 'Transparent Button' (2) and uncheck the 'Show name' (3) property.
Turn off the checkboxes for 3-D (4) and Show border (5) and set the Border Width to 0 (6). On the Icons pane, uncheck Hilite Border.
Then resize the buttons (7) so you can see the whole image and spread them out.
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.
* Import the image as a control, this time to the main card.
* Bring up the images property inspector and select 'size and position' from the menu.
* Set the layer of the image to 1
You may notice that your stack size is a bit small for the background image, lets fix that.
Open the stack inspector. Select Position, and change the width and height to a size that shows all of the image. Now select the 'Basic' tab. You will notice a property called Shape which has a button just like the icons for 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. Edit the properties to make the buttons transparent (1) turn off show name (2) and remove borders (3).
Open the code editor from the toolbar, and set the script of the close button to
on mouseUp quit end mouseUp
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.