ActionScript 3 XML Accordion Menu
This menu system was written as a means to display images or other content in a condensed manner.
Class based ActionScript 3 Accordion Menu, with either a rollOver/RollOff activation scheme for a onRelease activation scheme. Menu is built using a custom event dispatch scheme to keep each menu item synchronised with the changing states of the menu. The menu grabs a reference to the Stage via the ADDED_TO_STAGE event, which is uses as its base for setting up the communication between menu elements.
Menu Functionality
- Support for Images and Swfs as content.Swfs can contain their own interactivity.Either Click or MouseOver menu to activate it.XML Driven.XML can contain function calls with parameters, or URLs or nothing.Menu Highlighting is an option.Either the whole menu item, or just the menu bar can be used to trigger menu movement.Menu supports content of differing sizes. Menu will auto size the menu bar width, but is content height agnostic.Support for placement.Support for spacing between menu items and menu bar item height.Menu Bar has a test element, pulled in from the XML file.Column support. But you will have to add that change yourself.Menu uses either tweenLite or tweener for menu movement.Custom Event Dispatch class for sending events to particular menu instances. Eg, for telling one menu to slide open after all have loaded.Class has a reset method, should you need to reset the menu
If you are going to get the menu to trigger events it is generally it is better to only use the bar, so as to not interfere with your other nested actions.
Menu is a class file, which relies on be passed three values in its constructor,?Ǭ† (loader content, title text, menu action), all of which are values that are pulled in from the XML file.
Included in the download are two folders, one?Ǭ† accordianAS3_rel contains the onRelease version of the class. The other, accordianAS3_roll contains the RollOver version of the class. In each folder are each classes respective Flash CS3 document, its associated Document Class file, an XML file, an XML parsing class, the tweenLite Class and images and swfs.
Updates10th Feb, 2008: Added custom event dispatch class to both examples.
View ExamplesActionScript 3 XML Accordion Menu: On Release VersionActionScript 3 XML Accordion Menu: On RollOver Version
Source FilesHere are the source files; ActionScript 3 XML Accordion Menu V2
DependenciesClass uses the tweenLite tweening class for menu movement, highlighting etc; http://www.tweenlite.com
February 24th, 2008 at 8:23 pm
Dail,
This is a great trick, Im in school for this now… I am having trouble locating where the rollOver functions are? I would like to tweak it a little bit and have individual images for each box, is that a possibility?
February 25th, 2008 at 10:59 am
Daniel,
Are you meaning for each black bar in the menu? Sure, that is just a sprite. If you make it’s alpha = 0 then your masked content will show through that region. Thats if that is what you mean?
March 17th, 2008 at 1:19 pm
Great stuff! Been looking everywhere for some type of tutorial on this and this will be great to learn from! You the best!
March 17th, 2008 at 11:08 pm
No problem!
April 20th, 2008 at 3:06 am
Hi Dail, excellent piece coding. I?¢‚Ǩ‚Ñ¢ am new to flash so forgive my ignorance but can you help me. I would like to place a number of hyper links in place of the images is that possible? If you could give me a snippet of code that would be a great help.
Thanks for your time.
p.s. nice site
April 20th, 2008 at 11:33 am
Alan,
Well, the menu loads in content. So, you would have to have each link within a swf or something like that. Unless you mean the menu bar. To change that, change the private var useWholeMenu:Boolean = false;//use the whole menu or just the black bar to trigger menu shuffles, default is true, use the whole menu, to be true. Then any click on the bar will run. Look in the XML to see how to add in a URL to run off each click.
May 2nd, 2008 at 2:17 pm
Hi Dale,
The accordion menu you created is really great. I am working actually on it for a friend. She does not know a lot about Actionscript, so I took the part.
Actually I created a module, which is loaded into the menu as normal. The big problem actually is… how can I call a function within the child SWF when i click the menu.
The problem is following: I have several Menus and under each one is a movie… now when I play the movie in MenuA and open MenuB … MenuA’s movie still continues to play and I want to stop that, by calling a global function which sends a function call to all Menus to stop movie playing (or reinitiate the content).
I wanted to hardcode it into your class, but it did not work out… Maybe you can help me out.
Thanks in advance.
May 12th, 2008 at 11:52 pm
Hey – great menu system… Works like a dream – expect that I can’t get a different font working with the menu???
Error 1180 – Call to possibly undefined method myfont
What’s the deal? Does it have to be a bitmap font?
May 13th, 2008 at 12:10 am
Scratch that… saw your fix on http://www.actionscript.org – Thanks!
May 13th, 2008 at 2:02 am
However, where exactly do I set the event to make the first menu item open? Assume that will be ID 1?
“Basically an event needs to be sent to that first menu telling it to open.”
Thanks!
May 13th, 2008 at 12:51 pm
Astrostu,
Try:
//dispatch a new event telling the 3 menu item to open
dispatchEvent(new MenuEvent(MenuEvent.MENU_EVENT,1));
May 13th, 2008 at 6:54 pm
Hmm…
Should that not be:
dispatchEvent(new Event(… ?
Think I’m out of my depth here…
Not even sure where in which file to add this!
In the “accordionMenu.as” or the “as3Accord.as”
HELP!
May 13th, 2008 at 9:19 pm
Astrostu,
Its already in the as3Accord.as file..
if (p==menuXML.menuitem.length ()) {
//do when done
dispatchEvent(new MenuEvent(MenuEvent.MENU_EVENT,4));
}
May 13th, 2008 at 9:56 pm
Ahhh…. I only had already edited XML to have 3 links – that’s why it wasn’t working…
Seems the first id is actually 0. So set it to that to have the first menu item open by default!
Cool, thanks for your help Dale!
May 15th, 2008 at 5:23 pm
Me again… I was wanting to make the menu bar initial state slightly transparent. I tried setting this after beginFill…
> menuBar.graphics.beginFill(menuColour, 80);
But didn’t work… ??
Should I be setting that here, in the mask or higher up in variable?
Thanks again…
Think I better donate some money if you fix this one!
May 15th, 2008 at 7:23 pm
in AS3, alpha’s max value is 1. So, do to an alpha fill of 80%, you would go;
menuBar.graphics.beginFill(menuColour, .8)
May 19th, 2008 at 3:31 pm
Some days ago I posted a question regarding initiating an action in all modules at the same time (like stopping movies) – the solution is: to do it with listeners and events… quite an easy thing.
a) create an Event Listener in the “sub”-SWF and of course the appropriate function:
// Adds Event Listerner so Module can be reset from outside
this.addEventListener(”resetmodule”, eventReset);
private function eventReset(e:Event):void{
trace(”RESET EVENT CALLED”);
reset();
}
b) make an eventcall every time the tabs are clicked. I placed my call in the resetHandle
Should be no problem for advanced programmers
May 21st, 2008 at 4:56 pm
Hi – was wondering how you turn off the “hand”/link effect on the content panel areas below the link bar? Is there a way to do this and still use buttons within this area? Otherwise it looks like the whole area is a button – when it’s not.
Also, can you turn off the button effect on the title bar when there is only one menu item? (I am using multiple sets of these and some sections only require one content area).
Thanks,
Stuart.
May 21st, 2008 at 6:37 pm
Hi,
Change these to false;
buttonMode = true;
useHandCursor = true;
May 27th, 2008 at 5:15 am
hi, i was wondering whether there was any easy way of converting the use of the out_txt.text box (as3Accord.as) into an externally sourced xml file? eg: when a menuBar item is called the text box refers to the XML?
ps. thanks again Dale! Ive enjoyed playing with this excellent piece of AS3 – keep them coming!
May 28th, 2008 at 4:34 pm
Ant,
Using the XML that the menu uses, or using the menu to load in a new XML file into that text box?
June 5th, 2008 at 1:58 pm
Hi,
Great work on the menu, is it possible to change the direction of the menu i.e. horizontal as apposed to vertical?
Thanks
June 8th, 2008 at 1:24 pm
Hi,
First of all thanks a lot for the great work! its cool!
I have one question.
Is it possible to toggle the menu’s, so you can have multiple menu items open at the same time?
thanks
June 8th, 2008 at 3:31 pm
Rob,
In the current implementation, I would imagine not. It only supports opening up the one menu. You could add it however..
June 8th, 2008 at 11:28 pm
Hi Dale.
Thank you for the answer! I will give it a go!
I actually have another question. Would it be possible to make it load an external .swf when you open the menu, instead of loading them initially and masking them.. That is how it works at the moment, right?
I will donate some dollars for you!
Cheers!
June 9th, 2008 at 12:04 am
Hi again Dale.
One last thing.. Im having a bit of a problem loading swf’s that is drawn in actionscript.
Because the stage of the swf is initially blank, the accordion don’t expand. I tried to manually create a rectangle with the same dimension as the stuff drawn in ActionScript, but the AS content never loaded.. Do you have any idea of why this is?
Thanks a bunch man!
June 9th, 2008 at 12:09 pm
Rob,
Thats an interesting problem, and one I had not thought about. Probably could work around it someway. I’ll give it some thought and try to come up with a solution.
June 9th, 2008 at 2:24 pm
thats perfect! cool man.
How about my first question? about loading external swf’s instead of masking.
Thank you for all your great work!
June 9th, 2008 at 7:53 pm
Rob,
You probably could load in external swfs, but the problem would be that the menu would not know where to move to, as it bases its movement calcs off the height of the loaded in content. You could add in height/width info to the XML etc, or when you load in the content, onComplete, move the menu. Or are you asking to delay loading to someone clicks the menu?
June 10th, 2008 at 6:12 am
yes exactly, I want to delay loading to someone clicks the menu.
June 21st, 2008 at 9:11 am
Your component swf will not load into another swf without causing a 1099 error.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at as3AccordRoll()
July 2nd, 2008 at 10:37 am
You have really done an excelen job. a very nice accordion. I was trying to modify the (asAccord.fla) but anytime i test the movie all what i could see in the swf is a blank white page with the (reset menu) button in it.i even tried to test the movie without making any changes to the originl fla file but still it does not work.
would you please tell me how i could modify the fla file successfully.
July 9th, 2008 at 10:06 pm
Hi Dale…
I have used this menu for multiple sections of a website. Initially it all loads and works great. But when visiting a section for a second time, sometimes the menu is expanded, but no content is loaded? It’s just blank. Then if you click on the heading link it will load – even though the menu item was already open – it remembered what sub section you were in because it was never “unloaded”. have you had this issue ever? Any suggestions??
Thanks,
Stuart.
July 10th, 2008 at 12:22 pm
Astrostu,
I’ve not come across that issue, Sounds odd, as it shouldn’t be reloading the content between sections right?
Email me your file if you want me to have a look.
July 12th, 2008 at 2:41 am
Cool Code Nice Work
July 21st, 2008 at 4:08 pm
Great work! What license are you using to publish this code? Is it cool if I use it on a website?
July 21st, 2008 at 6:40 pm
John,
Its just free to use, so long as it does not form the basis for a template on a Flash template site.
Incidentally, I’m putting the finishing touches on a new version of this file.
July 25th, 2008 at 6:40 am
Lovely coding! Any chance someone could purchase a tutorial on how you built the accordion. Im trying to deconstruct your class but my lack of knowledge in AS3 is preventing me from fully understanding why you built certain things in the way you did.
Give me a shout! oh and when you do reckon the new version will be available?
Tim, London
July 25th, 2008 at 9:11 pm
Tim,
I’ve finished the new version, and have added it to the donators section of the site.
What are you interested in understanding? The methods used to create the accordions are different between the two classes. I changed the masking approach for the newer version.
August 25th, 2008 at 10:21 am
Hello Dale,
Firstly, THANK YOU for your generous resources. I have learned so much by examining your code and most of it still boggles me! I’m going to go ahead and throw out the newbie caveat and apologize if this is a silly question.
I am having an issue with this menu when I load it into my Main swf. The first time it loads, all works well, but if I leave the page and return to it again I get this error:
TypeError: Error #1034: Type Coercion failed: cannot convert MenuEvent@342747b1 to MenuEvent.
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
I can see the override clone function in MenuEvent.as, which I thought was meant to eliminate this problem, but maybe I’ve somehow disengaged it? Any ideas?
Thanks in advance for any help you can give.
Best,
jenny
August 26th, 2008 at 11:58 am
Jennifer,
The problem will be because you have either added an event listener to the stage that you have then not removed. Or the accordion is not able to get access to the stage.
August 28th, 2008 at 1:09 pm
Dale,
I have icons next to each menu item, and I’m trying to make them follow their corresponding menu bars as they slide up and down. How would you suggest doing this, attaching them to the bars? Maybe putting them in the loadedContent SWFs, and not masking them? Having them respond to the same mouseEvent as the menubars?
Everything I try seems to mess something else up…
what is the actual ID of each bar if I were to just put an event listener on each icon to follow the bar if it moves?
September 8th, 2008 at 6:02 pm
I love you for developing this. As a senior in High school, this is absolutely amazing to learn from. I’m still new to Flash, relatively speaking anyway, and this is amazing. I love how you made so many comments and made it easy it make sense of.
Honestly I’m so excited I don’t know what else to say, except that thank you so much for making this available and putting in all that hard work!
September 12th, 2008 at 10:38 am
Hey, I was just wondering if you could write some words in English which together make some kind of sense. The explanatory intro paragraphs remind me of spam email that string a bunch of words together into meaningless blocks of text to get through junk filters.
“height agnostic” made me laugh. The rest made me cry. ;.(
November 12th, 2008 at 4:12 pm
i love you. i was just trying to figure this one out with get bounds.
November 20th, 2008 at 4:44 am
Hey, I keep trying to integrate this class into another SWF and keep getting a #1009 Null Object Reference error – it works fine when I publish it from the as3Accord FLA, but when I try and add the class to my Main.as class (for a website) it throws that error. I can’t figure out what it could possibly be looking for that would be rendered null by taking it into another class.
November 22nd, 2008 at 1:57 pm
hello Dale
i’ve modified the xml and the class in order to show a block of text, would like to know if i can share the modified class or send it to you or whatever else…
regards, futre
November 22nd, 2008 at 10:39 pm
Futre,
Sure, send it through and I can upload it if you like.
November 22nd, 2008 at 10:40 pm
Brad,
Sounds like it cant access the stage for some reason.
November 25th, 2008 at 3:48 am
Dale,
Thanks for the reply – what’s the best way to let it access the stage? I understand that now that the as3accord is not the document class that it doesn’t have the same relationship to the stage… how do I give it a path there?
November 25th, 2008 at 11:46 am
Is it possible to instantiate the menu without adding it as a document class? I’ve made a semi-complex interface, and would like to add this menu. When I add as3accord.swf through a loader (addChild) i can’t reach the custom new events like dispatchEvent(new Event(accordionMenu.RESETALL,true)); Because flash doesnt recognize accordionMenu because its in the loader.
November 25th, 2008 at 11:50 am
I temporary fixed it, by turning of strict mode and automatically declare stage instances in the document actionscript 3 settings. It works now.
December 1st, 2008 at 1:04 pm
I can’t figure out how to adjust the height of the black bars.
There is one part that is commented “// adjust the height color” (which seems like a typo) and it has a value of .1. I tried to adjust this value but nothing happened at all.
December 1st, 2008 at 8:21 pm
Question 1:
How do I change the font? My computer doesn’t have standard 15_65 or whatever it’s called. I tried changing it to simply Arial or “Arial” but that didn’t work.
Question 2:
How could I make the black bars an animated MC instead? This is cool, but I’d like to have a more involved button that is not animated via actionscript.
December 1st, 2008 at 8:54 pm
I figured out Question 1.
Still wondering how I could substitute the black bar AS animation for a more involved animated MC button, though.
And how can I delete this Reset button and text box on the stage of the main fla??
December 3rd, 2008 at 1:32 am
Is it possible to make the menu open from the bottom?
Also, could someone (Dale, please) give me a clue how to link this accordion menu with the noponies simple XML gallery? I’d like to have menu items drop down instead of images, and those menu items to load new XML galleries. How can I do this without loading an external swf?
Appreciate your time and thought,
Cam
December 3rd, 2008 at 6:32 pm
Hey, pony boy! I’m talking to YOU!
I just wanted to say thank you so much for putting this up.I finally was able to work it enough to create something that is necessary in order to fulfill my job function and not get fired.
But, I am wondering… have any idea how you might load and unload movies to the Parent or Root movie from a swf in the dropdown menu?
I have this in the Parent (as3Accord)…
var loadMovie = new Loader();
container.addChild(loadMovie);
loadMovie.load(new URLRequest(”tempjunk.swf”));
And this in the Submenu swf …
myBtn.addEventListener(MouseEvent.CLICK, loadmovie1);
function loadmovie1(event:MouseEvent):void
{
MovieClip(this.parent.parent.parent).removeChild(MovieClip(this.parent.parent.parent).loadMovie);
MovieClip(this.parent.parent.parent).addChild(MovieClip(this.parent.parent.parent).loadMovie);
MovieClip(this.parent.parent.parent).loadMovie.load(new URLRequest(”whatsInAName.swf”));
}
The addChild works, but the removeChild doesn’t. Any idea why?
December 4th, 2008 at 12:22 am
Resolved the earlier issue – however something very strange is happening – the menu functions perfectly, but the menu items are invisible. There’s nothing on top of it (it is added last) and I can mouse over and click the items, and the images show up, but the words never do. Very strange. Has this ever happened before?
December 4th, 2008 at 12:23 am
Resolved the earlier issue – just turned off the stage.framerate line in the as3Accord class.
However something very strange is happening – the menu functions perfectly, but the menu items are invisible. There’s nothing on top of it (it is added last) and I can mouse over and click the items, and the images show up, but the words never do.
Very strange. Has this ever happened before?
December 8th, 2008 at 5:18 am
Brad, sounds like your font is not embeded properly, if thats the only thing that is not showing up.
December 12th, 2008 at 8:42 am
is it possible to create submenu that also exhibits the accordion style? if so, how would i go about it? i’ve tried creating the submenu and embedding it as a separate .swf into the main menu to no avail.
thanks!!
December 12th, 2008 at 8:44 am
when i say “embedding”, i really mean adding it to the xml file.
January 14th, 2009 at 11:25 am
Hi Dale,
great Menu – but how can I reset the Y-Position, when i load some new XML-Content. I want that every new menu is on y-Position = 0 – How to realise that??
January 14th, 2009 at 11:06 pm
Have you tried calling the reset method before you load in your new XML?
January 22nd, 2009 at 2:13 pm
Hi DALE,
Thanks a lot for your great work. I works fine independent but when we load in another swf it gives errors because of its document class.
Regards
Kunj
January 22nd, 2009 at 10:38 pm
Well, change the document class….
January 29th, 2009 at 8:28 pm
Hey Dale
Really good script. Just had a question. If I define an action in the XML example: Test. Where in the code and how do you define Test ? An example of the implementation would be really great. Many thanks.
February 13th, 2009 at 10:07 am
[...] ?ɬ® un vecchio progetto del 2008 di noponies, modificato con il permesso dell’autore, invece di caricare immagini importa del testo da un [...]
February 19th, 2009 at 9:21 pm
great script..saved my butt on a project!
i was wondering, how i would remove the accordion menu from the stage?
I see where its being added, but i need it to remove itself. Any chance you can point me in the right direction?
February 19th, 2009 at 9:39 pm
@Mavis,
Just do a removeChild(accordionInstanceName)
February 23rd, 2009 at 8:59 pm
Hi Dale,
I?Ǭ¥m trying to load another swf into your menu, but i only get the output #1009. You wrote above that i have to change the document class. Is it very difficult to change it? I don?Ǭ¥t know what to do with it. Can you please give me a tip what i have to change?
This would be really cool. Many thanks Max
April 9th, 2009 at 9:51 pm
[...] AS3 XML Accordian [...]
April 11th, 2009 at 11:16 pm
i have been able to change color, size and type of the bars. I am trying to change the alpha value to 50% or .5.
where and how would i make this occur?
April 11th, 2009 at 11:21 pm
apologizes for the stupid question…!!! fixed my issue
May 13th, 2009 at 2:53 pm
Hello!
Cant i put imagens from xml on black box of the menu?
greatings from Brazil!
June 9th, 2009 at 7:04 am
Hi Dale,
great script and thank you for sharing.
I have managed to change the visuals a lot to suit my needs and managed to load external SWFs but is there a way to anchor the menu from the bottom? So instead of pushing down the bars is there a way to push them up? Expand up instead of expanding down…
I thought it might be in the “mouseClickHandler” but nothing seems to work…
Please give us a hand…
thank you
July 25th, 2009 at 11:48 am
Hello
thank you for sharing this script,
is there a way to change the menubars to images?
Thanks
July 27th, 2009 at 3:46 pm
Hi, no, there is no api for that. You would have to add it in manually.
August 19th, 2009 at 3:18 pm
Hi Dale,
iam so happy to learn over your script AS3 very fast.
Can you help me. First i want to let the Bar blue if i klick and how can i set the black bar as full stage width?
Please help me.
Big Thanks from Germany
August 19th, 2009 at 7:00 pm
Hi Dale.
i cant load the as3Accord.swf as extern file.
mport flash.net.URLRequest;
var request:URLRequest = new URLRequest(”as3Accord.swf”);
var loader:Loader = new Loader()
loader.load(request);
addChild(loader);
i get the message
TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht m?ɬ?glich.
at as3Accord()
please Help me
big thxs