Loading the XML Data and Images


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 Data

Next, 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 Code

Now 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.

1.

Modify the code used to loop through the nodes of the XML file. The following addition creates an empty movie clip to store each image. The image will be loaded into this clip later on:

var i_max = myXML.firstChild.childNodes.length; for(var i=0; i<i_max; i++){         // create an empty clip to load the image into     var targ:MovieClip = this.createEmptyMovieClip("image" + i, 100 + i); }


2.

Create a new object and name it imageListener. Add this code below the existing code inside the for loop in the displayXML function.

// create an object to use as a listener var imageListener:Object = new Object();


This gets the listener object ready to load the image with a MovieClipLoader object (which you'll create later). At this stage, you're still getting everything ready to load the image.

3.

Define a function for the onLoadInit event handler to call. This is where you put all the code that needs to run after the image is loaded into the target movie clip, such as resizing the image and displaying the title. This goes immediately after the previous code inside the for loop in the displayXML function. Use temp.slice(5) to get the index number because i does not scope to the loop inside of which the function is defined when it is inside the onLoadInit function.

//define a function for the onLoadInit event handler imageListener.onLoadInit = function(targ) {     // get the index number for this image     var temp = targ._name;     targ.i = temp.slice(5);     // set position as the manually created clip     targ._x = holder_mc._x;     targ._y = holder_mc._y;     // save title     targ.myTitle = myXML.firstChild.childNodes[targ.i].attributes.title };


4.

Next, create the movie clip loader, register the listener with the loader, and then use the listener to load the image into the holder movie clip:

// create a new MovieClipLoader var myLoader = new MovieClipLoader();


5.

Finally, register the listener to the MovieClipLoader:

//register the listener to the MovieClipLoader myLoader.addListener(imageListener); // load an image into the target movie clip myLoader.loadClip(myXML.firstChild.childNodes[i].attributes.url, targ);


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()); }





Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net