AFComponents.com

1. Create a new Actionscript 3 File and save the file as scroller.fla.

2. Open the Components panel (Window >Components) and drag an instance of the ThumbnailScroller component onto the stage. The ThumbnailScroller component can be found in the AF Components folder.

This is how the component looks on stage:

As you can see, the component has a live preview which is very helpful because it allows you to see how the component will be rendered, without having to test the movie. If you chose a different preloader or set a border property or other visual element, you will immediately be able to see those changes. In the image bellow you can see how the component looks in the preview mode with a few properties changed. To change the color and transparency of the preview items, use the "Temporary Clip Alpha" and "Temporary Clip Color" properties.

You can also use the "Live Preview Items" property to set how many items you want to use in the live preview.

Now we are ready to load some content into the component.

3. In the same folder as scroller.swf create a new folder and name it "images". Then copy the images you want to load into this folder.

4. For this example we'll use an XML file to specify the location of the images. Create an XML file in the same directory as scroller.swf and the images folder, and name it images.xml.

5. The XML file needs to have a structure similar to this:

6. Open the Component Inspector panel (Window > Component Inspector) and click on the instance you've dragged onto the stage. You should now see all the customizable properties in the Component Inspector. Scroll down to XML Path and enter the path of the XML file we are using, "images.xml".