Sliding menu

TUTORIAL INFO  Version Flash 3 Difficulty Advanced

DOWNLOAD  ZIP FLA

Why?

Someone on Flashpad asked if would be possible to emulate this (Shockwave) sliding menu on whereishere.com. I rashly said yes, it would be possible - or at least do something like it. I was right, but it involved quite a lot of headscratching. It's not 100% bug-free, but it's pretty close.

Here's the .fla file in .zip form.

How?

Hold on to your mouse, this takes a bit of explaining...

First of all, let's summarise what we want to do:

• Create a long, thin menu of pictures running along the bottom of the scene, which can be made to scroll left or right by holding down the mouse in the upper area and moving it left or right.

So let's think through what needs to be done:

• Create an animation of a menu scrolling left to right
• Make (invisible) buttons in the top portion that, when you move the mouse, tell the menu to either go left or right (ie. step forward or back a frame in the scrolling animation) depending on which direction you move.

But it's more complicated than that

For a start, your buttons have to recognise that the position of the mouse is the 'centre' of you movement. Only when you move left or right should the menu move. So, we need to create left and right buttons that will always be either side of the mouse cursor. This is not easy in Flash, because there is no direct way to track mouse movement.

So how's it done?

Basically, I set up a system whereby there are three active areas at any given time: a button to move left, a 'dead area' in which the mouse sits, and a button to move right. When the mouse moves out of its 'dead area', say to the right, the button moves the menu to the right but also moves the three areas to the right. As a result, the mouse is now back in its 'dead area', and the buttons to move left and right have moved so that they are the same distance away as they were before.

Look at this version of the same file, where I've made the three areas visible (left=blue, dead area=red, right=green). Note that to start with the whole screen is red - this is the intial set of buttons (narrow vertical strips) which detect the starting position of the mouse and set up the left, centre and right buttons in the correct location when the mouse is first clicked)

[Note: you'll notice it gets stuck sometimes - this is a bug. If you have any suggestions as to how to fix this, I'll be happy to hear them...]

Hopefully you can now see what's going on.

So how does it work?

The main action goes on in the movie clip called drag. The first frame has a Stop action to prevent the clip playing immediately. The first frame of the layer start contains a series of tall, narrow buttons - 20 pixels wide. Each one has an action that sends you to the frame of the clip where the 'dead area' is under the mouse and the left and right buttons are either side (which is what happens in the layer Button movement).

Note that all the buttons in this clip are set to Track as Menu Item. Normally (ie. when it is assigned to Track as Button), when the mouse is clicked and help down, this is recognised only by the button it is 'over' when clicked -- if you were to drag it over another button, it would ignore the fact that the mouse button is being held down until you 'clicked' again. With Track as Menu Item a button will always recognise that the mouse button is held down.

So you click on one of the buttons in the first frame and it sends you to another frame where the mouse in its dead area and the left and right buttons (actually movie clips) are either side. Now, if you move to the left for example, you pass over the movie clip Moveleft. This movie clip contains a button with a complicated set of actions...

Firstly, it uses Tell Target to tell itself (/drag) to go to the previous frame (ie. move left). This is to keep the 'dead area' underneath the mouse. Next it uses another Tell Target telling the menu (/menu) to go to the previous frame (ie. move to the left). All this only happens On (Drag Over), ie when the mouse moves over the button with its button held down. The final action ensures that if the mouse button is released, it returns to the first frame of drag, with the 20 narrow buttons.

The layer Big background button has a huge button that, when rolled over, sends the movie clip back to frame one.

Why are Moveleft and Moveright movie clips and not buttons?

Hmm...tricky to explain. If you look closely at Moveleft and Moveright you'll notice that they each have two frames and two layers. In each frame there are two buttons (two instances of the button MoveLeftButton or MoveRightButton) with the same properties, one of which is directly above the other. In the next frame, the buttons swap positions. Basically if you don't do this, Flash will not recognise the mouse 'dragging over' the button more than once - once it's inside, it will not trigger the Drag Over condition again. To counter this you move the button such that the mouse is alternately inside and outside it - so it's constantly being 'dragged over'. Odd, but it works.

That's it, really

I hope that all makes sense. It's quite complex, so it's quite hard to explain.

If you're fiddling with the .fla file then beware - it doesn't seem to like being resized. If you're going to run it at a different size, then I suggest you rebuild from scratch at that size.

Stickman

All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.