Book Image

LiveCode Mobile Development Beginner's Guide

By : Colin Holgate
Book Image

LiveCode Mobile Development Beginner's Guide

By: Colin Holgate

Overview of this book

LiveCode is a tool for developing mobile apps designed for those who don't want to use Objective-C, C++ or Java. Although it is a tool full of rich features to create apps it can be challenging to get beyond the basics and build interactive and fun apps. Using this book, you can develop various apps and this book guides you through "till you upload the apps in the appstore."LiveCode Mobile Development Beginner's Guide" will explain how to create applications with the easiest, most practical cross platform framework available, Livecode Mobile and upload the apps to the appstore with minimal effort.Throughout the book, you'll learn details that will help you become a pro at mobile app development using LiveCode. You begin with simple calculator application and quickly enhance it using LiveCode Mobile. Start by learning the interface controls for videos and images of LiveCode's environment. Dig into configuring devices, building user interfaces, and making rich media applications, then finish by uploading the mobile applications to App Stores. You will learn how to build apps for devices such as iPhone, Android with the recently developed LiveCode Mobile through sample applications of increasing complexity.
Table of Contents (16 chapters)
LiveCode Mobile Development Beginner's Guide
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Other interface controls


So far we have only had to look at buttons and fields to be able to create the calculator. In later chapters we will use many more controls, so let's take a sneak peek at those.

Video player control

If your system has QuickTime installed, LiveCode can play QuickTime movies, using the Player control type. Those can be added to the card in several ways, as well as by using a script command as described in the following points:

  • A file can be added from your hard drive by selecting Import as Control/Video File from the File menu

  • An empty player can be created by selecting New Control/Player from the Object menu

  • A player control can be dragged from the Tools palette to the card

  • A player can be created with code, including setting its name:

    new player "player name"

Having added the player to the card, you can then set which video file is to be played by entering the file path or URL of the file under the Basic Settings of the Inspector palette. You can also set the path to the video with the following script:

set the filename of player "player name" to "file path or URL"

Still image control

In the same way that you just saw for playing video, still images can also be added to a stack. All of the options shown for adding a video player can be used for images. Here, for example, is the script needed to add the RunRev company logo to the card:

new image "revlogo"
set the filename of image "revlogo" to "http://www.runrev.com/runrev-globals/corporate-nav/images/runrev.gif"

Rollover buttons

Images that you import can be used as icons in a button. To set up a button so that it has a nice idle state image, and an associated highlight image, you would do the following steps:

  1. Select File | Import As Control | Image File…

  2. Choose the images that represent the idle and highlight states, and click on Open.

  3. Select the button that you wish to look like these images, and under Icons & Border in the Inspector palette, click on the magic wand button to the right-hand side of the top entry (Icon).

  4. In the dialog that appears, select This Stack from the drop-down menu.

  5. Select the image that is the idle state for the button.

  6. Click on the magic wand button next to the Hover entry, and choose the highlight state image.

  7. Under Basic Properties, choose Transparent Button from the Style drop-down menu.

  8. Uncheck the boxes for Show name, Auto hilite, and Shared hilite.

  9. Resize the button to be big enough to show the image.

  10. Select each of the original images, and under Basic Properties, uncheck the Visible box.

Here we can see two images that have been imported in order to give the Begin button a more iOS appearance. The button is selected, and the Inspector palette shows the icon selection choices.

Then when you choose an image to use, the button itself will be updated. In this case the Hover Icon has been set to the darker version of the graphic, but as shown here, the button still needs to be resized.

Many More Controls…

LiveCode has a lot of different controls. Many are just slight variations, but there are plenty that are quite different from each other. Look at the Object menu, and then New Control. As you'll see the list is very long!