Stickman - Changing 'window order'

TUTORIAL INFO
Version Flash 4 Difficulty Intermediate Created 4th August 1999

DOWNLOAD
ZIP	FLA

A while back, on the Macromedia Flash Newsgroup, somebody asked if it might be possible to have windows that 'change layers' like on a Windows-style desktop (or MacOS, or whatever...:0)). I suggested one idea using Duplicate/Remove Movie Clip, but only just got around to putting together a demo. Here's the .fla file in .zip form.

But that's easy, surely?

You'd have thought so, but in fact it's more difficult than you'd expect. In an ideal world you'd use SetProperty to specify the depth of a movie clip, but unfortunately in our mixed-up, muddled-up existence few things are as easy as they should be -- you can't specify the depth of a movie clip after it's been created (ie. whether other objects are 'in front of' or 'behind' it).

Go on then, smartypants, show us how it's done...

While you can't change the depth of a movie clip once it's been created, you can set it when using Duplicate Movie Clip. So the idea is this: create our windows using Duplicate Movie Clip, then if we need to bring a different one to the front we just use Remove Movie Clip to get rid of them, then 'redraw' them using Duplicate Movie Clip again, in a different order.

Huh?

First, we create our four original windows and give them Instance Names (window1 to window4), but we hide them outside the 'viewable area' of the stage. Now in the first frame of our Movie Clip we use a quick loop to create copies of them where we can see them.

This code creates four new visible windows (NewWin1 to NewWin4) which are the ones we'll see on screen. Notice how we've set the depth (which is the property which decides the order in which the objects appear): NewWin1 has the highest depth value because this will make it appear in front of the others. So objects with higher depth values draw 'in front of' objects with lower depth values.

Notice also that we're creating an array, WindowOrder1 to WindowOrder4, each value of which holds a number representing the order of the windows. This will be used later when it comes to recalculating the window order.

Code mayhem

What we need to do now is set things up so that when a user clicks on a window, that window is 'brought to the front' and the others 'shifted back' like picking a card from a deck and placing it on top. This requires some fiddly code...

First, we need to to set up each window with an invisible button. When you click on this button, it sets a variable (/:NewTop) to the number of whichever window has just been clicked on. Then it uses Call ("/control:Redraw") to execute a set of actions which are contained in frame two of a control movie (called control) in the main timeline.

The first set of actions in this movie clip copies all the values of the WindowOrder array into a temporary array (TempWinOrder) which we can then refer to later. Then we set /:WindowOrder1 to equal /:NewTop. Next we have another loop which steps through all the each value of the TempWinOrder array (which stores the 'old' window order): it checks to see if the value is equal to /:WindowOrder1 (ie. if it's the same as the new top window) and if it's not, it copies across the appropriate value into /:WindowOrder.

Run that by me again?

So for example, let's say the window order is 1234 (meaning /:WindowOrder1 = 1, /:WindowOrder2 = 2, /:WindowOrder3 = 3, /:WindowOrder4 = 4) and the the user clicks on /NewWin3. First, /:NewTop is set to 3; then we copy /:WindowOrder to TempWinOrder; /:WindowOrder1 is set to the same value as /:NewTop (ie. 3).

Finally we loop through the values of TempWinOrder seeing if they equal /:NewTop (in this case, 3):

The result is that the order of the windows has been changed from '1234' to '3124'.

Phew!

All that's left to do now is to use Remove Movie Clip to delete the 'old' windows, then finally redraw the windows (with Duplicate Movie Clip) using /:WindowOrder to dictate which window is at which Depth.

It sounds far more complicated than it really is (and there's probably a much more elegant way to achieve the same result, but I had to keep it simple so that my poor little brain could handle it!). Take a look at the actions in /control:Redraw and it'll all make more sense.

But there's a catch!

One final point you'll need to bear in mind is that when you duplicate a movie clip, it will be 'reset' to its first frame. So if you want to conserve any changes the user might have made to that movie, you'll need to store them in variables somehow and then re-apply them when redrawing the windows.

Good luck!