Tutorial: Page (1) of 1 - 03/27/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 1

You are hereby invited to learn it, know it, live it By Kevin Schmitt

For the three (or perhaps even four) of you who regularly follow my Flash tutorials, you are well aware of my repeated rantings that Flash designers can do themselves solar systems of good by learning at least a little ActionScript. One of the better illustrations of that mantra is the Tween Class, which I'm going to make you try and fall in love with over the course of these next couple of articles.

First things's first: what is the Tween Class and why would I want to use it?

Let's answer the second part of that question first. Most of us cut our teeth in Flash using the Timeline to make animations (or Tweens, in the parlance of Flash). The process is pretty simple: create a keyframe, move an object, and convert the intermediate frames into a Motion Tween. No problem, right? In general, sure. But sometimes you just need more options, and it is during those times where the Tween Class is more than just a lifesaver?it's essential. Two common scenarios come to mind that may help illustrate the usefulness of the Tween Class.

Scenario 1: Let's say you're putting together a Flash-based presentation. It's looking great?you've got characters in there doing their thing, text is flying all over the place, and you've even got some animated backgrounds eating up CPU cycles. The only problem is that your client's demo laptop can't keep up, as it's only half as powerful as the machine you developed it on. Since this a hypothetical situation, we'll gloss over why you're in this pickle in the first place and focus on the fact that you have to make this thing run at half the frame rate you counted on. If this presentation is done with conventional Motion Tweens in the Timeline, you're in for a world of fun as you manually adjust all the Tweens and hope all the timings hold up. But if you choreographed all the elements in your show using the Tween class, it's just a matter of flipping the frame rate to another number and the rest will take care of itself. We'll touch on this sort of thing a little more next time, so throw it down the Memory Hole for now.

Scenario 2: You want a row of buttons to rearrange themselves depending on which one is clicked. Something like Figure 1 would be very difficult to plan for (if not impossible) if you attempt to manually Tween every possible combination in the Timeline. So, you use the Tween Class to take care of the animation part for you, all in a single frame. Go ahead?play around for a bit by randomly clicking on the boxes. This example is nothing huge, but it would be really hard to plan out using only Motion Tweens in the Timeline.


Figure 1

OK, so now that you've read about how the Tween Class might come in handy, and actually seen an example of it in action, I suppose I should tell you what it is. The Tween Class, put simply, is Flash's built-in code for modifying attributes of an object on the Stage over time. Put even more simply, it's animation that is created using scripts instead of keyframes. You may have been expecting something a little more long-winded than that, but that's pretty much all there is to it. Now, to examine the code behind the Tween Class.

Yay! Code!

OK, here we go. To put the Tween Class into use in its most basic form, you need an object on the Stage to animate, and you need to write some junk in the Actions panel. I'm not going to make you suffer through a bullet list outlining the few steps needed to put an object on the stage, so let me gloss over the process thusly: create a new Movie Clip, draw a simple object like a circle or square in it, drag your object to the Stage, and name the instance in the Properties panel. For reference, my clip is named box_mc.

Now, in the Actions panel, it's time to implement the Tween Class, so let's type:

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

Before you let loose with a big ol' "wha...?", allow me to break this down. The first part of the script is just the call to the class (new mx.transitions.Tween), and then the rest of the code consists of the parameters you set to make the animation work. So let's go over said parameters, since those are causing the heads out there to be in need of scratching at the moment.

box_mc
This is simply the name of the object you want to animate. Movie Clips, Buttons, Dynamic Textfields, Components, basically anything you can name on the Stage can be Tweened using the Tween Class.

"_x"
The property you want to change over time. In this case, I'm using the x coordinate, but you can also use properties such as transparency, scale, and rotation.

mx.transitions.easing.Regular.easeInOut
This part can seem sort of funky (and will need the most explanation), since you're actually using a class inside of another class. The first part (mx.transitions.easing.) just calls the transition class, and as such will always remain the same in this context. The last two parts, the Easing Class and the Easing Method, are what we really care about. In a nutshell, the Easing Class specifies how plain or wacky the Tween will look, and the Easing Method controls how smooth the Tween will begin and end. In this example, I've used the Regular Easing Class, which is a plain vanilla, no-frills move, and the easeInOut Easing Method, which will give the Tween a nice, slow beginning and ending. You have a few choices for both the Easing Class and Easing Method, but it's best to explore those visually in the interactive example I've included a bit later, so hang tight.

10
The value to use at the start of the Tween. Since I'm using the x coordinate, in this case I'm starting the Tween 10 pixels from the left edge of my Flash movie.

100
The value to end the Tween on. Do I really need to tell you that I want the Tween to stop 400 pixels from the left edge? Well, I just did anyway.

.5
This value specifies how long you want the Tween to last. This number can refer to the number of seconds (or fractions of seconds, as in this case) or number of frames. But how does the Tween Class know whether you want seconds or frames? Read on...

true
If this last value is set to true, it means you want to specify the length in seconds, If it's false, you'll get frames.

So, when you put that all together, your object will travel 90 pixels from left to right, and do so in half a second. As for the motion, it will start nice and slow and end nice and slow, meaning it will ease in at the start and out at the end. Make sense? Well, even if it doesn't, Figure 2 is a handy interactive illustration of the Tween Class. Go ahead and select the desired Easing Class and Method, a duration, and whether you want seconds or frames, and when you hit the Go! button, the code used to create that movement will show up in the selectable (and copyable, if that's even a word) field at the bottom. This way, you can see how the various options affect the movement of the square, and then you copy and paste the base code and mess with it however you want. Now, three things to keep in mind:

  • As I mentioned before, if you're using seconds, you can use fractions of seconds (e.g., 1.25)
  • You can't affect anything but the _x property in this example
  • The Flash movie itself is set to 30 fps (so remember that for your calculations if you choose frames instead of seconds)

Anyway, have fun with it!


Figure 2

Now, I do have one caveat to mention when you're done playing. You may or may not have run across this, but if you selected None for either the Easing Class or Easing Method, both defaulted to None. For some reason, the two are tied together?you get an ActionScript error if you try to couple an easeNone method with a normal Easing Class, and if you select None as your Easing Class, the method effectively becomes a moot point. Thus, I've made them truly dependent on each other in Figure 2.

Anyway, that's enough for today, don't you think? Next time we'll go over some of the monitoring functions that go hand in hand with the Tween class, which will allow you to assign events at various times during your scripted Tweens. Sound good? Allrighty then! So, as they say in my neck of the woods, we'll see all y'all next time.


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:actionscript, flash, flash 8, flash 8 professional, studio 8

HOT THREADS on DMN Forums
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