Dynamic Event Handlers with
Flash MX
by ilyas usal
First of all, when I say handler, I'm talking
about the onClipEvent(...) and on(...) handlers. Just to make things clear
Now dynamic event handlers are really one of the best things that Flash MX
brought, as they allow us to change a handler at run time. You may wonder what
this means. Well, it's simple, really. Imagine that you want a movie clip to go
right, and when it reaches a certain position, make it stop. Simple enough. With
Flash 5, it would go like this:
onClipEvent (enterFrame)
{
if (this._x<300) this._x+=5;
}
Why would I need a dynamic handler then? For two reasons.
The first reason is that when the clip reaches the desired position, the
handler keeps checking the position of the movie clip. This may not be too
embarrassing if there's only one clip, but if there are 100, you'll see the
difference, especially if you do some more complicated things. So with Flash MX,
you could empty the handler, or totally erase it.
But in order to do that, you have to consider handlers as functions. You
declare it as a frame action, and no longer on the object:
myClip.onEnterFrame=function()
{
if (this._x<300) this._x+=5;
else delete this.onEnterFrame;
// to erase it, but you can simply empty it
// else this.onEnterFrame=null;
}
Here, onEnterFrame is declared as a method of
the object myClip.
The second reason is that you might want it to do something else once it's
there. Let's say that you want to make your clip go up. In Flash 5:
onClipEvent (enterFrame)
{
if (this._x<300) this._x+=5;
else
{
if (this._y>300) this._y-=5;
}
}
Still no problem. But what if you want to make it go left from there? You
can't put an else like we did before, because
there will be a clash with the first if (this._x<300).
You see the problem? It's doable, of course, but it's painful.
Now don't panic, I'm here :) Thanks to dynamic handlers, we're going to
handle that situation smoothly. First we are going to create a few functions:
goRight=function()
{
if (this._x<300) this._x+=5;
else this.onEnterFrame=goUp;
}
goUp=function()
{
if (this._y>300) this._y-=5;
else this.onEnterFrame=goLeft;
}
goLeft=function()
{
if (this._x>100) this._x-=5;
else this.onEnterFrame=null;
}
// We assign the goRight function to myClip
myClip.onEnterFrame=goRight;
The first fuction to execute will be goRight,
and when the clip is on the right, the function calls the
goUp function and so on...
You see how easier this is? When we reach the position, we change the
onEnterFrame handler to a function that we have defined. No conflict with the
old handlers since they don't exist any more. Pay attention to the syntax
though:
myClip.onEnterFrame=goRight;
There are no () after the function. If the function has arguments, you'll
have to go round:
myClip.onEnterFrame=function(){goRight(1,3);}
I hope you get the way this works, as it is really useful all the time. And
of course, onEnterFrame is not the only handler. You can also use:
onData
onDragOut
onDragOver
onEnterFrame
onKeyDown
onKeyUp
onKillFocus
onLoad
onMouseDown
onMouseMove
onMouseUp
onPress
onRelease
onReleaseOutside
onRollOut
onRollOver
onSetFocus
onUnload
Hope this tutorial helped. If you have any
questions, please post them on the forums at
//www.kirupa.com/forum/
|