Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Working with Text Fields

Many Flash sites, whether they're animation-based, advertisements, or commercial applications, often rely on text to convey messages to the end user. It is imperative that developers not only understand how to create and populate a text field properly, but also how to customize a text field and control its scrolling abilities.

Be careful when you resize text fields. If you resize fields using the width and height text fields in the Property inspector, you skew the text within the field. Always resize your text fields using the handles around the field on the Stage or ActionScript (the width and height properties of the TextField class).

There are two main methods of scrolling content in a Flash text field. The first method consists of making custom scroll buttons that scroll each line of text within the text field (one line at a time). This method enables you to easily scroll text and even customize the look of the scroll buttons to match your site a bit better. With a bit of intermediate ActionScript, you could build a scroll track and scroll thumb (the draggable bar between the two buttons), functionality that exists in all modern operating systems. Another way of creating scrollable content is to use the new UIScrollBar component included in the free Flash 7.2 updater. A sidebar following Example 11 demonstrates how to use the UIScrollBar component.

If you enable the border around the text field, you'll find that not only do you get a slight online of the text field but you'll find that the text field has a white background. This white background can make your text fields look as if they don't integrate very well with the rest of your site. If you're using colored backgrounds or an image background for your Flash documents you might want to disable the Show border around text option.

Example 10: Loading text into a field

If you're using lots of text and text fields within your Flash documents (or perhaps your content changes frequently in your site), you might want to consider loading text in from external files instead of entering it directly into instances on the Stage. One of the simplest ways to load external documents is to use the LoadVars class' onData or onLoad event handlers. The following exercise looks at loading in a111-formatted document using the LoadVars class. The following exercise demonstrates how to load in a larger block o103 text using the LoadVars class' onData event handler.

1. Create a new FLA file, and name the file home.fla. Select Modify > Document and resize the Stage dimensions 320 (width) by 240 (height).

2. Use the Text tool in the Tools panel draw a dynamic text field that's approximately 160 pixels wide by 120 pixels high on the Stage. Give the text field an instance name of news_txt. Select the text field and enable both the Selectable and Render text a116 buttons in the Property inspector.

Set the Line type pop-up menu to Multiline in the Property inspector.

Select the news_txt text field on the Stage, and then click the Character button in the Property inspector. Flash displays the Character Options dialog box, which allows you to choose which characters to embed in the text field. Click the Specify Ranges radio button and select the Uppercase, Lowercase, Numerals, and Punctuation items from the list and click OK to embed the selected font outlines.

Instead of creating the news_txt text field manually, you can also create the text field dynamically using the createTextField() method.

3. Click the Insert Layer button to create a new layer at the very top of the Timeline and rename the layer to actions.

Add the following code to the first frame of the actions layer:

var news_lv:LoadVars = new LoadVars();
news_lv.onData = function(src:String) {
if (src != undefined) {
news_tx117Text = src;
} else {
news_tx117Text = "<font color=\"#FF0000\">Error:
Unable to load external text file.</font>";
}
};
news_lv.load("news.txt");

The previous code starts by creating a new instance of the LoadVars object named news_lv. Next an onData event handler is added to the news_lv instance, which accepts one parameter (src) that is a string. This string represents the text that loads into the SWF file. If an error occurs while downloading the contents of the file, the src parameter is undefined; therefore, you need to check the contents of the variable before you display them in the news_txt text field. If the src parameter is undefined, a111-formatted error message appears in the news_txt text field. Otherwise, the contents of the file display if everything goes well.

[View full width]

<p><b>Lorem ipsum dolor sit amet</b>, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.</p>

There are other formatting options fo115 text, such as embedding JPEG images withi111 text. For a full list, see the section called "Supporte101 tags" in the Flash documentation. Select Help > Help (F1) and use the search feature to search "supporte101".

5. Save the modified news.txt document and return to Flash. Test the Flash document in either the test environment (Control > Test Movie). You'll see the contents of th102 file display within the text field, and the text should scroll if you click and drag your mouse vertically within the text field (Figure 8.31). You add custom buttons to scroll the text fields in the following exercise.

6. If you're happy with the results of home.fla, open the FLA file and select File > Save As. Name the new FLA file about.fla. Select frame 1 of the actions layer and modify the bold line of ActionScript to match the following code:

var news_lv:LoadVars = new LoadVars();
news_lv.onData = function(src:String) {
if (src != undefined) {
news_tx117Text = src;
} else {
news_tx117Text = "<font color=\"#FF0000\">Error:
Unable to load external text file.</font>";
}
};
news_lv.load("about.txt");

Even if you used onData to load and display an external text file, you also use the LoadVars class to load name/value pairs (similar to passing variables along your browser's query string (for example, my_swf.swf?name= craig&food=jello) from external files. If you're loading documents containing name/value pairs, you'll want to use the onLoad event handler rather than the onData event handler. The difference between onData and onLoad is that onData is called after the contents of the external file have been loaded, but before Flash tries to parse the contents into name/value pairs.

When you're finished, save your changes, test, and then publish the file (File > Publish).

7. Create a new text file and save it as about.txt. Save it in the same directory as about.txt. Copy and paste the text from news.txt into about.txt, or add your own text content in the file.

Example 11: Scrolling text with custom scroll buttons

Unless you're dealing with very small blocks of text, or if your text never changes, you'll possibly never have to worry about whether all your text properly fits into a text field on the Stage. In all other cases, you'll need buttons to scroll the text. Adding basic scrolling abilities to a text field is very simple to do. With a bit of sweat and tears, you can even create your own custom scroll track and scroll thumb, which allow users to scroll through content even more easily. This exercise demonstrates how you can quickly add a couple of buttons so that users can scroll the text in your text fields without having to use their mouse's scroll wheel or drag their mouse within a text field.

If you use a premade button from the common library, the instance is already a button. You won't need to press F8 to convert it into a button symbol.

1. Open home.fla again. Create one button on the Stage with an arrow for the up and down scroll buttons, the same way you made the buttons to control the FLV file (Figure 8.32).

If you want to use one of Flash's included graphics instead, you can browse various buttons by selecting Window > Other Panels > Common Libraries > Buttons. This library of assets includes dozens of button symbols organized into nine different folders.

2. Select the arrow button, which you'll use to scroll text upward. Open the Property inspector and give the new button the instance name scrollUp_btn.

3. Now that you have the scrollUp_btn instance ready, you can easily create a second button by duplicating the scrollUp_btn instance on the main Timeline. Select the scrollUp_btn instance, and then select Edit > Duplicate from the main menu to add a copy of the instance to the Stage. Select the new instance and type scrollDown_btn into the <Instance Name> text field.

If you use a premade button and the arrow points toward the right of the Stage, you'll need to use the Free Transform tool to rotate the instance on the Stage. Or select the scrollUp_btn instance on the Stage and select Modify > Transform > Rotate 90° CCW from the main menu. This rotates the selected symbol counterclockwise by 90 degrees.

4. Because you don't want the up and down arrows to point the same direction, you need to rotate or flip the scrollDown_btn instance on the Timeline. Select the scrollDown_btn instance on the Stage, and then select Modify > Transform > Flip Vertical. Doing this flips the symbol along its axis so the arrow points downward. Or if you want to rotate the symbol 180 degrees, you could select Modify > Transform > Rotate 90 degrees CCW from the main menu twice, or use the Free Transform tool and rotate the instance into the desired position.

5. Position both the scrollUp_btn and scrollDown_btn buttons next to the right side of the news_txt text field on the Stage.

6. Select frame 1 of the actions layer and add the following code.

scrollUp_btn.onRelease = function() {
if (news_txt.scroll>1) {
news_txt.scroll;
}
};

This code defines a function for the onRelease event handler for the scrollUp_btn instance. When the visitor clicks scrollUp_btn, the code checks to see if the scroll property is greater than 1; if so, it decreases the value of the scroll property by 1. You use the TextField.scroll property to tell you what lines of text are visible within the text field. For example, imagine that you have 10 lines of text in a text field, but only 4 are visible at any point. When the text first loads, the topmost visible line of text is line 1. If you scroll down one line of text, line 1 is no longer visible, and lines 2 through 5 display. The scroll property always lets you know the line number of the topmost line of text that's visible in the text field.

Selecting Edit > Duplicate does not make a duplicate of the scrollup symbol in the Library. If you want to change the graphics of the down button (such as change the color or face), you need to duplicate the scrollUp symbol. Right-click (Windows) or Control-click (Macintosh) the symbol in the Library, and select Duplicate from the context menu. Make edits to the new symbol in the Library.

7. Add the following code in the Actions panel, below the code added in step 6:

scrollDown_btn.onRelease = function() {
if (news_txt.scroll<news_txt.maxscroll) {
news_txt.scroll++;
}
};

When you scroll vertically, you use the scroll property in the TextField class. If you need to control horizontal scrolling, use the hscroll property instead.

The previous snippet of code is similar to the code you added in step 6, although it is responsible for scrolling the text field down instead of up. Notice that the if statement (in the onRelease event handler) uses a new property: TextField.maxscroll. The maxscroll property contains the maximum value that you return by TextField.scroll. This allows you to check whether the text has been scrolled to the bottom or not. If the current value of news_txt.scroll is less than the value of news_txt.maxscroll, then increment the value of news_txt.scroll.

When you use the scroll property, units are measured in lines. For example, the topmost visible line of text is line 3. When you use the hscroll property, the units of measurement are pixels instead of line numbers.

8. Test your Flash document in the test environment. You should be able to scroll the text in the text field by pressing the scrollUp_btn or scrollDown_btn instances. If the text doesn't scroll, return to Flash and check the instance names on the text field as well as the two buttons.

9. If your FLA works correctly in step 8, repeat this exercise for the about.fla document. Publish about.fla when you finish making these modifications.

Using the ScrollBar Component

Although absent in versions 7.0 and 7.0.1 of Flash MX 2004, Flash's 7.2 ("Ellipsis") updater reintroduced the ScrollBar component, updated from Flash MX (6.0). You can attach UIScrollBar to a text field on the Stage when you author a Flash document, or you can attach one dynamically at runtime using ActionScript. The UIScrollBar component consists of three main features: arrow buttons, a scroll track, and scroll thumb (box) which lets you quickly scroll through the content in the text field.

There are two ways to integrate the UIScrollBar component. The first way is to drag an instance of the UIScrollBar component onto the Stage and modify the properties directly by using the Property inspector or Component Inspector panel. This method is perhaps the most straightforward and requires the least amount of code, but it isn't always the most versatile method. The second way involves adding the UIScrollBar component into the Library, and then attaching and configuring the component using the methods and properties of the UIScrollBar class directly. This second option is more versatile because you can use the component in conjunction with dynamically created text fields. However, it also requires the most amount of code.

To try using the ScrollBar, make sure that you have the Flash 7.2 updater installed (Help > About Flash (Windows) or Flash > About Flash (Macintosh)). Create a new Flash document and save it as scrollbar.fla. Use the Text tool to add a dynamic text field on the Stage. Resize the text field so it's approximately 160 pixels wide by 120 pixels high. Give the text field an instance name of my_txt. Set the text field to Multiline.

Drag an instance of the UIScrollBar component from the Components panel (within the UI Components folder) onto the Stage. With the UIScrollBar component still selected, enter a value of my_txt into the _targetInstanceName property in the Property inspector. This value specifies what text field to attach the ScrollBar instance to. Then add the following code to frame 1 of the FLA document:

var my_lv:LoadVars = new LoadVars();
my_lv.onData = function(src:String) {
if (src != undefined) {
my_tx117Text = src;
} else {
my_tx117Text = "<font color=\"#FF0000\">Error:
Unable to load external text file.</font>";
}
};
my_lv.load("headlines.txt");

The previous snippet creates an instance of the LoadVars class named my_lv which you use to load in the contents of an external text file.

Before you can test this example, you need to make sure that there is a file named headlines.txt in the same folder as the FLA. This text file loads in at runtime and displays in the my_txt text field. Select Control > Test Movie to test the document in the test environment.

The scrollbar is the same height as the text field and you can scroll through the text using the scroll buttons or the scroll thumb. You can find this example FLA, called scrollbar.fla, in the 08/bonus folder.

Scrolling text using the ScrollBar component.

Putting the Site Online

You have created the entire interface and all the parts of the site you need to put online. This site works best in a browser window when it's centered and has a plain background that's the same color as the FLA file background (due to the introductory animation you created).

To center the SWF file, you need to modify th102 that Flash generates. Follow this simple exercise to put your work online.

Example 12: Editing th102

First, you need to publish the project and tweak Flash's autogenerate101. For this particular project, you will center the content both horizontally and vertically within the web browser, so that the site appears in the middle of the page (almost) regardless of resolution.

1. Open site.fla. In Flash, select File > Publish Settings to view the publish settings dialog box. On the Formats tab, make sure that you select both the Flash an101 check boxes, which means that a SWF an101 file export when you publish site.fla.

2. Click the Flash tab and make sure that both the Protect from import and Omit trace actions are enabled. Omitting trace actions provides an ever-so-slight performance improvement in some cases and Flash Players. Regardless, it doesn't hurt to select it before you publish a SWF for the web. Now click th102 tab and disable the Display menu in the Playback section.

3. Click the Publish button at the bottom of the Publish Settings dialog box to republish the SWF an101 documents to the same directory as site.fla. Click OK to close the dialog box.

4. Locate sit102 on your hard drive, and open it in your favorit102 editor (such as Dreamweaver or HomeSite). If you don't have any HTML editors installed you can also use Notepad (PC) or TextEdit (Macintosh).

[View full width]

&l117>
<head>
<meta http-equiv="Content-Type" content="tex117; charset=iso-8859-1" />
<title>site_4</title>
</head>
<body bgcolor="#9cbc7c">
<!url's used in the movie>
<!text used in the movie>
<table width="100%" height="100%">
<tr>
<td align="center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7
,0,0,0" width="600"
height="300" id="site" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="site.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#9cbc7c" />
<embed src="site.swf" quality="high" bgcolor="#9cbc7c"
width="600" height="300" name="site" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</table>
</body>

You can find thi116 file in the 08/complete folder on the CD-ROM.

If you republish your Flash document, you need to make sure that you return to the Publish Settings dialog box and uncheck th102 check box within the Formats tab. If you don't uncheck this document type, Flash will regenerate th102 file each time you publish, which will overwrite any changes you made to th102 document in you115 editor.

You can see from the previous two blocks o103 code that you needed to remove the DOCTYPE as well as modify the attributes within the &l117> tag. If you didn't modify these two tags, your web browser wouldn't vertically align the content because the height attribute within the table tag isn't valid XHTML.

The remainder of the modified code is simply defining the table with a single row and cell to force the content to display in the middle of the web browser.

Now you're ready to upload your files to the web. Remember that you do not need to upload the FLA source file. If you do upload the FLA, it's easy for someone to download all your source code. Many other Flash developers try downloading FLA files based on the file locations of your SWF file (sometimes easily found when developers inadvertentlyand sometimes advertentlyupload the FLA with their SWF an101 files).

Moving On

There are many improvements that you can make to this (rather lengthy) project. First, you can easily add a lot more content to the file very easily. Add additional buttons and "pages" for the website by copying button instances and adding text for those buttons. For example, you can load in more SWF files or JPEG images into the container movie clips.

Changing the graphics and colors can also make a marked improvement to this document. You can add a variety of backgrounds to the file, as well as interesting masked transitions or animations that appear when the SWF file first loads. You might even add a progress bar (detailed in following chapters), particularly if you add a lot of content to the document.

You can also make the movie clip buttons more interesting by building upon the animation or perhaps even adding sound to the buttons. Sound is easy to add and sometimes dramatically improves the interest level in the website. Make sure that you don't go overboard with sounds. They can easily become irritating, particularly if they all sound the same (it can quickly seem too repetitive).