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

View all articles by Adrian Sule

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.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]);
}
}
}

The code explanation is on next page >