Introduction

Hi, and welcome to Lesson 1 of the LiveCode eBook Academy.

In this lesson, we are going to look at:

• Creating our eBook stack
• Setting initial stack properties
• Implementation of the eBook intro video

Installing the Font

First, we are going to start with extracting the Zip file that is included with this lesson. Extract BitterRevenge.zip.

In the folder you will see a Fonts folder, in the Font folder is a font file called Comic_Book.ttf. This is the font we will be using throughout the application.

Windows

To install the font on Windows right click the file and select Install. This will install the font on your system.

Mac

To install the font on Mac double click the font file.

Setting up the Main Stack

Then we want to open up LiveCode, when you start up LiveCode you will see the Integrated Development Environment(IDE)

To make a New Mainstack, select New Mainstack from the File menu

Every application you create in LiveCode is a stack, this creates a new stack ready for us to start working with.

Then we want to save this stack, by selecting Save from the File menu or using the keyboard shortcut ctrl/cmd-s.

It is always good practice to save your stack, and I am going to call this Bitter Revenge.

Stack Properties

Next, we are going to open up the Stack Inspector which will allow you to alter the properties of your stack. There are multiple ways of doing this, for example via script or using the Project Browser but I have opted for the Stack Inspector as this is the method I am most accustomed to.

Every LiveCode object has a set of properties associated with it which describe how it looks and behaves. The Property Inspector displays all the properties associated with a LiveCode object and allows you to view and edit these properties.

Open the Property Inspector for the stack by choosing Stack Inspector from the Object menu.

Call our Stack something - this is just so we can reference it later on. Here we have called it "Bitter Revenge", by setting the name property(1), and I am going to give it a title, "Bitter Revenge At Old Creek"(2).

Next - going to Size and Position in the drop down menu in the Property Inspector(1), turn off Resizable(2)) and set the width to 1024(3) and height to 768(4). These are the dimensions of a non-retina iPad.

It is worth noting that you need to programmatically resize your stack in order for it to fit other device resolutions. With that being said, resolution independence will soon be coming to LiveCode, thanks to our Open Source campaign and this will allow you to automatically scale your stack to any device.

Next, we move on to text format, select Text Formatting from the drop down menu(1)) in the Property Inspector, and in here we are going to choose the Comic Book font we installed earlier(2).

Moving on to our Card Inspector, by selecting Card Inspector from the Object menu(1), we are just going to call this first card, "Intro" by setting the name property in the Property Inspector(2).

Creating the Intro Video

Playing the Video

We are going to begin by creating an intro video for our application.

To do this, we are going to handle the openCard message, then we want to play a video clip.

The openCard message is sent by LiveCode right after you go to a card, so any actions you take in an openCard handler will be visible to the user. To play an external video file we use the play command which plays a movie or sound file, either from an external file or a file which has been imported into LiveCode.

To do something when a message is received we write a handler with the same name as the message, this is triggered when the message is received.

Open the Card Script from the Object menu(1) and add the following handler(2)

on openCard

  play videoClip (specialfolderpath("desktop")& \

    "/BitterRevenge/Video/Intro.mp4")

end openCard

and apply that.(3)

The specialFolderPath function returns the path to common system folders, here we are using it to reference the desktop. Within the folder you unzipped the video is in the folder BitterRevenge/Video, and is called Intro.mp4, so this is appended to the file path.

Detecting When the Video has Finished

Next, we want to move to the next card when the video has stopped. For this we use the playStopped message, which is sent when a video or sound file stops playing. Again we add a handler for this message and use the go command to move to the next card.

Add the following handler to the card script

on playStopped

  go to the next card

end playStopped

Creating a New Card

Create a new card, by selecting New Card from the Object menu. LiveCode will automatically move to the newly created card.

Open the Card Inspector from the Object menu and set the name property of the card to "Index".

Now go back to our "Intro" page, using the View menu, keyboard shortcut(ctrl/c,d+2) or Project Browser.

You will see that we have a video playing.

Once this video has ended, it will automatically go to the next card which is "index".

Next we want to add some mobile syntax so that this video will play on mobile devices.

Turn off messages, by clicking the Messages button in the Menubar, this means that messages will not be sent so we can go back to the previous card to make changes without the video playing. Remember to turn messages back on when you are done or your application won't behave as expected.

Now go back to the previous card using the View menu or keyboard shortcut.

The great thing about LiveCode is that there are multiple ways of doing the same thing. So we are going to add in a clause to the openCard handler, to do one thing on a mobile device and another on the desktop. We use the environment function to determine what type of device we are running in.

Open the Code Editor for the Index card by selecting Card Script from the Object Menu and update the openCard handler

on openCard

  if the environment is "mobile" then

    send "playMobileVideo" to me in 0 milliseconds

  else

    play videoClip (specialfolderpath("desktop")& \

      "/BitterRevenge/Video/Intro.mp4") 

  end if    

end openCard

The send command, sends a message to an object and we can do that from any handler. The send command can also be given a time parameter to delay a command until a specified time.

The playMobileVideo command is a custom command we are creating to play a video on a mobile device. So on playMobileVideo, we want to play video clip like before but as we are in mobile we are going to have a different special folder path, so in the case of our application, we are going to use the engine path. After that we want to go to the next card.

Add the following handler to the card script

on playMobileVideo 

  play videoClip (specialfolderpath("engine")&"/Video/Intro.mp4")

  go to the next card

end playMobileVideo

Unlock messages by clicking the Messages button in the Menubar to ensure your app starts responding to messages again.

That is everything for this lesson. We now have a stack consisting of 2 cards which automatically plays a video when it starts up and then moves to the next card when the video finishes.

In Lesson 2 we will look at

• Creating an index page
• Importing assets for use on the index page
• Index page song playback