Creating the Reviews Page


Now it's time to start working with Flash and add some ActionScript to make the FLA files do something useful. In this exercise, you will look at how to write a custom function that loads text into a TextArea component. This page creates the Review page containing a List component, which you can click to choose a review to look at. When you click the review's title, it appears in a TextArea next to the List. You will be using components to set up the structure of the Review page. You create a brand new FLA document to form the body of the review and then publish a SWF file that will be loaded into the Tech Bookstore later on.

Before you start writing any ActionScript, open the Actions panel in Flash (F9). Click the Options menu in the Actions panel and choose View Line Numbers from the drop-down list.

Line numbers help you find any ActionScript errors that appear in the Output panel when you test the document because the Output panel tells you the line number containing the error. The error is a lot easier to find when you have line numbers turned on in the Actions panel!

1.

Create a new Flash document, resize the Stage to 720 pixels wide by 345 pixels high, and add some metadata. Rename Layer 1 to form. Open Publish Settings and deselect the HTML check box in the Formats tab. Save this document as reviews.fla.

Create a new Flash document and change the size of the Stage by clicking the Size button in the Property inspector, or by pressing Ctrl+J (or Cmd+J on the Mac) to open the Document Properties dialog box. Enter Tech Bookstore Reviews in the Title field and add a brief description in the Description field. In the dimensions text input fields, enter 720 pixels for the width and 345 pixels for the height and then press OK.

In the main document Timeline, rename Layer 1 to form, which sets up the dimension and the first layer of the FLA file.

When you publish the document, you don't need to generate an HTML page. You only need the SWF file, which you'll load in to the Tech Bookstore. Therefore, choose File > Publish Settings. Deselect HTML under the Formats category and press OK. Then choose File > Save to save the new file as reviews.fla in the TechBookstore folder on your hard drive.

2.

Drag a List component instance onto the Stage, resize it, and enter a new position for the instance using the Property inspector.

The List component is used much the same way as a list in HTML: It displays labels for the user to interact with, and associated with each label is usually some kind of data. The List component allows a user to make multiple selections if you want to provide them with that ability.

Open the Components panel and drag a copy of the List component onto the Stage. With the List component still selected on the Stage, open the Property inspector and change the component's width to 200 pixels and change the height to 325 pixels. Enter a value of 10 pixels for both the x and the y coordinates to position the component near the upper-left corner of the document. Give the component instance an instance name of reviews_ls.

You'll use the List component to ultimately list the reviews available for a book and allow users to change to the review that they want to read.

3.

Copy the two review files onto your hard drive. Configure the List component using the Property inspector. Add data and labels for two reviews to the List component using the Values dialog box.

To keep the reviews organized, create a new folder inside the TechBookstore folder on your hard drive called reviews. Save the two sample reviews that are provided on the CD-ROM in the lesson09 folder into this new folder. They're titled 0321219198.txt and 0321213408.txt, respectively, and are titled based on the ISBN numbers for the book. In a database type search, you might create a script that searches for ISBN numbers rather than titles because each ISBN number really only refers to one and only one book, whereas there may be several books floating around with the same title. You will use the LoadVars class to load the information from these text files into your Flash SWF file.

Tip

You want to place all the reviews inside a dedicated folder because if you add dozens of reviews in the root folder, it would be messy and difficult to navigate through. All these reviews are simple text files. You could create more reviews if you want and then add them to the reviews folder. You could even add your own by opening up one of the text files in question and copying the format of the simple HTML formatting. Organization is the key to any successful venture, Flash applications included. Don't believe it? Ask The Donald.

There are a few different ways to populate the List component, but perhaps one of the simplest is to manually enter the information into the component using either the Property inspector or the Component inspector panel. You already saw how to do this in a previous lesson when you created the survey, although you populated a ComboBox in that lesson. Populating the List component is for all intents and purposes the same.

In the Property inspector, switch to the Parameters tab, select the data row, and then press the magnifying glass button on the far right of the row to open the Values dialog box.

Click the plus (+) symbol twice to add two values. To keep the reviews organized, we decided to name each file after the ISBN number of the book. This way, if you need to locate a specific book in the list at a later date, you have to search only for its ISBN instead of scanning through each text file looking for the specific book. In the first value, change the value to reviews/0321213408.txt. Note that the directory name is appended to the file so that Flash knows that the file is not in the same directory as the SWF file. Click the second value and enter reviews/0321219198.txt. Click the OK button to close the dialog box and return to the Property inspector.

Click the labels row and again on the magnifying glass on the far right of the row to open the Values dialog box again for the labels in the List component. Click the plus symbol two times to add two values, just as you did for the data parameters. In the top value, change the default value to Fireworks: TFS, which is the title of the book. In the second value, change the value to Dreamweaver: TFS. It is very important that you pay special attention to enter the values in the same order when adding data and labels; otherwise, a user clicks one book title, and the bookstore returns the review of a completely different book. Click the OK button to close the Values dialog box when you are finished.

4.

Add a TextArea component to the Stage and position the component using the Property inspector.

Drag an instance of the TextArea component onto the Stage and align its top-left corner near the List component's upper-right corner. With the TextArea component still selected on the Stage, go to the Property inspector, change the width to 490 pixels and the height to 325 pixels, and give this instance an instance name of review_txt. Set the x coordinate of the TextArea component to 220 pixels and the y coordinate to 10 pixels. In either the Property inspector or Component inspector panel, set the editable property to false so users can't change the review text and set the html property to true so you can use text with embedded HTML tags.

5.

Insert a new layer on the Timeline and rename it actions. Write a function to load the selected book's review.

Insert a new layer on the Timeline and rename it actions. Expand the Actions panel. If Script Assist mode is on, turn it off now by pressing the Script Assist button so that it is not highlighted. Select Frame 1 of the actions layer and then add the following function into the Script pane in the Actions panel:

function loadReview(evt) {      var review_lv:LoadVars = new LoadVars();      review_lv.load(evt.target.selectedItem.data);      review_lv.onLoad = function(success:Boolean){        if (success)        {           review_txt.text = this.content;        }        else        {           trace("unable to load text file.");        }      }; }

Here, you are creating your own reusable function by using the function keyword followed by the name you want the function to have. After you define the function's name, which in this case is loadReview, you define any parameters that your reusable function will accept inside the brackets. This function takes a single parameter named evt. Everything between the { curly brace and the } curly brace is considered the function's body; these lines are the instructions that will execute when the function is actually called.

The first thing this function does is to create a LoadVars object in memory and gives it the name review_lv. The next line of code is another example of a built-in function within Flash. The load function takes a single parameter, which is the URL of the file to load. In this case, the value is taken from the data field of the selected item in the reviews_ls List instance. The value of evt.target is the path to the reviews_ls instance, as you will see in the following exercise.

Tip

Any time you click or interact with a component, button, or movie clip, the object you're interacting with broadcasts an event. Sort of like screaming when someone drops a frozen turkey on your foot. Flash captures that information about who is broadcasting the event and stores it in an object with properties of target and type. Type is the event. Target is the path to the broadcaster. So, when you have a frozen turkey dropped on your foot, evt.target would be: theKitchen.jim. The type would be screamInPain. The object storing this information would be mysister, in this case, who can then relay information to people who ask why my foot is broken....

The review_lv.onLoad is an example of a different type of function. The onLoad function is actually an event that is triggered when the file has been completely loaded by Flash. Flash executes the function listed after the review_lv.onLoad code when the event triggers. This is what is known as an inline function (or anonymous functionsame thing) because it doesn't have a function name and can be triggered only when the onLoad event is triggered.

The inline function takes one attribute called success, which tells you whether the file was successfully loaded. If the value of the success attribute is true, the file has been loaded. Therefore, Flash sets the text property within the review_txt TextArea to the value of the content variable within the LoadVars document. However, if the value of success evaluates to false, the file was unable to load, and therefore you display a message in the Output panel.

This example code has several different function types defined in only a few lines, but understanding how methods and events work is imperative when developing applications using LoadVars, XML, Web Services, or Flash Remoting.

6.

Press the Check Syntax button in the Actions panel toolbar and check that the syntax of your ActionScript does not generate any errors. Save the changes you made to the file.

Click the Check Syntax button in the Actions panel to see whether there are any syntax errors in the code you just wrote.

If everything works correctly, save the changes you made to your FLA file by choosing File > Save. You will continue working with this file in the next exercise.




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