logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.


Add Flash+Storybook+Project+%2D+First+Screen to Twitter Add Flash+Storybook+Project+%2D+First+Screen to Facebook Add Flash+Storybook+Project+%2D+First+Screen to MySpace Add Flash+Storybook+Project+%2D+First+Screen to Del.icio.us Digg Flash+Storybook+Project+%2D+First+Screen Add Flash+Storybook+Project+%2D+First+Screen to Yahoo My Web Add Flash+Storybook+Project+%2D+First+Screen to Google Bookmarks Add Flash+Storybook+Project+%2D+First+Screen to Stumbleupon Add Flash+Storybook+Project+%2D+First+Screen 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Drop Zones and Transitions in Motion 5

Craft Product Template - Background Layer

Craft Product Template Layers

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor