Now you're ready to start writing the code that gets the XML-formatted data and loads the images into the basic structure you set up for your slideshow. Select the first frame, which should be a blank keyframe, in the actions layer of the timeline. With this new keyframe selected, add the following code to the Actions panel. This will pull the XML document information into Flash: myXML = new XML(); myXML.ignoreWhite = true; myXML.onLoad = handleLoad; myXML.load("images.xml"); function handleLoad(success){ //process XML if(success) { //trace( "xml loaded" ); displayXML(); } else { trace ( "xml loading failed" ); } } This code first creates a new XML object and names it myXML. Next, it tells myXML to ignore the whitespace in the external XML file and tells myXML what function to call when the XML-formatted data is loaded from an external source. Then it tells myXML that it's time to load the data and where to get it. This example uses a relative path to the images.xml file so you can save all the files for this project in the same directory folder. To test the success of your loading process, uncomment (remove the // at the start of the line) the TRace statement inside the success if statement. Then save the file and choose Control, Test Movie. If the XML document successfully loads, you'll see the output window display xml loaded. If you do not see that statement, check your typing and syntax carefully. Re-comment the trace statement before you move on to the next step. Exploring the XML DataNext, you need to add the code that will use the XML-formatted data you just loaded. You can explore the XML by tracing it out first, and use this technique to discover the code you need to load and display the image (and its title) into your Flash document. displayXML= function(){ trace(myXML.toString()); } When you run this code, you can see that there are no spaces between the nodes in the output panel. Flash ignores the whitespace from the XML document. Remember whitespace? It's the tabs, blank spaces, and lines that visually organize the text characters for human eyes. Although these spaces make it easier for humans to read XML, it complicates things for the computer, so Flash ignores it. Figure 16.3 shows the results of trace(myXML.toString()) in the Output panel, which is "floating" over the Actions panel containing the code producing the output. Figure 16.3. The output of the results of TRace(myXML.toString());.How do you get Flash to display your data? The first step is to get the information in one node, and then you can figure out a general method later. Looking at the XML structure, you can see that you've got a node named images with three child nodes that are each named image. These child nodes each have attributes named title and url. <images> <image title="Orange 1970 Honda sl175" url="1970_honda_sl175_orange.jpg" /> <image title="Orange 1978 Honda cb400t" url="1978_honda_cb400t_orange.jpg" /> <image title="Red 1980 Honda cb750ss" url="1980_honda_cb750ss_red.jpg" /> </images> You know that you can get the entire structure if you trace out myXML.toString(), but how do you get to a specific node? Try tracing out myXML.firstChild.toString(). This returns the same thing as myXML.toString(). Why? Because the images node is the first child node of the document. To get at the inner nodes that contain the information about the individual images, you need to go deeper into the structure of the document: trace(myXML.firstChild.childNodes[0].toString()); This traces the first image node in the output window, as shown in Figure 16.4. Figure 16.4. A single node is traced to the output window.
Great! Now, how do you get the rest of the nodes? Recall that in Chapter 14, you learned that XML structures are indexed similar to array indexes. That is, they start counting at 0. So, if childNodes[0] is the first node in its generation, you can get the next node with childNodes[1], and so on. If you know that there are only three images, you can just write a new line of code for every image for which you want to access the information in the XML document. But it would be more efficient, and less prone to error, to write a looping function to collect the information in sequence. Because the index number is the part that changes for each node, it sets you up to use the following loop: var i_max = myXML.firstChild.childNodes.length; for(var i=0; i<i_max; i++){ trace( myXML.firstChild.childNodes[i].toString() ); } In this code example, you first get the number of child nodes through which you need to loop. Because you start the count at zero, you want to stop looping when the index counter is one less than the number of child nodes. Rather than make Flash do a calculation, you set the condition that i must be less than the node count for it to continue. Now that you know how to get the node you want, how do you get the information from that node? You access its attributes. With a slight modification to the code you just wrote, you can trace out the title and url values for each image node. The results of this script can be seen in the output window shown in Figure 16.5. Figure 16.5. Tracing node attributes to the output window.
var i_max = myXML.firstChild.childNodes.length; for(var i=0; i<i_max; i++){ trace(myXML.firstChild.childNodes[i].attributes.title); trace(myXML.firstChild.childNodes[i].attributes.url); } Creating the Slide Display CodeNow you're ready to create the code that loops through the images in your XML file, creates an empty movie clip for each image, and saves the title and URL for that image as properties of that movie clip.
That's it. Save and test the document. Be sure to save the .fla in the same folder as the external images. When you test the code at this point, only the last image is visible. All the movie clips are on the stage with external images loaded into them, but they are stacked on top of each other so only the top image is visible (see Figure 16.6). Figure 16.6. The last image listed in the XML file is the only visible image in the published .swf.
Tip One of the simplest things you can do is bring an image to the top of the display stack when the user clicks on part of it. If you arrange your images to have at least some portion visible at all times, this can be an intuitive interface that takes very little code. Just place this code in the listener.onLoadInit function after you change the assignment of coordinates so each image has a unique position on the stage: //bring this image to top if clicked target.onRelease = function(){ this.swapDepths(this._parent.getNextHighestDepth()); } |