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); } |
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 [...]