lesson 9 adding navigation adding supporting files lesson 9 · 29/08/2013 livecode ebook academy...

12
29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 1/12 Introduction Welcome to Lesson 9 of the LiveCode eBook Academy. In this lesson we are going to be looking at automatic chapter list creation a small review of the eBook deploying to a mobile device Importing Assets First we start by importing our image assets to our "Chapters" card Open the Bitter Revenge stack Lesson 9 Introduction Importing Assets Adding Navigation Deploying to iOS Adding Supporting Files Lesson 9

Upload: others

Post on 15-Jul-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 1/12

IntroductionWelcome to Lesson 9 of the LiveCode eBook Academy.

In this lesson we are going to be looking at

automatic chapter list creationa small review of the eBookdeploying to a mobile device

Importing AssetsFirst we start by importing our image assets to our "Chapters" card

Open the Bitter Revenge stack

Lesson 9IntroductionImporting AssetsAdding NavigationDeploying to iOS

Adding Supporting Files

Lesson 9

Page 2: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 2/12

Ensure you are on the Chapters cardIf not navigate to it using the View menu, Project Browser orkeyboard shortcutsIf you need to create the Chapters card do so nowSelect New Card from the Object MenuLiveCode will automatically move to the new cardOpen the Card Inspector from the Object menuSet the name property of the card to "Chapters"Choose Import As Control -> Image File from the File MenuSelect the relevant images from the Menu Images folderClick OpenArrange the images on the card

Next drag a scrolling field on to the card, open the Property Inspector

Turn off the vertical scrollbar(1)Turn on List Behavior(2)Name the field pageList(3)

Page 3: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 3/12

Switch to the Content paneAdd some dummy content

Page 4: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 4/12

Switch to the Text Formatting paneSet the text size to 32(1)Set the text align to center(2)

We also want to put in some tab stops, if we set it to 1000 we get a niceline under each item in the list.

Switch to the Table pane in the Property Inspector for the fieldCheck "Basic Table Object"(1)Set the Tab Stops property to 1000(2)

Switch to Basic Properties

Page 5: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 5/12

Turn the scrollbars off again

That should be us good to go.

Adding NavigationThe first thing we want to do is link to the Main Menu. Open the CodeEditor of the Main Menu button and add the following mouseUphandler.

on mouseUp

go to card "index"

end mouseUp

Now open the Card Script for the Chapters card from the Object menu.Start by declaring a script local variable sPageListNumbers. In the

Page 6: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 6/12

openCard handler we will set up the list of chapters.

Put empty into the script local variablePut empty into the fieldThe we will use a repeat loop to step through each of the cards andsee if its name starts with the word "page"If it does we assume it is a chapter, add 1 to the chapter count andadd the name of the card to the list of chapters.

The card script is

local PageListNumbers

on openCard

put empty into sPageListNumbers

put empty into field "PageList"

repeat with x = 1 to the number of cards of this stack

if the short name of card x of this stack begins with "page" then

add 1 to sPageListNumbers

put the short name of card x of this stack into \

line sPageListNumbers of field "pageList"

end if

end repeat

end openCard

So if we leave this card and go back to it all our pages are shown.

Page 7: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 7/12

So what we want to do now is, when an item is selected in the field wewant to go to that page. To do that all we need to do is use 'go to cardthe selected text of me' in the field script.

Open the Code Editor for the "pageList" field by selecting the field andclicking the Code button in the Menubar. Add the following handler

on mouseDown

go to card the selectedtext of me

end mouseDown

The selectedText is whatever text is highlighted in the field, since wehave listed the name of the cards we can use this directly with the gocommand to change cards.

Now switch to Run mode and select Page 3, it will take us to the Page 3card.

Now to back to the Chapters card to make the list look a little bit nicer.

Page 8: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 8/12

Select the "pageList" fieldOpen the Property Inspector for the fieldSelect Basic Properties(1)Turn off Opaque(2)Turn off the horizontal and vertical scrollbars(3)Turn off Show border(4)Turn off Focus border(5)

Page 9: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 9/12

Deploying to iOSEnsure your stack is saved.

Open the Standalone Application Settings from the File menu.

Select the iOS tab(1)

Page 10: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 10/12

Check Build for iOS(2)Select iPad, 5.1 or later and Universal in the top section(3)Select Landscape Left(only) in the iPad Supported InitialOrienatations(4)

Adding Supporting FilesNext we need to include any supporting files our app requires, these willbe included in the app bundle, apk file or desktop standalone that iscreated.

We need to include the audio, video and font files that we used in ourstack.

Page 11: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 11/12

Select the Copy Files tab(1)Click "Add File"(2)Select the "Comic_Book.ttf" file(3)Repeat for the Intro video and audio files

So now if we hit "Test" in the Menubar it should deploy to the iOSsimulator.

Page 12: Lesson 9 Adding Navigation Adding Supporting Files Lesson 9 · 29/08/2013 LiveCode eBook Academy Transcript file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html

29/08/2013 LiveCode eBook Academy Transcript

file://localhost/Users/oldsystem/Desktop/ebook Final/ebook/Lesson9/lesson9.html 12/12

Note: at this stage we assume that you have all in requirements fordeploying to iOS installed and configured.

That is everything for this lesson, and the LiveCode eBook Academy.