Accordion Meets XML

So a reader asked how to implement our accordion script using XML to populate it, and I think the results aren’t half bad. I’m not sure what he meant by a cervical shaped accordion though… Circular maybe? hopefully?

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

source files for the xml’d accordion

?View Code ACTIONSCRIPT
private function init()
{
	var request:URLRequest = new URLRequest("wp-content/xml/images.xml");
	loader = new URLLoader(request);
	loader.addEventListener(Event.COMPLETE, loadComplete);
}
 
private function loadComplete(evt:Event)
{
	data = XML(evt.target.data);
	trace(data.panel.length());
 
	accord = new accordion(500, 400, data.panel.length(), 20);
 
	for(var i:int=0; i < data.panel.length(); i++)
	{
		var panel:MovieClip = new NavPanel(data.panel[i].name);
		var contents:MovieClip = new ImgHolder(data.panel[i].img);
		accord.addPanel(panel, contents);
	}
	addChild(accord);
	accord.openPanel(1);
}
<?xml version="1.0" encoding="UTF-8"?>
<panels>
	<panel>
		<name>panel one</name>
		<img>img/1905143678_218d1aa13a.jpg</img>
	</panel>
	<panel>
		<name>panel zwei</name>
		<img>img/1904306625_fa9cf2cd33.jpg</img>
	</panel>
	<panel>
		<name>panel tre</name>
		<img>img/1904436509_2266d2daf2.jpg</img>
	</panel>
	<panel>
		<name>panel quattre</name>
		<img>img/1904437975_441fec52af.jpg</img>
	</panel>
</panels>
  • http://www.swfflex.com Christopher Keeler

    Awesome component. I have managed to hack apart this to work with RTMP video streams. Just a few more problems to work out though, like only getting the video streams to play on the active panel.

    Currently thay all play at once…:(

  • http://blowingthroughlines.com nilloc

    Hey Christopher,
    There is an even being dispatched when each panel is opened. You could ( and i should, or will when i get a few spare minutes ) wait and do the load of the pic or video when the even it changed.

    //add this to the main function or perhaps an init function
    accord.addEventListener(accordion.EVENT_ON_CHANGE, somethingchanged);
    public function somethingchanged(evt:Event):void{
         trace("the panel changed to number "+accord.currpanel);
    }
    

    I also would like to revisit the accordion events and include the actual panel in the event that is returned, to make it easier to add things too on the fly. But that wasn’t an original need for the code.

  • http://www.swfflex.com Christopher Keeler

    Not sure how to implement the event with netStream, or how to load the Video object with the selectedIndex? Any help would be great!

    Also…looking for a way to tint the gradient of the NavPanel via an XML hexedecimal value.

    Thanks.
    -CK

  • http://www.swfflex.com Christopher Keeler

    Collin,

    How do you access the Contents movieclips programatically? I am trying to invoke the netStream.play() method, but there are no instance names or identifiers.

    Thanks.

    -CK

  • http://www.swfflex.com Christopher Keeler

    Accordian Panels meet XML colors

    I modified the NavPanel class to be able to colorize the gradient of each accordian panel via an XML attribute. This also draws the panels with code, so you can customize the shape.

    package
    {
    import flash.display.*;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.text.AntiAliasType;
    import flash.text.Font;
    import flash.geom.*;

    public class NavPanel extends MovieClip
    {
    private var fmt:TextFormat;

    public function NavPanel(ttle:String, pnlColor:String):void
    {
    var panelShape:Shape = new Shape();
    //panelShape.graphics.lineStyle(0);
    var matr:Matrix = new Matrix();
    matr.createGradientBox(100, 0, 0, -60, 0);

    panelShape.graphics.beginGradientFill(‘linear’,[0xFFFFFF,pnlColor],[1,1],[0,255],matr);
    panelShape.graphics.lineTo(0,300);
    panelShape.graphics.lineTo(20,300);
    panelShape.graphics.lineTo(20,256);
    panelShape.graphics.lineTo(30,246);
    panelShape.graphics.lineTo(20,236);
    panelShape.graphics.lineTo(20,0);
    panelShape.graphics.lineTo(0,0);
    panelShape.graphics.endFill();
    addChild(panelShape);
    //Font Embedding
    var font:Font = new Arial();
    fmt = new TextFormat();
    fmt.bold = true;
    fmt.color =”0xFFFFFF”;
    fmt.size = 12;
    fmt.font = font.fontName;
    var title_txt:TextField = new TextField();
    title_txt.autoSize = TextFieldAutoSize.LEFT;
    //title_txt.defaultTextFormat = this.fmt;

    title_txt.text = ttle;
    title_txt.embedFonts = true;
    title_txt.selectable = false
    title_txt.setTextFormat(fmt);
    title_txt.rotation = 90;
    title_txt.x = 19;
    title_txt.y = 5;
    addChild(title_txt);
    }
    }
    }

    XML:

  • http://www.swfflex.com Christopher Keeler

    XML attributes:
    vid url=”DCCTech” buttonText=”ABOUT THIS CENTER” button=”pnlAbout” color=”0x5A7851″ eventMarker=”28.5″ link=”aboutUs.cfm”

  • http://www.blowingthroughlines.com jeffdurand

    accordian.getPanelContentsAt(panelnumber) will give you the entire contents of the panel. Once you get the contents then you can inspect the contents for what you are looking for and call actions on it. Hopefully this helps. for instance you can look at the movie clip then recursively get get children till you find the correct object then simply call the method you want.

  • http://www.swfflex.com Christopher Keeler

    Sample of this accordion class modified to work with RTMP video streams from a Flash Media Server:

    http://www.dattoli.com/flashtemp/index.cfm

  • http://www.flickaday.com jeffdurand

    Wow christopher that is fucking tight man. I’m really happy you were able to figure out how to get the accordion class working with flashmediaserver. It looks really good and the streaming makes it ultra responsive. I’m going to be doing some stuff with red5 soon. I will likely post a lot of what I did you may find it useful if you want rtmp without the high cost of fms…. later jeff

  • Neil

    Really like using xml but having issues adding a swf into the xml. file. By the looks of it this is what you have done in the above ezample.

  • http://hdwebdesign.org/photography.html Michael Benin

    Thanks a bunch. Really a great help. Keep up the good work.