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:

package com.<span class="me1">adriansule</span>.<span class="me1">application</span>.<span class="me1">multipletweensexample</span>
<span class="br0">{</span>
<span class="coMULTI">/*
* @Author: Adrian Sule
* @Website: www.adriansule.com/blog
*/
</span>
<span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="kw3">MovieClip</span>;
<span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>;
<span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">MouseEvent</span>;
<span class="kw3">import</span> fl.<span class="me1">motion</span>.<span class="me1">easing</span>.<span class="sy0">*</span>;
<span class="kw3">import</span> com.<span class="me1">gskinner</span>.<span class="me1">motion</span>.<span class="me1">MultiTween</span>;
<span class="kw3">import</span> com.<span class="me1">gskinner</span>.<span class="me1">motion</span>.<span class="me1">GTween</span>;
<span class="kw3">import</span> com.<span class="me1">gskinner</span>.<span class="me1">motion</span>.<span class="me1">GTweenTimeline</span>;
<p><span class="kw3">public</span> <span class="kw2">class</span> MultipleTweens <span class="kw3">extends</span> <span class="kw3">MovieClip</span>
<span class="br0">{</span>
<span class="co1">//Example 1 tweens</span>
<span class="kw3">private</span> <span class="kw2">var</span> geometricShapesTween:GTween;
<span class="kw3">private</span> <span class="kw2">var</span> mt:MultiTween;
<span class="co1">// Exmaple 2 tweens</span>
<span class="kw3">private</span> <span class="kw2">var</span> packmanTween:GTweenTimeline;
<span class="kw3">private</span> <span class="kw2">var</span> jumpUpTween:GTween;
<span class="kw3">private</span> <span class="kw2">var</span> jumpDownTween:GTween;
<span class="kw3">private</span> <span class="kw2">var</span> packmanAnimationTween:GTween;</p>
<p><span class="kw3">public</span> <span class="kw2">function</span> MultipleTweens<span class="br0">(</span><span class="br0">)</span>
<span class="br0">{</span>
initiApp<span class="br0">(</span><span class="br0">)</span>;
<span class="br0">}</span></p>
<p><span class="kw3">private</span> <span class="kw2">function</span> initiApp<span class="br0">(</span><span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
<span class="co1">// Add mouse events for start/pause buttons</span>
start1.<span class="me1">addEventListener</span><span class="br0">(</span>MouseEvent.<span class="me1">CLICK</span>, startExample1<span class="br0">)</span>;
start2.<span class="me1">addEventListener</span><span class="br0">(</span>MouseEvent.<span class="me1">CLICK</span>, startExample2<span class="br0">)</span>;
pause1.<span class="me1">addEventListener</span><span class="br0">(</span>MouseEvent.<span class="me1">CLICK</span>, pauseExample1<span class="br0">)</span>;
pause2.<span class="me1">addEventListener</span><span class="br0">(</span>MouseEvent.<span class="me1">CLICK</span>, pauseExample2<span class="br0">)</span>;
pause1.<span class="me1">buttonMode</span>= <span class="kw2">true</span>;
pause2.<span class="me1">buttonMode</span>= <span class="kw2">true</span>;
start1.<span class="me1">buttonMode</span>= <span class="kw2">true</span>;
start2.<span class="me1">buttonMode</span> = <span class="kw2">true</span>;
<span class="co1">// Hide the pause buttons at the begining</span>
pause1.<span class="kw3">visible</span> = <span class="kw2">false</span>;
pause2.<span class="kw3">visible</span> = <span class="kw2">false</span>;
<span class="co1">// Initiate animation and put it on hold to allow user interactivity with</span>
<span class="co1">// the ’start/stop’ buttons interactivity</span>
animateExample1<span class="br0">(</span><span class="br0">)</span>;
geometricShapesTween.<span class="kw3">pause</span><span class="br0">(</span><span class="br0">)</span>;
animateExample2<span class="br0">(</span><span class="br0">)</span>;
packmanTween.<span class="kw3">gotoAndStop</span><span class="br0">(</span>0<span class="br0">)</span>;
<span class="br0">}</span></p>
<p><span class="co1">//——————————————————————–</span>
<span class="co1">// Function: Start tweens for example 1</span>
<span class="co1">//——————————————————————–</span>
<span class="kw3">private</span> <span class="kw2">function</span> startExample1<span class="br0">(</span><span class="kw3">e</span>:Event<span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
geometricShapesTween.<span class="kw3">play</span><span class="br0">(</span><span class="br0">)</span>;
start1.<span class="kw3">visible</span> = <span class="kw2">false</span>;
pause1.<span class="kw3">visible</span> = <span class="kw2">true</span>;
<span class="br0">}</span></p>
<p><span class="co1">//——————————————————————–</span>
<span class="co1">// Function: Start tweens for example 2</span>
<span class="co1">//——————————————————————–</span>
<span class="kw3">private</span> <span class="kw2">function</span> startExample2<span class="br0">(</span><span class="kw3">e</span>:Event<span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
packmanTween.<span class="kw3">play</span><span class="br0">(</span><span class="br0">)</span>;
start2.<span class="kw3">visible</span> = <span class="kw2">false</span>;
pause2.<span class="kw3">visible</span> = <span class="kw2">true</span>;
<span class="br0">}</span></p>
<p><span class="co1">//——————————————————————–</span>
<span class="co1">// Function: Pause tweens for example 1</span>
<span class="co1">//——————————————————————–</span>
<span class="kw3">private</span> <span class="kw2">function</span> pauseExample1<span class="br0">(</span><span class="kw3">e</span>:Event<span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
geometricShapesTween.<span class="kw3">pause</span><span class="br0">(</span><span class="br0">)</span>;
start1.<span class="kw3">visible</span> = <span class="kw2">true</span>;
pause1.<span class="kw3">visible</span> = <span class="kw2">false</span>;
<span class="br0">}</span></p>
<p><span class="co1">//——————————————————————–</span>
<span class="co1">// Function: Pause tweens for example 2</span>
<span class="co1">//——————————————————————–</span>
<span class="kw3">private</span> <span class="kw2">function</span> pauseExample2<span class="br0">(</span><span class="kw3">e</span>:Event<span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
packmanTween.<span class="kw3">pause</span><span class="br0">(</span><span class="br0">)</span>;
start2.<span class="kw3">visible</span> = <span class="kw2">true</span>;
pause2.<span class="kw3">visible</span> = <span class="kw2">false</span>;
<span class="br0">}</span></p>
<p><span class="co1">//——————————————————————–</span>
<span class="co1">// Function: Tweening multiple instances</span>
<span class="co1">//——————————————————————–</span>
<span class="kw3">private</span> <span class="kw2">function</span> animateExample1<span class="br0">(</span><span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
<span class="co1">// This tween controls the properties of all three objects via multitween:</span>
geometricShapesTween = <span class="kw2">new</span> GTween<span class="br0">(</span><span class="kw2">null</span>, 0.8, <span class="kw2">null</span>, <span class="br0">{</span> reflect:<span class="kw2">true</span>, repeat: -1, ease:Sine.<span class="me1">easeInOut</span> <span class="br0">}</span> <span class="br0">)</span>;</p>
<p><span class="co1">// All 3 targets have their own properties object.</span>
mt = <span class="kw2">new</span> MultiTween<span class="br0">(</span><span class="br0">[</span>obj1, obj2, obj3<span class="br0">]</span>, <span class="br0">[</span> <span class="br0">{</span> alpha:0.1, x:100, rotation:360 <span class="br0">}</span>, <span class="br0">{</span> alpha:1, scaleX:2, scaleY:2 <span class="br0">}</span>, <span class="br0">{</span> alpha:0.1, x:450 <span class="br0">}</span> <span class="br0">]</span>, geometricShapesTween<span class="br0">)</span>;
<span class="br0">}</span></p>
<p><span class="co1">//——————————————————————–</span>
<span class="co1">// Function: Tween one instance by using multiple tweens</span>
<span class="co1">//——————————————————————–</span>
<span class="kw3">private</span> <span class="kw2">function</span> animateExample2<span class="br0">(</span><span class="br0">)</span>:<span class="kw3">void</span>
<span class="br0">{</span>
<span class="co1">// Start tween inside the packman instance (eg.: the moving mouth)</span>
packmanAnimationTween = <span class="kw2">new</span> GTween<span class="br0">(</span>pacman, 0.5, <span class="br0">{</span> currentFrame:pacman.<span class="me1">totalFrames</span> + 1 <span class="br0">}</span>, <span class="br0">{</span> repeat: -1 <span class="br0">}</span> <span class="br0">)</span>;</p>
<p><span class="co1">// We use two tweens for the jump: one for up, one for down</span>
jumpUpTween = <span class="kw2">new</span> GTween<span class="br0">(</span>pacman, 0.2, <span class="br0">{</span> y:pacman.<span class="me1">y</span> - 100, rotation:-45 <span class="br0">}</span>, <span class="br0">{</span> ease:Sine.<span class="me1">easeOut</span> <span class="br0">}</span> <span class="br0">)</span>;
jumpDownTween = <span class="kw2">new</span> GTween<span class="br0">(</span>pacman, 0.3, <span class="br0">{</span> y:pacman.<span class="me1">y</span>, rotation:0 <span class="br0">}</span>, <span class="br0">{</span> ease:Sine.<span class="me1">easeIn</span> <span class="br0">}</span> <span class="br0">)</span>;</p>
<p><span class="co1">// Add multiple tweens to the packman instance using an array of alternating start positions and tween instances</span>
packmanTween = <span class="kw2">new</span> GTweenTimeline<span class="br0">(</span>pacman, 3, <span class="br0">{</span> x:545 <span class="br0">}</span>, <span class="br0">{</span> repeat: -1 <span class="br0">}</span>, <span class="br0">[</span>0, packmanAnimationTween, 1.4, jumpUpTween, 1.8, jumpDownTween<span class="br0">]</span><span class="br0">)</span>;
<span class="br0">}</span>
<span class="br0">}</span>
<span class="br0">}

The code explanation is on next page >