Stickman - "Barney's Menu" for Flash 4

TUTORIAL INFO
Version Flash 4 Difficulty Advanced Created 5th June 2000

OTHER LANGUAGES

Français

Português / Brasileiro

DOWNLOAD
ZIP	FLA

A lively discussion on We're Here prompted me to put together this file, to show how to achieve something like the menu at Barney's -- a stunning piece of work by the guys at PrayStation. You can download an example file in zip form here.

What's all the fuss about?

The menu is clever in that the 'menu boxes' -- marked here as Box 1 to Box 5 -- can be shifted around independently of the 'content areas' -- here marked Menu 1 to Menu 5. If you drop a box outside the content area (in the empty box below) then it will remain on screen even when you move to a different content area, but drop it back in the main menu area and it'll return smoothly to its default location.

How does it work?

I'm not going to go into a step-by-step tutorial for this one -- it'd take too long -- but here's a brief summary...

First of all the main 'content areas'. Rather than have one huge, long movie clip (which would be a pain to edit) each content area is a separate movie clip, called Menu 1 to Menu 5. We then use actionscript to reposition them in a row -- they're all the same width so we can just have a loop to do this (it's in the control movie clip).

When we click on a button to move to a new content area, the smooth movement is achieved by working out the 'target' point (the menu number, minus one -- because menu1 is at 0 -- multiplied by the width of the menu) and then moving the menu a fraction of the distance between this point and the current position. If you look in the actions layer of hte main timeline, you'll see a variable called Speed_menu, which sets the speed that the menu will travel -- a higher number means slower movement. The control movie clip keeps checking the position of the menu in relation to its target position (once per frame), and subtracting a fraction (difference / speed_menu) from that distance. If you change the destination point before the menu arrives there, it will simply change its velocity and/or direction accordingly.

What about those funny little boxes?

The draggable menu boxes work in a similar way, but they're slightly more complicated because their position is tied to the position of the main content areas. The variable /:current_position stores the x coordinate of the first content area (Menu 1), and all other positions are worked out in relation to this point. When the main menu moves, all of these menu boxes move with it, unless a menu's internal variable in_menu is set to zero, meaning it's been dragged to below the buttons. Like the content areas, it compares the box's current position with its target position and subtracts a fraction of that distance.

The variable /:Speed_box stores the amount by which the distance will be divided, however this is affected by the movement of the content areas so finding the correct value to get a smooth movement is open to experimentation.

That's it?