Tutorial: Use TweenMax libs create a realistic tween with a simple example

Requierements

See the previous tutorial about how to install the TweenMax libraries in Flash IDE.

Usage

Tweens

We will try to test some tweens and easing  only with TweenMax to make this animation:

[swf:/wp-content/uploads/2013/03/TweenMax_test.swf 550 400]

Click on Insert > New symbol

1. Type: MovieClip
2. Enter the name: Apple
3. Check: Export for ActionScript
4. Enter the classname: Apple
5. Then click OK

Enter in the Apple symbol from your library:

Then draw an beautiful apple :).

Let’s the origin in the center of this image

Click on the “Stage” from the navigator on the top.

Now you are in an empty main stage.

Hit the right click from the frame on the timeline and select : Actions to open the Actions pannel.

Then just add this line in the Actions pannel.

import com.greensock.TweenMax;

If the library is correctly added in your Flash animation. Flash will autocomplete the package like this:

The TweenMax.to method can interpolate a tween with any properties.

For example this line can move an object to x and y coordinates.

TweenMax.to(theObject, theTimeInSeconds, {x:100, y:100});

Now add this lines of code:

// Import the TweenMax classes
import com.greensock.TweenMax;
import com.greensock.easing.*;

// Mouse event
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
function mouseUp (e:MouseEvent):void {
	// Create an apple on the stage
	var apple:Apple = new Apple();
	// Set the position to the mouse coordinates
	apple.x = stage.mouseX;
	apple.y = stage.mouseY;

	// Add a tween with TweenMax
	// The apple will move to the bottom with a bounce tween.
	// When to tween is complete the apple will be removed
	TweenMax.to(apple, 2, {y:apple.y + 150, ease:Bounce.easeOut, onComplete:removeApple, onCompleteParams:[apple]})

	// Add the apple to the stage
	addChild(apple);
}

function removeApple(apple:Apple):void {
	trace("Remove apple");
	removeChild(apple);
}