mx.transitions.Tween

One of my current assignments at work is to make something similar to Google Maps for my employer’s Oil website. I must build a map browser that is completely dynamic that’ll need to generate 3 dynamic layers for 3 different types of maps of Oil Wells.

I decided on making this using Flash, just like Yahoo Maps have. From the start, the most important feature was how I had to permit a click event somewhere on the map and to center the map on these X and Y coordinates. At first, I approached the project by planning on incrementing a value to the _x and _y properties for some period of time to mimic movement until the map was re-centered, but I’ve had no success doing so.

That’s when I had a revelation. Once you start trying to build Object-Oriented applications in Flash, you tend to forget all the design tools built in Flash. Why didn’t I call the Tween function from within ActionScript? And so I did.

Here’s the relatively simple function call to move a MovieClip object using the Tween class:

new mx.transitions.Tween(MovieClip, "_x", easeType, begin, end, speed of execution, time unit boolean);

You pass on a MovieClip, the property you wish to edit (in Flash, the properties all start with “_”), the effect you wish to use for the transition, the starting value (for the _x property, MovieClip ._x for instance), the end value (passing MovieClip ._x + 50 would create a motion tween that would move the MovieClip 50 pixels to the right from its original location), and the speed of execution which is either counted in seconds or in frames depending on the last Boolean parameter (true being in seconds).

It’s really incredible because the transition allow you to apply built-in elastic or bouncing effects to the MovieClip. Now all of the bouncing menus we see all over the Internet seem much simpler.

You can also pause, rewind and do other operations on the Tween process because it generates events as the animation plays.

It opens a lot of doors to OOP in Flash. You no longer need to bother with sketchy animations when forcing movement on your MovieClips from within a Class.

Read more on this undocumented function

On a different and more disappointing note, I also completely gave up on trying to have a logical OOP approach on Events handling. Doing the following discusses me because I find it rather illogical to have an inline function call from within another one, but it’s one of the only things that work:


class Foo {
function Foo() {
// create a button with the path _root.button
// now tell him what to do when he’s clicked
_root.button.onPress = function {
// some code
}
}
}

Leave a Reply