Foundation XML for Flash
| ||
| ||
|
In the next exercise, well add the XML content from catalog.xls to a Flash movie. Well make changes to the Excel workbook and see them reflected within the Flash application. You should complete exercise 4 before you start this exercise. If you havent, you can use the catalogExport.xml and catalog_XMLtags.xls files from the resources.
Exercise 5: Creating a catalog using XML content from Excel
|
-
Open Flash if necessary.
-
Choose File
Open and select catalog.fla from your resource files. Make sure the file is located in the same folder as catalogExport.xml . Figure 6-43 shows the Flash interface. It contains a List component and several TextInput components with some text labels. Figure 6-43: The catalog.fla interface -
Add a new layer called actions and click on frame 1.
-
Open the Actions panel with the F9 shortcut key and add the code shown here. The code loads the file catalogExport.xml and traces the contents in an Output window when the file is successfully loaded.
var RootNode:XMLNode; var selectedItemNode:XMLNode; var myXML:XML = new XML(); myXML.ignoreWhite = true; myXML.onLoad = loadCatalog; myXML.load("catalogExport.xml"); function loadCatalog(success:Boolean):Void { if (success) { trace (this); } }
-
Test the movie. Figure 6-44 shows the Output window that you should see.
Figure 6-44: The Output window showing the contents from the XML document -
Modify the loadCatalog function as shown here. Ive indicated the changed lines in bold. The function extracts the description from each item and adds it to the description_list component using the addItem method. It then sorts the list into alphabetical order.
function loadCatalog(success:Boolean):Void { if (success) { RootNode = this.firstChild; var ItemDescriptionNode:XMLNode; for (var i:Number=0; i<RootNode.childNodes.length; i++) { ItemDescriptionNode = RootNode.childNodes[i].childNodes[1]; description_list.addItem(ItemDescriptionNode.firstChild.nodeValue); } description_list.sortItemsBy("label"); } }
-
Test the movie. Figure 6-45 shows how the interface should appear at this point.
Figure 6-45: The Flash interface after populating the List component
-
Add the following code above the loadCatalog function. The code adds a listener to the List component that finds the selected item node and populates the TextInput components. The listener uses an inline function.
var ListListener:Object = new Object(); ListListener.change = function():Void { var chosenItem:String = description_list.selectedItem.label; var ItemDescription:String; for (var i:Number = 0; i < RootNode.childNodes.length; i++) { ItemDescription = RootNode.childNodes[i].childNodes[1]. firstChild.nodeValue; if (ItemDescription == chosenItem) { selectedItemNode = RootNode.childNodes[i]; break; } } code_txt.text=selectedItemNode.childNodes[0].firstChild.nodeValue; net_txt.text=selectedItemNode.childNodes[2].firstChild.nodeValue; gross_txt.text=selectedItemNode.childNodes[4].firstChild.nodeValue; }; description_list.addEventListener("change", ListListener);
-
Test the movie and select a list item. Figure 6-46 shows the interface of the finished Flash file. You can see this file saved as catalog_completed.fla .
Figure 6-46: The completed Flash application showing a selected item -
Switch to Excel and open your file from exercise 4. If you didnt complete the exercise, you can use the catalog_XMLtags.xls file from your resources. Add data to the row at the end of the list. Export the XML data as catalogExport.xml and close the Excel file. Test the Flash movie again to make sure that the content has updated.
In this exercise, you saw how to include XML content generated by Excel 2003 within a Flash application. You were also able to use Excel to update the data and the application. Once you understood the structure of the XML document, it was easy to add elements to the Flash interface. If the catalog contained a large quantity of data, users would probably find it easier to use the Flash application rather than searching through a long Excel file.
|