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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Example Storyboard for Book App


A book app storyboard should indicate the interactions and animations for each page of the app. You will need to know the type of interaction that occurs. Is it a tap on an object or by shaking the tablet? You will also need to know what should happen as a result of the interaction. Will something disappear, will something change size or will a sound effect by played? A storyboard helps to insure that both the app developer and client understand what to expect in the finished app.

When we continue to examine the sample storyboard, we can see listed the interactive design elements and the interaction that occurs when they are tapped, swiped or whatever. You will want the name of the object that the reader taps to trigger the interaction and the name of the object that is affected by the interaction. Sometimes this will be the same object, such as when an object makes a sound or disappears when tapped. Other times, what triggers the interaction may be different from the object that is animated. For example, if the reader tilts the tablet, a graphic on the screen may float down or to the side via the physics engine.

As you can see from the sample, the Christmas ornaments begin swinging as soon as the page loads and do not require any interaction to begin the animation. The animation will continue forever or until the page is replaced with another page. However, when the ornaments are tapped, we will hear the jingle sound, which only plays once.

The second interaction is the cookie graphic. It also begins a bouncing animation automatically when the page loads. The animation will get the attention of the reader and the message tells the reader that the bouncing objects are interactive. This is true throughout the book app. When the reader taps the cookie, we hear a laughing sound effect, the message disappears, he stops bouncing and the graphic is replaced with a graphic of the cookie that is missing a foot.

In the next section, we have information about any special buttons on this page. Because it is the cover page and the first page of the app, we have the Read-to-Me or Read Myself buttons. Depending on which is clicked, the reader will hear the narrative on every page or the pages will load without playing the matching audio files. The Games button will take the reader directly to the games center, which has thumbnails for three jigsaw puzzle games. These buttons only appear on the cover page.

At the bottom, we have a general description explaining how all the elements should work together. Here is where the client may add any special instructions to the app developer or you can make notes yourself during the client meeting.

Blank Storyboard Template

← Back

Join us in the Animation forum. | Join us in the Digital Art forum.

|


Add Example+Storyboard+for+Book+App to Twitter Add Example+Storyboard+for+Book+App to Facebook Add Example+Storyboard+for+Book+App to MySpace Add Example+Storyboard+for+Book+App to Del.icio.us Digg Example+Storyboard+for+Book+App Add Example+Storyboard+for+Book+App to Yahoo My Web Add Example+Storyboard+for+Book+App to Google Bookmarks Add Example+Storyboard+for+Book+App to Stumbleupon Add Example+Storyboard+for+Book+App 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
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

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