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 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 [...]... page is used to determine what external document to load 10 Add the following event handlers at the end of the current script: 11 play1_btn.onRelease = function(){ 12 window_txt.media1_mc.play(); 13 } 14 stop1_btn.onRelease = function(){ 15 window_txt.media1_mc.stop(); 16 } These two event handlers are used to control that SWF file by telling it when to play and when to stop As we discussed in Step... file by telling it when to play and when to stop As we discussed in Step 3, both of our external HTML files contain an SWF that has been embedded in the file and given an ID/instance name of media1_mc When either one of these instances appears within the window_txt text field, the target path becomes the following: window_txt.media1_mc Let's test our project 11 Choose Control >Test Movie When the movie... completely disorganized (something we'll fix in the next exercise), you can see the JPG image and an SWF movie Press the media player's Play button to begin playback of the embedded SWF If you select a different page from the File menu, the media player works on the SWF embedded in that page as well 12 Close the test movie and save your work as flashBrowser2.fla We'll continue building on this file in the next . < 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. 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.