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.
Pingback: Blowing Through Lines » Blog Archive » Accordion Meets XML
Pingback: accordion class - flash actionscript3 (as3) | ×‘× ×™×™×ª ××ª×¨×™× - web programming
Pingback: Blowing Through Lines » Blog Archive » Accordion Meets XML