So, you’ve got this collection of images. What kind of information about them would be useful in your project? At the bare minimum, you need to know the image’s filename so that you can tell Flash from where to load the image. Another useful bit of information is the image’s title. You might also want to add more and more information about the image, such as the photographer’s name and a description of the image.

If you’re using only the title and URL (filename and path) of each image, a simple XML data structure such as the following would work well:

<images>
    <image title="Slide 1" url="images/slide01.jpg" />
    <image title="Slide 2" url="images/slide02.jpg" />
</images>

In this case, you’re using the XML node attributes to format the information that is unique to each image. This format is easy to use with ActionScript.

In this section, you will create an XML file that describes the information needed to load your images into the slide show.

Okay, it’s time to start working with Flash. All the ActionScript will be on the first frame of the movie in the actions layer. This will keep the code centralized and easy to find.

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

At this point, you have a skeletal application that loads a series of external images into a Flash application and is ready to display their titles. Now you need to show the images sequentially.

A slide show can be a fairly simple application to code. In the simplest version, you turn on and off the visibility of the images, one at a time, over a set interval of time. To do this, you need a function to cycle through the images and control their visibility.

Before you move on, take a step back and take a look at the entire code set on the first keyframe in the actions layer. It’s always a good idea to keep the big picture in mind as you progress in your project.

If you haven’t already, save and test the file.

Now that you have a nice little slide show as a base, you can add a few additional features using your code knowledge from previous chapters. Many of these features either inform users of what is happening, allow them control, or simply add some fun visual effects to give the user feedback.

One of the new filters included in Flash 8 is dropShadow. You can apply it to individual movie clips on the authoring environment’s stage. You can also apply it programmatically to externally loaded images with ActionScript. This is handy because the application dynamically loads and displays external bitmap images.

Applying a Filter with ActionScript

Let’s start with a simple example, and when you have that working, you can integrate it into the code you developed for the slide show application.

1. Open a new Flash document and make sure that its publishing settings are set for Flash 8 and not an earlier version. On the stage, draw a shape, convert it into a movie clip, and give it an instance name of myShape_mc.

2. Create an actions layer above the layer with the movie clip, select the first frame in the layer, and open the Actions panel. Next, import the class for the DropShadowFilter. At the top of the page, add the following code:

   import flash.filters.DropShadowFilter;

3. Before you can apply the filter, you have to set up some parameters for it. The following code not only assigns values to the parameters of the filter, it does so in a way that is easy to read and modify:

   // set dropshodow properties
   var shadowDistance:Number = 20;
   var shadowAngleInDegrees:Number = 45;
   var shadowColor:Number = 0×000000;
   var shadowAlpha:Number = .6;
   var shadowBlurX:Number = 16;
   var shadowBlurY:Number = 16;
   var shadowStrength:Number = 1;
   var shadowQuality:Number = 3;
   var shadowInner:Boolean = false;
   var shadowKnockout:Boolean = false;
   var shadowHideObject:Boolean = false;

4. Next, create a new DropShadowFilter object (datatype), passing the parameter values through local variables:

   var myFilter:DropShadowFilter = new DropShadowFilter(shadowDistance, shadowAngleInDegrees, shadowColor, shadowAlpha, shadowBlurX, shadowBlurY, shadowStrength, shadowQuality, shadowInner, shadowKnockout, shadowHideObject);

   Although this might not seem easy to read, it is more meaningful than entering the values into the definition as it is created, which would look like this:

   var myFilter:DropShadowFilter =new DropShadowFilter (20, 45, 0×000000, .6, 16, 16, 1, 3, false, false,false);

5. Now you need to create a new array to hold the filters you will apply to this movie clip. The movie clip object has an array property that holds the filters applied to it. If the array is empty, no filters are applied. This means you can apply more than one filter to a movie clip and you can specify in which order they are applied.

6. Create an array for the filters applied to this movie clip and then push the filter you just created (the DropShadowFilter) into the array. Finally, save the array as the filters array of the myShape instance of the movie clip:

   var filterArray:Array = new Array();
   filterArray.push(myFilter);
   myShape.filters = filterArray;

All together, the code now looks like this:

import flash.filters.DropShadowFilter;
// set dropshodow properties
var shadowDistance:Number = 20;
var shadowAngleInDegrees:Number = 45;
var shadowColor:Number = 0×000000;
var shadowAlpha:Number = .6;
var shadowBlurX:Number = 16;
var shadowBlurY:Number = 16;
var shadowStrength:Number = 1;
var shadowQuality:Number = 3;
var shadowInner:Boolean = false;
var shadowKnockout:Boolean = false;
var shadowHideObject:Boolean = false;

// create new filter object with the parameters from above
var myFilter:DropShadowFilter = new DropShadowFilter(shadowDistance, shadowAngleInDegrees, shadowColor, shadowAlpha, shadowBlurX, shadowBlurY, shadowStrength, shadowQuality, shadowInner,shadowKnockout, shadowHideObject);

// create array to save filters for this movie clip
var filterArray:Array = new Array();
filterArray.push(myFilter);
myShape.filters = filterArray;

Doublecheck that the publishing settings are set for Flash 8 and test it out. Figure 16.11 shows a black rectangle that has a DropShadowFilter applied to it by the previous code. When it’s working, you can move on to integrating this into your project.

Figure 16.11. Application of the new DropShadow Filter.

When I trace myXML, I get [type Function] in the output window instead of the xml data.

Make sure that you called toString() correctly. If you leave out the (), you get the object type instead of the result of the function call. To get the string output of an XML object, write myXML.toString().

I’ve got the cycleImages function working now, but the titles are out of synch with the images.

Make sure that you push the target clip into the loadedImages array inside of the onLoadInit function. If you push the target clip (targ) before the image loads, the image information becomes available to the cycleImages function too early.

When I test my code, I get the following error message: The class or interface `flash.filters.DropShadowFilter' could not be loaded.

Check the document’s publishing settings. This can result from using Flash 8 classes when the player version is set to Flash 7.

It’s taking a very long time for the images to show up, and when I test this on my server it takes even longer.

Check the file sizes of your images. The bigger the file size, the longer it takes to process the images in Flash. To speed up things, try to optimize your file sizes for faster download and rendering.

I’m trying to load images from another server, but a warning box comes up.

This is the result of cross-domain security issues. For more information, visit the Macromedia website at http://www.macromedia.com/devnet/mx/flash/articles/fplayer_security.html. For information on the security enhancements introduced in Flash 8, see the article, “Security Changes in Flash Player 8,” which can be found at http://www.macromedia.com/devnet/flash/articles/fplayer8_security.html.

Before starting a project of this size, it’s a good idea to plan it out before creating it. I’m a coder, so I usually start with the data. When I have an idea of how the data is “shaped,” I can start designing the XML’s data structure. Then I start sketching out the user interface and determine what has to be accomplished with code.

In general, when I’m developing an application, I start out with a lot of trace commands. I don’t add the “guts” of a method until I know it’s called and is responding correctly. This helps me pin down the source of bugs during development.

It’s important to constantly test as you are developing. I usually test after adding each functional element of code. I also Save As with a new version number in the filename whenever adding anything that could potentially break the existing code. This way, I can revert to a previous version if I really mess things up.