wiki:ITERATION_08/Release/UserDocumentation/AnIntroductionToSophie/03UsingPages
Last modified 16 years ago Last modified on 06/11/09 00:17:11

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

Part 3: Using Pages and Preview Mode

For this book, we're going to make a book with multiple pages. This is a simple book; it's going to have five pages, and each page will have an image on it. When the book is opened in preview mode, clicking on each image should go to the next page. It's not complicated, but these pieces can be put together to make more complicated books.

Start by opening Sophie and making a new book (by choosing File > New Book or by pressing control-n.)

Next we're going to set up the page size and the book title. Right now, Sophie automatically imports images as 280 pixels wide by 210 pixels high with the upper left corner 75 pixels from the top and left side of the book; this will change, but so we don't need to resize and move every image, we're going to set the page size so that an image is automatically centered on it and we don't need to move things. To set the book size, choose Edit > Set Page Dimensions:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook1.png

Set the width of the page to 430, click OK, and set the height of the book to 360, then click OK again.

Now we don't want the book to be called "New Book B", so let's set the book's title. Chose Edit > Set Book Title:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook1.png

Change the book title to "Five Page Book" or whatever you'd like the book to be called. You might at this point like to save your book; to do this, choose File > Save As, and choose a location and a filename for your book.

Next, let's get our images. We're going to use five images; you can download them here, here, here, here, and here, or, if you'd like, you can download a ZIP of all five images here. The images all look like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/page1.jpg

Nothing fancy; each just says that it's a specific page. Before going on, download all the images to your desktop or some convenient folder. When you've done that, you're ready to import the first image. To do that, go to Insert > Image and select page1.jpg:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook3.png

The image will be inserted in the center of the page, like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook4.png

(You'll notice that it's also gained a red border; all frames in this build of Sophie have red borders automatically, so these images take advantage of that.)

Now we've made our first page; let's add a second page. To do this, click the >> button in the bottom of the book window (just to the right of the page number). This goes to the next page; if no next page exists, a new page will be created. When you're on page 2, select Insert > Image and choose page2.jpg. Repeat this until you've created five pages: put page3.jpg on page 3, page4.jpg on page 4, and page5.jpg on page 5.

Now we've created the pages; let's set actions on them. Go back to page 1 and click on the image so that the halos appear. We're going to use the link HUD: to get to this, click on the little chain halo (which is in the middle right above the frame). The link HUD will open like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook5.png

We're going to create a link that goes to the next page when the frame is clicked. First, open the Trigger drop-down menu:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook6.png

The option that we want is currently called FRAME_MOUSE_RELEASE, which makes the link happen when the user clicks on the frame. (FRAME_MOUSE_RELEASE is different from FRAME_MOUSE_PRESS because FRAME_MOUSE_RELEASE only triggers when the user lets go of the mouse as opposed to when the user starts clicking the mouse.) Next let's open the Action drop-down menu:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook7.png

We want Go to next page. Choose that, then click the link halo to close the link HUD.

Do the same thing on pages 2, 3, and 4: each image needs a FRAME MOUSE RELEASE / Go to next page link. When you're done, save the book. You're done. (If you want to check if you've made the book correctly, you can download the finished book here in zipped format.

Now let's try the book out. We've been working in author mode, which is the mode used for creating books: in this mode, when you click on the images with links, the links don't happen, but the halos appear. We don't always want the links to work: this could make editing the books very difficult. To see if the links work, we need to go into preview mode. To do this, click the Open Preview button on the bottom of the book window. The book will open in preview mode:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook8.png

Preview mode shows the book as it will appear to readers: in preview mode, the book can't be edited, but the links will work. Click Close Preview to close the preview.

We can also use Sophie Reader to look at our book. When you start up Sophie Reader, it looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook9.png

Go to File > Open Book and select the book you saved. It will open as a finished book:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_8/5PageBook10.png

In Reader, the book cannot be edited; it can only be read.