This tutorial will explain the process of creating a slideshow from XML.
1. Open your favourite text editor (for example Notepad on Windows or TextEdit on Mac) and start a new file. Type the following code to start your xml file:
<?xml version="1.0"?>
This code is a standard xml declaration.
2. Immediately below that create an opening 'slideshow' tag to enclose your xml file:
<slideshow
If you would like the images in your slideshow to display in a random order you can now specify the value of the slideshow element's randomDisplay attribute to true, otherwise specify it as false. Then close the slideshow tag:
randomDisplay='false'>
3. Type the following code to start an 'image' element that adds an image to your slideshow:
<image
Add the src attribute which specifies the location of your image (note the space before the 'src' attribute).
src='image1.jpg'
(If you're specifying the path to your image as a relative path you must specify it relative to the html file that will embed your swf file, not relative to the xml file.)
Add the link attribute that specifies where the image in the slidehsow should link to (note the space before the 'link' attribute).
link='http://www.flashloaded.com'
Add the inEffect attribute which specifies which effect should be performed as the image loads (note the space before the 'inEffect' attribute).
inEffect='Slide Down'
Add the outEffect attribute that specifies which effect should be used to remove the image from view (note the space before the 'outEffect' attribute).
outEffect='Drop Down'
Close the image tag.
>
4. You can now add a caption for your image by creating a 'caption' element and entering the caption between the tags like so:
<caption>This is my 1st caption</caption>
5. In order for your code to be valid XML you must close all elements. You should close the the 'image' element now:
</image>
6. Repeat steps 3, 4 and 5 to create additional images for your slideshow. For the purpose of this tutorial create two more image elements with 'image2.jpg' and 'image3.jpg' as the values of the src attributes.
7. Finally, in order to comply with XML syntax, close the slideshow element:
</slideshow>
8. To recap, your XML file should now look like this:
<?xml version="1.0"?> <slideshow randomDisplay='false'> <image src='image1.jpg' link='http://www.flashloaded.com/' inEffect='Slide Down' outEffect='Drop Down'> <caption>This is my 1st caption</caption> </image> <image src='image2.jpg' link='http://www.flashloaded.com/' inEffect='Slide Down' outEffect='Drop Down'> <caption>This is my 2nd caption</caption> </image> <image src='image3.jpg' link='http://www.flashloaded.com/' inEffect='Slide Down' outEffect='Drop Down'> <caption>This is my 3rd caption</caption> </image> </slideshow>
Save your file as slideshow.xml and close your text editor application.
9. Having installed the advancedLoaderPro using the Macromedia Extension Manager, open Flash and start a new file.
10. Press 'T' to select the Text tool and draw a textfield on the stage. With the textfield still selected press Ctrl+F3 (Windows) or Cmnd+F3 (Mac) to open the properties panel and give the textfield the instance name 'captionText'.
11. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel and locate the advancedLoaderPro. Drag a copy of the component onto the stage.
12. With the advancedLoaderPro still selected open the properties panel and click 'parameters' tab. Locate the 'XML File' parameter and enter the name you saved the XML file as in step 8 (slideshow.xml).
13. Locate the 'Caption Textfield' parameter and enter the instance name of the textfield you created in step 10 (captionText).
14. Press Ctrl+S (Windows) or Cmnd+S (Mac) to save your file and then press Ctrl+Enter (Windows) or Cmnd+Enter (Mac) to test it.