Loading External Content into Text Fields

Introduced in the Flash Player 7 is the ability to embed images as well as SWF files right into dynamic text fields. This is accomplished with the use of the <img> tag. And as you can see, because the files are brought in by means of an HTML tag, the text fields must be HTML-enabled.

The <img> tag has several attributes that can be changed and manipulated:

• src This attribute is the path to the file to be brought in.

• id The instance name of the movie clip being created by the Flash player to hold the embedded file; it is useful if you want to manipulate the movie clip with ActionScript.

• width The width of the file being embedded, in pixels.

• height The height of the file being embedded, in pixels.

• align Controls the horizontal alignment of the embedded file; left or right are the allowable parameters, and the default is left.

• hspace Specifies the horizontal space around the embedded file between the file and the text. The default value is 8.

• vspace Specifies the vertical space around the embedded file between the file and the text. The default value is 8.

Those are all the attributes for the <img> tag, so let's go over an example of loading in an image:

1.	Create a new Flash document.
2.	Save this document as imageInText1.fla in the same directory as the external files.
3.	Name the layer in the main timeline actions.
4.	Create a new layer and name it text.
5.	In the text layer, draw a dynamic text field about 400x400 in the middle of the stage.
6.	Give the text field the instance name of imageText_txt.
7.	Make sure that the Render Text as HTML property is turned on in the Properties Inspector, as well as the border, and that it is set for Multiline.
8.	Go into the first frame of the actions layer, and place this code within it: //set the html text to the text field imageText_txt.htmlText = "<img src='/books/3/419/1/html/2/bigBen.jpg' width='200' height='200'>Big Ben!!!";

The preceding code simply sets the htmlText property of the text field to the text we want to display, plus the image tag that will embed the image.

Test the movie, and you will see a text field with an image and some text in it as shown in Figure 19.9.

Figure 19.9. Embedding images into text fields is a great way to liven up boring text.

To continue with this example, we are going to embed the clock SWF file under the image.

1.

Return to the actions layer, and add this line of code to what is already there:

[View full width]
 //add the clock SWF file imageText_txt.htmlText += "<img src='/books/3/419/1/html/2/clock.swf' width='150' height='50' align='right'>What  time is it?"; 

This line of code adds the clock.swf file to the text field, as well as some more text.

Test the movie again, and now you will see the clock in the text field as well as the image, as in Figure 19.10.

Figure 19.10. You can also embed external SWF files right into text fields.

Now we have embedded files into text fields. What if we want to manipulate them?

Manipulating Embedded Content in Text Fields

You can control embedded content in text fields using the id attribute within the <img> tag. You simply give the movie clip that is containing the embedded content an instance name, and then you can refer to it in ActionScript.

Follow these steps continuing from the preceding example:

1.

Close the test screen and return to the main timeline.

2.

Go into the first frame of the actions layer, and replace the code with this code: //set the html text to the text field imageText_txt.htmlText = "<img src='/books/3/419/1/html/2/textBox.swf' id='myContent'> _ text field"; //now create the function that will continually run this.onEnterFrame = function(){ //constantly send information to the text field imageText_txt.myContent.myText_txt.text = getTimer(); }

The preceding code uses the <img> tag to place a SWF file in the text field along with some text. Then we create a callback function that will fire continually, thereby sending the result of the getTimer() function to the text field constantly.

Test the movie and you will see the text field within the text field constantly being updated by the getTimer() method.

We have covered a lot of different ways you can bring content into Flash, but so far, all the examples we have used have brought content into Flash while Flash was running locally on our computer. This means that the transfer has been almost instant. In the real world, this would not be the case because SWFs and images take time to load, and that's where preloaders come in.