<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

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

5 questions

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

Mots clés : , , , , , , , , ,

Le Kit du Développeur Flash

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://www.actionscript-facile.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é 162 fois – 338 KB

Le site officiel : Eaze Tween

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

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

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.



Développez des Jeux et Applications Flash avec la Formation AS3 Facile !

Recevez Gratuitement Des Cours en Vidéos, des codes source et des livrets de formation.
Et en bonus gratuit : Le Framework AS3 Facile ! 


Praesent ante. Sed at leo eleifend et, fringilla quis pulvinar tempus libero