If you have used HTML at all then you are ahead of the game. XML is very similar in the sense that every opening tag must have a closing tag. For Example here is a tag of strong around the word “Hello!” As for XML I have a tag of name around the word “Jermbo”. Or we can have a self closer like the image tag in HTML. I make a tag called name and give it an attribute of first with a value of “Jermbo”. Unlike HTML, XML allows you to create your naming convention. So use this to your advantage. Let’s say that you are making a user name XML. Use tags like

<username><password><email>

. Or photo gallery, you can use names like

<nature><city><space>.

. Use anything that makes sense to your project.

Now there are a few “rules” of XML that I want to point out.

Every XML document MUST have a root node.
XML is very case sensitive. It doesn’t matter if you use camel case, all lower case, or all caps just make sure you use them consistently. I recommend using camel case, I find it easier to read and use it in my style of writing.

As first stated all tags must be closed. Either with a closing tag or a self closing tag.

All tags must be properly nested. Meaning Opened and Closed in order. As an example I am using color tag and green tag and this illustrates the proper way of nesting your code.

All attributes must be quoted! For the example that I am using, I want the path of my photo to be an attribute. On screen is an example of the right and wrong way of doing that.

You must have a Doc Type Declaration. This helps avoid any confusion on the browsers part . If you open a new XML document in a program like DreamWeaver it will give you the doc type automatically. Other notable properties of XML is, like HTML you can leave comments. Comments are done the same way in XML and HTML.

<!–comment example –>

This is great for many reasons. One, you can comment code out if you don’t want it to render but might need it later. Or leave reminders for your self or other coders that might be looking at your code.

Special Characters. There are a few “illegal” characters to be aware of. For example I make a tag for math and the value to a human reads 9 is less than 15. But that less then sign denotes the opening of a tag. This would break in almost every case. So if you want to render the value the way humans read it, then you need to use the “correct form”.

For this case its ampersand l t semicolon. There are a few more to note, so take a look at my cheat sheet for which characters are “illegal” and what their “correct form” is.

So now that we got the basics of XML down, lets write a document that we can use to fuel our slide show. Let’s make a new XML doc and save it under the name of slideShow.xml. Go to line 2 and open the root node and call it slideShow. Go down a few lines and close the root node. Next let’s make a child of the root called photoList, and go down a few and close it, also, let’s give it an attribute of date with a value of Sept2009. Go ahead and make one more child, but this time put it in the photolist, and call it photo. This node is going to be a self closing node. Let’s give it 2 attributes, one called path the other called desc the abriation of description. And for the value of path put images/001.jpg and for desc put Title 1. Copy and paste the photo node six times and change the 2nd node to be 002,jpg and title 2 and the 3rd node to be 003.jpg and title 3 and so on.

And there you have it! You just wrote the basic XML document that we are going to use in our slide show.

Open up flash and make a new ActionScript 3 document. Before we can start to load the XML into Flash we need to understand what an Array is and how to use it. Unlike basic variables, arrays can hold multiple values. For example I want to make a grocery list. If I were to use string variables I would have to create a unique variable for each item. They would look something like this.

————

And if I were to trace any variable I would get the value of that string in my output panel. But arrays on the other hand, you can add multiple values and access them by going to the specific index of that array. For example, I will set up an array for groceries, fill it with multiple values and then call a specific value.

So here I am starting out with a var key word and giving it a name of groceries and data type it to Array. Then I equal that to a new array(). And begin to fill the array with values. Now I want to get to the first value of that array, so I trace the array with an index of 0. Be sure that the index is in square brackets. Notice in the output panel you see the results of my trace statements.

Arrays start its count from zero. So if you have 3 items in your array, the third items index is 2. So that means if I wanted to get any of the values, just subtract 1 from their spot in line. Meaning item one has an index of zero, item two has an index of 1, and item three has an index of 2 and so on.

Moving on as you are shopping you realize that you needed two more items. You can add or subtract from an array very easily. To add to the end of an array you use the push () function. And to subtract one from the end of an array you use the pop () function. I realized that I wanted cracker and soda. So need to type groceries.push(“crackers”) I am going to trace the groceries to make sure that everything worked. Good it did. Now on the next line I am will do the same thing to add soda to my list. Again tracing groceries to make sure it works. Now that I put soda on my list I realize I don’t have the money for that and I want to take it off. So I will type groceries.pop() and trace groceries again. And there you go soda is off the list. But as I shop I pick up items from the beginning of the list. So I want to get them out of the array. This calls for a splice() function. This function is expecting 2 parameters though. The first parameter is the Starting Index (start point) and the delete count (how many you want to delete.) So I am going to start with index of 0 ( my first item) and delete 2 items. Now when I trace the groceries array I will notice that the milk and bread are now gone from the list.

Now there are more methods allowing you to add, remove, rearrange, and revalue, but this is more than enough for what we need right now. Also be aware that there are different types of arrays, like Multidimensional (arrays with in arrays), and Associative arrays(these store liner pairs of arrays, one is the value the other is describing the first.). But for now Liner Arrays are perfect!

Now that we understand the basics of XML and Arrays, we need to do one more thing before our slide show can come to life. We need to load the XML and sort the data so that we can work with it. Even though there are ways of writing XML in Flash the most common way to use XML is have an externally loaded document. So let us begin!

First we need to set up a variable that will hold the XML data. Lets call it xmlData and data type it to XML. Now we need a URLLoader. So make a variable and call it xmlLoader data type it to URLLoader and make it a new URLLoader(). After that is set up, we need to make two functions, one will load the XML on the successful load of the xml document and the other will be IOErrorEvent, to catch a problem in the event that the XML isn’t loaded properly. So type

xmlLoader.addEventListener(Event.COMPLETE, loadTheXML)

and on the next line type

xmlLoader.addEventListener
(IOErrorEvent.IO_ERROE, xmlLoadError).

Now we can set up the xmlLoader to load in the external document. To lets type

xmlLoader.load(new URLRequest(“slideshow.xml”));

That sets up the basic calls for loading the document in, now we need to create the function. Lets deal with the complete function first. Type function

loadTheXML(evt:Event):void(since it wont be returning any value)

and open and close curly brackets. In side that function I am going to type a trace statement just to make sure everything is going good. So type

xmlData = new XML(evt.target.data)

and on the next line type trace (xmlData). Before we can test this we need to make the IOError function.

Go out side the function for loading and go on a new line. Type out function

xmlLoadError(evt:IOErroeEvent):void{ trace(“something is wrong : ” + evt.text)}

Now is a good time to test. Hit control enter and bam in the output window you see the xml document. Lets just see what happens when we have a problem loading the XML. For the new URLRequest add an extra letter in the slideshow.xml string. Hit control enter. And in the error message pops up in the output window. This is telling up that we have a problem and the evt.text is stating that it cant find the xml document called slideshows. So if you fix our error and save and test again, we are back to normal. And there you have it. You just loaded in XML.

Let’s begin with setting up our viewing area. Click on the stage, go over to the properties panel and edit the stage size to 350 wide and 450 high. Make a new layer call it artArea. Grab the rectangle tool, make sure there is no stroke and draw a rectangle on stage. Grab the selection tool and select the new rectangle and in the properties panel give it a x location of 25 a y location of 0 a width of 300 and a height of 400. With that rectangle selected hit F8. This will bring up a convert to symbol dialog box. Give it a name of holder, make sure that the type is MovieClip and the registration is at the top left. Click ok, and in the properties panel, you will notice that the information changed. Let’s give this an instance name of holder. This will be where our images will be displayed.

Now we need to make a box to hold the description and picture count. Grab the rectangle tool, give it a different color and draw one on the stage. Grab the selection tool and select the rectangle. Go into the properties panel and give the x a value of 25, y a value of 400, width make it 300, and height make it 40. Again with it selected hit F8. The dialog box will pop up and your previous settings should still be there just give it a name of content. Also be sure to give it an instance name of content as well. Now I am going to take a minute to make it look a little better, so feel free to spice it up.

If you don’t want to no big deal. Go inside of the content movie clip and call layer one bg and lock it. Make a new layer and call it text. Grab the text tool and change it to dynamic text. Draw a small rectangle text box on the left hand side. Grab the selection tool and position it over the background and give it an instance name of picNumText. Grab the type tool again and do the same thing only make it a bit bigger and give it a name of descText. And that should be it for the set up go back to the root time line and go to the actions layer and open up the actions panel.

Back in the actions panel we need to put the xml data into an array so go all the way to the top of the script and hit enter a couple times. And at the top lets set up a couple of arrays that will hold the pictures and descriptions. Type var picArray:Array = new Array() and on the next line type

ar descArray:Array = new Array()

Also type var picLength and data type it to int. Inside the loadTheXML function I will comment out the trace statement and make a new line below that. We need to set variable that will give us the length of the xml document. So type picLength = xmlData.photoList.photo.length() and on the next line trace the picLength and you should get 7. That is how many photo nodes there are in our xml document. So close the preview. And go back to the loadTheXML function.

Delete the picLength trace statement. And lets begin out for loop. For right now trust that just works. I will explain that a loop is in another tutorial. Type for

(var i:int = 0; i<picLenght;i++){}

inside the for loop we what to push the data of each xml node. So we start with picArray.push(xmlData because that is where all the XML information is stored.

photoList.photo.@path[i] photoList.photo.@path[i])

This is a very simple concept to understand. I am setting up a variable called I and its initial value is zero. And as long as i is less than the length of picLenght then add one to i. So the first time it runs the loop it starts at 0 and rins the coded inside. Then goes back to the top and checks to see if i is still less than picLength. It see that it is so it runs the coded again now i is equal to 1. And it continues this process until the statement i picLength is no longer true. And the reason why I put the picArray.push function in here is because I want the array to be filled with all the information in the XML. So trace the picArray out side the loop and you will see that all the paths are in that array. Now lets do the same thing with the descArray. Inside the loop type

descArray.push xmlData.photoList.photo.@desc xmlData.photoList.photo.@desc)

and trace the descArray out side the loop and again all the information is there.

Now we are ready to set up the coded to load the image into the holder. Lets go back to the top and set up 2 more variables one is a loader object so under the last array type var imageLoader and data type it to Loader. And the other one is to hold the current picture number. I like to call it whoIsOn so on the next line type var whoIsOn and data type it to int and set the value to 0.

Back in loadTheXML function underneath the for loop type imageLoader = new Loader() to set up the loader object. On the next line we need to set up an URLRequest for the loader to have something to load. So type var mainReq:URLRequest = new URLRequest(picArray[whoIsOn]) since who is on is set to 0 right now it will display the first image. On the next line lets load the info in so type imageLoader.load(mainReq); Now we need to set up the event listeners to load it in and error event in case something is wrong. So on the next line type

imageLoader.contentLoaderInfo.addEventListener
(Event.COMPLETE, imageLoaded)

and on the next line

imageLoader.contentLoaderInfo.addEventListener
(IOErrorEvent.IO_ERROR, imageProblem)

Now lest go outside the function to set up the two functions we just set up to call. First type function

imageLoaded(evt:Event):void{}

and in side that function simply add the imageLoader to the holder movie clip like this,

holder.addChild(imageLoader)

. Now lets set up the error function. Type function

imageProblem(evt:IOErrorEvent):void{}

and in side simply type a trace statement that sasy “Is the image there : ” + evt.text

Test the movie and see if it is working.. SWEET so far so good. Lets tie in the description and the photo count. Lets go back into loadTheXML function and add a few lines to the bottom. We already add the descriptions to the array and we have a global index floating around so all we need to do is tell the text field to display that information and you do it like this.

Content.descText.text = String(descArray[whoIsOn])

and type on the next line.

Content.picNumText.text = String((whoIsOn + 1) + ” / ” + picLength)

Test the movie and see if it worked.

We are making some progress. Lets tie in a timer that will switch the image every 5 second. First things first, we need to import the timer functionality before we can use it. So all the way at the top type import flash.utils.Timer and on the next line type

import flash.events.TimerEvent

. go down a line or two and type

var switchTimer:Timer = new Timer(3000)

this is setting the timer for use Next we need to add an even listener to do something when the time is triggered so right underneath the timer set up type

switchTimer.addEventListener
(TimerEvent.TIMER, switchImage)

and start the timer. swtichTimer.start()

Now go all the way to the bottom and start the function for switch image type function switchImage(evt:TimerEvent):void{} and there are a few things that we want to do in here. First we want to increment the whoIsOn index by one so type whoIsOn++; Next we need to take the imageLoader and load the new info in there so the code is similar to what we did the first time but all we need it the load function. So type

imageLoader.load(new URLRequest(picArray[whoIsOn])

and test the movie to see what is going on.

Wait we need to tie in the descriptions next. Right under the image loader type

content.descText.text = String(descArray[whoIsOn])

and on a new line lets tie in the pic counter. Type

content.picNumText.text = String((whoIsOn + 1) + ” / ” + picLength)

Test the movie to make sure that everything is working fine.

So far so good but it breaks after the last image. We need to set an if statement up to say go back to the beginning if there are no more images left. That simple enough, while in the switch Image function go to the top of it and type if (whoIsOn picLenght -1) and wrap the code we already have in side those curly brackets. And at the close curly bracket type else open and close curly bracket. In side there copy the code from the if statement and paste it into the else statement the only thing we want to change is whoIsOn++. Change that to whoIsOn = 0. Test movie and see what happens.

One thing that I notice is that I get a blue flash in between images. I can get rid of the if I double click on the holder movie clip and select the rectangle, go over to the properties panel and turn the alpha to zero. Test the move again and see what happens… ahh that looks better.

Now that we have that working lets get the cool transitions working. The first thing that we need to do is import the transitions functionality. At the top of the document right under the timer classes type import fl.transitions.* on the next line type fl.transitions.easing.* Next lets go into the imageLoaded function and add the following code. Pause the video and copy the code. Test the movie and See what we got. That does it

Well pixil viewers I hope my tutorial has helped you out. Be sure to get the XMLSildeShow zip You will get all the files we have worked on, cheat sheets, and a Tweaked out version of what we just build. Don’t worry guys I left plenty of comments! Until next time Im Jermbo