Going GUI

Flash can be used to build interfaces with all the familiar elements we use on our computers already: pull-down menus, palettes and windows. Building these in Flash4 took a little work as there was no way to create pre-built interface widgets. The good news is that in creating them you are not restricted to one (generally boring) look. In this article we are going to take a look at how to build a window that you can drag, minimize and close. Once you understand the basic framework it is very easy to adapt it visually.

Come here, go away.

The window is built within a movie clip and contains three buttons: minimize, grip bar, and close. The close button is the easiest of all. There is a single action on the button which hides the movie clip:

on (release) {
   _visible = false;
}

You'll notice that we can leave the target blank. Flash always assumes that you are targetting the current timeline if no target is provided. The visibility property has two values - true and false. An invisible movie clip will not respond to any mouse events but it will retain its state. If the user closes the window when it is collapsed then it will still be collapsed when they open it again.

Collapse

The animated transition from open to closed is built in the timeline of the window movie clip. Notice the two labelled frames. The minimize/maximize button switches between the two labels. Instead of using a simple goto action I use play and have it play through the animation until it reaches the next labeled frame.

The tweens in the timeline are the animation for the window scaling as well as the rotation of the yellow triangle on the collapse button. You can play with these to create whatever transition you want between the two views.

Dragging

The actions on the grip bar are the same that you'll see for nearly all drag actions with a little extra code to give the 'windowshade' behaviour. Again, Flash will assume that the drag action is targetting the current timeline.

on (press) {
   startDrag ("");
   T = getTimer();
   if (Number(T-oldT)<500) {
      play ();
   }
   oldT = T;
}
 
on (release, releaseOutside) {
   stopDrag ();
}

The timer is used to detect a double click. On each press of the mouse the time is recorded in a variable called "T" and the time of the last press is stored in oldT. The if statement checks to see if less than 500 milliseconds have passed between presses. If so, it considers this a double click and opens or closes the window.

Why stop there?

In this example (window2.fla), the window movie clip has been nested inside of another one which contains an animated transition for the entire window. Notice that the first frame of this new movie clip is empty. The open button is changed from setting the visibility to telling this new movie clip to play. The window zips into place and stops until the user clicks the close button which then tells it to play through the rest of the frames where it shrinks away. You'll notice the Tell Target actions used in both places to target the correct timeline.

Other variations

Just because we spend most of our time in a rectangular world of boxes doesn't mean we have to use Flash to build more of the same. Here's one variation. Play around, there is no end to the different looks you can achieve.