Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
XML data can be used to power nearly every type of application. Here is an example where XML can power a slideshow viewing application. On the stage, I have several instances of the UILoader component. The main image loader is called mainLoader, with a capital L. Then I have the thumbnail images: thumb0 - all lowercase, thumb1, thumb2, thumb3, et cetera. Now, if you're creating your own files, make sure that you start with the 0 and not 1.
We're going to have these numbers correspond to indices of our XML list. Let's go to the first keyframe of the actions layer and open up the Actions panel. I've actually already written the code for loading the thumbnails. Let's take a look at how it works. Outside of the loop, I created a variable called thumbLoader, and inside of the loop, I set thumbLoader = a typecasted UILoader. And then inside of there, I'm grabbing the thumbnail, and there is going to be one thumbnail for each iteration of the loop.
So it's thumb + i. So it's starts at thumb0, and then thumb1, et cetera. That thumbnail is going to load the appropriate thumbnail image. So we have images.XML.image(i).@file. So it's loading that file. Then I set its buttonmode property to true, and I added an EventListener to each thumbnail loader so that it runs a function when you click on it. So let's take a look inside the thumbClicked function.
The code that we're going to write is going to apply to the main image. In order to get the image to load, I need to find out the number at the end of the thumb that was clicked. We can start by accessing the thumb's name. So create a variable called thumbName with a capital N. Datatype it to a string and the value will be evt, which is the event object .currentTarget, which will refer to the object that was clicked, so thumb0, thumb1, thumb2, et cetera .name, which will give us the name of the object as a string.
Now we need to extract the last number of the thumbnailed name and treat it as a number. So create a new variable on the next line called thumbIndex, capital I. Datatype this to unit a positive integer. We'll set it = thumbName.substr, in the parentheses pass in 5. Now, I got 5 because each thumbnail's name has six letters; thumb has five letters and then the additional number makes six.
We're going to referencing a position of a character in a string, the first one starts at zero. So then the number would be index 5, because the last letter of thumb would be index 4. So 0, 1, 2, 3, 4, and then 5 for the number. Now in order to tell Flash that this is a number, I'm going to write uint before thumbName and then wrap thumbName.substr in some parentheses. So Flash will treat that as a number.
Then we'll create one more variable that will represent the full path to the image we want to load. So we'll call this fullPath, with a capital P, datatype it to a string, and we'll set the value. We'll start off with assets and a forward slash. So type some quotes to create a string and then type assets and a forward slash. After the quotes, type a Plus sign. Then we're going to get the data from our XML object.
To get that data, I'm going to copy code that already exists in this frame. In line 20 on my code, I'm loading the thumbnail images. In that code, I'm going to select the portion of code that starts with images.XML and ends with attribute file. So the code will be referencing the XML. Copy the code with Command+C or Ctrl+C, and then paste the code after the Plus sign in the thumbClicked function, in the line of code with a semicolon and replace i in the pasted code with thumbIndex.
Before we go any further, let's review what these three lines of code are doing. thumbName is a string, and it's holding the name of the thumbnail that was clicked. thumbIndex is a positive integer. It's holding the last character of the thumbName string. fullPath is the path to the full-size image. We're getting the correct full-size image through the XML data, by passing in the thumbIndex as the index number of the image XML list.
Now let's add one more line of code to this function. We're going to have the mainLoader load the image file. So type mainLoader.load and then in parentheses, create a new URLRequest. Inside the parentheses for URLRequest, type fullPath, with a capital P. Test the movie, and you shouldn't get any errors, and you should be able to click the different thumbnails to load the different images into Flash. So the slideshow is complete, and all of the data is powered by XML.
So if you ever wanted to change the files that are loading into the app, you can make the change without having to republish your SWF file.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101606 Viewers
61 Video lessons · 88367 Viewers
71 Video lessons · 72209 Viewers
56 Video lessons · 103958 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.