Do you wish there was an easier way to create scripted tweens and fades? Have you ever found onClipEvent to be frustrating or limiting? Do you find it a hassle sometimes to create frame loops or turn them on and off?

With FLEM, you can create scripted animation much more easily, using clean, object-oriented code. FLEM lets you handle events with a different style of code than onClipEvent. This new style is similar to handlers in JavaScript and Java. In my opinion, FLEM is easier and more fun to use than onClipEvent. This tutorial will show you how to handle system events such as enterFrame and mouseDown with FLEM, creating a scripted glide animation.

What is FLEM?

FLEM stands for FLash Event Model. Its home on the web is http://chattyfig.figleaf.com/flem/. Branden Hall created FLEM in December 2001, as a system to help Flash developers use events in a more object-oriented manner. Branden says this on the FLEM site:

FLEM aims to provide an event model that is:

• Very powerful, but at the same time flexible
• Easy for both novice and advanced ActionScript programmers to embrace
• Both valuable to developers making small movies and those making large applications

FLEM is similar to ACK (ActionScript Component Kit) in that it has a custom "event engine." However, as Branden has said himself, FLEM is simpler and more object-oriented.

FLEM vs. onClipEvent

What's so great about FLEM? After all, Flash 5 gives us onClipEvent handlers for enterFrame, mouseDown, etc. The problem with onClipEvent handlers is that you have to stick them on the outside of a movie clip instance. You can't access the onClipEvent handlers from the inside of the movie clip symbol.

FLEM Glide

The movie below, FLEM Glide, is a simple example of how to use FLEM with system events. The main system events we use are enterFrame, mouseDown, and mouseUp.

The interactivity and animation for this movie come from a mere 13 lines of code:

function glideToMouse () {
   _x += (_parent._xmouse - _x) * .2;
   _y += (_parent._ymouse - _y) * .2;
}

this.onMouseDown = function () {
   this.onEnterFrame = this.glideToMouse;
}

this.onMouseUp = function () {
   this.onEnterFrame = null;
}

MovieClip.addFLEMListener (this);
Mouse.addFLEMListener (this);
stop();

What is important to realize is that this code is all in one place--inside the movie clip symbol. The sphere movie clip is completely self-contained. If you drag multiple instances of sphere onto the stage, they will work instantly.

Setting up FLEM

The first step is to set up the FLEM system in your FLA.

Once you download FLEM, installation is fairly simple. The full instructions are at http://chattyfig.figleaf.com/flem/install.php. Basically, it's two steps:

1. Open the supplied template FLA, flem_template.fla, and save it as a new file. This FLA contains the #include code and two movie clips that are necessary for FLEM.
2. Make sure the ActionScript file flem.as is in the same directory as your FLA. The #include code in flem_template.fla will look for the ActionScript in flem.as.

Coding the Glide

The "glide" is a common Flash technique that is used to create an ease-out. With a simple bit of code, you can slide a movie clip to a point, making it gradually slow down and stop. In our case, we will make the movie clip glide towards the mouse position. This produces a "chasing" effect when you hold down the mouse and move rapidly.

The FLEM Glide example has a movie clip named sphere. In the first frame of sphere is this function:

function glideToMouse () {
   _x += (_parent._xmouse - _x) * .2;
   _y += (_parent._ymouse - _y) * .2;
}

The glideToMouse() function finds the horizontal and vertical distance between the movie clip and the mouse position (_parent._xmouse - _x). Then it moves the movie clip a fraction of that distance towards the mouse--in our case, one fifth (0.2) of the distance. Explanations of this technique are plentiful in the Flash community, so I won't go into more detail.

Starting and Stopping the Glide

We produce eased motion by executing glideToMouse() once every frame. Executing an action once per frame can be called a frame loop. How do we make a frame loop for the glideToMouse() function?

The standard (non-FLEM) approach in Flash 5 would be this:

// example of the non-FLEM approach
onClipEvent (enterFrame) {
  this.glideToMouse();
}

This is fairly straightforward. Unfortunately, though, the onClipEvent (enterFrame) code has to go on the outside of the movie clip instance. As a result, it is difficult to make the movie clip symbol self-contained. You can't drag the symbol from the library onto the stage and have it work right away.

However, the FLEM system allows you to easily set the enterFrame handler from the inside of the movie clip. All it takes is this simple code:

this.onEnterFrame = this.glideToMouse;

Now the glideToMouse function will be executed once per frame. Notice that glideToMouse does not have parantheses () because it is not being called in this code. Rather, the function is being assigned to the onEnterFrame handler. From now on, the onEnterFrame handler will call glideToMouse() every frame, automatically.

If we want to stop the glide, we use this simple code:

this.onEnterFrame = null;

Setting the onEnterFrame event handler to null causes nothing to be executed, effectively stopping the frame loop.

Reacting to Mouse Events

So far, we've replaced onClipEvent (enterFrame) on the outside with this.onEnterFrame on the inside of the movie clip. We can do the same thing with onClipEvent (mouseDown):

this.onMouseDown = function () {
   this.onEnterFrame = this.glideToMouse;
}

In plain English, the above code means: "when the mouse is pressed, start gliding." This code sets the onMouseDown event handler to a custom function. What does this function do? We've already seen this code, just previously:

this.onEnterFrame = this.glideToMouse;

This starts the glide by putting the glideToMouse() function in a frame loop.

Previously, we learned how to turn the loop off--by using null. We can now cause this to happen when the mouse is released:

this.onMouseUp = function () {
   this.onEnterFrame = null;
}

In plain English, this means: "when the mouse is released, stop gliding." The above code does the same thing as the "standard" code below:

onClipEvent (mouseUp) {
   this.onEnterFrame = null;
}

However, FLEM allows us the benefit of handling the mouseUp event from inside the movie clip.

Our glide is nearly complete. There are only a few lines of code remaining:

MovieClip.addFLEMListener (this);
Mouse.addFLEMListener (this);

These commands are necessary to "turn on" FLEM events for the current movie clip. The theory behind listeners and registering for events would require its own tutorial. All you need to know at this point is that the first line--

MovieClip.addFLEMListener (this);

--enables MovieClip event handlers (onEnterFrame) for this, the current movie clip.
The second line--

Mouse.addFLEMListener (this);

enables Mouse event handlers (onMouseDown, onMouseUp) for this movie clip.
(You can also use onMouseMove, but it is disabled by default, so you have to uncomment a block of code in flem.as.)

And of course, what timeline would be complete without our favorite command:

stop();

All done. That wasn't so hard, was it?

Follow the Yellow FLEM Road

I hope this tutorial has shown you the power of FLEM and made it seem less intimidating. FLEM is actually a simple system when you understand it. Once you start using enterFrame and other system events in this new style, many tasks become simpler. You can create scripted tweens and fades much more easily (perhaps a future tutorial will elaborate), and movie clips can be more self-contained. I don't know about you, but I'll gladly kiss "onClipEvent (enterFrame)" goodbye. Hooray for FLEM!