Wednesday, 8 July 2009

Tweens in Actionscript 3

In this Flash tutorial you will learn how to use tweens in Actionscript 3.0. Tweens are basically a way of animating a movie clip over a number of seconds with Actionscript code. A tweened movie clip can be moved, resized or faded using the Tween class. The Tween class also provides different easing methods. These methods can cause the objects to accelerate or deceleration during an animation. (EaseIn & EaseOut).

To use Tweens you will need to add the following two lines of code at the start of your code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

The first line of code imports the Tween class from the fl.transitions base class. As mentioned above the Tween class uses Actionscript code to move, fade and resize movie clips to be animated over a number of seconds. The second line of code imports the all the easing classes from fl.transitions base class. As briefly mentioned above, the easing class creates an easing effect which causes an object to accelerate or deceleration during an animation.

For more information on these classes checkout the:
‘AS3 Tween Components Reference’ and the ‘AS3 fl.transitions.easing Components Reference’.


Tweens in Actionscript 3 - part 1

Step 1

Open a new Flash AS3 file.
Select the rectangle tool and draw a rectangle shape on the stage. You can choose whatever colour you wish, I have selected #FF0000 colour. Your rectangle should looks something like below:




Step 2

Convert your rectangle into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Now give your rectangle the instance name: rectangle_mc




Step 3

On the timeline create a new layer called “Action”. Select the first frame and hit F9 to open up the action panel and enter the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

//1.
var myTween:Tween = new Tween(rectangle_mc, "x", Strong.easeOut, 0, 300, 5, true);

Code
1. The code above creates a new instance of the tween class with name “myTween”.
  • The first parameter is object you want to animate.
  • The second parameter is the property you want to affect. Some of the other properties you can affect are: y, z, width, scaleX, scaleY, scale Z, rotationX, rotationY, and rotationZ.
  • The third parameter is the name of the easing function. You can also use Back, Bounce, Elastic, None, Regular, and Strong.
  • The fourth parameter is the starting position of the object.
  • The fifth parameter is the ending position of the object.
  • The sixth parameter is the duration of the motion.
  • The seventh parameter is the useSeconds. This specifies whether you want to use seconds or frames. Choose true for frames and false for seconds.


Step 4

Test your tween Ctrl + Enter. You should see your rectangle movie clip from left to right in five seconds.



>You should now be able to use Tweens in Actionscript 3.0.

Check back later for Tweens in Actionscript 3.0 part 2 where I will discuss the other Tween properties.

7 comments:

keith 2 December 2010 at 14:51  
This comment has been removed by the author.
keith 2 December 2010 at 15:42  
This comment has been removed by the author.
iliketo 3 December 2010 at 10:46  

@keith

Try this code:

import fl.transitions.Tween;
import fl.transitions.easing.*;


stage.addEventListener(MouseEvent.CLICK, moveMc);

function moveMc(e:MouseEvent):void{
var myTween:Tween = new Tween(movieclip, "x", Strong.easeOut, movieclip.x, mouseX, 3, true);
var myTween2:Tween = new Tween(movieclip, "y", Strong.easeOut, movieclip.y, mouseY, 3, true);
}


Alternatively, you can use the TweenLite plugin.

import com.greensock.*;

stage.addEventListener(MouseEvent.CLICK, moveMc);

function moveMc(e:MouseEvent):void{
TweenLite.to(movieclip, 3, {y:mouseY, x:mouseX});
}

To move to a point after 6 click use the following code.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var count:uint=0;

stage.addEventListener(MouseEvent.CLICK, moveMc);

function moveMc(e:MouseEvent):void {
count++;
trace(count);
if (count>=6) {
var myTween:Tween=new Tween(box,"x",Strong.easeOut, movieclip.x,mouseX,3,true);
var myTween2:Tween=new Tween(box,"y",Strong.easeOut, movieclip.y,mouseY,3,true);
}
}

keith 3 December 2010 at 11:58  
This comment has been removed by the author.
iliketo 18 December 2010 at 05:19  

@keith

Try something like below. The code assumes your 6 points are movie clips with the instance names: p1, p2, p3 etc. And you movable movie clip has the instance name: moveMc

import fl.transitions.Tween;
import fl.transitions.easing.*;

var sixMcsArray = [p1,p2,p3,p4,p5,p6];

var count:int = -1;

stage.addEventListener(MouseEvent.CLICK, moveMovieClip);


function moveMovieClip(e:MouseEvent):void{

count == sixMcsArray.length-1 ? count = 0 : count++;

var myTween1:Tween = new Tween(moveMc, "x", Strong.easeOut, moveMc.x, sixMcsArray[count].x, 5, true);
var myTween2:Tween = new Tween(moveMc, "y", Strong.easeOut, moveMc.y, sixMcsArray[count].y, 5, true);

}

James 20 December 2010 at 10:44  

Thanks for the reply, there was no need to go through the trouble of writing all that out! cant get the code working but no worries il figure it out. Thanks again

Keith 20 December 2010 at 10:50  

Hey man, thanks for the reply, there was no need to write it all out but thanks! cant seem to get the code working but no worries, il figure it out some how!

Thanks again

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP