AFComponents.com

Adding Content to 3d Carousel:Through XML
Updated: Feb 19, 2008   Views: 1715  
Description: This tutorial will show you how to use a XML document to load various types of content (images, movie clips, .swfs) into the 3D Carousel AS3.0 Component.


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:

<content>


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.

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


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

</content>


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

Adding a external .SWF


You can also add an .swf file into the 3d Carousel, 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.

<item>
    <path>myAnimation.swf/path>
    <description>Item Description</description>
    <data>URL.html</data>
    <type>image</type>
</item>

Adding a Movie Clip

Another type of content that you can load with 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.

<item>
    <path>DisplayObjectName/path>
    <description>Item Description</description>
    <data>URL.html</data>
    <type>instance</type>
</item>


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 3d Carousel 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 3d Carousel. 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 3d Carousel  onto the stage from the Component Panel (Window > Components). To connect the 3d Carousel to the XML document and select the instance of the 3d Carousel 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 3d Carousel:
  • 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 myCarousel:

myCarousel.contentXML = "http://www.afcomponents.com/components/3d_carousel_as3/content.xml";


© 2005-2007 advanced flash components