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

[:en]

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

[:fr]

Prérequis

Lisez le précédent tutorial à propos de l’installation de la librairie TweenMax.
Tutoriel : Installer les librairies TweenMax ActionScript 3 avec Flash IDE pour débutants

Utilisation

Animations (Tweens)

Nous allons essayer de tester quelques animations et quelques animations fluides :

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

Cliquer sur Insertion > Nouveau symbole :

1. Type: Clip
2. Entrer le nom: Apple
3. Cocher : Exporter pour ActionScript
4. Entrer le nom de la classe : Apple
5. Enfin cliquer OK

Entrer dans le symbole Apple depuis la Bibliothèque :

Dessiner ensuite une belle pomme rouge :).

Center la pomme au centre en laissant l’origine au milieu.

Cliquer sur Séquence 1 depuis le navigateur en haut.

Maintenant il y a une scène totalement vide.

Faire un clic droit sur la timeline et ouvrir le panneau Actions.

Ajouter ensuite cette ligne de code :

import com.greensock.TweenMax;

Si la librarie est correctement installée Flash propose de compléter la suite :

La méthode TweenMax.to va créer une interpolation avec n’importe quelles propriétés.

Par exemple cette ligne permet de déplacer l’objet vers de nouvelles coordonnées x et y :

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

Enfin ajouter ces lignes de codes :

// 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);
}

[:]