First we start by importing our image assets to our "Chapters" card

Transcription

1 Lesson 9 Introduction Importing Assets Adding Navigation Deploying to ios Adding Supporting Files Lesson 9 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 file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 1/12

2 Ensure you are on the Chapters card If not navigate to it using the View menu, Project Browser or keyboard shortcuts If you need to create the Chapters card do so now Select New Card from the Object Menu LiveCode will automatically move to the new card Open the Card Inspector from the Object menu Set the name property of the card to "Chapters" Choose Import As Control -> Image File from the File Menu Select the relevant images from the Menu Images folder Click Open Arrange 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) file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 2/12

3 Switch to the Content pane Add some dummy content file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 3/12

4 Switch to the Text Formatting pane Set 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 nice line under each item in the list. Switch to the Table pane in the Property Inspector for the field Check "Basic Table Object"(1) Set the Tab Stops property to 1000(2) Switch to Basic Properties file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 4/12

5 Turn the scrollbars off again That should be us good to go. Adding Navigation The first thing we want to do is link to the Main Menu. Open the Code Editor of the Main Menu button and add the following mouseup handler. 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 file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 5/12

6 opencard handler we will set up the list of chapters. Put empty into the script local variable Put empty into the field The we will use a repeat loop to step through each of the cards and see if its name starts with the word "page" If it does we assume it is a chapter, add 1 to the chapter count and add 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. file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 6/12

7 So what we want to do now is, when an item is selected in the field we want to go to that page. To do that all we need to do is use 'go to card the selected text of me' in the field script. Open the Code Editor for the "pagelist" field by selecting the field and clicking 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 we have listed the name of the cards we can use this directly with the go command to change cards. Now switch to Run mode and select Page 3, it will take us to the Page 3 card. Now to back to the Chapters card to make the list look a little bit nicer. file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 7/12

8 Select the "pagelist" field Open the Property Inspector for the field Select 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) file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 8/12

9 Deploying to ios Ensure your stack is saved. Open the Standalone Application Settings from the File menu. Select the ios tab(1) file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 9/12

10 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 Initial Orienatations(4) Adding Supporting Files Next we need to include any supporting files our app requires, these will be included in the app bundle, apk file or desktop standalone that is created. We need to include the audio, video and font files that we used in our stack. file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 10/12

11 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 ios simulator. file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 11/12

12 Note: at this stage we assume that you have all in requirements for deploying to ios installed and configured. That is everything for this lesson, and the LiveCode ebook Academy. file://localhost/users/oldsystem/desktop/ebook Final/ebook/Lesson9/lesson9.html 12/12