We are ready to begin the first section of the Product Tour. This will eventually be pasted into the main swf as a movie clip. We will build this section in it's own fla file, for convenience. This new fla file will have the dimension of the playback area of the stage. These dimensions are 503 x 311 pixels, with the same 30 frames per second as the main swf.

The ecards at Pamela Gladding Ecards are made from elegant, whimsical and artistic raster artwork. Therefore, let's make the ecards the "star of the show" in the Flash^R based Product Tour application. To introduce our stars, we will create a virtual "card shop".

While drawing the virtual card shop section of the storyboard, we will have shelves full of miniature versions of real ecards. The shelves look a little lost, so we add a few balloons. This created a card shop on the Flash stage.

After the balloons enter the stage, the introductory text and shelves will fade in. To introduced each of our artists, we will use a tween animation to make it appear that one of the artist's ecards zooms off the shelf and almost fills the screen. Along with this, we will use a text balloon graphic to display the artist's name and the art medium.

Now that we have the storyboard and overall concept for our virtual card shop, it is time to build it. We grab a screen shot of an ecard for each of our artists, along with several more ecards to fill the shelves. Because we don't want every ecard to zoom off the shelf from the same position, the placement of the mini ecards on the shelves is well thought out. The shelves and miniature ecards are all in one Photoshop file which makes it easy to import in to Flash.

Our first thought is to draw vector balloons in Flash but I didn't like how they looked with the other raster graphics imported from Photoshop^R. Going back to Photoshop, we create some balloons using semi-transparent gradients.

After importing the Photoshop graphics, we are ready to build the first animation which will be the balloons floating up from the bottom of the stage. Staggering the balloons as they float onto the stage, we use a tween that spans 15 frames for each balloon.

We follow the balloon animations with a 30-frame fade-in transition of the introductory text. The text stays on the stage for 100 frames and then fades-out over another 30 frames. As the text fades out, the shelves fade in. Now the stage is ready for the ecard show.

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.