Preview:

 

Hi, for this tutorial, we'll be dealing with actionscripted movement using ease class built in flash mx and higher. Actionscripted movement can be attained just by changing the "_x" values and/or "_y" values of a movieclip. However in this tutorial, we will go beyond that. Will be having more than a linear movement, and that is the easing class.

The bounce effect for example is an effect from a tween class, you can make the movement more fluid by adding this effect, and hey, its only one line of code!

Steps

1) Create a new document, using the default dimensions and using 35 as base FPS.
2) Draw a circle using the oval tool
3) Convert it to a symbol and name the instance as "circle_mc"
4) Create a new layer
5) On the newly created layer, add this action

var xTween = new mx.transitions.Tween(circle_mc, "_x", mx.transitions.easing.Back.easeIn, 100, 400, 2, true);

And that's it!

Final:

 

What's on the code?

new mx.transitions.Tween(" etc..");
This is just making a new tween object, much like calling a function

circle_mc
This is the instance name of the movie clip to be applied with easing.

"_x"
Property to be manipulated on, you can also use other properties as well like transparency, scale, and rotation.

mx.transitions.easing.Back.easeIn
The type of tween and the method of ease applied to it.

As taken from adobe website:

* Back: Extends the animation beyond the transition range at one or both ends once to resemble an overflow effect.
* Bounce: Adds a bouncing effect within the transition range at one or both ends. The number of bounces relates to the duration—longer durations produce more bounces.
* Elastic: Adds an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
* Regular: Adds slower movement at one or both ends. This feature enables you to add a speeding-up effect, a slowing-down effect, or both.
* Strong: Adds slower movement at one or both ends. This effect is similar to Regular easing, but it's more pronounced.
* None: Adds an equal movement from start to end without effects, slowing, or speeding up. This transition is also referred to as a linear transition.

The previous six easing classes each have three easing methods:

* easeIn: Provides the easing effect at the beginning of the transition.
* easeOut: Provides the easing effect at the end of the transition.
* easeInOut: Provides the easing effect at the beginning and end of the transition

These are the possible values.

100
This is the start value.

400
This is the end value.

2
This is the duration in seconds or in frames depending on the value of the next parameter

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.

You can even make an animation continue animating back and forth along the X-axis without stopping. The Tween class also accommodates this kind of animation with the aptly named yoyo() method.

You can add this script to make it go back and forth:

xTween.onMotionFinished = function() {
xTween.yoyo();
}

Here's a nifty swf that Keven Schmitt made, from website. You can play the settings and just copy and paste the code in your flash program.

So that's all there is to it, hope you like the tutorial. Till next time!

© 2006 Templates247.com All rights reserved.

Terms of Use |  Privacy Policy |  Site Map