Page 5 of 7 - Project 11

4. To enable the scroll handle itself, select the Scroll Handle symbol, name the instance ScrollHandle, right-click the symbol, and choose Edit in Place to access the symbol 's contents.

Give the scroll handle an instance name.

5. Select the ScrollHandle Button layer, double-click the instance of Scroll Handle Button on the Stage, and, on the Actions tab, assign the ActionScript.

As mentioned earlier, the Scroll Handle button allows the scroll handle to be draggable. Its positioning information is then used by the AdjustView function to set the zooming and scrolling of the product viewer and text area.

Creating The Text Area

Each product in the Product Catalog can have a block of accompanying text displayed to the right of the picture viewport. By taking advantage of the .maxscroll and ..scroll properties of text fields, you can easily implement a scrollable text box.

First of all, you need the block of text for each product. The simplest way to do this is to have three separate text fields that sit offstage, storing all the data. Then, using ActionScript, you can transfer the appropriate data into the main text box when a new product is selected.

In the Vector Graphics folder of ProductCatalog.fla, you'll find a symbol named Product Texts. This symbol contains three text fields: FlashPack1Text, FlashPack2Text and FlashPack3Text. The fields have been shrunk to make them more manageable.

1. To plug the data into your movie, select the Text layer and drag an instance of Product Texts off to the right of the Stage where it won't be seen. The last text element required is the actual display field. You 're going to set up its text properties. These properties enable the text field to display data, be scrollable, and display consistently across platforms. Because you disabled editing but left selection enabled, users can copy and paste text about each product into an e-mail message or word processing document. Drag an instance of the Product Texts symbol onto the Stage, but out of view.

Drag an instance of the Product Texts Symbol onto the Stage, but out of view.

2. Select the Text tool and set the following text properties, making certain that the Text Field modifier is selected:

Font: _sans
Font Size: 10 pt
Color: R: 0,G:153, B:255

Selecting the Text Field modifier creates a text field, not a static text box.

Place the text field over the large black area on the right side of the background.

3. Draw out your text field over the far right black section of the interface. Your field should be approximately 225 pixels high and 113 pixels wide.