Macromedia Flash Article

All movie clips have an independent timeline. Every timeline is either playing or stopped. If a timeline is playing, it will continue to play (and loop) until it reaches a stop() command. The one exception is a timeline that only contains one frame. A lot of design-centric Macromedia Flash content will involve the timelines in motion. However, a lot of developers will just use frames for states, and the timeline for each movie clip will almost always be stopped. Macromedia Flash can even create a lot of interactive motion on the screen purely through scripting.

States on the main timeline

Adding keyframes
When you open a new movie, you are looking at the main timeline, which automatically has one keyframe (on frame 1). The circle in the bottom of the frame signifies that it is a keyframe. If the circle is solid it indicates that the keyframe contains visual content, such as a shape, a movie clip, or a button.

If you have a movie that has visual content and ActionScript combined, then it's a good idea to add a layer specifically to hold actions. You can actually put actions in any keyframe, but it becomes confusing if you have 20 layers and you have ActionScript scattered throughout. Add a new layer by choosing Insert > Layer from the main menu. Double-click on the layer label and type in "Actions" or "Script" or something that is meaningful to you. Lock the layer by clicking on the dot under the lock icon to prevent visual content from accidentally being placed on this layer.

To add new keyframes, select the frame on the layer that you want to be a keyframe and either choose Insert > Keyframe, or hit the F6 key. You can add multiple keyframes by repeatedly hitting the F6 key.

It's important to understand that a keyframe is different than an ordinary frame.

In this example, you can add extra frames to "Layer 1" by selecting frame 1 on that layer and either choose Insert > Frame or hit the F5 key repeatedly. Notice that the frames do not have a circle. The last frame after a keyframe will contain a small rectangle to indicate that is where the frame segment ends. If you try to add content to frame 3 of Layer 1, then the content will actually be in all frames between 1 and 4. Frame 3 must contain a keyframe to have content that is different from the content on frame 2.

Adding labels
Labels are a convenient way to refer to a specific label. You could just refer to the frame number, but as you develop more Macromedia Flash content, you quickly realize that the frame number is not reliable as you add or remove keyframes in refining your project.

Adding labels is simple. With the keyframe selected, add a frame label in the Property inspector.

Changing state
When you have multiple frames on a timeline, the behavior of Macromedia Flash is such that it automatically starts playing and will continuously loop until it hits a stop() command. Therefore, in a state-driven timeline, the first keyframe should have a stop() command in it.

After that, you can use the gotoAndStop() command to make Macromedia Flash change states. An example of this might be a tabbed interface where clicking on the different tabs takes you to the corresponding keyframe, which contains all of the information and visual context for that state. So, there might be four states: "news","products", "services", and "about us".
On the "services" button, you would have ActionScript similar to the following:

on(release) {
gotoAndStop("services");
}

Using movie clips
As an example, let's say that you want to have a menu in your Flash movie. And for each choice in this menu, you want it to behave and appear differently in four specific cases – (1) the choice in its "normal" state, (2) the choice when it is highlighted (the user has their cursor over it), (3) the choice that is the currently selected choice, and (4) the choice is that is currently inactive and can't be selected.
So in this scenario, we might have the following design decisions for each state:

To create an empty movie clip in Macromedia Flash, choose Insert > New Symbol and type in "Smart Button MC" for the name. Make sure that you select Movie Clip for the Behavior. Click OK.

Add your layers. Add your keyframes. Add your labels. Add your ActionScript.

The ActionScript on frame one would be:

   gotoAndStop("normal");

   this.enable = function() {
      this.enabled = true;
      this.gotoAndStop("normal");
   }

   this.onRollOver = function() {
      if(_parent.selectedItem!=this) {
         this.gotoAndStop("highlighted");
      }
   }

   this.onRollOut = function() {
      if(_parent.selectedItem!=this) {
         this.gotoAndStop("normal");
      }
   }

   this.onPress = function() {
      this._parent.selectedItem.unselect();
      this._parent.selectedItem = this;
      this.gotoAndStop("selected");
      this.disable();
   }

   this.disable = function() {
      this.unselect();
      this.gotoAndStop("disabled");
      this.enabled = false;
   }

   this.unselect =function() {
      this.gotoAndStop("normal");
      if(_parent.selectedItem == this) {
         _parent.selectedItem = NULL;
      }
   }

It would be up to some type of outside logic to call the enable and disable functions. This is useful when you want to show that a particular choice would normally be available, but isn't at the moment.

On a related note, it's also useful to notice that both of these set the 'enabled' method of a movie clip (which is new in Macromedia Flash MX). This is an easy and convenient way of turning on and off the movie clip's ability to react to button and keyboard events.

Now, no matter how many menu choices you place in your menu, they will intelligently respond and react as expected. Using the keyframe to preserve states allows you to control your interface—in a way that is designer-friendly and easy to maintain.