Accordion Style Flash Menu
The code is very old but guess what … it’s working and it looks beautiful.
With some basic Flash knowledge, you can easily change the size of the movie, change images, add additional buttons, movie clips, animations, …
Update, March 14th, 2008: NOTE: You may NOT Redistribute Source files from your own site. You must link to the page where the source file is located.
Download Flash source .fla file – Flash 8 and Flash MX 2004 .fla files included (Thanks to popljubo for MX Version)
I will appreciate if you can spread the word via social media websites, Thank you.
Thanks, thats just what I need :)
good jobs!
Great menu y useful for apply!
Muchas gracias!
Unfortunately my Flash MX2004 doesn’t recognize the file format. :( What Flash version this Menu is made for?
It’s Flash 8 fla format.
thank you, :)
now i guess i need to find somebody who can save it for MX 2004: it would be my only chance :(
by any chance could you please,please convert the source file to be usable in MX 2004( if there not much trouble)? :)
I’ve found people with Flash version CS3 but this version would do only for Flash 8, which i haven’t got :(
Sorry, my Flash is also CS3. You need to find someone with Flash 8 to convert it to Flash MX (also when converting change settings for ActionScript version to ActionScript 1.0).
I hope to get access to the comp with flash CS3 so in any case thank you for your promptly answers.
In general this website is an excellent source or web resources: nicely done and with good access to information.
Thanks again :)
Bonsoir,
J’étais à la recherce de ce type d’effet, cependant le lien indiqué retourne un lien mort.
Bonsoir,
Le lien sur le fichier est un lien mort et renvoie une erreur 404. Serait il possible de le réceptionner par email ?
Merci
hola ! me parece genial el documento me está facilitando el trabajo muchísimo (aunque también me está dando más de un quebradero de cabeza.. jaja).
Estoy intentando que una vez abierto el menú cargue un swf externo (según el menú) pero no sé por qué siempre me carga el swf numero 7 (he adaptado la web a 7 secciones).
El código lo he modificado de la siguiente forma:
stop();
speed = 5;
initial_width = 75;
target_width = 800;
sp = rect1._x;
this.createEmptyMovieClip(“emptymc”, 0);
emptymc.onEnterFrame = function() {
for (i=1; i<=7; i++) {
if (_root.hit.hitTest(_root._xmouse, _root._ymouse, true)) {
if (_root["rect"+i].hitTest(_root._xmouse, _root._ymouse, true)) {
new_x = (_root.sp-(75*(i-1)))-rect1._x;
rect1._x += new_x/speed;
n_width = target_width-_root["rect"+i]._width;
_root["rect"+i]._width += n_width/speed;
} else {
n_width2 = initial_width-_root["rect"+i]._width;
_root["rect"+i]._width += n_width2/speed;
}
} else {
new_x = _root.sp-rect1._x;
rect1._x += new_x/(speed+50);
n_width2 = initial_width-_root["rect"+i]._width;
_root["rect"+i]._width += n_width2/(speed-1);
_root.mc.loadMovie(“vinos”+i+”.swf”, 0);
}
_root["rect"+(i+1)]._x = _root["rect"+i]._x+_root["rect"+i]._width;
_root["movie"+i]._x = _root["rect"+i]._x-1;
}
};
¡Gracias de antemano por echarme un cable! tengo la cabeza como un bombo y no sé qué puedo hacer :S
trs.
I would like to modify this code so that I could add a back to main menu button on each page. So basically nothing would happen when you rolloff the top menu bar until you hit the back ot menu button that i would place on each page.
what part of the code i need to adjust to make this happen?
anyone with as3 version of this?
i really would love to see how the code works thanks
eu gostaria de ver a linha de codigo desse menu!
……. simples e muito estiloso
Very useful menu! Thanks for publishing this. Here’s a link to a more basic accordion menu that works well for navigation. Cheers, Brett
Bonjour,
e serais également intéressé pour recevoir ce menu horizontal qui comporte le gros avantage de présenter les titres aussi à l’horizontal.
Merci d’avance Charlie.
nice work!
hey “lm” do you still need MX 2004 vers. of this work!?
send me a msg at “popljuboatgmaildotcom” I’ll save the file for you
hi, popljubo, I’ve sent you email, thank you!
It would be nice to get this 2004 version file because then I have plenty of time to work on it instead borrowing some time on another comp ( with Flash 8 version). So, thanks again!
You are welcome!
One thing: during the Save As action I receive compatibility msg of lost Advanced/Custom Anti-Aliasing containing data. Also, a capture of that msg is included in my reply.
Muchas Gracias por el Flash!!!!!
its similar to fameid menu
Alguien puede publicar otro enlace de descarga que aparece error porfa
como puedo agregar otra seccion del menu??
how can i add another three tabs? the code’s been given me a bit of a trouble and i can’t find a way to sort it out.
Hi
Thanks for this tutorials .I was looking for this kind for long .
I would be dam thankful to u if u could tell me some tutorials to build an accordion with images without using xml.
Thanks once again
Regards
Vij
Est ce possible d’avoir le swf??
J’ai mx 2004 et le swf me permettrait de le convertir et de l’utiliser!
@willo
Download file updated, now it also includes Flash MX 2004 .fla file, thanks to popljubo.
I am trying to fit it in 800 x 600 ( I can change images and initial widht at 133) but the buttons are not working properly.
Hi would someone please explain me the code couse I’m stil learning …
Thanks ..
Regards
I would like to use this menu inside my main swf file, I’ve been trying to change the paths to make it work but i just can’t, the code in my main file is this…
createEmptyMovieClip(“menu_mc”,this.getNextHighestDepth());
menu_mc._x = 0;
menu_mc._y = 460;
loadMovie(“accordion.swf”, menu_mc);
If i apply the loadMovie without creating an emptymovieclip, it works, but then the accordion will be on the top left corner, and what i need is to place it where i want, so if i make an emptymovieclip and place it where i want, then it shows up but the hit area doesn’t work. that’s why i thought i need to change the paths but i’ve tried everything i can think of and it does not work. please, help!
You may need to change your script in main accordion.swf – it has something with _root and this.create zzzz, I think …
gracias por este acordion pero quisiera saber como puedo colocar 4 pestañas mas por que ya logre modificarls otras pero no puedo hacer esa parte y tambien como pude moverlas de lugar por ejemplo antes de la primera quiero colocar otras , ya lo intente y se quedan estaticas , algo aver hecho mal agradecere su ayuda de todo corazón gracias
esta bien shido el menu pero kiero que me digan
como modificarlo y agregar otras pestañas
hi raymon,
the link working for me …
“accordion_style_free_flash_menu-v2b.zip”
maybe it’s not bad idea to clear/empty your browser cache [!?]
hola muy bueno el Accordion Style Flash Menu, pero quiero modificarlo para q sea de forma vertical diganme como puedo modificarlo, si alguien tiene el codigo por favor envienmelo a mi correo o ponganlo aqui por favor, se los agradezco mucho
===============================================================
hi very good Accordion Style Flash Menu, but I want to modify q either vertical Can anybody help me change it, if someone has the code please envienmelo my mail or Put here please, be much appreciate
Can you please post the code for Action Script 3.0
I would like to use it in a web application.
But the flash accordion component does not support AS3.0
Can you please help me to convert this AS2.0 code to AS3.0
Thanks in advance
Thank you so much… I was searchin for an horizontal accordion menu which would slide in both direction (right-left) since a long time, and this is almost perfect!
Anyway I’m trying to customize it without great result! :(
My target is:
- to click on a panel and to keep it open;
- to load on the opened panel an interface (scrolling text, buttons, video);
- to edit the sliding motion so that also the movie1 (first panel from the right) would slide on the left, calculating distance from the center of the movie (now I suppose it calculate the slide starting from the x coordinate of movie1, so that clicking on it, it doesn’t move).
Thanks in advance, thanks anyway… for any hint
Hi. Anyoner have the CS3 ver for this..
answer (might help)
change:
_root["rect"+i]….
to
_root.menu_mc["rect"+i]
it might help for your problem
———————————————————————————
I would like to use this menu inside my main swf file, I’ve been trying to change the paths to make it work but i just can’t, the code in my main file is this…
createEmptyMovieClip(”menu_mc”,this.getNextHighestDepth());
menu_mc._x = 0;
menu_mc._y = 460;
loadMovie(”accordion.swf”, menu_mc);
If i apply the loadMovie without creating an emptymovieclip, it works, but then the accordion will be on the top left corner, and what i need is to place it where i want, so if i make an emptymovieclip and place it where i want, then it shows up but the hit area doesn’t work. that’s why i thought i need to change the paths but i’ve tried everything i can think of and it does not work. please, help!
Thank you very very
Really great work. God bless you!
tks a lot.
hello
what a nice work ! thanks
I am trying to add some more images, to have like 7 menu.
I modified the code :
for (i=1; i<=7; i++) {
i also made a MC “movie7″. but the 7th menu isn’t integrated in the mouvement.
i saw that there is the MC box, which is repeat 6 times, for the 6 menu, but I can’t find them “physically”, I can see them only in the movie explorer.
I think I have to make a new MC called box … but if I can’t find the first one, how can I do that ?
sorry for my english… I hope someone understand my question and can help me.
thank you
so sorry for my first post….
i found the answer… i duplicate the MC box and symply gave him the name rect7.
thank you for this good work.
it’s me again…
so i managed to have a 7th image which moves with the 6 first one. but when i pass on the top of the 7th image with the mouse, nothing happen.
i changed the size of the MC hit, and of the MC Box. is there something to change in the code for that ? i can’t find it.
does someone knows how to do that ?
thank you
Everything seems to be OK, except you might need to go into the ‘MC hit’ and add another layer and shape and resize it that way (by adding another shape area)
As I’m not sure what is wrong with your file, here is flash source file with 7 movies/images in it
http://www.visual-blast.com/source/flash/accordion_style_free_flash_menu_7movies.rar
Hope it helps :)
hi Ivan M.
thanks for your answer.
i added another shape in the MC hit… it didn’t work…
but maybe the size of the document was wrong…
i’ll try to add another 8 image, and see if i can do it this time :-)
thank you so much
thank you for this good work. Thnkxx
Hi evryone,
i created a button over the text home, but when i put the mouse over to other menu, like “about”for example, my “home button” placed over to “äbout” text menu.
How can i debug a script to my buttons to follow the movement of menu animations.
If some one publicate the script to solve this question was easyer because i’m started ti use flash recently.
thanks evrybody and sorry for the english.
hola la verdad que esta buenisimo el menu, pude modificarle muchas cosas pero estoy teniendo problemas para tratar de que se abran las pestañas haciendo click ya que si pongo algun contenido y se mueve la flecha se cierra la pestaña y no se puede leer. Mi pedido es si pueden pasarme el código para lograr esto o si tengo que utilizar botones u otras cosas.
Desde ya muchas gracias.
AS3 translation (as adapted for my project):
—————————
stop();
var myRoot:MovieClip = this;
var speed = 7;
var initialwidth = 115;
var targetwidth = 500;
var sp = rect1.x;
var emptymc:MovieClip = new MovieClip();
emptymc.addEventListener(Event.ENTER_FRAME, emptymcFunction);
function emptymcFunction(e:Event):void
{
for (var i=1; i<=6; i++)
{
if (myRoot.hit.hitTestPoint(myRoot.mouseX, myRoot.mouseY, true))
{
if (myRoot["rect"+i].hitTestPoint(myRoot.mouseX, myRoot.mouseY, true))
{
var newx = (myRoot.sp-(75*(i-1)))-rect1.x;
rect1.x += newx/speed;
var nwidth = targetwidth-myRoot["rect"+i].width;
myRoot["rect"+i].width += nwidth/speed;
}
else
{
var nwidth2 = initialwidth-myRoot["rect"+i].width;
myRoot["rect"+i].width += nwidth2/speed;
}
}
else
{
newx = myRoot.sp-rect1.x;
rect1.x += newx/(speed+50);
nwidth2 = initialwidth-myRoot["rect"+i].width;
myRoot["rect"+i].width += nwidth2/(speed-1);
}
if(i < 6)
{
myRoot["rect"+(i+1)].x = myRoot["rect"+i].x+myRoot["rect"+i].width;
}
myRoot["movie"+(i)].x = myRoot["rect"+i].x-1;
}
};
—————————
There is a slight problem here, which also exists in the original AS2 version. If you expand the rightmost bar, then let it collapse back, but VERY quickly go back into the active area before it has managed to collapse, it gets stuck. This is due to the “box” mc’s (rect[i]), as they move to the left and leave an uncovered area. I still have not managed to sort it out. Other than that – beautiful script :)
Nice flash GJ
thanks wery nice
I must use this accordion menu into a movie clip. When I do it, the accordion menu does not work.
My movie clip has a instance name (menu).
In the AS, I change all “_root” whit “_root.menu” but there’s always some problem.
Can Someone help me?
The original code is:
stop();
speed = 20;
initial_height = 20;
target_height = 205;
sp = rect1._y;
this.createEmptyMovieClip(“emptymc”, 0);
emptymc.onEnterFrame = function() {
for (i=1; i<=10; i++) {
if (_root.hit.hitTest(_root._xmouse, _root._ymouse, true)) {
if (_root["rect"+i].hitTest(_root._xmouse, _root._ymouse, true)) {
new_y = (_root.sp-(20*(i-1)))-rect1._y;
rect1._y += new_y/speed;
n_height = target_height-_root["rect"+i]._height;
_root["rect"+i]._height += n_height/speed;
} else {
n_height2 = initial_height-_root["rect"+i]._height;
_root["rect"+i]._height += n_height2/speed;
}
} else {
new_y = _root.sp-rect1._y;
rect1._y += new_y/(speed+50);
n_height2 = initial_height-_root["rect"+i]._height;
_root["rect"+i]._height += n_height2/(speed-1);
}
_root["rect"+(i+1)]._y = _root["rect"+i]._y+_root["rect"+i]._height;
_root["movie"+i]._y = _root["rect"+i]._y-1;
}
};
Thanks!
Excellent flash menu.
Just one question (and apologies if this is obvious) how do I change the height of the hit area so the user can rollover a larger part of the image to expand it? I want it so the user can rollover the top two thirds or even the full image rather than just the 50px strip along the top
I have tried to expand the ‘hit’ mc height but this does not work.
Any ideas?
After expanding the ‘hit’ mc height, go to ‘boxes’ layer, double click on the movie area and expand the shape to the same height, that’s all …
Thanks Ivan.
Don’t know how I missed that. I was looking for a more complex reason when it was right under my nose! Thanks again.
Hey fantastic job done…
I was looking for same effect for quite a long time.
thanks a ton
Hi there
fantastic accordion! Just having the same problem as Rasario (post on August 26th, 2009 at 9:57) – with putting the accordion into a Movie Clip – do you have any suggestions. Thank you!
This is great…
I love it so much.
Thanx a lot
hi this is beautiful menu, but i dont know how to add link. When i click on home or first image, i want to open home page, Do you have any advice?
I think you menu is terrific. !
At 69 years of age I am a newbie with Flash, if you could supply a tutorial, on how to adjust the code if one wants to add more than 6 items to the accordion.
Or…if you can email me some information on how to do it, I would be grateful.
Thanks in advance.
Sydney
hi
its very good thanks for publishing it but i have one question if any body can answer will be very much appriciated i want this to play automatically when the movie load as well as when mouse hits needs both feature i hope u can understand whwt i m trying to say
what’s the code for onmouse down for each button? for example, if i want to go to a next scene?
hola.. muy buen menu!!
pero queria saber como se puede hacer para modificar el acordion. Es decir.. en vez de que valla hacia la izquierda.. se apilen hacia la derecha… dejando la seccion de contacto por debajo de todo y home por encima de todo,
espero que se entienda y MUCHISIMAS GRACIAS
I love this. I want to use it on a site I am currently working on, but I am running into a problem. The first scene is bleeding through on to the second, it eventually disappears, but I don’t know how to fix it. Can you help me and tell me what the problem is? I need to get this fix rather quickly, any assistance would be greater appreciated.
This is why I got into this business! OPEN SOURCE!
Thanks a million!
The menu is very nice and a great job! Thanks.
I know how to change the images, but i don’t kwnow how to get/add buttons to work.
Can anybody help me on this.
I’m using flash 8 version of the menu – the downloaded version of the file doesn´’t have clickable buttons.
I will be very grateful for your help.
Very nice menu. I’ve been able to modify it for my proyect and add some tabs, etc. and it works great but i don´t know how to do the main thing: adding links to the different sections of the site from this menu. Can anyone one, please, help me? Thanks in advance…
Hi, nice job dude,I really liked your work and i appreciate it but i have some problems using it inside my flash i am using flash CS5 but i am using As2 but when i copy it inside stage it doesn’t work i would be very thankful if you send me some solution by the way my stage width is 1024.
thank you very much i am looking forward to hear from you.