Tài liệu Loading and Communicating with Inline Images and SWFs doc

< 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

Currently, Flash can load only non-progressive JPG images. Progressive JPGs, GIFs, and
PNGs are not supported.

If you thought loading a JPG was great, it gets even better because Flash can also load
SWFs into a text field in the same way, using the <img> tag. Look at this revised
example:

var myText:String = "<p><b>Hello!</b><img src='myDogMovie.swf'
id='myDogMovie_mc'
width='100' height='100'> Do you like this picture of my doggie?</p>";
myTextField_txt.htmlText = myText;

NOTE
For an SWF to render properly in the <img> tag, its registration point must be at 0,0.

This has an effect similar to that of the previously discussed script, except that the revised
HTML string loads myDogMovie.swf. You can interact with this movie just as if you had
viewed it separately.
TIP
The <img> tag can also be used to embed movie clips from the library. Simply reference
the clip's identifier name in the src attribute

But it gets even better! Notice within the <img> tag the use of an attribute named id. This
attribute provides an instance name to the loaded SWF, enabling other elements within
your movie to communicate with that loaded SWF. Its full target path is the name of the
text field into which it's loaded, followed by its ID/instance name:
myTextField_txt.myDogMovie_mc

Other supported attributes of the <img> tag include width, height, hspace, vspace, and
align.

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

home.htm
o
science.htm
o
header_home.jpg
o
header_science.jpg
o
morning.swf
o
galaxy.swf
The first two files on this list are the HTML files that the project will open. The
home.htm file contains <img> tags that embed the header_home.jpg and
morning.swf files; the science.htm file embeds the two remaining files.
To help you get a sense of the structure of one of these HTML files, let's open it.
3. Using your favorite HTML editor, open home.htm.
As you can see, this is a simple document. Unlike most HTML documents,
however, it begins and ends with a <body> tag. Within the <body> tag, several
other tags are used, most of which are explained in the next exercise. The only tag
we're concerned with for now is the <img> tag, which is used twice in this
document. The first use of this tag appears at the top of the document:
<img src='header_home.jpg' width='400' height='50' hspace='0' vspace='0'/>

This embeds header_home.jpg at the top of the page. The next use of the tag looks
like this:

<img src='morning.swf' width='150' height='90' id='media1_mc' align='left'
hspace='10'
vspace='12'/>

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