Sample Accordion

I will give a quick run through of how I implemented the Sample Accordion component. If you want more details..
I wanted this component to behave exactly like an Accordion, but instead of trying to hack and extend the Accordion class to get this functionality, I started from scratch and extended Container. The component is a composite of Buttons, that represent the accordion headers when in the closed state and during animation, that I rotate and resize and the Flex Accordion whose headers are styled the same as the buttons, so the effect is seamless.

In order for the container to behave like a real container I needed to define a DefaultPropery. The DefaultProperty basically tells the container that when content is added there is no variable defined to put it in to default what ever you set in the metadata for DefaultProperty.

The effect I wanted was to have the Accordion headers swinging from a closed state to an open state and then the content for each accordion pieces sliding in. To achieve this I take the buttons rotate and resize them to the appropriate spots, most of this logic is done in the updateDisplayList. Once the buttons have animated to their correct locations, the accordion then slides in, since the headers for the accordion and the buttons are styled the same the effect is seamless when the buttons are hidden. The addition of a collapse button on the first accordion header allows the user to close the accordion back to the close state. I basically have the component do everything in reverse to achieve the close.

Most of the work is done in the commitProperties and updateDisplayList methods.

Click the link to watch Demo http://vinod.ucoz.com/sampleaccordian/AccordionSample.swf

still have query's post me a comment

Thankyou

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.