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

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 ex

< 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

structure enables a single Play button on our media player to play the SWF in the currently loaded HTML page

Now that you're familiar with the external files for the project, let's return to Flash

and begin scripting, starting with creating the browser's menu bar

4 Return to Flash With the Actions panel open, select Frame 1 of the Actions layer and add the following script:

5 var fileMenu:MovieClip = mainMenu.addMenu("File");

6 fileMenu.addMenuItem({label:"Front Page", instanceName:"page1"});

7 fileMenu.addMenuItem({label:"Science", instanceName:"page2"});

The first task in scripting our menu bar (named mainMenu) is to add menu items

to it This includes main menu items, such as the File, Edit, and View menu items that you see in most applications, and submenu items that appear on the main menus

Our menu will have two main menu items named File and Style, and each of these will have two submenu items The submenu items on the File menu allow users to select an external HTML page to load (home.htm or science.htm); the submenu items on the Style menu allow users to choose a style for the text in the loaded document We'll discuss this technique in the next exercise

The first line in our script creates the File main menu item for the mainMenu instance This menu item is given a variable name of fileMenu The next two lines populate this menu with two submenu items Each of these submenu items is given

a label and an instanceName property The label property represents the text that appears for the item; the instanceName property is used to reference this menu item in other scripts You'll see this in action later in this lesson

5 Add the following script:

6 var styleMenu:MovieClip = mainMenu.addMenu("Style");

7 styleMenu.addMenuItem({label:"Style 1", instanceName:"style1"});

8 styleMenu.addMenuItem({label:"Style 2", instanceName:"style2"});

These three lines of script create the Style main menu item as well as its two

submenu items, which have instance names of style1 and style2

6 Style the menu by adding the following script:

7 mainMenu.setStyle("themeColor", 0xF3F3F3);

This step changes the color of the menu to light gray, which is more in line with our browser's design

Let's look at the results of our scripting so far

7 Choose Control >Test Movie

When the movie appears, it contains the two main menu items we added (File and Style) Clicking one of these items reveals a submenu containing the items we added Next, we need to script the application to do something when one of these

menu choices is selected

8 Close the test movie to return to the authoring environment With the Actions panel open, select Frame 1 of the Actions layer and add the following script at the end of the current script:

9 var mainMenuListener:Object = new Object();

10 mainMenuListener.change = function(eventObj:Object){

11 var menu = eventObj.menu;

12 var item = eventObj.menuItem;

13 if(item == menu.page1){

14 loadPage("home.htm");

15 }else if(item == menu.page2){

16 loadPage("science.htm");

17 }else if(item == menu.style1){

18 setCSS("internal");

19 }else if(item == menu.style2){

20 setCSS("external");

21 }

22 }

23 fileMenu.addEventListener("change", mainMenuListener);

24 styleMenu.addEventListener("change", mainMenuListener);

When the user selects a menu choice from the menu bar, a change event is fired The first several lines of this script creates a Listener object (named

mainMenuListener) for reacting to the change event; the last two lines of the script register the Listener object to listen for that event from the File menu and the Style menu

NOTE

Individual main menu items fire separate change events when one of their

submenus items is selected This fact allows you to create separate Listener

objects for each item In our application, a single Listener object works fine, so we've registered the single Listener object to listen for this event from both the File and Style menus

When the event is fired, the change handler on the mainMenuListener is executed The handler is passed an Event object when this occurs This Event object contains information about the menu item that triggered the event An if statement within the handler is used to evaluate the information within that Event object so that the handler can take the appropriate action

eventObj.menu is a reference to the main menu whose submenu was selected; eventObj.menuItem is a reference to the submenu item The first two lines of the event handler assign these values to the menu and item variables, respectively This step makes it easier to reference those values later in the script To

understand how the if statement uses these values in its execution, let's look at an example

Assume that the user has selected the Style 2 submenu choice from the Style

menu When this occurs, the menu and item variables within the event handler are assigned these values:

menu //_level0.depthChild1

item //<menuitem instanceName="style2" label="Style 2" />

Although it may not be obvious, _level0.depthChild1 (the value assigned to menu)

is the ActionScript target path to the Style menu (the File menu's target path is

_level0.depthChild0 because it appears first on the menu bar)

The item variable contains the label and instanceName information about the selected submenu item This is the same information we set for the menu item when it was created in Step 5

The final piece of the puzzle is realizing that after the value of menu has been assigned to _level0.depthChild1, this script:

menu.style2

returns this value:

<menuitem instanceName="style2" label="Style 2" />

Notice that this is the same value as the item variable:

item // <menuitem instanceName="style2" label="Style 2" />

By looking for equality between these two values, the if statement is able to

determine which menu item has been selected

Because our entire menu bar only has four submenu items, the if statement within the event handler only does four evaluations The first evaluation states that if the page1 menu item (Front Page item on the File menu) has been selected, the script calls the loadPage() function (which we have yet to create) and passes it a value of

"home.htm" If the page2 menu item is selected (Science on the File menu), the loadPage() function is called and passed a value of "science.htm" If the style1 menu item (Style 1 item on the Style menu) is selected, the script calls the

setCSS() function (which we still have to create) and passes it a value of

"internal" Finally, if the style2 menu item (Style 2 item on the Style menu) is selected, the script calls the setCSS() function and passes it a value of "external"

In the end, when one of the items from the File menu is selected, the loadPage() function is called When one of the items from the Style menu is selected, the setCSS() function is called

We'll create the loadPage() function next, and leave the creation of the setCSS()

function for the next exercise

9 Add the following function definition at the end of the current script:

10 function loadPage(page:String){

11 var pageLoader = new XML();

12 pageLoader.ignoreWhite = true;

13 pageLoader.onLoad = function(){

14 window_txt.htmlText = this;

15 }

16 pageLoader.load(page);

17 }

This step creates the loadPage() function, which accepts a single parameter named page This function loads one of the external HTML pages into the window_txt text field

The function begins by creating an XML object named pageLoader Although XML objects were designed primarily to handle XML, they do have some

usefulness when loading HTML content (which is similar to XML)

The next line within the function tells Flash to ignore any useless whitespace that the loaded file contains

The next part of the script uses an onLoad event handler to tell the pageLoader object what to do when the external document has finished loading In this case, the content within the pageLoader object (this) is displayed in the window_txt text field as HTML-based text

The final line in the function begins the loading process Here, the passed-in value