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


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 Product Tour Project - Layout


Beginning this year, I have been an animator for Pamela Gladding Ecards. All of Pamela's ecard animations are created from raster artwork. Pamela has many artists contributing artwork for her ecards and I really enjoy bringing their artwork to life in FlashR animation.

Just recently, I was asked to create a product tour application for the website. They wanted the tour to have an "About Our Ecards" animation and four other sections; Send an Ecard, View an Ecard, Membership Benefits and How to Join.

Being visually oriented, my first step for any project is to go into PhotoshopR and build the layout for the application. As I do this I formulate the project in my mind. We could also have done this part of the design process in Flash. But I find that I usually need a bitmap version of the graphics for other projects for the site and using Photoshop is more time efficient for my workflow. Why don't we work on this project together?

In this case, we will need a title bar at the top, a playback area for the movie clips, a navigation menu, company logo and copyright notice. They also requested a toggle button for those viewers not familiar with English. The color scheme is to match the main site.

Our first question is how big to make the application window. For example, 700 x 400 pixels would be large enough for both the playback area and the controls. The playback area will be 503 x 311 pixels. Also, we will use the popular rounded-corner rectangles for the buttons and title bar. Following convention, we place the design elements in their usual place: the title bar at the top and navigation menu on the left. Using the Grid overlay in Photoshop is very helpful to spacing the elements evenly.

As you can see from the example, the playback area is bordered by the panel. Because we want some design elements to slide in from outside the stage, we need a way to hide the elements as they passed over the panel area on their way to the stage. So we design the layout into two parts. The first part is for the background Flash layer. It covers the whole stage in white except for the playback area which I gave a blue-green color gradient. The second part of the layout is the panel overlay. It is also the full size of the stage and has the title bar and buttons. The playback area is cut out so that the background and movie clips below the panel will show through. This setup will allow us to slide the design elements onto the stage between the two layers of the layout and the moving elements will not be visible. Note: A second option would be to use a Flash mask layer to open the playback area.

Finally, we design an opening/closing splash screen. We use a smaller version of the logo image and the company name. This will appear at the beginning and end of each section of the tour. We will also use the logo, along with a dynamic counter, for a Flash preloader.


Pamela Gladding Ecards

Join us in the Flash forum.





Add Flash+Product+Tour+Project+%2D+Layout to Twitter Add Flash+Product+Tour+Project+%2D+Layout to Facebook Add Flash+Product+Tour+Project+%2D+Layout to MySpace Add Flash+Product+Tour+Project+%2D+Layout to Del.icio.us Digg Flash+Product+Tour+Project+%2D+Layout Add Flash+Product+Tour+Project+%2D+Layout to Yahoo My Web Add Flash+Product+Tour+Project+%2D+Layout to Google Bookmarks Add Flash+Product+Tour+Project+%2D+Layout to Stumbleupon Add Flash+Product+Tour+Project+%2D+Layout 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 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

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