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.

71 replies
  1. lm
    lm says:

    Unfortunately my Flash MX2004 doesn’t recognize the file format. :( What Flash version this Menu is made for?

    Reply
  2. lm
    lm says:

    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 :(

    Reply
  3. Ivan M.
    Ivan M. says:

    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).

    Reply
  4. lm
    lm says:

    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 :)

    Reply
  5. babali
    babali says:

    Bonsoir,
    J’étais à la recherce de ce type d’effet, cependant le lien indiqué retourne un lien mort.

    Reply
  6. babali
    babali says:

    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

    Reply
  7. trs
    trs says:

    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.

    Reply
  8. arch8
    arch8 says:

    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?

    Reply
  9. Brett The Flash Accordion
    Brett The Flash Accordion says:

    Very useful menu! Thanks for publishing this. Here’s a link to a more basic accordion menu that works well for navigation. Cheers, Brett

    Reply
  10. Chouquette
    Chouquette says:

    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.

    Reply
  11. popljubo
    popljubo says:

    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

    Reply
  12. lm
    lm says:

    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!

    Reply
  13. popljubo
    popljubo says:

    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.

    Reply
  14. Ritz
    Ritz says:

    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.

    Reply
  15. Vij
    Vij says:

    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

    Reply
  16. marco
    marco says:

    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.

    Reply
  17. M.S.
    M.S. says:

    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!

    Reply
  18. Marth
    Marth says:

    You may need to change your script in main accordion.swf – it has something with _root and this.create zzzz, I think …

    Reply
  19. maria
    maria says:

    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

    Reply
  20. popljubo
    popljubo says:

    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 [!?]

    Reply
  21. mykimar
    mykimar says:

    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

    Reply
  22. Gino
    Gino says:

    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

    Reply
  23. familydog
    familydog says:

    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

    Reply
  24. kesit
    kesit says:

    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!

    Reply
  25. grutzi
    grutzi says:

    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

    Reply
  26. grutzi
    grutzi says:

    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.

    Reply
  27. grutzi
    grutzi says:

    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

    Reply
  28. grutzi
    grutzi says:

    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

    Reply
  29. rlqb
    rlqb says:

    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.

    Reply
  30. vanina
    vanina says:

    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.

    Reply
  31. muiiio
    muiiio says:

    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 :)

    Reply
  32. Rosario
    Rosario says:

    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!

    Reply
  33. Jimbo
    Jimbo says:

    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?

    Reply
  34. Ivan M.
    Ivan M. says:

    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 …

    Reply
  35. Jimbo
    Jimbo says:

    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.

    Reply
  36. Dorothy
    Dorothy says:

    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!

    Reply
  37. shallimar
    shallimar says:

    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?

    Reply
  38. sydney
    sydney says:

    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

    Reply
  39. ratan jaiswal
    ratan jaiswal says:

    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

    Reply
  40. rosario
    rosario says:

    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

    Reply
  41. Branelsia Hart
    Branelsia Hart says:

    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.

    Reply
  42. Paulo R.
    Paulo R. says:

    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.

    Reply
  43. Pepe
    Pepe says:

    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…

    Reply
  44. Armond
    Armond says:

    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.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>