g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Flash Storybook Project - First Screen

Our first step for any FlashR project is to create a storyboard. As this project is an interactive book, the scene divisions for the storyboard are already set for us, as each page of the book will be one panel of the storyboard. But we will add a few more storyboard panels for the extras that we will add to the app such as a first screen (before the book is open) and the credits screen. Let's work on the storyboards in the order from front to back of the book.

For this project's first screen, we will have some Tween animations swinging the Xmas ornaments, with sound effects that will play when the reader touches the ornaments. We will also have an animation that will open the book when the book cover is touched.

According to the storyboard, the first scene will be a top down view which contains candy canes, evergreens, ornaments and the book. As you can see from the summary on the storyboard, the background music and the animation for the ornaments will start automatically when the app loads. The sound effects and the opening of the book will be initiated by a touch event.

After creating the graphics (snow, candy canes, book cover, evergreens, three ornaments) we will place them all together into one Photoshop image document file, positioning them as needed according to the storyboard. We will place each design element on its own layer in the Photoshop Layers panel and give each layer a name describing the element on that layer. Why do we do all this in Photoshop instead of Flash. Most artists will want to assemble the individual elements of the page in Photoshop, as part of the design process. In this way, we can save the Photoshop file as a quick reference with all the elements for each page in place.

It is best to use images in the PNG format for iPad apps. The iOS system displays PNG files much better than vector image files and the size of the PNG file is much smaller than the PSD file. Therefore, we will need to save the design elements from each layer of the PSD file that we just created as a separate PNG file. Then, we can import the files and build the first scene in Flash. When finished, we will have these six files.

purpleOrn.png
greenOrn.png
redOrn.png
evergreens.png
cover.png
bgLayer.png

You will want to repeat the steps above for each page of your book.


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


Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



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


BellaOnline Editor