20/08/2013 LiveCode eBook Academy Transcript Lesson 2 · Welcome to Lesson 2 of the LiveCode eBook...
Transcript of 20/08/2013 LiveCode eBook Academy Transcript Lesson 2 · Welcome to Lesson 2 of the LiveCode eBook...
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 2/17
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"
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 3/17
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 4/17
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"
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 5/17
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 6/17
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 7/17
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 8/17
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 9/17
Click apply, the indicator should turn green to show there are no errors.
The full code should now be
local sText
on mouseDown
put the text of me into sText
set the text of me to the text of image "menu1_over.png"
end mouseDown
on mouseUp
set the text of me to sText
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 10/17
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 11/17
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
put the text of me into sText
set the text of me to the text of image "menu2_over.png"
end mouseDown
on mouseUp
set the text of me to sText
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
put the text of me into sText
set the text of me to the text of image "menu3_over.png"
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 12/17
end mouseDown
on mouseUp
set the text of me to sText
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 13/17
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
set the text of me to sText
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
set the text of me to sText
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 14/17
on mouseUp
set the text of me to sText
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 15/17
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.
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 16/17
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
20/08/2013 LiveCode eBook Academy Transcript
file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson2/lesson2.html 17/17
Creating page 1 of the eBookImporting the page 1 assetsCreating the navigation buttonInitial asset positioning