Accordion Component AS3 flash 9

If you have been using flash 9 with as3 you have perhaps figured out that there is no accordion component. While what I have made is not a component, it is a rather easy to use lightweight class i’m sure you will find useful. Below is the most basic example and usage of the class. it automatically takes care of the masking and buttons required to achieve this simple effect.

Example Result

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

How to instantiate and use the class

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package {
	import TopLevel;
	import src.navigation.*;
	import src.utils.*;
	import caurina.transitions.Tweener;
 
	public class main extends TopLevel
	{
		var accord:accordion;
		public function main()
		{
			accord = new accordion(400, 300,4, 20);
			addChild(accord);
			accord.addPanel(new navpanel, new contents);
			accord.addPanel(new navpanel, new contents);
			accord.addPanel(new navpanel, new contents);
			accord.addPanel(new navpanel, new contents);
			accord.openPanel(1);
		}
	}
}

As you can see the code is quite simple. You create an instance and add content as necessary. For the moment I have only programmed a horizontal accordion. However it would not be difficult to create a vertical one if your project required it. If you would just like to use this example and start hacking around please Download the Source and mess around all you want. for a more in depth explanation of more advanced functionality keep reading.

To make a new accordion object, just instantiate the class as shown in the main class section. The openPanel function is self explanatory. enter a number from 1 to number of panels. You can access the internal movie clip of a panel by using getPanelContentsAt. Useful if you would like to change text within one of your panels or replace it with something else.

The last very useful piece of functionality worth mentioning is the event that is generated when you change panels. This is useful because if a button outside of the accordion changes the panel any other object can react accordingly (pun intended). This comes in handy for contextual navigation when a user has reached the end of the accordion. Below is a small code snippet of how you would subscribe to the event and do something with the info.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
//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);
}
  • http://www.bulupe.com Bulent Ozturk

    Hi,

    I have updated your accordion class to support vertical too, i did it in a very short time so it may not be that good, if you can send me your mail address i can send you new accordion class.

    Thank you.

  • http://www.blowingthrouglines.com jeff dot durand at gmail dot com

    if you would like to send the file to the address that I left for my name then please feel free. Thanks.

  • http://www.bluead.biz Saeed Ahmed

    Hi,

    the example is great but i m having some problem while overlaying it with a cervical shaped banner. I want to make this with round shapes and want the pics and data to be input dynamically from an xml file.You can see an example of what i want at http://www.bu.edu ” any help will be highly appreciated”

  • Pingback: Blowing Through Lines » Blog Archive » Accordion Meets XML

  • john

    Bulent Ozturk I can’t find your email address. Can you email me the vertical version?
    thanks jtubert-at-hotmail.com-dot-com.

  • Mat

    Hi,

    Could anyone be kind enough to send me the vertical accordion class.

    mateusz24@gmail.com

    Regards,

    Mat

  • Dudi

    Hi Buelent,
    could you please send me the vertical version.

    Thanks,
    dudi-zib@executivemail.co.za

  • pierre

    to be honest, I would like to have the vertical one too.. is it possible for you to send me, or do you know where I can find?
    my email is
    prougier@ina.fr

  • Clement Oke

    Can anyone tell me how to load swfs in the accordion. I get this
    TypeError: Error #1034: Type Coercion failed: cannot convert company_fla::MainTimeline@2da6cb9 to flash.display.Bitmap.
    at ImgHolder/::showImg()

  • Pingback: accordion class - flash actionscript3 (as3) | בניית אתרים - web programming

  • Pingback: Blowing Through Lines » Blog Archive » Accordion Meets XML

  • Patrick

    Hey, great accordion! Thanks for your hard work.

    I have a stupid question – how does one go about adding their own content for each panel, and have different headings for each button?

    I’m not so good at AS3.

    Thanks,
    Pat.

  • Pat

    Hey guys,

    thanks for the great accordion. I’ve got a question – how would you add a rollover effect on the buttons? I have tried for ages to no avail. A simple button movieclip doesn’t work. I just want the text to change colour is all.

    Thanks!

    Pat

  • http://www.flickaday.com jeff durand

    you add new panels via

    accord.addPanel(new navpanel, new contents);

    new contents can be any movieclip class, so that’s how you add that.

    the nav panel is also just a movieclip so in order to have a mouseover and mouseout event you would need to have those function witten for your movieclip and attach the appropriate event listener. If you don’t know how to make a movieclip, on the stage and then export it, so that actionscript can be used for the functionality, you should research it. basically you need to use the linkage ability in your library and tell it what class to use then attach event listeners that change your text color.

    If you are not good at actionscript this is a great opportunity to learn. I assure you what you are asking for can be done using my codebase. The code is well written and self explanatory for a good coder.

  • http://y3k.com.au Pat

    Hi Jeff, sorry, I actually figured out how to add content shortly after I posted the first question. I am not that bad, lol. I will have a look again at adding rollovers. I originally had simple rollover Button movie clips, but they didn’t work. I’ll try it as movie clips with event listeners this time. Thanks again for your great accordion you can see how I am using it here: http://www.mickconnolly.com.au

  • http://www.flickaday.com Jeff

    Your example looks great. Nice job… one more note. You may have to allow mouseChildren on the bar or attach the event some other way.

  • http://y3k.com.au Pat

    Hello and thanks again. I am yet to achieve the hover button effect. What movieclip needs to have mouseChildren allowed? I have tried enabling it on just about every movie clip at least once, but I am stabbing in the dark. I have tried enabling it on “btn”, “obj” “pnl” etc… I just want it to be listening for the mouse like the main content panels seem to. Ahh! Sorry again it does not come so easily to me.

  • sampath

    hi,

    how can i change the panel headings

  • kurac

    ok one question…would you hands fell out if you tried to explain a bit more in detail of how to make roll over states on the accordion buttons because there are people here that are beginners in AS3 and in using external scripts and classes if you made this file and wanted to share it with people what would have costed you more if you were a bit more descriptive or if you commented the lines of code or simply just placed one TXT help file along in the zip with the sources

  • http://paperclipped.com nilloc

    Sorry for the delay in response, this component was made quite a while ago now, and I’m unable to get rollovers to work in it either (during the 15 minutes I could find to play with it). We are working on a new, and much friendlier Accordion, that will be released as a class—and actual component—in the very near future.

    Unfortunately until then this accordion code could be considered deprecated.

  • Ole

    IS there a way to add event Listeners inside the content area? If so, how?

  • http://www.mutationevent.com Achraf

    Hi, thank for this great simple accordion.
    It work perfect but i dont know how
    to set transparency inside the content section.

  • baludharmaraj

    Hi,
    Thanks for this gr8 script. I am just a beginner for the actionscript. could u pls pls pls explain how to give the link for each panel image?

  • ZK

    Thanks for the awesome accordion menu, I would like to make the panel/content background transparent. Can you let me know how? Thanks!

  • Mike

    Hi I downloaded this and started putting in my own content ect, I dont know much about action script so thought i would ask here.

    Is there any chance of some one helping me open a child from a button in the main stage? or is it even possible.

    Thanks in advance.

  • Brittany

    Hello,
    I have tried using this component and the error I am getting is this:

    1017: The definition of base class TopLevel was not found.

  • andrew

    Hey. Ive been attempting to make a real weak version of a vertical accordian, but love the way this one works. Is it possible I, too, get emailed the sick code you have goin for the vert accordian???

  • Wakaroo

    Nice accordion and thanks ! All i need to know is that How to position that on stage (x,y,stuff)?

  • http://tekken.com jin

    esto es una mierda.

  • Arvin

    nice accordion and thanks a lot. i need to customize it so that each panel takes it height according to the content loaded.
    🙂

  • Victor

    There’s any way to make this accordion transparent?

  • Harshit

    I got an error when i use this code
    C:\Users\Harshit\Desktop\Minimal Components\main.as, Line 16 1180: Call to a possibly undefined method navpanel.

    Please Help…

  • Lifechamp

    GREAT! — an important FEATURE REQUEST:

    When setting alpha on the accordion, the problem is panels show through the panels above them..

    Solutions appear to be:

    During the animation:

    1) Shrink the non-showing panels to 0 size
    2) Fade the alpha of non-showing panels to 0

    Any chance you might add that? : )

    Thanks!

  • Brad

    To make it transparent, open the accordian.as file, then add a 0 for the second parameter of all the lines that have “this.graphics.beginFill()”, which don’t already have a second parameter. The 0 will set alpha to 0, thus rendering the color invisible. For example: this.graphics.beginFill(0xFF0000, 0);

    You should have to do this in three different places in the file. The last two instances will already have a second parameter of alpha defined, and can be ignored. Hope this answers the questions.

  • Brad

    To make it so you can’t see the movieclips underneath through the transparency, use a timer in flash for a couple of seconds when a new panel is selected, and when the timer elapses, hide the previously selected movieclip by setting .visible = false.