Animated dropdown menu

I’d like to have a dropdown menu that “settles” into postion.

i.e. the list drops to it’s full length, and has a slight “bounce” before coming to a complete rest.

I’m sure I can do this with keyframes and tweening, but is there an actionscript method to do it smoothly? Does it make sense to do it this way?


I think theres a tutorial that gives a bounce effect on this site, all I know is it has something to do with inertia, and physics. So check it out, pretty advanced though.

Hope this helps.


a simple shape tween will do. Here’s a quick way.

-draw a square.
-add a keyframe on frame 12.
-on frame 12, reposition your square to what will be it’s final position.
-select the square on frame 12 and do EDIT, COPY
-click on frame1 and make this a SHAPE TWEEN with EASE set to 100.
so far so good.

-Right click on frame 15 and select Insert Keyframe.
-On frame 15, drag the right and left side of the square outwards, giving it a bow effect.
-Select the square and shorten its height a bit.
-Reposition square so the baseline is in the appropriate location.
click on frame 12 and select shape tween again, no EASE needed this time.
-right click on frame 16 and select blank keyframe

there you go!

now, just add that movie clip to your button’s over state, which is a whole different story.

couple of things. It is easier to just animate the box without clickable buttons inside it, although you can do the whole effect tha way if you wish. Just a matter of taste…

shorter animations/transitions for this kind of thing tend to look best. The user should be able to quickly “browse” through clickable areas without having to wait for a panel to slide out for 2 seconds.

Good luck.

i personally am of the opinion that actionscripting can get to “flashy and busy” to quickly with no real benefit to the piece. i think you would do well to read the above message and do what you can with shape and or motion tweening. actionscripting with physics and movement variables is fine to do special effects especially when one is trying to show off one’s l33t coding skillz but to save you the headache i think you should avoid the flash math … heh … unless you like that sorta thing :slight_smile:

It’s doable with AS (hey, I wrote that tute, what wasn’t clear about it? :stuck_out_tongue: ) but definitely go for the tweens. The only advantage I see for AS is that you can change the behaviour very easily, but you’ll have to deal with different menu length and everything…

pom :asian:

It might need to be a little more complicated than a shape tween, unfortunately. My design has techie theme using PDA-ish menus.


I’m working on a splash homepage that has site-wide navigation. I was thinking about taking the leftnav “PDA” shape and making it work as a dropdown menu.

I probably won’t go this direction anyway, it’s seems too superfluous. I do want to put in some subtle animation for effect, since my design for the previous event’s website featured that (see: and I think it can add a nice visual flair.

Maybe just some blinking LEDs or something. I was thinking about some randomly generated ASCII characters in a single-line display area to represent a transmitted data stream. How hard would that be?

This is a bit funny. I’m not preaching one vs the other. I love AS, but sometimes we try to get some complicated script in AS to do something that could simply be accomplished with easier methods. The end result should not be whether or not you used one or the other. It should be whether you achieved the desired result or not.

Check Thor’s tutorial ‘Cycling random letters’. You shoud get a good start.

pom :asian: