Components Used in this Tutorial: Grid AS3.0

The Completed Project:




Creating the XML Document

To begin, create your xml file using Dreamweaver or a text editor, saving the file with a .xml extension. With a blank document open, create the content tag to start the document:



Now for each of the items that you wish to add you will define its URL path, a description of the item, extra data for the item such as URL link, and the type of item. The following is an example of an image, but later in this tutorial we will go into loading different types of content. You will repeat this step for each item that you wish to load.



When you have repeated the above for all items, close the content tag to finish the document:



A sample of the XML file is available at http://www.afcomponents.com/components/grid_as3/content.xml. Make sure to view the page source to view the XML formatting.

Adding an External .SWF

You can also add an .swf file into the Grid, this is done similar to an image where you create the file and then load either the local or full URL path to the file. The code used in the XML document is also similar to the image where you only change the path to the .swf and type doesn't change from image.



Adding a Movie Clip

Another type of content that you can load into your XML document is a Movie Clip that is part of your flash file. This is a two step process. First, you need to add the item through XML. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.



The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectName. Also make sure Export for ActionScript and Export in First Frame are both selected.

Connecting Grid to XML Document

Once we have created our xml document with all of our items inside of flash, we are now ready to connect our XML document to Grid. Make sure that you have installed the component using the extension manager, created a new ActionScript 3.0 Flash file, and dragged a instance of the Grid onto the stage from the Component Panel (Window > Components). To connect the Grid to the XML document and select the instance of the Grid on stage, and using the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) to set the following parameters of the instance of the Grid:

• contentXML to the URL path of where you saved the XML Document

This can also be done in ActionScript. The components needs an instance name first. We used myGrid:



Properties of the Grid That Will Affect How The Content Loads

After you have successfully loaded your content in the Grid, you may want to change how your content is appearing in the Grid. These can be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property contentStyle:

•     width to desired image width
•     height to desired image height
•     maintainAspectRatio to false
•     scaleContent to true
•     autoSize to false