| The News section of the Tech Bookstore is straightforward because it is very similar to the Reviews page you have already created. The News page consists of a TextArea component, CSS-formatted text, and a LoadVars statement to load the text content from a remote file. You use some text files that are provided for you on the CD-ROM. 1. | Create a new document and resize the Stage to 635 pixels wide by 345 pixels high. Open the Publish Settings dialog box and deselect the HTML check box. Click OK, return to the main document, and save the file as news.fla.
Create a new Flash document and resize the Stage by opening the Property inspector. Set the new dimensions of the Stage to 635 pixels wide by 345 pixels high. Save the Flash document to the root of the TechBookstore folder and name the new document news.fla.
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.
| 2. | Drag an instance of the TextArea component onto the Stage and resize it to 615 pixels wide by 325 pixels high. Position the TextArea instance on the Stage.
Drag an instance of the TextArea component onto the Stage from the Components panel. Expand the Property inspector. Resize the TextArea component instance to 615 pixels wide by 325 pixels high. Position the instance on the Stage at an x and y coordinate of 10 pixels. This should give the component a 10-pixel border on every side of the Stage. Give the TextArea an instance name of news_txt. Don't worry about setting the editable or html parameters in the Property inspector. You'll set those manually using ActionScript in a later step.
 | 3. | Rename Layer 1 in the Timeline to form and add an actions layer.
Double-click Layer 1 in the Timeline and rename the layer to form. Insert a new layer above the form layer and name it actions. Lock each of the layers to prevent accidentally adding any symbols to either layer. Because you won't be adding any more symbols to the Stage, you can lock layers and still add ActionScript.
| 4. | Add ActionScript to import the cascading style sheet into the SWF file.
You learned how to import style sheets in an earlier exercise (CSS). By using an external style sheet, you can reuse the same style sheet throughout each of your Flash documents and maintain a consistent look. Select Frame 1 of the actions layer and add the following code into the Actions panel:
var flash_css = new TextField.StyleSheet(); flash_css.load("styles.css"); flash_css.onLoad = function(success:Boolean) { if (success) { news_txt.styleSheet = flash_css; } else { trace("Error loading CSS file."); } };
This ActionScript is exactly the same as in the previous exercise, but with one exception. Instead of binding the style sheet to the review_txt instance, you're assigning the style sheet to the news_txt instance.
| 5. | Load the news text file and set the TextArea properties.
Add the following ActionScript below the style sheet code on Frame 1 of the actions layer. This code is used to load in an external text file using LoadVars:
var news_lv:LoadVars = new LoadVars(); news_lv.load("news.txt"); news_lv.onLoad = function(success:Boolean) { if (success) { news_txt.text = this.content; } else { trace("unable to load text file."); } };
This ActionScript should also be familiar from earlier exercises.
| 6. | Set the html and editable properties for the TextArea instance using ActionScript.
Instead of setting the html and editable properties using the Property inspector, you will set them using ActionScript. Use the following code, which can be placed below the existing LoadVars code:
news_txt.html = true; news_txt.editable = false;
The first line sets the html property value to TRue, enabling you to display HTML-formatted text in the TextArea instance news_txt. The second property, editable, ensures that the user can't modify the text and change the content in the TextArea. Even if you set editable to true (or if you left the line out altogether), and the user did change the content within the field, it wouldn't ruin your site. The changes would display only on his or her computer screen and not be visible to anybody else.
| 7. | Test news.fla and make sure that the SWF file works properly. If so, save the FLA file and then go to the Publish Settings dialog box and uncheck the HTML option for publishing. Publish the document so news.swf is generated in the TechBookstore folder.
Test the SWF file using Control>Test Movie to make sure that the text loads properly. When you are satisfied that everything is working, save the document (name the document news.fla if you didn't already save the file in Step 1) and publish the FLA file so the SWF file can be loaded into the main Tech Bookstore website.
 |
|
