ActionScript 3 Accordion Content
ActionScript 3 Vertical & Horizontal Accordion Menu with support for columns of content.
This example extends and supersedes an earlier version of this file I wrote about a year ago. I always wanted to make a horizontal version and extend the class, making it more flexible and useful to people.
As was the previous menu, this menu is a Class based ActionScript 3 Accordion Menu, with either a rollOver/RollOff activation scheme for a onRelease activation scheme. I also added in a better extended event class which allows you to control, or respond to all menu activity via events.
Class Features
- Vertical or Horizontal Menu Orientation
- Visible or invisible Menu Bar
- Supports parsing functions passed to each menu item
- Custom Menu Bar Assets
- Option for persistent Menu Panels
- Menu Spacing
- Menu text position
- MenuBar colour / RollOver/Off colour
- Menu text format
- Menu tween speed
- Menu easing type
- MenuBar width, height, visibility
- Menu Click behaviour
- Disable / Enable Menu
- Open Particular Panels
- Menu attributes are applicable on a per menu item basis
- etc, etc.
View Example
http://noponies.com/dev/as3_accordion/
Source Files
Donator only file!
If you want a less capable version of this file, you can download this; http://www.blog.noponies.com/archives/39
Dependencies
TweenLite – http://www.tweenlite.com
July 24th, 2008 at 5:03 am
Some files link doesn’t work.
July 24th, 2008 at 5:57 am
Cool menu! Custom menuBar assets would be a nice additional feature.
July 24th, 2008 at 11:15 am
Smith,
works fine for me.
July 27th, 2008 at 3:37 pm
hey dale nice post…(still waiting for the full screen vid…though…)…does this load interactive swfs? ie, contact forms, interactive foto galleries etc?
July 28th, 2008 at 1:24 pm
Pete,
Yeah, it loads any DisplayObject..So whatever you want.
The fullScreenVid is finished, and in the donators section.
July 29th, 2008 at 7:09 am
Chidooo menu!! works for me too!! Thanks for sharing Dale, Best regards!
July 30th, 2008 at 1:16 pm
thx dale….couldnt donate much right now as im freakin broke right now but i really learn alot from your code esspecially as im still trying to get m head around as3 ……. the next job i get ill be able to donate more generously.thx for your hard work
September 8th, 2008 at 4:58 am
When I embed as3Accord.swf in a other flash file. How can I reference the Resetall function from that flash file?
main swf:
var menuloader:Loader = new Loader;
menuloader.load(new URLRequest(”menu/as3Accord.swf”)); //load the menu
container.addChild(menuloader);
resetbtn.addEventListener(MouseEvent.CLICK, reset);
function reset(evt:MouseEvent)
{
menuloader.parent.root["resetMenu"] (evt) //????? what do I put here
}
September 8th, 2008 at 11:41 am
Andre,
I think you have posted this question under the wrong Accordion example.
But you should just be able to dispatch the resetAll event and the accordion should pick it up.
dispatchEvent(new Event(”resetMenus”,true));
September 10th, 2008 at 7:23 am
amazing work as usual …
i’m newish to AS2 and just starting to acclimate to AS3 so this script is like a crash course …
am i crazy in thinking that another xml variable can be passed into the menu? i would really love to have some text OVER the image once it appears … is this possible???
thanks fer any insight
September 11th, 2008 at 12:38 am
Anthony,
It does not do that by default. You would have to add that in, pretty easy to do so however.
September 15th, 2008 at 12:19 am
Hi Dale,
Thanks for your reply. And you’re right, My previous question concerned the other accordionmenu. But I have another question, which is related to my last post, so to make things tidy, l’ll post it here too.
How do I approach a Listener which is in a swf loaded by the menu, when the menu is loaded in other swf?
main.swf (dispatchEvent “Changer” => as3accord.swf => textfield.swf (Listens to “Changer”)
code:
Main.swf
var menuloader:Loader = new Loader;
menuloader.load(new URLRequest(?¢‚Ǩ¬ùmenu/as3Accord.swf?¢‚Ǩ¬ù)); //load the menu
container.addChild(menuloader);
var Text2Change:String = “blabla”;
changebtn.addEventListener(MouseEvent.CLICK, reset);
function reset(evt:MouseEvent)
{
menuloader.content.dispatchEvent(”Changer”,true);
}
Textfield.swf
code:
addEventListener(”Changer”, CreateTextfield);
function CreateTextfield(e:Event)
{
trace(MovieClip(parent.parent.parent).Text2Change);
}
I can’t get it to work (tried to add and remove more .parent). Can I interact like this directly or do I have to add some listeners and dispatchers in the menu too so it passes it along? I saw an example of a function in the menuloaded swf, which was linked to a function in the root by declaring it as a public function in the class. Basicly I need this, but the other way around, a function declared in the menuloaded swf, thats steered by a string in the main swf. (I’m making a button that changes the information textfield in the menuloaded swf)
I know I stray away a bit, but hopefully can you help me?
Thanks in advance.
September 17th, 2008 at 4:47 am
Solved it. Created another class to dispatch events too
September 17th, 2008 at 5:32 pm
Andre,
Great. I saw your posts on kirupa.Glad you got it sorted.
October 15th, 2008 at 9:48 pm
Hi Dale,
Does this menu allow for customization of each individual menu bar, or are the menu bars identical to one another?
Thanks for providing us with this great resource!
jenny
October 15th, 2008 at 10:12 pm
Jenny,
Yes, you have control over individual menu bars.
January 13th, 2009 at 2:47 am
Hi Dale,
Sorry if this question was answered but I am still a bit confused.
I have a main menu which loads a .swf containing your ActionScript 3 Accordion Content. The .swf works fine on its own but when loaded it comes up blank.
My best guess was that I needed to check that it is fully loaded before I add it to the display list but it still seems to come up blank. Any help would be great.
If this is a common topic that falls outside the realm of your component any advice on a good spot for a tutorial on this would be helpful as well.
Thanks for your patience and for sharing your great work!
-Jason
January 13th, 2009 at 4:38 am
Jason,
It depends on how you are loading it. If you are just using the demo file, then its trying to access the stage, to set its framerate, which could be killing it off.
Take out any references to the stage, in the accordion demo file, if you are using it.
I’ve updated the demo to include an example of loading it into another swf, plus a few other minor bug fixes.
April 26th, 2009 at 8:44 pm
Hi Dale,
nice menu! I’ve been testing to use it as my “site menu”, It seems demo menu doesn’t support loading/unloading external swf, but It’s not clear if the donator version can do it. Is it posible? thks!
April 28th, 2009 at 8:32 pm
@hugo,
No, there is no specific method to remove a particular panel. Its something I’ve been meaning to add into the class. One of those, when I get time kind of things.
June 17th, 2009 at 12:51 pm
Hi Dale,
First of all, thanks for sharing this stuff, its saved me a lot of time reinventing the wheel and made it easy for me to create far more complicated sites than I would have otherwise had time for.
I’m wanting to use this class to create a menu (just a text menu) which has two sub-levels… for example:
Item 1
Item 2
– sub item 1
– sub sub item 1
– sub sub item 2
– sub item 2
– sub item 3
Item 3
I thought I could do this by simply embedding one accordian menu within another, but I’m getting weird behaviour (rolling over the main accordion opens reveals the sub-items, but rolling over the sub-items doesnt reveal the sub-menus and makes the main menu expand even more)… Any ideas how I could get around this?
Oh and welcome to the UK!
July 10th, 2009 at 10:51 pm
hey there! really great script.
i am trying to customize it so instead of the pictures i would have a slideshow with controls(forth and back) in each item.
i guess, i will have to deal with _loadedContent mostly. any hints? am i wasting my time in trying this?
July 14th, 2009 at 2:12 pm
It should work fine, not that I have tested it. But, loading in swfs with interactivity works totally fine, so I don’t see why not.
July 18th, 2009 at 12:23 am
I was under the impression that swf’s could be loaded via xml or with addPanel???? I haven’t been able to get this to work….I’m pretty mediocre at AS3 and would love it if you could please post a short example if this is possible…thanks.
July 18th, 2009 at 3:13 am
neverrrrmind….i was trying to load blank swf’s for mockup purposes..didn’t realize that wouldn’t work
July 20th, 2009 at 11:55 am
Are you adding that swf to the stage? It looks like its not getting stage access.
July 20th, 2009 at 5:40 pm
Oh wow…I see what you meant. I addChild() in the main timeline and it works fine…I wish you could delete posts so that I wasn’t taking over your entire message board. I didn’t realize addChild() was necessary in the timeline as it was already in the class file. Thanks for the hint…I’m gonna study up on the display list and OOP some more before posting. haha
July 21st, 2009 at 9:05 am
Ha, yep, addChild() is your friend. I deleted you two other posts, no clutter.
August 24th, 2009 at 12:16 am
Love the script, it’s exactly what I’ve been looking for, but I’m a novice to flash and scripting. How do I get one specific menu bar to be disabled; to be seen, but not drop down when mouse rollover?