g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash Storybook Phase 2 Overview

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.

  • 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.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add Flash+Storybook+Phase+2+Overview to Twitter Add Flash+Storybook+Phase+2+Overview to Facebook Add Flash+Storybook+Phase+2+Overview to MySpace Add Flash+Storybook+Phase+2+Overview to Del.icio.us Digg Flash+Storybook+Phase+2+Overview Add Flash+Storybook+Phase+2+Overview to Yahoo My Web Add Flash+Storybook+Phase+2+Overview to Google Bookmarks Add Flash+Storybook+Phase+2+Overview to Stumbleupon Add Flash+Storybook+Phase+2+Overview to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor