20/08/2013 LiveCode eBook Academy Transcript Lesson 2 · Welcome to Lesson 2 of the LiveCode eBook Academy. In this lesson we are going to be looking at Index page creation Importing

20/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 1/17

IntroductionWelcome to Lesson 2 of the LiveCode eBook Academy.

In this lesson we are going to be looking at

Index page creationImporting Assets for Use on the Index PageIndex Page Song Playback

The page we are creating is shown below

Lesson 2IntroductionCreating a New CardImporting AssetsAdding a Down State to the Buttons

The Start ButtonThe Chapters Button CodeThe Credits Button Code

NavigationPlaying a Song

Setting up the playerPlaying the Song when the Card is Opened.

Lesson 2



Creating a New CardOpen up the Bitter Revenge stack you created in Lesson 1.

To start with we are going to create a new card and call it "Index".

Select New Card from the Object MenuLiveCode will automatically move to the new cardOpen the Card Inspector from the Object menuSet the name of the card to "Index"



Importing AssetsThe next thing we want to do is to import all of our assets onto theIndex page. There are many ways we can use graphics within LiveCode:

Import directly onto a card as LiveCode controlsReference external filesImport onto a substack and reference from the Main Stack

To keep things nice and simple we are going to use the first method andimport the images as controls, directly into our card.

Select Import As Control - Image File, from the File menu



In the file selector go to the Images/Main Menu folder in theBitterRevenge folder and select the appropriate images for the imageshown above, that is the images with names beginning with "menu"



Click "Open" and the images will appear on screen, don't worry that theyare all on top of each other, we're going to deal with that presently.



Next adjust the size of any images that require it, for example so thebackground image fits the screen. Then lock the size and position of thebackground image so it doesn't get moved out of place accidentally.

Select the background imageOpen the Property Inspector by clicking the Inspector button in theMenubar(1)Choose "Size and Position" from the dropdown menu(2)Tick "Lock size and position"(3)

Next arrange the title and normal button states (without bullet holes)with "Start" at the top, "Chapters" in the middle and "Credits" at thebottom.



Move the pressed states over to the side.

And again lock the size and position of the images.

Adding a Down State to the ButtonsWhat we want to do now is to have a method so that when the mouseis down on one of the buttons, or a button is touched, then the bullethole icon will be shown.

If we were using buttons we could set the icons of the buttons toachieve this effect but as we are using images we just need to write asmall handler to manage this.

The Start ButtonSelect the "Start" button and open the Code Editor for it by clicking the



Code button in the Menubar.

The Code Editor is where we enter the script that is linked to the object.

Start by declaring a script local variable , sText. Script local variables areavailable to all the handlers in the script.

local sText

Next add a mouseDown handler, which is triggered when the mousebutton is pressed. This changes the content of the image to show theversion with the bullet hole.

on mouseDown

put the text of me into sText

set the text of me to the text of image "menu1_over.png"

end mouseDown

Then add a mouseUp handler to change the image back when themouse is released.

on mouseUp

set the text of me to sText

end mouseUp



Click apply, the indicator should turn green to show there are no errors.

The full code should now be

local sText

on mouseDown



end mouseDown

on mouseUp


end mouseUp

Now switch to Run mode, allowing you to interact with the app

When you click down on the button on the poster image it shows thebullet hole.



We are using mouse handlers because they work on both desktop andmobile. Note: touch handlers do not work on desktop.

The Chapters Button CodeNext we are going to follow the same process for the "Chapters" button.

Copy the code from the "Start" button code editorSelect the "Chapters" button



Open the Code editor by clicking Code in the MenubarPaste the copied code inEdit the names of the images in mouseDown and mouseUp to referto the chapters images.

The code will be as below

local sText

on mouseDown



end mouseDown

on mouseUp


End mouseUp

The Credits Button CodeFinally we are going to follow the same process for the "Credits" button.

Copy the code from the "Start" button code editorSelect the "Credits" buttonOpen the Code editor by clicking Code in the MenubarPaste the copied code inEdit the names of the images in mouseDown and mouseUp to referto the credits images.

The code will be as below

local sText

on mouseDown





end mouseDown

on mouseUp


End mouseUp

Now we wish to hide the images of the button down states because wedon't need them anymore. Select the 3 bullet images, by dragging overthem or using shift-click to multi-select, and open the PropertyInspector by clicking Inspector in the Menubar(1).

You will see that the Property Inspector shown is for "Multiple images"(2)and shows the common properties. You can set the properties ofmultiple objects at the same time using this method.

In the "Basic Properties" pane(3) turn off visible(4).

This is a good point to save your stack.



NavigationWe want our Index page to act as an Index, and allow us to navigatearound the app.

For this stage we need to add a line to the mouseUp handler of the"Start" button to take us to the first page to the graphic novel.

Select the "Start" buttonOpen the Code editor by clicking "Code" in the Menubar

Add a line at the end of the mouseUp handler, this uses the gocommand to change cards.

on mouseUp


go to card "page 1"

end mouseUp

This will take us to the first page of the graphic novel.

For the Chapters we go to the card called Chapters, which we will becreating later, so edit the code of the "Chapters" button as below

on mouseUp


go to card "chapters"

end mouseUp

For Credits we go to the Card called Credits, which will also be createdin a later lesson. Edit the code of the "Credits" button as below



on mouseUp


go to card "credits"

end mouseUp

Playing a SongWe have a piece of music that we want to play when the user is on the"Index" card.

Setting up the playerTo do this we will use a Player object, drag a player out from the ToolsPalette and onto the card.

The player object will be used to play the audio track when the card isopened.



Open the Property Inspector by clicking the Inspector button in theMenubar and set the name of the player to "songPlayer".(1)

Next we want to set the source to an audio file. Click the selector nextto the Source property(2) and select the "song.mp3" file found in theBitterRevenge/Audio folder(3).

You will need to choose "All Files" in the file type selector(4).

Now move the player object off screen so it is not visible, you can dothis with the arrow keys. Then lock its size and position in the Size andPosition pane of the Property Inspector.

Playing the Song when the Card is Opened.We want the song to start playing when the user goes to the "Index"card. To do this we start the player when the openCard message isreceived.



Open the card script from the Object Menu, this is where we will addthe code that will play the song.

The code here is similar to that for the Intro video in lesson one. Themethod we use is slightly different on the desktop and on mobile andwe allow for that by checking the environment function and executingthe appropriate code.

Add the following code to the card script

on openCard

if the environment is "mobile" then

play audioClip (specialFolderPath("engine") & "/Audio/song.mp3") looping

else

send "playDesktop" to me in 0 milliseconds

end if

end openCard

on playDesktop

play player "songPlayer"

end playDesktop

on closeCard

if the environment is "mobile" then

play empty

end if

end closecard

apply this and close the card script.

Now if you go to the previous card using the View menu and back tothis card the audio should play.

That's all for this lesson. In Lesson 3 we will be looking at



Creating page 1 of the eBookImporting the page 1 assetsCreating the navigation buttonInitial asset positioning

Documents

20/08/2013 LiveCode eBook Academy Transcript Lesson 2 · Welcome to Lesson 2 of the LiveCode eBook Academy. In this lesson we are going to be looking at Index page creation Importing