Advanced Flash Components
Search!
Search!
Home >  Tutorials >  Loop (AS 3.0) >  Loading Images through XML in...
Loading Images through XML in Loop AS3.0 Component
Updated: Nov 5, 2007   Views: 6970  
Description: This tutorial will show you how to use a XML document to load images into the Loop AS3.0 Component.
Part I - The Completed Project



Part II - Setting up the XML File
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:

<content>


Now for each of the images define the description of the image, the url path to the image, the url if the image is linking to a page, and if the item is an image or instance. Repeat as many times as necessary.

<image>
    <path>image.jpg</path>
    <description>Item Description</description>
    <data>URL.html</data>
    <type>image</type>
</image>


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

</content>


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

Part III - Setting Up the File and Adding an Instance of Loop Component to the Stage
You must use Flash CS3 and have the Loop AS3.0 component for this tutorial. The first step is to create a new Flash file using ActionScript 3.0.

Assuming that you have Loop AS3.0 component installed, the first step is dragging an instance of the Loop component on to the stage using the component panel (Window > Components). Give the Loop an instance name of myLoop in the properties panel.

Part IV - Linking your Loop Component to your XML File
Select the instance of the Loop on stage, and using the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) set the following parameters of the instance of the Loop:
  • contentXML to the URL path of where you saved the XML Document
This can also be done in ActionScript:

myLoop.contentXML = "http://www.afcomponents.com/components/loop_as3/content.xml";


Part IV - Change the Image Scale Properties in Loop
This is again done in the component inspector or parameters, set the following properties in the contentStyle field.
  • width to desired image width
  • height to desired image height
  • maintainAspectRatio to false
  • scaleContent to true
  • autoSize to false