This tutorial begins the second phase of our Flash^R iOS Storybook App series. If you have been following along, you know that the first phase details how to create an animated intro scene for a storybook app. This animated intro is optional but you may wish to read those tutorials, as they cover how to create some basic Flash animation and buttons.

The reason this animated intro is optional to the project is because most storybook apps open with a static graphic of the book cover and a button or hot area where the reader touches or swipes to turn the page.

This is where we will begin phase two of the series. If you have created the animated intro in phase one, just set it aside for now. We will integrate the two together later.

Let's take a look at the storybook. As you can see, we have several items on and off the stage and our main Timeline has 32 frames. On Frame 1 of the main Timeline, the stage contains the static cover image for the storybook. Besides the book cover graphic, the only thing on the stage is a toggle button in the upper left cover. This button toggles the settings menu page.

Off the stage and to the left is the pageCurl graphic that we will animate to simulate the pages turning when touched or swiped.

Above the stage is the settings menu overlay page. When you click on the toggle button on the stage, the settings menu page opens over what is already on the stage. This settings page contains links to the storybook's informational pages, such as the Index and Credits pages. It also contains a toggle button to turn on/off the background music and a link to the author's website.

Why do we need this settings menu page? Because it contains a link to the Index page, the reader always has a way to get back to the beginning of the book from the current page that they are viewing. It's also a good idea to give the reader the option to turn off the background music. And of course, you want the reader to visit your website for more information about you and your other book apps.

Now, let's look at the layers in the Timeline panel. As you can see, the bottom layer is the pages layer. Starting with Frame 3, each frame contains a movie clip for one page of the book. We will be creating a different movie clip for each page and placing the movie clips on the stage. As we move along the Timeline, we "page" through the book.

From top to bottom, the other layers are the following.

• actionsMain - contains the ActionScript for the main navigation and events.
  
  
• actionsPages - contains the ActionScript that will run on certain pages of the book. As you can see, these pages are 11 and 31.
  
  
• setTogBtn - contains the settings menu toggle button.
  
  
• setMenu folder - this folder contains the layers that display the settings menu background graphic and the individual buttons for the menu.
  
  
• buttonsMain - contains the forward and backward navigational buttons.
  
  
• buttonsPages - contains buttons that will start the ActionScript on pages 11 and 31.
  
  
• pageCurl - contains the pageCurl movie clip which creates the page turn simulation.
  
  
• pages - movie clips for each page of the storybook and other informational pages.
  
  

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.


Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.