Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Flash's built-in components give you an excellent option for displaying data. Since these components already have many interactive and organizational features, you can use them to quickly prototype data-intensive applications. On the stage, I have an instance of a data grid component. You can access the components through the Components panel, which you can find at Window > Components. So you can just drag and drop a data grid onto the stage. So I close that menu and note that I've named the component grid, all lowercase.
Let's go to the first keyframe of the actions layer and open up the Actions panel. Now let's say I wanted to put the image names inside of the grid. One reason you may want to do this is to create a menu so that you can click images that you want to view. So, to do that, I'm going to use my XML data that I've loaded. In the XML loaded function, I have a trace statement that has (imagesXML.image(0).@file). I don't want to delete this line of code. I just want to disable it for now. So type two forward slashes at the beginning of that line of code.
On the next line, we're going to create a loop to loop through the data. So create the skeleton of a for loop. Here, just create a standard loop. So var space i:unit =0; i <, and then what we're going to do is run it for each image inside of the XML file. Now remember, if we type imagesXML.image, we get an XML list. And I mention that it's like an array.
Well, just like an array, I can get the length of an XML list to find out how many items are inside of it. So I type .length. Now, the difference between an XML list and an array is that length is actually a method and not a property when you're working with an XML list. So you need to type some parentheses. Just type a semicolon and a space and then i++. So this will loop through each image inside of the images XML file. Now to populate any data-driven component, including the data grid, you need to create an instance of the data provider class.
So I'll do that right above the loop. So create a variable called componentProvider, capital P. Datatype it to a DataProvider and then set it = a new instance of the DataProvider class. So after that, type some parentheses and semicolon. Then each time the loop runs I'm going to add the XML data inside of the componentProvider, and then after the loop, we'll set the data inside of the data grid.
So in the loop, we'll type componentProvider, with a capital P, .addItem, capital I, and then we'll put in the current XML object in the data grid. Now the way that you do this is first we'll close out the parentheses and then inside of the parentheses, type open and closed curly braces. So this is a shorthand notation to create an ActionScript-generic object. So what we do here is we put a name and a value pair separated by a colon.
So the name is going to be Images. After that, type a colon, and then we're going to give the value. For the value, we want to put the file name. Now, we've actually written the code in that trace statement, so if I highlight imagesXML.image(0).@ file inside of the trace statement, I can copy that code paste it after the colon, and then change the 0 to an i so it will work for each image as the loop iterates.
Now the last thing to do, once the dataProvider is all set up, is to connect it to the component on the stage. So under the loop, create a new line of code, and type grid.dataProvider = componentProvider, with a capital P. So test the movie, and then you should see all of the images inside of the data grid. So I have a scrollbar, I can click and select each of the images, and I can even click images at the top to organize the data.
Now, the way that the data grid works is the name Images came from the value that we put right here. So if you wanted to create additional categories, we could type a comma after file, and then we can create another category here. I'm not going to do that now, but using that technique, you can simply follow that colon separation for name value pairs, and add more information. It's also important to note that this name Images here can only have one word, and no spaces or special characters.
So just keep that in mind when you're working with the component. The same dataProvider technique follows for any of the ActionScript data-driven components. So if I wanted to, I can use the same code to apply to, say, a list. Let's see how that works. We'll open the Components panel. Make sure it's on the component layer. Scale that up just a little bit, so it's about the same size as the data grid. I'll give it an instance name of list.
I'll go back to my code, copy of the grid.dataProvider line of code, paste it on the next line, change grid to list, and test the movie. Notice that it doesn't work, but it does have the right amount of fields. Now the list is a little bit pickier than the data grid is. With the data grid, I can select any name I want for the header of the images. So I can call it Images here. With the list, I need to use a specific term, which is label, and that's how it label an item in a list.
This label pattern is what most of the data-driven components are looking for. So you set the label in the dataProvider and you test the movie, and then it should work properly. So now you see that the list is populated, and the data grid is also populated, but that title field is now label. Of course, I can click the label field in the data grid to organize the data. As I click the list and the data grid get updated at the same time. That's because as I click that, the dataProvider is being manipulated, and since these are both linked to the same dataProvider, the data for both is updated.
So the data component allows you to display data and organize it in a variety of ways. To use the data grid, you need to create an instance of the DataProvider class and use its addItem method to put the right objects inside of the DataProvider. Then you need to connect that object to the data grid using the data grid's dataProvider property. If you want to use the same technique with other components, make sure that you use the label property when you call addItem.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99928 Viewers
56 Video lessons · 113024 Viewers
71 Video lessons · 81870 Viewers
131 Video lessons · 39286 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.