Create your Project

Start out by opening up LiveCode and creating a new project, by going to File/New Mainstack. Save your stack and name it "Skinning.livecode". If you want to use exactly the same images as we've created this tutorial with, then download them here and place them in a folder.

Add a Substack

Add a substack by choosing "New Substack" under the File menu. The reason we create a substack is that it makes it easy to find the images and reference them throughout the project. It also eliminates the possibliity of conflict later in development.

Import your images

Import your images into this substack, by choosing File/Import as Control/All images in Folder. Select a folder where you have previously placed all the images you want to use in your project.

Create a button

Go back to your main stack window, and create a new blank button, from the Object menu.

Link the Property Inspector

Open the Property Inspector for the button you've just created, by double clicking on the button. Now, link the Property Inspector to your button, by clicking on the padlock icon, circled in red in the screenshot above. This allows us to bring up a second Property Inspector, for the objects on the images substack, as show below.

Load a Second Property Inspector

Double cilck on an image in the substack to load a second Property Inspector.

Set the Icon ID

Select the image we've called "Normal.png" and you will see it's ID appear in the ID window (1) of the Property Inspector. In the screenshot this is 1006. Enter this in the Icon box for the Property Inspector we linked to our blank button (2).

Set Hilite and Hover Icons

Select the Rollover and Hilite images to see what their ID's are (1), then enter these ID's in the appropriate boxes "Hilite" (2) and "Hover" (3) in the Property Inspector for the blank button.

Check your Button

We've now created a button, with a hilite and rollover effect. To see this, go into Run mode by selecting the "run" arrow in the top left of the Tools Palette (1), and try rolling over and clicking your button (2).

Add a Background

Find the ID for the Background.jpg image by selecting it and checking the ID box in the Property Inspector. Make a note of the ID. Now go into the Card Inspector for the main stack by choosing Card inspector from the Object menu. From Basic Properties, choose Colors and Patterns. Now select "Background" as shown below.

Enter the ID for your Background.jpg image in the ID box as shown below:

This should add the background image as a background to your main stack.

The Bouncing Ball

Now we're going to create the bouncing ball. First create a new blank button, choosing Blank Button from the Object menu. Name the button "Ball" in the Name field of the Property Inspector.

Set the button to use the Ball graphic

Check the ID of the graphic named "ball.png". In the screenshot it is 1004. Now select the new button you called "Ball" and choose "Icons and Border" from the drop down menu at the top of the Property Inspector. Enter the ID into the Icon field, as show below.

Resize the button as necessary, to show the whole of the ball image.

Create a Path

Drag out the curved line tool from the Tools Palette and draw a line up and down the screen. If you need to reshape your path you can do so using Object menu/Reshape Graphic.

Make it Vanish

Name this curve "path" (1), and uncheck the "visible" box (2) in the Property Inspector, so that the path itself disappears.

Add Some Code

Select your Animate button, and open the Code Editor for it by clicking on the Code icon in the toolbar. Enter the following code:

On mouseUp
    move button "ball" to the points of graphic "path" in 5 seconds without waiting
end mouseUp

Without waiting simply tells LiveCode to go on doing other things while it is executing this script. Remember to hit the "apply" button in the top corner of your Code Editor.

Try it! You should now see the ball bounce across the screen when you select Run mode from the Tools Palette, and click your Animate button.

Handy Tips

This project should deploy with no changes across the mobile and desktop environments. Obviously, you can use these principles to customize your own apps. Here are some additional tips you may find useful:

Use the Application Browser to show objects you have hidden. Alternatively you can temporarily show all hidden objects by choosing View menu/Show Invisible Objects. Don't forget to hide them again when you're done.

Replace an image referenced throughout your project by importing a new image into your image substack, noting the old ID, deleting the old image, then setting the ID of the new image to be the same as the old one.

Use the visual effect command to hide and show objects with a transition effect, eg:
show button "ball" with visual effect dissolve