Building the Main Catalog


The Catalog section of the TechBookstore is very similar to the Reviews section built in the earlier exercises. The main catalog file has a List component with the names of several books. When you click one of the books in the List, it updates content on the Stage by loading in the catalog pages you created in the previous exercise. The main difference between the Catalog section and the Reviews section is that the Catalog page loads an external SWF file into a Loader component instead of using LoadVars and a TextArea component that the Reviews section used to display content.

1.

Create a new Flash document and resize the Stage to 720 pixels wide by 345 pixels high. Open the Publish Settings dialog box (File > Publish Settings) and deselect the HTML check box under the Formats tab. Then save the file as catalog.fla.

Create a new Flash document by choosing File > New and selecting Flash Document. Resize the Stage to 720 pixels by 345 pixels using the Property inspector. When you publish the document, you don't need an HTML page generated. You need to use the SWF file that is created only when you choose to publish the document. Therefore, choose File > Publish settings. Deselect HTML under the Formats tab and click OK.

When you are finished, save the FLA file as catalog.fla.

2.

Rename Layer 1 to form and add a List component to the Stage on the form layer. Resize the List instance to 200 pixels wide by 325 pixels high using the Property inspector and move the instance to the upper-left corner of the Stage. Give the List an instance name of catalog_ls.

The catalog section has a List component that includes names of books in the catalog that will update content on the Stage when they are clicked. Change the name of Layer 1 to form, open the Components panel, and then drag an instance of the List component onto the Stage.

Change both the x and y coordinates of the List instance to 10 pixels in the Property inspector. Change the width of the instance to 200 pixels and the height to 325 pixels, and type in an instance name of catalog_ls for the component instance.

3.

Set the values and labels for the List component using the Values dialog box.

With the List component still selected on the Stage, open the Property inspector or Component inspector panel and click the data row. Click the magnifying glass to the right of the data row to open the Values dialog box. Add two new values by clicking the Add (+) button twice and enter catalog/catalog01.swf for the top value and catalog/catalog02.swf for the bottom value. Note that each of these values is prefixed with catalog/, which tells Flash that it should look for the SWF file in a subfolder named catalog.

Click the OK button to close the Values dialog box and select the labels row in the Property inspector. Click the magnifying glass again for labels to open the Values dialog box and enter values for the List component. Add two new values, setting the top value to Flash ActionScript: TFS and the bottom value to Dreamweaver: TFS. When adding values, you always have to exercise caution that you add the data in the same order as you add the labels; otherwise, your users click a title and receive information on a different book.

4.

Add an instance for the Loader component to the Stage, and then position and resize the instance using the Property inspector.

Expand the Components panel and drag an instance of the Loader component onto the Stage. Set the width of the component to 490 pixels and set the height to 325 pixels, and then position the component at an x coordinate of 220 pixels and a y coordinate of 10 pixels. Give the Loader component an instance name of catalog_ldr. Use either the Property inspector or Component Inspector panel to set the autoLoad parameter to false and the scaleContent parameter to false.

5.

Create an actions layer and add ActionScript to load a catalog SWF file based on the currently selected book in the List component.

Insert a new layer in the Flash document and rename the new layer actions. Make sure that the new layer is above the other layers in the Timeline stack. Select Frame 1 of the actions layer and add the following code into the Actions panel:

function loadCatalog(evt) {      catalog_ldr.load(catalog_ls.selectedItem.data); } catalog_ls.addEventListener("change", loadCatalog);

This code defines a function named loadCatalog. The function loads the value of the currently selected item's data property, which is the location to a SWF file. The function loads that particular SWF file into the Loader component instance on the Stage.

The component's instance name is catalog_ls. You add a listener at the end of this ActionScript that waits for the catalog's List instance to be clicked by the visitor. When an item in the List is selected, the loadCatalog function is called. The function tells the catalog_ldr to load the value of the currently selected item in the list. The value is defined in the Values dialog box and contains the path to the SWF file.

6.

Test the FLA file to make sure it works correctly. If so, save the changes you have made to catalog.fla. Then choose File > Publish to publish the SWF file into the TechBookstore folder.

In the previous exercise, you created a subfolder called catalog inside the main TechBookstore folder where you saved catalog01.swf and catalog02.swf (also provided in the lesson09/complete folder on the CD-ROM). So when you test the file, it should load those two SWF files from the catalog folder into catalog.swf. If the files don't load, open the catalog folder and make sure that the SWF files (and the folder itself) are there and named correctly. Ensure that you added the values correctly into the Values dialog box in Step 3.

When everything works correctly, save the FLA file and then publish the file so an SWF file is generated in the TechBookstore folder.

Note

The path to the PNG images in the solution file is different from the path you set in the exercises in this lesson. The paths are produced to work with the directory structure of the solution files, so if you copy and paste any of the completed files into your own TechBookstore folder, be sure to change its directory references to match your own file structure.




Macromedia Flash 8. Training from the Source
Macromedia Flash 8: Training from the Source
ISBN: 0321336291
EAN: 2147483647
Year: 2004
Pages: 230
Authors: James English

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net