Tween Animations with Actionscript
| Category | : Flash | Views | : 78757 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : tween-animations-actionscript.zip | ||
| Result | : See the result | ||||
In this movie every time you click a new ball is attached and it starts to move and resize it self. This is done in actionscript using the Tween library.
Start by creating the Movie Clip you want to animate:
Then set the identifier for this Movie Clip to "Ball".
Open the actions for the first frame and paste:
//import this library to use Tween
import mx.transitions.Tween;
//and this one to use the easing needed in Tween objects
import mx.transitions.easing.*;
//call function Move(this) every 1 second;
setInterval(Move, 1000, this);
//we need to use the parameter "obj" because this
//function is called by setInterval so it wont
//work if we use "this" here
function Move(obj)
{
//get random coordinates for the new position of the Movie Clip
var xPos = Math.round(Math.random() * Stage.width);
var yPos = Math.round(Math.random() * Stage.height);
//random scale between 25 and 200;
var scale = Math.round(Math.random() * 175) + 25;
//Tween for the "_x" and "_y" property of the Movie Clip
new Tween(obj, "_x", Regular.easeIn, obj._x, xPos, 1, true);
//using the new coordinates
new Tween(obj, "_y", Regular.easeIn, obj._y, yPos, 1, true);
//Tween for the scale of the Movie Clip using the
new Tween(obj, "_xscale", Regular.easeIn, obj._xscale, scale, 1, true);
//random scale
new Tween(obj, "_yscale", Regular.easeIn, obj._yscale, scale, 1, true);
}
These are the parameters for the Tween object:
Tween("object", "property", "easing", "initial value", "new value", "time", "seconds or frames");
object This is the object we are modifying.property A property that's going to be changed inside the object.
easing Effect used in the animation.
initial value The initial value of the property.
new Value The end value of the property.
time Can be in frame or in seconds, depends on the next parameter.
seconds or frames Use true if you want seconds and false if you want frames.
In the easing parameter we used "Regular.easeIn", but there are many more easing effects available.
Now go to the first frame in the main timeline and paste:
//Used just to create new balls
var Balls = 0;
//when the user clicked the mouse
_root.onMouseDown = function()
{
//attach new Movie Clip
_root.attachMovie("Ball", "Ball" + Balls, _root.getNextHighestDepth());
//set the coordinates of the new Movie Clip to the coordinates of the mouse
_root["Ball" + Balls]._x = _xmouse
_root["Ball" + Balls]._y = _ymouse
//increase variable
Balls++;
}
Done!
Here are the other easing effects if you want to test them:
Strong
Back
Elastic
Regular
Bounce
None
And
easeIn
easeOut
easeInOut
easeNone
For example: "Back.easeIn" or "Elastic.easeInOut".
"None.easeNone" is the only combination possible for "None" and "easeNone".
So you have 16 different combination effects to use.
More cool tech articles from other blogs.
