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

9 thoughts on “Simple XML-Driven Flash AS3 Slider

  1. TypeError: Error #1085: The element type “form” must be terminated by the matching end-tag “”.
    at com::CustomDocument/loadXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

  2. Another company that I worked for some time had a Real Estate site where we wanted multiple instances of an application that would allow scrolling through images/items. It’s actually all done in jQuery. There is an original version that was done by another author but it only supported a singular instance on a page. We made modifications to it to support as many instances as you wanted. Here’s the site: http://thedreamhomesteam.com/

  3. HEY I HAVE THIS PROBLEM

    *** ERROR READING XML ***
    ==========================
    Error #2032: Stream Error. URL: file:///slides.xml
    – Make sure your XML file is named slides.xml
    – Make sure you’re passing the contentfolder flashvar
    – Make sure your contentfolder path is correct
    contentfolder = /

    I KNOW ITS SIMPLE BUT I HAVE PROBLEM WITH MY ENGLISH AND I DONT UNDERSTAN WHERE MUST BE MY FILES OR WHAT ???

    PLEASE tHANKS

  4. Hi IMA,

    Try running it out of your web server and make sure you follow the instructions in the post. The error message outlines what your issues may be. The placement of your xml and images is important.

    Glenn

  5. Nice slideshow..

    Do you know how to create an auto play function that run through the images and at last image rewind?

    I have tried to set up a timer, but I can’t figure out how to rewind.
    I just get the “empty” space after the last image.

    Bjarne

  6. Hi! Thanks for this, I’m just starting with as3. I have a flash site and would like a slider just like this one, but on a frame. Is it possible to have it inside the mc for example? Also your FLA is empty, and if I drag things from the library to reposition and redesign them, it doesn’t work. Thanks!

Comments are closed.