AS: Actionscripted Tweens

4,081 Views | 14 Replies
New Topic Respond to this Topic

AS: Actionscripted Tweens 2005-08-15 18:04:40

Tweens are a way to create smooth movements. We have all learned how to create motion tweens and shape tweens in the timeline. Well now you can do them with actionscript too. You can even easily incorporate easing functions into these tweens. There is the undocumented Tween class in MX 2004 that will let us do this.

Why would we want to use a tween? Well for a lot of the same reasons you would in an animation. If you know where a point is going to start and end and how long it should take to get from one place to another, its a good time to use a tween. These work well for mouse over events to add a professional look to your menus, but thats only one example of how they can be used.

myTween = new mx.transitions.Tween(object, property, function, begin, finish, duration, useSeconds);
The parameters one by one:
object: The reference to (read: pathname for) the object on which the tween will act.
property: A string specifying the property of the object that you want to tween. Example: "_x", "_alpha" or "_yscale".
function: Reference to which tween / easing function to use (more below).
begin: The starting value of the property.
finish: The ending value of the property.
duration: The length of time of the motion. This will be in either frames or seconds depending on the next parameter.
useSeconds Is a boolean value. If set to true the duration will be in seconds, if set to false or left out duration will be in frames.

Easing Functions
I will explain the types of easing in terms of movement because it is the easiest to visualize but they are essentially the same regardless of what property you are tweening. There are three basic types of easing: easeIn, easeOut, and easeInOut. These are the same as you can select from the tween properties panel in Flash. easeIn eases into the tween meaning it starts out slower and finishes quicker. easeOut eases out of the tween meaning it starts out quick and fishes slower. easeInOut eases both into and out of the tween meaning its going the quickest in the middle.

There are also five types of eases you can use: Back, Bounce, Elastic, Regular and Strong.
Back: The object either eases into the tween by going the opposite direction of the target to create a sling shot effect or eases out of the tween by going just beyond the target and comming back to it or both.
Bounce: The object bounces. When used with easeIn the object bounces against the first point, when using easeOut the object bounces against the second point and when using both it bounces against both.
Elastic: This is a combonation of the Back and Bounce eases. The object goes just beyond and behind the begin and end point before launching itself to the opposite point.
Regular: This is just your standard run of the mill go from one point to the other tween. easeIn and easeOut will act as described above.
Strong: This is similar to regular except it uses a quadratic curve instead of a linear curve to do the movement. This means the easing will be much more dramatic.

There is also one final easing equation that doesn't fit into any of the above categories and that is: None.easeNone. It is a basic motion tween that does not use any sort of easing equation and is called the same way as the above equations.

You can use each of these like: Back.easeOut or Bounce.easeIn or Regular.easeInOut except be sure to call it with its full path name: mx.transitions.easing.Back.easeOut or mx.transitions.easing.Bounce.easeIn!

Basic Tween Use
Onto creating our first actionscripted tween! Draw a circle on your stage convert it to a movie clip and give it the instance name circle.

myTween = new mx.transitions.Tween(_root.circle, "_x", mx.transitions.easing.Regular.easeInOut, _root.circle._x, _root._xmouse, 10);

This will move the circle from its current x location to the location of the mouse's x using a regular ease in and out ease in 10 frames. Phew. Now Flash needs to know when to call it so add this code to your circle:

onClipEvent(mouseDown) {
myXTween = new mx.transitions.Tween(_root.circle, "_x", mx.transitions.easing.Regular.easeInOut, _root.circle._x, _root._xmouse, 10);
myYTween = new mx.transitions.Tween(_root.circle, "_y", mx.transitions.easing.Regular.easeInOut, _root.circle._y, _root._ymouse, 10);

Now if you test the movie each time you click it should make the circle move from wherever it is to the x,y point of the mouse. Play around with it, change the properties and practice with it a little to get a feel for how it works.

Continued in the next post ...

Response to AS: Actionscripted Tweens 2005-08-15 18:06:40

Tween Event Handlers
There are also a number of other cool things in the Tween class that we will want to use. First I'll go over the event handlers. What is an event handler? onEnterFrame is an event handler that gets called everytime a movieclip enters a frame. onMouseMove is an event handler that gets called for every moviecip every time it enters a frame when the mouse is in a different position. Similarly the Tween class has a number of event handlers:
onMotionFinished gets called for a tween every time it competes a motion.
onMotionLooped gets called everytime the tween starts over.
onMotionChanged gets called every time a property is set from outside the tween.
onMotionStarted gets called every time a tween starts.
onMotionStopped gets called every time the tween is stopped before being completed.
onMotionResumed is called every time a tween is started from someplace besides the beginning

Tween Methods
There are also a number of methods in the Tween class. What is a method? Well start() and stop() are two common methods used on movieclips. Things such as gotoAndPlay() are also methods. The Tween class' methods are:
setPosition(number): It can be used to change what the property of the tween is part of the way through it. The number is the value to be changed to. It also triggers the onMotionChanged event handler.
getPosition(): Returns the current value of the property.
continueTo(finish, duration): Changes the path of the tween by adding a new finish value for the property and a new duration. The duration will be in either seconds or frames depending on which you used when constructing the tween.
yoyo(): is a shorthand way of telling the tween to tween itself back to the original position in the same what that it tweened intself to the current end position.
start(): Starts a tween from the beginning.
stop(): Stops a tween in the middle.
resume(): Starts a tween from where it was stopped.
rewind(): Sets the tween back to its initial position.
fforward(): Sets the tween to its finish state.
nextFrame(): Sets the tween to its next frame. (frame based duration only)
prevFrame(): Sets a tween to its previous frame. (frame based duration only)

Tween Properties
Every class has properties. For example the MovieClip class has the _x property. The String class had the length property. The Tween class' properties are:
isPlaying: A boolean value that stores whether or not the Tween is playing.
obj: The object that the Tween is acting on.
prop: The string of the property the Tween is altering.
func: The easing function being used in the Tween.
begin: The beginning value for property in the Tween.
useSeconds: A boolean value that stores whether the Tween is time based or frame based.
looping: A boolean value that stores whether the Tween is looping or not.

Final Notes
I left out a few properties, methods and event handlers because I felt they served no applicable purpose outside the scope of the class. If you are really that interested you can find the .as file on your machine. It is located at .../Macromedia/First Run/Classes/mx/Transitions/Tween.as Any other problems, questions, comments, concerns, idea, or whatever feel free to post.

Response to AS: Actionscripted Tweens 2005-08-15 18:08:56

I really see no point in using a tween with AS, but I guess it could be useful for something, somehow.

Good tutorial.

Sup, bitches :)

BBS Signature

Response to AS: Actionscripted Tweens 2005-08-15 18:28:35

Wow, I never knew this stuff existed. Could definitely be useful occasionally for pure API flashes. Definitely going in the Advanced section of AS: Main, though.

- - Flash - Music - Images - -

BBS Signature

Response to AS: Actionscripted Tweens 2005-08-15 19:07:50

Could I use this or something similar to this for my affiliates menu?
(Click the link in my sig... All we be explained)

Response to AS: Actionscripted Tweens 2005-08-15 20:45:03

Yes, its possible, but it is no where close to being the easy way to do it. The last post in the thread you linked us to in your profile has a solution that I think would be the simpliet, but if you really want to use actionscripted tweens then here I go, first I would create a movieclip for all of your button effects to occur on, give it an instance name, and put it on its own layer. Then I would mask that layer with a simple rectangle to hide extra things outside the button that will occur in the next steps. Now I would convert each button into a movie clip and give it a linkage. Create an array that contains each linkage in the order you want them to appear. Create a variable to store what the current button is. Then on the right button I would attach the next movieclip in the array sequence (left button previous) and give both the next and current affiliate mc's an actionscripted tween of your choosing. Then have an onMotionFinished to reset the current and reactivate the left or right button. This is probably one of the most complicated ways to create the desired effect but it would work. I don't really have time to make a demo or write the actual code at the moment, but thats the general idea. If I get around to it later I will be sure to post it. Other helpful references: AS: Arrays AS: Duplicate Movie Clips

Response to AS: Actionscripted Tweens 2005-12-27 16:12:01

how did you find the whole tween thing?


Response to AS: Actionscripted Tweens 2005-12-27 16:31:30

wow... I didn't even know you could do this in flash...

Response to AS: Actionscripted Tweens 2005-12-27 17:06:08

At 12/27/05 04:12 PM, mb3 wrote: how did you find the whole tween thing?

I was looking around my machine in the Flash folder and I found some .as files that weren't in the Flash documentation so I looked through the .as file and figured out what it did. It seemed handy enough so I wrote some psuedo documentation on it and posted it as an AS thread. There are some other as files that aren't in the documentation either. If my memory serves me there was a depth control class that had several methods other than swapDepths for altering the depth of of movieclips and there was one that provided a way to trigger your own events to be caught be event handlers. The latter sounds like it could be pretty handy. I didn't spend a whole lot of time with my Flash 8 trial so I'm not sure if these have been included, but as of MX 2004 they were undcoumented classes. There might even be some new ones in 8, it's just a matter of looking through the classes folder for things you don't recognize and then figureing out what they do.

Response to AS: Actionscripted Tweens 2006-06-28 01:27:18

Thanks for the faq! Two questions:

1. In authoring time, flash lets you adjust the amount of easing using some parameter in the range [-100,100]--is there anything like that for the actionscript version? Because I don't believe you mentioned anything like that...

2. You said in your first paragraph that it's possible to shape-tween with actionscript, but never explained how to do so (you only explained how to perform a motion tween).

Thanks in advance!

Response to AS: Actionscripted Tweens 2006-06-28 01:31:21

you sir, are god

Response to AS: Actionscripted Tweens 2006-06-28 02:40:30

i found this stuff ages ago, but never had a use for it, one thing i might suggest to you
is to just do:

import mx.transitions.Tween;
import mx.transitions.easing.*;

and it will import everything you need for Tweening, so you only have to do

var a:Tween = new Tween(this,"_x",Bounce.easeIn,10,40,10,tru

using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature

Response to AS: Actionscripted Tweens 2006-06-28 05:21:12

At 6/28/06 02:40 AM, -dELta- wrote: import mx.transitions.Tween;
import mx.transitions.easing.*;

hey wow thats cool :D

Response to AS: Actionscripted Tweens 2006-11-27 16:11:10

For future reference, some of the mentioned properties seem to not work, and some of the events seem to be incorrectly described (for example, onMotionChanged is called every time the tweened property changes, including changes due to the tween itself) Check

http://livedocs.macromedia.com/flash/8/main/w whelp/wwhimpl/common/html/wwhelp.htm?context= LiveDocs_Parts&file=00004142.html

for more accurate information on the tween class.

Response to AS: Actionscripted Tweens 2009-08-12 19:25:15

im sorry, but i dont understand actionscript whatso ever. i understand the concepts of easing, (easin) and (easout) and (easinout) but once you get to codes and stuff like that i dont understand at all. i have never typed in an actionscript code in my life. i havent ever used it :P i need further education!