(1) (2) (3) (4) (5) (6) (7)
Building A Scalable Application For Product Demonstrations

One of the most popular uses of multimedia on the Web is for product demonstrations prior to sale. By taking advantage of Flash's modular downloading and scripting features, you can create a scalable, robust Product Catalog application. The Product Catalog incorporates a wide range of techniques, including scrolling text fields and reusable interface elements.

Product Catalog

Layers
ActionScript Library
View Port
Text
Scrollbar
Buttons
Background

Getting Started

If you want your results to match those of the finished project,follow the steps carefully. If you want to customize the project and are familiar with Flash 4,feel free to change the settings to those that meet your needs.

1. Copy all the .swf files from the ProductCatalog\ProductFiles folder into the folder on your hard disk in which you'll be working. Flash loads these SwF files into the catalog; they are essential for testing purposes. Copy all the SwF files from the ProductCatalog\ProductFiles folder into a folder on your hard disk.

2. Begin with a new Flash Movie, using these settings:

Frame rate: 24 fps
Stage dimensions: 550 ×310
Background color: Black

3. Set up six layers,naming them (from top to bottom) ActionScript Library, View Port, Text, Scrollbars, Buttons, and Background.

4. From the Flash 4 Magic CD load ProductCatalog.fla as a Library.

5. Select the Background layer, drag an instance of the Background graphic symbol from the Vector Graphics folder onto the Stage, center the instance on the Stage. If you want, you can lock the Background layer. You won't be dealing with it again in this project.

Center the Background graphic symbol on the Background layer.

Laying Out The Background Buttons

While Product Buttons is a graphic symbol, it is in fact a group of three buttons. Each of the three buttons represents a product that visitors can view when they click the appropriate button in the catalog.

1. Select the Buttons layer and drag an instance of the Product Buttons symbol in the Vector Graphics folder onto the Stage.

2. Select your instance of Product Buttons and use the Object Inspector to set the coordinates to x: 41.8 , y: 61.1. Use the Object Inspector to position the Product Buttons instance.

Use the Object Inspector to position the Product Buttons instance.

3. Enter the symbol-editing mode for the Product Buttons graphic symbol instance, select the far left button (FlashPack 1 Button), double-click to open its Instance Properties dialog box, and, on the Actions tab, assign the ActionScript.