Simple XML-Driven Flash AS3 Slider


Download the source here

When I was creating my coding portfolio I wanted a slider app that would display a series of screenshots from some of my recent projects. While it was easy to find several WordPress widgets that presented slideshows, it was very difficult to find one that allowed multiple instances on the same page. Many didn't even allow multiple instances across the blog.

I decided it would be easiest to create one myself. Admittedly it's nothing flashy, but it fit the purpose well and I thought it may be useful to post. It utilizes Tweener, an amazingly simple open-source tweening library, for transitions. The library is included with the source. Other version and documentation are available on Google code.

How to set up a slider

  1. Create a subfolder under the folder where the slider swf will be stored. Each slideshow must have its own separate subfolder.
  2. Create a series of 250px(w) x 175px(h) images and place them in the subfolder.
  3. Create an XML file named slides.xml in the subfolder with your images. This involves adding the image name, an optional title, and an optional description. The structure is as follows:
    <?xml version="1.0" encoding="UTF-8"?>
    <slides>
    	<slide>
    		<title>Slide 1 Title</title>
    		<desc>Here is a description of Slide 1</desc>
    		<image>slide1.png</image>
    	</slide>
    	<slide>
    		<title>Slide 2 Title</title>
    		<desc>Here is a description of Slide 2</desc>
    		<image>slide2.png</image>
    	</slide>
    </slides>
    
  4. VERY IMPORTANT: Pass the folder path to the SWF as a flashvar named contentfolder. For example, if you're using Adobe's embedding method and your xml and images are on your site under /swf/myslides, you would add 'flashvars','contentfolder=/swf/myslides/' at the end of the AC_FL_RunContent function (don't forget to add a comma before it to separate it from the other values).

Tips

  • The code is in a document class named CustomDocument.as under the com subfolder.
  • If you want to change the navigation buttons, you can change them in the library. nextGraphic and prevGraphic are the base graphics and Next and Prev apply filtering and state modifications.
  • If you want slides of a different size, it should only take a couple of tweaks. First, resize your document ( Modify > Document ). Then, modify the buttons and Slide to accommodate your new size. These objects are in the library (The Next and Previous buttons, and the Slide itself, are all in the library ( Window > Library ). Finally, modify the nextX and nextY variables in the CustomDocument.as file. nextX is the X coordinate where the first slide will be placed. nextY is the Y coordinate.
  • The source is packaged using the _sans device font. You can change the font inside the Slide movie clip. Remember to embed the characters or your font will not appear!
  • If your images won't load then you're probably either forgetting to pass the contentfolder flashvar, or your images aren't in the right place. Firebug is a great tool for troubleshooting this issue.

Glenn

Download the AS3 Slider source