13 Replies Latest reply on Apr 8, 2008 1:47 PM by kglad

    animated drop down menu

    yogi bear Level 1
      At this point I can make a menu by looping through an array to make a drop down menu list. What I want to to is have each menu item appear as if it were on the next frame of the timeline so it is smoothly animated as it drops down. What would be the next step in doing this with action script? Is it with a timing function or tweening function or something else that could be set in with the iteration of the menu items? Any direction or example would be helpful.

        • 1. Re: animated drop down menu
          kglad Adobe Community Professional & MVP
          you can use a loop like setInterval() or onEnterFrame to repeatedly update the _x or _y (or both) properties of your menu items to make them appear to animate.
          • 2. Re: animated drop down menu
            yogi bear Level 1
            something like below or is it a function inside function set up or other structure:
            function buildResMenu(){
            var xSpacing:Number = 0;
            var ySpacing:Number = 18;
            var xStart:Number = 200;
            var yStart:Number = 120;
            this.onEnterFrame = function(){
            for (i=1; i<12; i++) {
            var name:String = "menuTwo" + i + "_mc";
            _root.attachMovie("flipper", name, i);
            _root[name]._x = xStart;
            _root[name]._y.onEnterFrame = (i * ySpacing) + yStart;
            }
            }
            }

            thanks for your help. Designer comitting programming.
            • 3. Re: animated drop down menu
              kglad Adobe Community Professional & MVP
              that's not going to work.

              start your loop when you want to animate your menu items. that would typically be triggered by a mouse event.
              • 4. Re: animated drop down menu
                yogi bear Level 1
                I have a button that when dragged over sends the clip to the next frame where this action script is played so it is
                trigged by a mouse event. The concept I don't get is how enterFrame relates to the loop and where.

                Thanks,
                • 5. Re: animated drop down menu
                  kglad Adobe Community Professional & MVP
                  your onEnterFrame function IS a loop. its name is misleading.

                  the code within an onEnterFrame function does NOT execute once when the playhead enters that frame. the code within an onEnterFrame function is executed repeatedly each time the playhead changes frame or would change frame if it were playing along a timeline with no stops.

                  ie, onEnterFrame executes as many times per second as your _level0 fps setting whether the playhead is stopped or not.
                  • 6. Re: animated drop down menu
                    yogi bear Level 1
                    I've gotten this far where I have the menu items working O.K. but have 2 problems.

                    1. I can't pass the projectID anymore with this structure and don't understand what syntax to use or where I'm going wrong and...
                    2. I get an instant of the master running down the side at x=0 and can't figure out where that is.

                    Any help is appreciated

                    var counter:Number = 1;
                    attachMovie("master", "master", 0);
                    master.dx = 0;
                    master.dy = 18;
                    master.onEnterFrame = function() {
                    this._x += this.dx;
                    this._y += this.dy;

                    if (this._y < 0) {
                    this._y = 0;
                    this.dy *= -1;
                    }
                    if(counter<resMenu.length +1){
                    var copy:MovieClip = attachMovie("master", "copy" + counter, counter++);
                    copy._x = 120;
                    copy._y = this._y;
                    copy.main_text.text = resMenu[counter-2][0];
                    copy.projectID = resMenu[counter-2][1];
                    copy._alpha = 2;


                    copy.onEnterFrame = function() {
                    var alphaVal =5;
                    if (this._alpha<99){
                    return this._alpha += alphaVal;

                    _root["copy" + counter].item_btn.onPress = function () {
                    itemProjectClicked (this._parent.projectID);


                    }


                    }
                    }
                    };
                    };

                    • 7. Re: animated drop down menu
                      kglad Adobe Community Professional & MVP
                      the copy.onEnterFrame looks pretty screwy. it looks like it executes once and then stops. which isn't all bad because you don't need to repeatedly execute that onPress assignment. but i'm pretty sure it's not doing whatever you want it to do.
                      • 8. Re: animated drop down menu
                        yogi bear Level 1
                        The copy.onEnterFrame function fades the menu items in all right. But I can't get the next function to pass the variable. I know things don't work right but can't seem to find a tutorial on this kind of animated drop down menu so am going by trail and error.
                        • 9. Re: animated drop down menu
                          kglad Adobe Community Professional & MVP
                          pass a reference to that variable to _root["copy" + counter].item_btn
                          • 10. Re: animated drop down menu
                            yogi bear Level 1
                            I thought that:

                            _root["copy" + counter].item_btn.onPress = function () {
                            itemProjectClicked (this._parent.projectID);

                            was passed the variable: copy.projectID = resMenu[counter-2][1];

                            with the data for each iteration of copy, i.e., copy1, copy 2, etc.




                            • 11. Re: animated drop down menu
                              kglad Adobe Community Professional & MVP
                              like so:

                              • 12. Re: animated drop down menu
                                yogi bear Level 1
                                Hi Kglad,

                                Tried that code this weekend myself and it didn't work. I've got other fish I need to fry now but will be back at this in a few days -- maybe with a new approach. In the meantime thanks for your time and attention to this problem. These forums are really useful.


                                • 13. Re: animated drop down menu
                                  kglad Adobe Community Professional & MVP
                                  you're welcome.