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 Flash^R 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 Photoshop^R 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

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.