ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
AS3 Multiple Tweens
http://www.actionscript.org/resources/articles/915/1/AS3-Multiple-Tweens/Page1.html
Adrian Sule
Hi, I'm a Romanian Flash Developer, based in the UK, and I probably have a bunch of articles in my head that need to be laid down in writing. Graduated a Bachelor Degree in Computer Science, and have been working within Digital Agencies for the last 4 years now, in the Creative team as a Flash Developer and sometimes Designer. http://www.adriansule.com 
By Adrian Sule
Published on August 15, 2009
 

Here is a way of using only one tween to animate multiple instances and also how to apply multiple tweens on just one instance. This example uses an open source tweening library named GTween.


This article will show you how you can:
1) use only one tween to animate multiple instances,
2) apply multiple tweens to just one instance.

For all the tweening that take place in this application we use a wonderfull open source library
created by G.Skinner version ‘GTween_beta5‘.
Of course there are other ways of doing this using either Adobe Flash core Tween classes, or other open source ones like TweenLite, Tweensy, etc, but for this example we use the GTween.

Here is a preview of the application you will create:

You can download the completed application files of this example, from the link located at the bottom of the page.

So let’s start !

You first need to create a Flash .fla file and add 4 instances (obj1, obj2, obj3, packman) which will be used in
in the tweening and 2 buttons for each example to control the tweens (start/pause)

Now create a class named MultipleTweens.as and put it in this package folder path: com/adriansule/application/multipletweensexample
And add the code below:

[as]package com.adriansule.application.multipletweensexample
{
/*
* @Author: Adrian Sule
* @Website: www.adriansule.com/blog
*/

import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.motion.easing.*;
import com.gskinner.motion.MultiTween;
import com.gskinner.motion.GTween;
import com.gskinner.motion.GTweenTimeline;

public class MultipleTweens extends MovieClip
{
//Example 1 tweens
private var geometricShapesTween:GTween;
private var mt:MultiTween;
// Exmaple 2 tweens
private var packmanTween:GTweenTimeline;
private var jumpUpTween:GTween;
private var jumpDownTween:GTween;
private var packmanAnimationTween:GTween;

public function MultipleTweens()
{
initiApp();
}

private function initiApp():void
{
// Add mouse events for start/pause buttons
start1.addEventListener(MouseEvent.CLICK, startExample1);
start2.addEventListener(MouseEvent.CLICK, startExample2);
pause1.addEventListener(MouseEvent.CLICK, pauseExample1);
pause2.addEventListener(MouseEvent.CLICK, pauseExample2);
pause1.buttonMode= true;
pause2.buttonMode= true;
start1.buttonMode= true;
start2.buttonMode = true;
// Hide the pause buttons at the begining
pause1.visible = false;
pause2.visible = false;
// Initiate animation and put it on hold to allow user interactivity with
// the ’start/stop’ buttons interactivity
animateExample1();
geometricShapesTween.pause();
animateExample2();
packmanTween.gotoAndStop(0);
}

//——————————————————————–
// Function: Start tweens for example 1
//——————————————————————–
private function startExample1(e:Event):void
{
geometricShapesTween.play();
start1.visible = false;
pause1.visible = true;
}

//——————————————————————–
// Function: Start tweens for example 2
//——————————————————————–
private function startExample2(e:Event):void
{
packmanTween.play();
start2.visible = false;
pause2.visible = true;
}

//——————————————————————–
// Function: Pause tweens for example 1
//——————————————————————–
private function pauseExample1(e:Event):void
{
geometricShapesTween.pause();
start1.visible = true;
pause1.visible = false;
}

//——————————————————————–
// Function: Pause tweens for example 2
//——————————————————————–
private function pauseExample2(e:Event):void
{
packmanTween.pause();
start2.visible = true;
pause2.visible = false;
}

//——————————————————————–
// Function: Tweening multiple instances
//——————————————————————–
private function animateExample1():void
{
// This tween controls the properties of all three objects via multitween:
geometricShapesTween = new GTween(null, 0.8, null, { reflect:true, repeat: -1, ease:Sine.easeInOut } );

// All 3 targets have their own properties object.
mt = new MultiTween([obj1, obj2, obj3], [ { alpha:0.1, x:100, rotation:360 }, { alpha:1, scaleX:2, scaleY:2 }, { alpha:0.1, x:450 } ], geometricShapesTween);
}

//——————————————————————–
// Function: Tween one instance by using multiple tweens
//——————————————————————–
private function animateExample2():void
{
// Start tween inside the packman instance (eg.: the moving mouth)
packmanAnimationTween = new GTween(pacman, 0.5, { currentFrame:pacman.totalFrames + 1 }, { repeat: -1 } );

// We use two tweens for the jump: one for up, one for down
jumpUpTween = new GTween(pacman, 0.2, { y:pacman.y - 100, rotation:-45 }, { ease:Sine.easeOut } );
jumpDownTween = new GTween(pacman, 0.3, { y:pacman.y, rotation:0 }, { ease:Sine.easeIn } );

// Add multiple tweens to the packman instance using an array of alternating start positions and tween instances
packmanTween = new GTweenTimeline(pacman, 3, { x:545 }, { repeat: -1 }, [0, packmanAnimationTween, 1.4, jumpUpTween, 1.8, jumpDownTween]);
}
}
}[/as]

The code explanation is on next page >




Code explanation:
The initApp() method does is to add mouse events to the start/pause buttons for both examples, and initialize the
two examples tweens.
The startExample1(), startExample2(), pauseExample1(), pauseExample2() are event methods used by the start/pause buttons.

Example 1:
Instance names which we shall tween: obj1, obj2, obj3.
Button instance names: start1, pause1.
This example displays 3 geometric shapes which can tween by using only one tween instance and
a MultipleTween class.

The method animateExample1() does the following:
Creates a single GTween instance named ‘geometricShapesTween‘, and a MultiTween instance.
The MultiTween is used to apply multiple tweens on the specified movieclip instances in the application,
in our case the geometric shapes named ‘obj1, obj2 and obj3‘.

Example 2:
Instance name: packman.
Button instance names: start2, pause2.
Mr ‘packman‘ is a movieclip instance, which has a timeline frame animation - of his mouth opening and closing.

The method animateExample2() does the following:
Controls packman tweens by using the GTween and TweenTimeline classes.
And also can move his moouth, move from left to right, jump up and down.
Here are the names of the tweens we use: packmanAnimationTween, jumpUpTween, jumpDownTween.
The TweenTimeline specifies, using an Array, the order of when those tweens should take place and also the time when to do it.

Download application


www.adriansule.com