<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.

Sujets sur : tween

Cours ActionScript 3 ‘tween’

Les fonctions Tween et Dessin avec Starling Framework

Commentaires fermés sur Les fonctions Tween et Dessin avec Starling Framework

Ecrit le 25 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 2D

Starling Framework est une libraire ActionScript qui fournit un saut de performances considérable, continuons la découverte des différentes fonctionnalités.

Le thème de ce Cours ActionScript 3 concerne l’utilisation des fonctionnalités de dessins et également la gestion des Tweens avec Starling Framework.

Pour une présentation de Starling Framework, je vous invite à consulter le Cours AS3 dédié.

Vous pouvez également étudier les cours précédents sur Starling Framework.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Comment utiliser une partie des classes Starling, proches de celles natives en Flash (Sprite, MovieClip…).
  • La technique pour dessiner avec Starling Framework.
  • Comment charger vos éléments (images, fonts) dynamiquement et les utiliser avec Starling Framework.
  • Et comment implémenter les classes Starling dans votre code ActionScript.
  • Comment implémenter plusieurs fonctionnalités simultanément avec Starling Framework. Par exemple, en appliquant un effet de Tween alpha sur une image chargée dynamiquement.

 

  • Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.

Cette formation ActionScript vous permettra d’ajouter le dynamisme des Tweens à vos applications flash.

De plus, vous serez capable de charger des éléments dynamiquement pour rendre vos jeux flash plus modulaires et personnalisables simplement.

Tweens et Drawing avec Starling Framework

[spoiler]

Bonjour à tous et bienvenue sur actionscript-facile.com

 

Dans ce 5eme cours sur le framework starling, nous allons voir comment utiliser des tweens, des outils de dessin et le chargement dynamiques de vos images de polices de caractères, avec starling dans votre application flash AS3.

 

 

Qu’est-ce que le framework starling ?

 

Pour une présentation complète et détaillée je vous renvoie à la toute 1ere vidéos de cours pour en apprendre plus.

 

Le Framework starling, en résumé, c’est une librairie en pure AS3.

Cela permet à votre application flash en 2D, pour le rendu, d’utiliser directement le GPU, donc la carte graphique de votre ordinateur.

 

Et d’avoir des performances de rendu incomparable par rapport aux anciennes versions du player flash.

 

L’API de starling framework, comme vous l’avez vu, est très familière, pour un apprentissage rapide.

 

En fait il suffit d’échanger les classes natives de flash avec leur équivalence dans les classes natives donc display objet, Sprite, movie clip etc. etc.

 

Dans ce tutoriel actionscript, nous allons voir plusieurs exemples pratiques.

 

Ces exemples sont tirés du livre sur starling framework de Thibault Imbert que vous trouverez en téléchargement sous cet tutoriel.

 

C’est un livre en anglais très bien fait.

Il y aura également d’autres cours AS3 consacré à ce framework.

 

Nous allons, à travers plusieurs exemples, utiliser des tween sur des objets starling, le chargement dynamique d’éléments graphiques et un outil de dessin très pratique avec straling.

 

 

Passons tout de suite à la pratique.

 

Comme d’habitude, notre classe main étend Sprite , le sprite de flash. Display.

 

Nos paramètres de compilation : pensez à rajouter default framerate si vous voulez les l’augmenter, tout en sachant que vous pouvez le configurer d’ici c’est plus simple.

Par contre n’oubliez pas de rajouter ce paramètre de compilation pour activer stage 3D avec le flash Player 11.

 

Dans vos paramètres de compilation, n’oubliez pas d’utiliser Player globale version 11. SWC, qui est bien évidemment en téléchargement sous ce tutoriel vidéo.

 

Et également, dans votre fichier index.html, pensez à rajouter Wmode = direct, ça permet d’activer stage3D et l’accélération du GPU.

 

Sinon en dehors de ça, un on créé une nouvelle instance de starling en activant

l’anti crénelage, le multitouche pour un smartphone.

 

Et on démarre game.

 

Qu’est-ce qu’on va faire ?

 

On va apprendre à manipuler les outils dessins.

C’est-à-dire on a une image et on veut la laisser affichée à l’écran .

A chaque fois que l’on appuie enfin, quand on laisse appuyer, par exemple, on peut le faire pour simuler un déplacement d’images sur un smartphone.

 

Un déplacement d’un objet et là on va prendre une image.

C’est une gomme, on l’a récupérée avec sa classe.

 

On a notre rendu de texture. Comme d’habitude, ça ne change pas, on créé un bitmap à partir notre image.

On créé les textures à partir de notre image.

Et on créé notre image avec la texture.

 

Tout ça, on l’a déjà vu plusieurs fois, c’est simple.

On déplace le point d’origine 0 ;0.

 

J’ai rajouté l’activation du smooting pour lisser l’image parce que je la redimensionne.

Juste en dessous, en faisant un scale.

 

Dans la moitié on créé notre zone de dessin.

 

Toute la taille de la scène et ensuite on créé notre canevas.

C’est-à-dire dans cette zone de dessin, on pourra dessiner.

 

On affecte la texture de rendu à une image et on ajoute le canevas sur la scène.

Ensuite, on écoute les événements de la souris ou du doigt.

 

Quand l’utilisateur appuie sur l’écran avec son doigt ou ses doigts, en multitouches on lance cette fonction.

On l’a déjà vu c’est-à-dire qu’on récupère les coordonnées des doigts dans un tableau.

On parcourt ce tableau et si c’est cliqué ou touché l’écran.

 

On dessines, sinon on fait rien.

Là on récupère la position de chaque doigts.

On positionne le pinceau, donc notre image pour dessiner.

Et après on dessine dans le canevas.

C’est vraiment tout simple.

 

Je vais recompiler l’application pour vous montrer le résultat.

 

Vous avez votre scène vide.

Si j’appuie sur la gomme, si je laisse appuyé sur la gomme qui reste appuyée en déplacement.

En relâchement, on pourrai rajouter d’effacer tout l’écran et laisser la dernière position de la gomme.

C’est simple à faire, je recharge, je vais simuler le multitouches en appuyant sur la touche contrôle.

 

J’appuie sur la touche contrôle et vous voyez 2 gommes en même temps recharger la page.

 

J’appuie sur la touche contrôle une fois.

 

Un petit outil de dessin à travailler voilà.

Cela vous laisse plusieurs possibilités dans un jeu pour faire le glisser déplacer etc. etc.

 

Maintenant, nous allons voir l’utilisation des tween avec le Framework starling.

 

 

C’est également assez simple qu’est ce qu’on fait ?

 

On récupère une police de caractère donc un fichier TTF qui contient notre polices de caractères.

 

Si on regarde ici, dans font on a angelina.ttf dans asset, on avait la gomme.

 

On attend l’initialisation de la scène.

On créé une nouvelle instance de notre police.

On créé un textField, comme le cours sur la création de deux polices embarquée.

 

Et on positionne notre texte sur la scène.

Ensuite, on affiche le texte et c’est là où on créé une tween.

 

On créé une tween, on précise le texte, enfin l’objet à ajouter sur une durée de quatre secondes.

 

Et on fait une transition de isInOut pour simuler un rebondissement.

 

Il y a plusieurs types de tween.

Vous les avez toutes là.

Vous pouvez très facilement les changer.

 

Par exemple on va prendre ça, l’objet tween.

Si vous avez déjà utilisé des tween classique qu’on peut faire ?

 

Tous ces changements d’alpha sur le texte.

Ca c’est pour bouger le ciel donc le rétrécir.

Vous avez plusieurs paramètres : vous pouvez jouer avec sous forme de tween.

 

On indique la destination de l’objet.

On va le déplacer vers le bas pour jouer sur la transparence alpha.

 

Par exemple, si on avait mit une image ici, on aurait pu jouer sur son alpha.

Ensuite, on écoute tous les événements diffusés par la tween.

 

Donc start quand elle démarre.

OnUpdate : c’est la progression quand elle est mise à jour.

OnComplete : quand elle est terminée.

 

Pour lancer la tween, il nous suffit juste de l’ajouter à starling.

 

La tween se lancera.

On a nos fonctions écouteur d’événements.

 

Appel par l’objet tween tout simplement.

 

Les trois c’est pareil.

J’ai rajouté un petit debug.

 

Après, vous pouvez enchaîner avec une deuxième tween etc. etc. une animation enfin n’importe.

 

J’ai mis du debug comme ça on verra le résultat dans monster debugger.

 

Une tween rien de bien compliqué, je lance la compilation et on va voir le résultat dans le debugger et directement à l’écran.

 

Je recharge ma page et vous allez voir le texte se déplacer avec une tween.

 

Voilà, le texte s’est déplacé normalement c’est un peu plus fluide mais bon ça c’est mon pc.

 

Je recharge une dernière fois et vous voyez le texte là qui se déplace.

Si on regarde le debug, nous avons bien notre debug.

C’est-à-dire mon chargement enfin application initialisée, la tween démarre et ensuite progression de la tween.

Elle est complétée.

Vous avez la possibilité d’enchaîner sur d’autres actions en fonction de ce que vous souhaitez écouter de la tween.

 

Nous allons voir le dernier thème de ce cours.

 

On a utilisé des ressources embarquées dans nos applications flash donc évidemment ça grossit le SWF final.

 

Il faut savoir qu’avec starling, c’est tout à fait possible de charger dynamiquement nos images, nos polices de caractères…

 

Le chargement dynamique permet d’alléger votre SWF et de charger les éléments uniquement quand l’utilisateur est sur l’interface concerné. Donc quand c’est nécessaire.

 

Pour cela, on crée un objet Loader classique.

On écoute les événements complete et error.

Et on charge une image. Une image qui est sur le site actionscript-facile.

 

Ensuite on écoute.

En cas d’erreur, ça c’est appelé par l’objet.

 

Je vais le rajouter appel par l’objet Loader.

 

Voilà et pareil ici.

Une fois que notre image est chargée, on récupère l’objet bimap.

Puisque c’est une image, quand ce sera une police on récupérera l’objet police.

 

Donc e.currentTarget.content as bitmap et après classique ça revient comme on l’avait vu tout à l’heure.

 

Une fois qu’on a récupéré notre bitmap, il nous reste plus qu’à faire un petit peu ce qu’on veut derrière.

 

Qu’est ce qu’on fait ?

On récupère notre bitmap, on créé notre texture puis on créé notre objet image et on l’affiche.

 

Vous pouvez faire ça pour vos jeux vidéo.

Vous chargez les graphismes en fonction du niveau où le joueur se situe.

Libre à vous de charger uniquement les éléments du niveau, les éléments du niveau 2.

Ca fait d’accord une petite barre de chargement mais au moins au premier chargement du SWF il sera super léger.

Il contiendra uniquement votre algorithme de calcul.

 

Il nous reste plus qu’à compiler et on va voir le résultat du chargement directement à l’écran.

 

Je vais recharger la page et vous allez voir le SWF sera vide dont il sera blanc et l’image va se charger.

 

L’image se charge et s’affiche.

Je refais elle s’affiche avec starling donc elle se charge et elle s’affiche.

 

On peut même rajouter un petit effet de tween alpha dessus.

Je vais le faire tout de suite et je vais recompiler.

 

Qu’est-ce que je fais ?

 

Comme je vous le disais, après une fois que l’image est chargée on la récupère.

 

Ca fonctionne exactement comme les autres exemples que je vous ai montré.

 

On créé notre objet tween sur l’image sur une durée de 6 secondes.

 

On fera une transition EasyOutElastic, on joue sur la transparence alpha et on l’ajoute à start.

 

Pour démarrer la tween rien de plus : là j’écoute.

Aucun événement diffusé par la tween.

J’en ai pas besoin c’est juste un exemple pratique.

 

Une fois que l’animation est chargée donc je recharge et vous allez voir l’image charger dynamiquement et après elle subi une tween sur son effet alpha.

 

Voilà, je recharge pour vous montrer une autre fois.

L’image est chargée dynamiquement et après elle subi une tween de six secondes sur son alpha.

 

On a vu plusieurs solutions d’utilisation des nouvelles fonctionnalités starling : les tween, le dessin, le chargement dynamique des assets.

 

Sous cette vidéo, vous pourrez télécharger le code source complet des différents exemples.

 

N’hésitez pas à poser vos questions sur le Framework Starling dans la zone commentaire sous cette vidéo.

Vous pouvez aussi partager vos liens vers les applications que vous avez créé qui utilise ce framework.

 

Je vous dis à très bientôt sur actionscript-facile.com pour le prochain cours sur Sarling framework.

[/spoiler]

Version démonstration

Ci-dessous plusieurs exemples d’utilisations de dessins, Tweens et chargements dynamiques avec Starling Framework.

Appuyez sur l’écran avec le clique gauche de la souris pour commencer à dessiner. Maintenez le bouton “Ctrl” du clavier enfoncé pour simuler le multi-touches des smartphones.

Télécharger le code source du cours AS3

Et voici le code source des exemples avec Starling Framework.

Le fichier zip contient également la version 11 de playerglobal v.11.swc pour la compilation de votre application flash.

Télécharger “Exemple Starling Framework Tween - Dessin” ex-starling5-dynamic-assets-tween.zip – Téléchargé 166 fois – 828 Ko

Consulter le code source directement sur GitHub.

Le Site Officiel de Starling Framework.

Le Forum officiel consacré à Starling Framwework.

Télécharger le livre “Introduction à Starling Framework” de Thibault Imbert (rédigé en anglais).

Télécharger “Livre Starling Framework” Introducing_Starling-rev_1.0.pdf – Téléchargé 12263 fois – 9 Mo

Dans quelles types d’applications flash avez-vous implémenté Starling Framework ?

Postez votre retour d’expérience Starling Framework dans les commentaires ci-dessous.

Ou utilisez-vous un Framework concurrent, équivalent ou fait maison ?

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

5 questions

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://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é 210 fois – 338 Ko

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.


nec odio Aliquam Curabitur diam elit. mattis id ut massa efficitur.