g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor