Blowing Through Lines

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>

11 Responses to “Accordion Meets XML”

1. Christopher Keeler Says:
   January 30th, 2008 at 8:30 am

   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…:(

2. nilloc Says:
   January 30th, 2008 at 1:21 pm

   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.

3. Christopher Keeler Says:
   January 30th, 2008 at 8:09 pm

   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

4. Christopher Keeler Says:
   January 31st, 2008 at 1:46 pm

   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

5. Christopher Keeler Says:
   February 1st, 2008 at 11:10 am

   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:

6. Christopher Keeler Says:
   February 1st, 2008 at 11:12 am

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

7. jeffdurand Says:
   February 2nd, 2008 at 6:58 pm

   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.

8. Christopher Keeler Says:
   February 8th, 2008 at 2:13 pm

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

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

9. jeffdurand Says:
   February 9th, 2008 at 3:56 pm

   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

10. Neil Says:
    August 18th, 2008 at 11:45 am

    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.

11. Michael Benin Says:
    February 28th, 2010 at 7:48 pm

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

Leave a Reply