| This tutorial begins the second phase of our FlashR 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.
Join us in the Flash forum. | Join us in the Digital Art and Design forum.