< Day Day Up >

Loading and Communicating with Inline Images and SWFs
What text can't be spruced up and enhanced with a splash of graphical content in the form
of an image, or even a Flash movie? Although placing text and graphical content together
was certainly possible with previous versions of Flash, there wasn't a way of embedding
an image or Flash movie within the text so that text flowed around it. Flash MX 2004
changes all that with built-in support of the HTML image tag (<img>) within text fields.
When a text field has been set to accept and interpret HTML, using the <img> tag
embeds the specified graphic at the location you choose within the text. Let's look at a
simple example:

var myText:String = "<p><b>Hello!</b><img src='myDog.jpg' width='100'
height='100'> Do you
like this picture of my doggie?</p>";

This script creates a string using some simple HTML tags. The next step is to render this
HTML snippet in a text field, which is done with the following bit of code:
myTextField_txt.htmlText = myText;

This line sets the htmlText property of the myTextField_txt text field to the string that
was just created. As a result, the text field displays the text, formatted as shown, and
loads the specified JPG image between the first bit of text and the last.
For a text field to have the capability to render HTML loaded into it, its html property
must be set to true. This can be accomplished by selecting the text field in the authoring
environment and clicking the Render Text as HTML button on the Property Inspector, or
via ActionScript:
myTextField_txt.html = true

NOTE

NOTE
The align attribute only supports a "left" or "right" value. The default value is "left".

In the following exercise, you'll begin scripting a Flash-based HTML browser. The
browser has the capability to load external HTML pages, and display images and SWFs
within those pages. You'll also create a simple media player that plays SWFs embedded
within the HTML. Finally, you'll use the MenuBar component to add a menu bar at the
top of the application window.
1. Open flashBrowser1.fla in the Lesson14/Assets folder.
This project contains six layers—Background, Media Player, MenuBar, Titlebar,
Content Window, and Actions. Our project's static graphics are on the Background
layer. There are two
button instances on the Media Player menu, named play1_btn
and stop1_btn. These are used as playback controls for SWFs loaded in using the
<img> tag. The MenuBar layer contains an instance of the MenuBar component
named mainMenu. This menu will contain two menu buttons: File and Style. The
File menu allows users to select HTML pages to open; the Style menu allows them
to select a style for the various text elements in the loaded HTML page (the latter
functionality is explored more in the next lesson). The Titlebar layer contains a
graphical bar that spans the top of the application. This is for design purposes
only. The Content Window layer contains a text field instance named window_txt.
This field acts as our browser's main window. HTML content (including
embedded images and SWFs) is loaded into this field. As always, the Actions
layer will contain all the script for this project.

This project uses several external files that have already been created. Before we
begin scripting, let's review those files and what they contain.
2. Using your operating system's directory-exploring application, navigate to the
Lesson14/Assets directory and locate the following files:
o

This line embeds the morning.swf movie. Be aware that we've given this SWF an
id of media1_mc. This plays an important role in our browser's media player
functionality, which we'll discuss shortly.

If you opened science.htm, you'd see that it's set up in a similar way. It contains an
<img> tag at the top of the document that embeds the header_science.jpg image,
and another <img> tag that embeds galaxy.swf. In that file, the embedded SWF
has also been given an id of media1_mc (same as the SWF embedded in
home.htm). This ensures that no matter which of the two pages is currently loaded
in the browser, there will be an embedded SWF with an id of media1_mc. This