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:



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.



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



A sample of the XML file is available at http://www.afcomponents.com/components/scroll_panel_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 Scroll Panel to the Stage
You must use Flash CS3 and have the Scroll Panel component for this tutorial. The first step is to create a new Flash file using ActionScript 3.0.

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

Part IV - Linking your Scroll Panel to your XML File
Select the instance of the Scroll Panel 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 Scroll Panel:

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

This can also be done in ActionScript:



Part IV - Change the Image Scale Properties in Scroll Panel
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