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
How to instantiate and use the class
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.
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); } |
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
January 10th, 2008 at 8:34 am
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.
January 11th, 2008 at 1:03 pm
if you would like to send the file to the address that I left for my name then please feel free. Thanks.
January 23rd, 2008 at 12:36 am
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”
January 27th, 2008 at 11:56 pm
[...] Original Accordion Post [...]
February 14th, 2008 at 10:43 am
Bulent Ozturk I can’t find your email address. Can you email me the vertical version?
thanks jtubert-at-hotmail.com-dot-com.
February 14th, 2008 at 10:47 am
Hi,
Could anyone be kind enough to send me the vertical accordion class.
mateusz24@gmail.com
Regards,
Mat
February 20th, 2008 at 12:37 pm
Hi Buelent,
could you please send me the vertical version.
Thanks,
dudi-zib@executivemail.co.za
March 5th, 2008 at 6:51 am
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
May 12th, 2008 at 3:42 pm
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()
June 9th, 2008 at 5:52 am
[...] great thanks to the one who wrote it, feel free to give the original page a [...]
August 4th, 2008 at 12:11 am
[...] 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 [...]
January 16th, 2009 at 2:27 am
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.
January 31st, 2009 at 10:06 pm
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
February 6th, 2009 at 11:11 am
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.
February 8th, 2009 at 8:58 pm
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
February 11th, 2009 at 2:39 pm
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.
February 22nd, 2009 at 11:25 am
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.
March 12th, 2009 at 2:31 am
hi,
how can i change the panel headings
March 26th, 2009 at 10:02 am
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
March 26th, 2009 at 12:12 pm
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.
July 19th, 2009 at 11:54 am
IS there a way to add event Listeners inside the content area? If so, how?
July 24th, 2009 at 6:19 pm
Hi, thank for this great simple accordion.
It work perfect but i dont know how
to set transparency inside the content section.
August 14th, 2009 at 1:13 am
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?
November 12th, 2009 at 10:11 pm
Thanks for the awesome accordion menu, I would like to make the panel/content background transparent. Can you let me know how? Thanks!
April 29th, 2010 at 12:45 pm
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.
May 9th, 2010 at 4:36 pm
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.
June 5th, 2010 at 12:08 pm
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???
July 23rd, 2010 at 8:28 am
Nice accordion and thanks ! All i need to know is that How to position that on stage (x,y,stuff)?