Sometimes you just have to roll your own

Recently, we worked on a Flash project with an accordion menu to display a list of files on a CD. We used a purchased control that allowed for only one level. When the client came back with revisions to the menu structure, they rearranged the menu into multiple levels. A quick search yielded no accordion menus that supported multiple levels, so we had to make our own.

And since it's the holiday season, we're sharing our code with you. Click here for the zip file containing the fla project, xmlfile, and the needed classes.

How it works: In test.fla there are four movie clips in the library (levelitem1-4). These make up the buttons that the accordion menu will use. Each levelitem movie clip has two frames: the first is for off/closed state and the second is for an on/open state. A textfield on each movie clip is mapped to a variable, "thebuttontext," that's used to set the text of each button.

An empty movieclip,"mctarget," is used by the accordion menu to position itself on the stage.

In the actions, we create a new accordion object passing in the "mctarget" so it knows where to attach to the stage. We then tell the accordion menu to fill itself from the test.xml document. Next, we declare a listener object and attach them to the OnItemClick and onNodeOpen events. The onItemClick event is fired when an item is clicked and doesn't have any children. The onNodeOpen event is fired when an item is clicked and has children. Whenever an item is clicked in the movie, the object passed to the listeners contains the link and description of the item that was clicked.

Test.xml stores the menu configuration. The item nodes hold each level's information. The four non-required attributes for each item are: (1) Header – the title of the item (2) Link – url link (3) Description – text for the item (4) Customdepth – overrides the level assigned automatically to each item (determines which "levelitem" movieclip is used from the library).