XML Driven Accordion Slider

Well, it’s a been a few months since I’ve posted anything on here, or on Twitter. I’ve been finishing up school (I AM DONE NOW!), finishing up final projects, as well as moving across the country. I’m currently living in San Diego, California working at a new job at Chumby Industries. On top of all that, I have been learning AS2 and brushing up on Lua. So, I’ve been busy! I promise I will be working on more posts, tutorials and fun code.

Now to the important part: Something fun with AS3. A couple months back I noticed something both annoying and surprising. I noticed that I could not easily find a configurable and free to use accordion slider. While helping one of my class mates with a project, I remember looking for an accordion slider to help bring the interface together. The bad news is I couldn’t find one. The good news it that it inspired me to write my own!

Source code and example files are available here!

[swfobject]http://www.jeffnehlsen.com/projectFiles/accordion/AccordianSlider.swf,600,300[/swfobject]

The slider I created is completely created through XML. As of right now, the slider is able to bring in single lines of text, images and SWFs through URLs. Then the XML is parsed to position then, color text where appropriate, and a bunch of other fun things. The slider can fit on many stages (the sizing is done through the XML, too) and everything is one MovieClip, so you can put it anywhere.

It’s also easy to use. I will go step by step on what to create a project using my accordion slider.
First, you need an XML file to base the slider on:

[snippet id=55689]

Next, bring the AccordionMenu class into your project. Then, bring when you want to bring in the menu, simply create an instance of AccordionMenu with your XML file as the argument (I am using my XMLLoader class. For an example of that, see the source files):

[snippet id=55692]

After that, it is ready to go. All of the source materials are available here! I plan on updating it to add a few more features eventually, so check back every once in a while.

If you have comments, suggestions or questions, don’t be afraid to throw a comment up!

Comments are closed.