Sujets sur : as3 enchaînement d’animations

Cours ActionScript 3 ‘as3 enchaînement d’animations’

Comment créer des animations avec les tweens en pure AS3 ?

Ecrit le 26 juillet par Matthieu
Publié dans le(s) sujet(s) Cours AS3

Vous êtes de plus en plus à l’aise avec la programmation actionscript 3.

Mais vous ne connaissez pas suffisamment le logiciel Adobe Flash pour créer des animations sympa. J’avais le même problème que vous.

Les possibilités d’Adobe Flash sont immenses, il est compliqué de trouver les fonctionnalités utiles au début !

Savez-vous qu’il est possible d’animation vos interface graphiques simplement en pure AS3 ?

Je vais tout vous expliquer dans ce cours vidéos.

Voici ce je vais vous apprendre :

Comment animer vos applications flash en pure AS3 ?
Quelles classes / framework utiliser ?
Et comment l’implémenter dans n’importe quelle application ou jeu flash ?
Comment enchainer plusieurs effets sur chaque éléments ?
La technique pour écouter la fin d’une animation et lancer une demande à votre visiteur.
La solution pour lancer vos effets avec un décalage, un délai de quelques secondes (c’est vous qui le déterminez).
Comment choisir le type d’effet : Elastic, Bounce…
Et la majorité des fonctionnalités utilisées pour optimiser vos Tweens.

A la fin de cette formation, vous serez à même d’animer vos applications flash sans utiliser le logiciel Adobe Flash.

Les Tweens en AS3

Version démonstration

Ci-dessous, le résultat dans de l’application avec Eaze Tween.

Cliquez sur l’écran pour relancer les effets de Tween.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/eaze-tween.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/eaze-tween.swf

Télécharger le code source Tween

Vous trouverez l’ensemble du code source commenté pour vous aider dans l’intégration de cette fonctionnalité dans vos applications flash.

Télécharger “Eaze Tween” ex-eaze-tween.zip – Téléchargé 751 fois – 337,82 Ko

Le site officiel : Eaze Tween

Ci-dessous, une partie de la classe Main modifiée.

[codesyntax lang= »actionscript3″ title= »Eaze Tween » bookmarkname= »Eaze Tween »]

/**

  The Initial Developer of the Original Code is
  Matthieu  - https://www.actionscript-facile.com
  Portions created by the Initial Developer are Copyright (C) 2010
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

*/
package
{

	import aze.motion.easing.Expo;
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import flash.display.Bitmap;
	import flash.events.Event;
	import flash.display.Sprite;

	import aze.motion.easing.Bounce;
	import aze.motion.easing.Elastic;
	import aze.motion.EazeTween;
	import aze.motion.eaze;

	import com.demonsters.debugger.MonsterDebugger;

	public class Main extends Sprite
	{
		private var oLogo : Bitmap;
		private var oLogo3 : Bitmap;

		/**
		 * Constructeur.
		 *
		 */
		public function Main()
		{
			// attend la fin de l'initialisation de la scène
			this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true);
		}

		/**
		 * Démarrage de l'application.
		 * définit le nombre d'images par secondes dans les paramètres de compilation
		 * -default-frame-rate 40
		 *
		 */
		private function onReady(event : Event) : void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

			// Init De MonsterDebugger
            MonsterDebugger.initialize(this);
            MonsterDebugger.trace(this, "Start Application");

			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onReloadEffect);

			// instanciation de l'objet graphique
			var oFirefox : Logo = new Logo();
			oLogo = new Bitmap( oFirefox );
			oLogo.smoothing = true;// pour lisser le rendu de l'image
			addChild( oLogo );

			var oFirefox3 : Logo = new Logo();
			oLogo3 = new Bitmap( oFirefox3 );
			oLogo3.x = 233;
			oLogo3.smoothing = true;// pour lisser le rendu de l'image
			addChild( oLogo3 );

			startEffect(true);
		}

		/**
		 * Lancement des effets.
		 * @param bFirst : si c'est le premier lancement, effet différent (à true).
		 *
		 */
		private function startEffect(bFirst:Boolean = false) : void
		{
			// click sur l'écran
			if(!bFirst)
			{
				oLogo.x = oLogo.y = 0;
				oLogo.width = 256;
				oLogo.height = 256;

				eaze(oLogo3).to(3,{width:256, height:256, x:233, y:0, alpha:100})
				.easing(Bounce.easeInOut)
				.chain(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})
				.easing(Expo.easeInOut)
				.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween
				.onComplete(newEffect, oLogo)
				;// en s
			}
			else
			{
				eaze(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})
				.easing(Bounce.easeInOut)// le type d'effet à utiliser
				.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween
				.onComplete(newEffect, oLogo)// à la fin des tween, appel de cette fonction avec les paramètres
				;// en s
			}

		}

		/**
		 * Enchainement d'une deuxième effet après le premier.
		 *
		 */
		private function newEffect(oDisplay:DisplayObject):void
		{
			eaze(oDisplay).from(3, {width:330, height:330, x:30, y:30 })// à partir de cette configuration
			.easing(Elastic.easeInOut)
			.colorMatrix(0.2, 0, -1); // brightness, contrast, saturation, hue.
		}

		/**
		 * Click sur l'écran par l'utilisateur.
		 * Relance tous les effets.
		 *
		 */
		private function onReloadEffect(event : MouseEvent) : void
		{
			MonsterDebugger.trace(this, "click sur l'écran");
			EazeTween.killAllTweens(); // arrête immédiatement toutes les tweens en cours.
			startEffect();
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

/**

The Initial Developer of the Original Code is

Matthieu - https://www.actionscript-facile.com

Contributor(s) :

package

{

import aze.motion.easing.Expo;

import flash.display.DisplayObject;

import flash.events.MouseEvent;

import flash.display.Bitmap;

import flash.events.Event;

import flash.display.Sprite;

import aze.motion.easing.Bounce;

import aze.motion.easing.Elastic;

import aze.motion.EazeTween;

import aze.motion.eaze;

import com.demonsters.debugger.MonsterDebugger;

public class Main extends Sprite

{

private var oLogo : Bitmap;

private var oLogo3 : Bitmap;

/**

* Constructeur.

public function Main()

{

// attend la fin de l'initialisation de la scène

this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true);

}

/**

* Démarrage de l'application.

* définit le nombre d'images par secondes dans les paramètres de compilation

* -default-frame-rate 40

private function onReady(event : Event) : void

{

this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

// Init De MonsterDebugger

MonsterDebugger.initialize(this);

MonsterDebugger.trace(this, "Start Application");

this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onReloadEffect);

// instanciation de l'objet graphique

var oFirefox : Logo = new Logo();

oLogo = new Bitmap( oFirefox );

oLogo.smoothing = true;// pour lisser le rendu de l'image

addChild( oLogo );

var oFirefox3 : Logo = new Logo();

oLogo3 = new Bitmap( oFirefox3 );

oLogo3.x = 233;

oLogo3.smoothing = true;// pour lisser le rendu de l'image

addChild( oLogo3 );

startEffect(true);

}

/**

* Lancement des effets.

* @param bFirst : si c'est le premier lancement, effet différent (à true).

private function startEffect(bFirst:Boolean = false) : void

{

// click sur l'écran

if(!bFirst)

{

oLogo.x = oLogo.y = 0;

oLogo.width = 256;

oLogo.height = 256;

eaze(oLogo3).to(3,{width:256, height:256, x:233, y:0, alpha:100})

.easing(Bounce.easeInOut)

.chain(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})

.easing(Expo.easeInOut)

.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween

.onComplete(newEffect, oLogo)

;// en s

}

else

{

eaze(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})

.easing(Bounce.easeInOut)// le type d'effet à utiliser

.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween

.onComplete(newEffect, oLogo)// à la fin des tween, appel de cette fonction avec les paramètres

;// en s

}

/**

* Enchainement d'une deuxième effet après le premier.

private function newEffect(oDisplay:DisplayObject):void

{

eaze(oDisplay).from(3, {width:330, height:330, x:30, y:30 })// à partir de cette configuration

.easing(Elastic.easeInOut)

.colorMatrix(0.2, 0, -1); // brightness, contrast, saturation, hue.

}

/**

* Click sur l'écran par l'utilisateur.

* Relance tous les effets.

private function onReloadEffect(event : MouseEvent) : void

{

MonsterDebugger.trace(this, "click sur l'écran");

EazeTween.killAllTweens(); // arrête immédiatement toutes les tweens en cours.

startEffect();

}

[/codesyntax]

Et vous, quelles libraires utilisez-vous pour créer vos animations / Tweens ?

Ou peut être préférez-vous les interpolations avec Adobe Flash ?

Partagez vos astuces dans les commentaires ci-dessous.

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé