dcsimg
A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Question about menu

  1. #1

  2. #2
    that guy
    Join Date
    Dec 2006
    Posts
    24
    functionality wise, that is highly similar to the "accordian component" that was released in MX 2004 (i'm fairly certain that was the first instance of that component).
    The problem with doing nothing, is you never really know when you're finished.

  3. #3
    All 1s and 0s dmonkey's Avatar
    Join Date
    Nov 2005
    Location
    Leeds, UK
    Posts
    606
    Hi,

    Is this any help? It's commented, but let me know if you have any questions. It might not be the most elegant solution - it was made pretty hastily - but let me know if it's close to what you need.

    Hope this help.
    Attached Files Attached Files
    "If I have seen further, it is by standing on the shoulders of giants." - Sir Isaac Newton

  4. #4
    Senior Mamba austriaman's Avatar
    Join Date
    Aug 2004
    Location
    Somewhere over the rainbow
    Posts
    472
    Quote Originally Posted by dmonkey
    Hi,

    Is this any help? It's commented, but let me know if you have any questions. It might not be the most elegant solution - it was made pretty hastily - but let me know if it's close to what you need.

    Hope this help.
    Right on!

    Thanks a bunch,

    aut.

    [EDIT] How would you go about altering the size of the sections? [/EDIT]

  5. #5
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    sorry to bring up this old thread, but can this be flipped on it's side?
    I've tried replacing all the x's with y's, and y's with x's, and swapping all the widths and heights, etc...but no luck...

    Any help would be appreicated...
    This accordian style menu is the best I've seen around here and on other sites...
    cheers
    Jeff

  6. #6
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    *bump!

  7. #7
    All 1s and 0s dmonkey's Avatar
    Join Date
    Nov 2005
    Location
    Leeds, UK
    Posts
    606
    Hi,

    I did as you suggested (just changed x to y and vice versa) and its working fine! The only problem was to change the code to create the mask. Here is the altered version.

    Unfortunately since I'm using CS3, I can't save to mx2004 format, so I hope you at least have version 8! Just in case you haven't, I'll post the code too.

    code:

    //***************************//
    // Menu System --------------//
    //***************************//

    /*Set up some variables to control the layout, animation etc.*/

    //Layout vars
    //separation between sections
    var sep:Number = 20;

    //Animation vars
    //speed
    var speed:Number = 10;

    /*Set the inital positions of the sections*/
    //Move the section viewer to where you want it on the stage
    sec_viewer._x = 0;
    sec_viewer._y = 0;
    //Loop through the individual sections placing them in the correct positions
    for (var i:Number = 0; i < 4; i++) {
    //target the correct section
    var cs:MovieClip = this.sec_viewer["s"+(i+1)];
    //Assign a var to the section to tell it which number it is;
    cs.id = i;
    //Move it into position
    cs._y = cs._height / 2;
    if (i != 0) {
    cs._x = cs._width*1.5 + (i-1)*sep;
    } else {
    cs._x = cs._width/2;
    }
    /*Set the onPress behaviour*/
    cs.onPress = function() {
    openSection(this.id);
    }
    }

    /*Create a mask of the right size*/
    var mask:MovieClip = this.createEmptyMovieClip("mask", this.getNextHighestDepth());
    mask.beginFill(0, 100);
    mask.lineTo(sec_viewer.s1._width+3*sep, 0);
    mask.lineTo(sec_viewer.s1._width+3*sep, sec_viewer._height);
    mask.lineTo(0, sec_viewer._height);
    mask.lineTo(0,0);
    mask.endFill();

    /*Attach the mask*/
    sec_viewer.setMask(mask);

    /*The openSection function which controle the animation*/
    function openSection(id:Number) {
    for (var i:Number = 0; i < 4; i++) {
    //target the section
    var cs:MovieClip = this.sec_viewer["s"+(i+1)];
    //If id <= i; place at the top of the viewer
    if (i <= id) {
    cs.targetX = cs._width/2 + i * sep;
    } else {
    cs.targetX = cs._width*1.5 + (i-1)*sep;
    }
    }
    //Set onEnterFrame
    this.onEnterFrame = function() {
    //We want to count how many sections have reached their target so we can
    //cancel the onEnterFrame
    var counter = 0;
    for (var i:Number = 0; i < 4; i++) {
    //target the section
    var cs:MovieClip = this.sec_viewer["s"+(i+1)];
    //if we aren't at the target y, move towards it with some speed
    if (Math.abs(cs._x - cs.targetX) > 1) {
    //If there is more than 1 unit to go, then move
    cs._x -= (cs._x - cs.targetX)/speed;
    } else {
    //If we are close enough, then move to the end
    //position and increment the counter
    cs._x = cs.targetX;
    counter++;
    }
    }
    //If all sections are in position, delete the onEnterFrame
    if (counter == 4) {
    delete this.onEnterFrame;
    }
    }
    }



    Hope this helps.
    Attached Files Attached Files
    Last edited by dmonkey; 09-29-2007 at 06:22 AM.
    "If I have seen further, it is by standing on the shoulders of giants." - Sir Isaac Newton

  8. #8
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    thats great...many thanks!

  9. #9
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    If I wanted to single out a specific area of the menu to use as a button, rather than one whole section, how would I do that?
    I've got some icons which I'm using as 'labels', which are placed on the edge of each section, (in place of where the text is in the above example .fla), all with the instance name 'icon'.
    Here's my code for the open section part...
    code:

    /*Set the onPress behaviour*/
    cs.icon.onPress = function() {
    openSection(this.id);
    }


    This however opens up the last section, no matter which icon you click on. I've tried each icon having a different instance name, and tried various other things but not had any luck yet...
    any ideas?

  10. #10
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    hurrrahhhh!

    I've sorted it...
    As well as my post above, this is what I needed to change...
    code:

    //Assign a var to the section to tell it which number it is;
    cs.icon.id = i;


    adding the 'icon' bit in here made it work...



    yay! - onwards towards my next problem now!!!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center