Our first step for any Flash^R 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.

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.