Embedding images, SWF files, and movie clips in text fields

In Flash Player 7 and later, you can use the <img> tag to embed JPEG files, SWF files, and movie clips inside dynamic and input text fields, and TextArea component instances. (For a full list of attributes for the <img> tag, see Image tag (<img>).)

Flash displays media embedded in a text field at full size. To specify the dimensions of the media you are embedding, use the <img> tags's height and width attributes. (See Specifying height and width values.)

In general, an image embedded in a text field appears on the line following the <img> tag. However, when the <img> tag is the first character in the text field, the image appears on the first line of the text field.

Embedding SWF and JPEG files

To embed a JPEG or SWF file in a text field, specify the absolute or relative path to the JPEG or SWF file in the <img> tag's src attribute. For example, the following code inserts a JPEG file that's located in the same directory as the SWF file:

textField_txt.htmlText = "<p>Here's a picture from my last vacation:<img src='beach.jpg'>";

Embedding movie clip symbols

To embed a movie clip symbol in a text field, you specify the symbol's linkage identifier for the <img> tag's src attribute. (For information on defining a linkage identifier, see Attaching a movie clip symbol to the Stage.)

For example, the following code inserts a movie clip symbol with the linkage identifier symbol_ID into a dynamic text field with the instance name textField_txt.

textField_txt.htmlText = "<p>Here's a movie clip symbol:<img src='symbol_ID'>";

In order for an embedded movie clip to display properly and completely, the registration point for its symbol should be at point (0,0).

Specifying height and width values

If you specify width and height attributes for an <img> tag, space is reserved in the text field for the JPEG file, SWF file, or movie clip. After a JPEG or SWF file has downloaded completely, it appears in the reserved space. Flash scales the media up or down, according to the height and width values. You must enter both height and width attributes to scale the image.

If you don't specify height and width values, no space is reserved for the embedded media. After a JPEG or SWF file has downloaded completely, Flash inserts it into the text field at full size and rebreaks text around it.

Note: If you are dynamically loading your images into a text field containing text, it is good practice to specify the width and height of the original image so the text properly wraps around the space you reserve for your image.

Controlling embedded media with ActionScript

Flash Player creates a new movie clip for each <img> tag and embeds that movie clip within the TextField object. The <img> tag's id attribute lets you assign an instance name to the movie clip that is created. This lets you control that movie clip with ActionScript.

The movie clip created by Flash Player is added as a child movie clip to the text field that contains the image.

For example, the following code embeds a SWF file named animation.swf in the text field named textField_txt on level 0 and assigns the instance name animation_mc to the movie clip that contains the SWF file:

_level0.textField_txt.htmlText = "Here's an interesting animation: <img src='animation.swf' id='animation_mc'>";

In this case, the fully qualified path to the newly created movie clip is _level0.textField_txt.animation_mc. For example, you could place the following code after the previous code (on the same Timeline as textField_txt) for a button called stop_btn that stops the playhead of the embedded SWF file:

stop_btn.onRelease = function() {
   _level0.textField_txt.animation_mc.stop();
};

Making hypertext links out of embedded media

To make a hypertext link out of an embedded JPEG file, SWF file, or movie clip, enclose the <img> tag in an <a> tag:

textField.htmlText = "Click the image to return home<a href='home.htm'><img src='home.jpg'></a>";

When the mouse pointer is over an image, SWF file, or movie clip that is enclosed by <a> tags, the pointer turns into a "pointing hand" icon, the same as it does with standard hypertext links. Interactivity, such as mouse clicks and keypresses, does not register in SWF files and movie clips that are enclosed by <a> tags.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/mx2004/main_7_2/00001046.html

Add Comment