Tutorial: Page (1) of 1 - 04/06/06 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

The Tween Class: A Flash Designer's Best Friend, Part 2

Methods and properties and event handlers, oh my! By Kevin Schmitt

I hope you're already having a blast playing with the Tween class after our last riveting installment, but there is still much to discuss. Today, we're going to go over methods, properties, and event handlers for the Tween Class, but since those sound so, well, "programmerey," let's just say we're going to learn how to monitor and control our Tweens as they go about their little Tween errands.

Make mine a variable

Building off of last time (the text of which is available here if you want to catch up), we need to add one extra little nugget to our basic ActionScript in order to enable all sorts of cool options. So let's give our little Tween a name, which will magically turn it into a variable. First, let's take an example of the code from last time:

new mx.transitions.Tween(box_mc, "_x", mx.transitions.easing.Regular.easeInOut, 100, 400, 5, true)

And give it a name, like so:

myTween = new mx.transitions.Tween(box_mc, "_x", mx.transitions.easing.Regular.easeInOut, 100, 400, 5, true)

And once something has a name, whether it's an instance of an object on the stage or something written in ActionScript, the possibilities are endless, and that's certainly true in this case. Now that our little Tween has been christened with an actual name (the oh-so-cleverly titled myTween), let's get into the stuff you can do with it.

Three categories of control

I mentioned methods, properties, and event handlers before, but in case you zoned out completely even before getting to the end of the sentence, fret not. Methods, properties, and event handlers are common words in ActionScript, but let's break down what they really mean, at least when it comes to the Tween class.

Methods are little snippets of code you can tack onto your Tween to control the movement of said Tween. For example, let's say you have an instance of a square (which, if you remember from last time, we do), and you want to move it 300 pixels along the x axis over a span of five seconds (which, using the code above, we can). Using the methods available to the Tween Class, we can control how our Tween plays back?we can rewind it, pause it, play it again from the beginning, etc. Here is list of the aforementioned methods?most should be at least partially self-explanatory, but I've added comments anyway:

  • myTween.yoyo(); This method effectively "palindromes" your Tween back and forth. Applied to our example above (using one of the event handlers, onMotionFinished, that we'll discuss in depth a little later), the square will reverse track and return back to the beginning, where it will do its thing all over again.
  • myTween.rewind(); We're into fairly obvious territory here, but this one rewinds your Tween. If you've coupled this with the yoyo(); method, keep in mind that depending on where your object is, it may rewind to x coordinate 400 instead of 100.
  • myTween.fforward(); Fast forwards the Tween to the end. The same caveat applies regarding combining this method with the yoyo(); method.
  • myTween.start(); Don't get this confused with the resume(); method? the start(); method rewinds your Tween and then begins anew from there.
  • myTween.resume(); Use this one if you've stopped your Tween (using the next method on the list) and want to continue from that point.
  • myTween.stop(); Do I really need to explain this one?
  • myTween.nextFrame(); With these next two, you can go back and forward on a frame-by-frame basis.
  • myTween.prevFrame(); See previous method.
  • myTween.toString(); According to the Flash documentation, this method "Returns the class name, '[Tween]'." I'm not sure why one would need to do this, but it's here in the interest of full disclosure.

Let's move on to properties. In the context of the Tween Class, properties let you "take the temperature" of the Tween, and in some cases, you can even "set the temperature," so to speak. In other words, properties give you a snapshot of what's going on. Below you'll find a list of the properties associated with the Tween Class and again, I'm going to annotate things as I go. Keep in mind, however, that while the Flash documentation claims all of these properties are read-only, I've found that you can actually manipulate your Tween with these as well, documentation be damned:

  • myTween.FPS Use this property to not only find out how many frames per second your Tween is running at, but also change it on the fly. One caveat: setting the FPS property tends to deliver seemingly wildly inaccurate results. For example, a Tween that runs smoothly at 30 fps to start may appear to be running at 15 fps if you use the FPS property to manually set it to 30. Use this your own peril!
  • myTween.finish This returns the end value of the Tween. If we were using the code from earlier, this value would be 400. Again, though, this can be set on the fly, so you can transform a Tween in mid-Tweenage.
  • myTween.duration You can either query the Tween to see how long it's supposed to run, or change the timing of the Tween by specifying a new duration. In our example, the Tween starts off with a desired duration of 5 seconds, but by using the duration property, we could speed it up by setting it to 1 second.
  • myTween.position This property returns where the Tweened object is at the point where this property is called. So, for example, using our code from earlier, if you were to inquire as to where the object is 2.5 seconds in, the position property should come back somewhere in the vicinity of 250. And while you can set this property as well, I'd avoid doing so?the results are jumpy and unpredictable.
  • myTween.time This one is similar to position, in that it provides a specific value (in this case, time) for the point at which you ask about it. And also like the position property, I'd avoid trying to set it. Again, unpredictable and jumpy are the key phrases here.

Still with me? Good. Let's take a look at the final piece of the puzzle: event handlers. The best way to describe these would be to paint them as triggers that fire when a certain condition has been met. For example, the Tween Class as an onMotionFinished event handler, which lets you call code when the Tween has finished, well, Tweening. Event handlers are the traffic cops, so to speak, that monitor the situation and can react to what's going on. Here's the list of the event handlers available in the Tween Class:

  • myTween.onMotionChanged This event handler fires every time the motion of the Tween has changed (hence the name), which is pretty much all the time the Tween is doing its thing. So, for example, you can monitor the position property using the onMotionChanged event handler, and call code once the Tween has passed a certain point.
  • myTween.onMotionFinished I use this one all the time, as it listens for when the Tween has finished and runs code once it does. If you only have time to learn one event handler here, this is the one to learn.
  • myTween.onMotionStarted These next three are pretty self-explanatory. This one fires when the Tween first starts its sequence.
  • myTween.onMotionStopped This one runs when the Tween is interrupted in mid-Tween, most often after you use the stop(); method.
  • myTween.onMotionResumed Last but not least, the onMotionResumed event handler gives a shout out once the Tween is resumed after being stopped. Don't get this one confused with onMotionStarted, as this one will fire any time you resume the Tween after a pause. The onMotionStarted event handler only comes into play at the very beginning of a Tween.

Putting it all together

So far, we've got a lot of theory with very little payoff, so I guess we should fix that. Let's put together a little example that contains at least one method, one property, and one event handler, and then walk through what the code does. First, here's the code (which I've placed in a blank keyframe on frame 1 of the Timeline):

01 | myTween = new mx.transitions.Tween(box_mc, "_x", mx.transitions.easing.Regular.easeInOut, 100, 400, 5, true);
02 | myTween.onMotionChanged = function() {
03 |     return_txt.text = "_x = "+Math.round(myTween.position);
04 | };
05 | myTween.onMotionFinished = function() {
06 |     myTween.yoyo();
07 | };

The results can be seen in Figure 1:

Figure 1

There's not a whole lot to break down here, but a few notes are in order anyway. You should recognize Line 1 by now, so I'm not going to belabor that particular point. Lines 2 and 5 are the event handlers to which I've assigned code, which you can find in Lines 3 and 6, respectively. Line 3 "sniffs" for the position property while the Tween moves and places the _x coordinate into a text field for real-time monitoring (I've rounded the number to keep extraneous decimal places out of it), while Line 6 applies the yoyo(); method to the Tween once it reaches the end of its motion. Overall, a pretty simple example, but one that should be illustrative of how you can combine the methods, properties, and event handlers to really go to town with the Tween Class.

I'll leave you all today with what I hope is a fun (fun being a relative term, of course) example of some of the different things you can do with the Tween Class. I've wired up a few basic controls, as well as placed some input fields that let you set the frames per second and the duration of the Tween. Keep in mind that I've used the yoyo(); method to cycle the Tween, so the Rewind and Fforward buttons may do the reverse of what you might be expecting (depending on whether the box is on the way out or on the way back). In any event, I hereby release you to your own experiments with the Tween Class. Happy Tweening!

Figure 2

Page: 1

Though the fame, riches, and notoriety of being a DMN contributor are both tantalizing and substantial, Kevin Schmitt still stubbornly insists on continuing his work as the Director of Interactive Services at EFX Media, a production house located just outside of Washington, D.C. Feel free to follow his updates and contact him through Twitter if you have something to share - he's ready to believe you!
Related Keywords:flash, flash 8, flash 8 professional, studio 8

Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved