Les nouveautés principales que la majorité des programmeurs risquent d’utiliser tournent autour de la gestion souris. Voyons ça en détail.

!! Les swfs d’exemples necessitent le Player 11.2 (beta) ou supérieur !!

Téléchargez la beta 11.2 ici

Gestion du right clic et du middle clic de la souris

Commençons par la plus simple, on peut désormais écouter des événements MouseEvent.RIGHT_CLICK et MouseEvent.MIDDLE_CLICK.

Concernant le middle clic, sur la plupart des souris, c’est l’enfoncement de la roulette.

Concernant le clic droit, par défaut, le clic droit fait apparaître le menu contextuel natif de Flash. Menu que l’on peut d’ailleurs modifier en partie, en ajoutant de nouvelles entrées. Depuis la version 11.2, le simple fait d’ajouter un écouteur d’événement sur le clic droit désactive le menu natif de Flash. Cela permet de faire d’autres choses au clic droit, ou de faire son propre menu avec son propre skin et ses propres entrées…

Aucune classe native de menu contextuel ne pourra servir de base, il faudra créer à 100% son menu et le gérer. L’avantage est une liberté totale.

Voici un simple exemple, il est évident qu’en situation réelle, il faudra créer une classe pour ce menu et la faire autrement avec des méthodes « addItem », etc., plus un contrôle de positionnement en bord d’application, que je n’ai pas pris la peine de faire… Ici, c’est juste pour l’exemple.

Code de test:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		private var menuItems:Array;
		private var menu:Sprite;
		private var output:TextField;
		public function Main():void
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			menuItems = new Array;
			makeExampleMenu();
			output = new TextField;
			output.autoSize = TextFieldAutoSize.LEFT;
			output.text = "Action: ";
			output.y = stage.stageHeight - 20;
			addChild(output);
			stage.addEventListener(MouseEvent.RIGHT_CLICK, mouseRightClikHandler);
			stage.addEventListener(MouseEvent.MIDDLE_CLICK, mouseMiddleClikHandler);
			stage.addEventListener(MouseEvent.CLICK, mouseClikHandler);
		}
		/*__________________________________________________________________________________
		*
		*  Events Handlers
		* __________________________________________________________________________________
		*/
		private function mouseRightClikHandler(e:MouseEvent):void
		{
			output.text = "Action: \"Right Click\"";
			menu.x = stage.mouseX;
			menu.y = stage.mouseY;
			menu.visible = true;
		}
		private function mouseMiddleClikHandler(e:MouseEvent):void
		{
			output.text = "Action: \"Middle Click\"";
			menu.visible = false;
		}
		private function mouseClikHandler(e:MouseEvent):void
		{
			output.text = "Action: \"Left Click\"";
			menu.visible = false;
		}
		private function menuClickHandler(e:MouseEvent):void
		{
			e.stopPropagation();
			output.text = "Action: Click on \"" + menuItems[e.target.name].label.text + "\"";
			menu.visible = false;
		}
		private function menuItemOverHandler(e:MouseEvent):void
		{
			menuItems[e.target.name].label.textColor = 0xff6600;
			menuItems[e.target.name].btn.alpha = 1;
		}
		private function menuItemMouseOutHandler(e:MouseEvent):void
		{
			menuItems[e.target.name].label.textColor = 0xffffff;
			menuItems[e.target.name].btn.alpha = .5;
		}
		/*__________________________________________________________________________________
		*
		*  Privates Functions
		* __________________________________________________________________________________
		*/
		private function makeExampleMenu():void
		{
			menu = new Sprite;
			for (var i:uint = 0; i < 6; i++)
			{
				menuItems[i] = new Object;
				menuItems[i].label = new TextField;
				// ! casting just for AutoCompletion helper
				TextField(menuItems[i].label).autoSize = TextFieldAutoSize.LEFT;
				TextField(menuItems[i].label).selectable = false;
				menuItems[i].label.text = "Ceci est l'Item " + String(i);
				menuItems[i].label.textColor = 0xffffff;
				menuItems[i].label.mouseEnabled = false;
				menuItems[i].label.x = 10;
				menuItems[i].label.y = i * 20;
				menuItems[i].btn = new Sprite;
				menuItems[i].btn.name = i;
				menuItems[i].btn.buttonMode = true;
				menuItems[i].btn.addEventListener(MouseEvent.MOUSE_OVER, menuItemOverHandler);
				menuItems[i].btn.addEventListener(MouseEvent.MOUSE_OUT, menuItemMouseOutHandler);
				menuItems[i].btn.graphics.beginFill(0x000000);
				menuItems[i].btn.graphics.drawRect(0, i * 20, 100, 20);
				menuItems[i].btn.graphics.endFill();
				menuItems[i].btn.alpha = .5;
				menu.addChild(menuItems[i].btn);
				menu.addChild(menuItems[i].label);
			}
			menu.addEventListener(MouseEvent.CLICK, menuClickHandler);
			menu.visible = false;
			this.addChild(menu);
		}
	}
}

Le mouseLock et le movementMouse

Une autre nouvelle fonctionnalité est le mouseLock. Le but ici est de rendre la souris active tout le temps! Même en dehors du stage (donc, en dehors de l’animation et même de l’écran).

Seule restriction, le mouseLock n’est possible qu’on mode fullScreen ! Si on essaye de l’activer en mode normal, cela génère une erreur d’exécution visible par le player debugger.

Lorsque le mouseLock est activé, le curseur de la souris disparaît ! A la base, c’est logique, puisque dans ce mode, nous n’avons pas besoin de savoir où se trouve réellement la souris. « Ha bon », vous allez me dire.. Oui! dans ce mode, seules les variations de souris nous intéressent.. Voici l’explication..

Normalement, quand a besoin de connaître les coordonnées de la souris, on lit une des propriétés stageX(Y) ou localX(Y) d’un évènement MouseEvent. Lorsque le mouseLock est actif, ces propriétés sont fixée à 0 et ne peuvent plus servir! On peut être tenté d’utiliser le stage.mouseX(Y), mais celui-ci ne fonctione plus non plus… Il renverra n’importe quoi, basé sur un delta que nous allons voir ci après. Donc, en mode « mouseLock« , on oublie le système de coordonnées classique.

Par contre, deux nouvelles propriétés ont été ajoutées à MouseEvent! Il s’agit de movementX et movementY. Ces nouvelles propriétés, à l’inverse des anciennes, ne sont actives qu’en mode mouseLock! Le reste du temps, elles sont fixées à 0.

Le « movement » est en fait un deltaMouse, le nombre de pixels de déplacement qui a eu lieu entre 2 appels de l’Event mouseMove.

Cette nouveauté peut servir à plein de choses… surtout pour les jeux et certaines applications… On est plus contraint à la taille de l’animation, on peut juste regretter que cette fonctionalité ne soit disponible qu’en fullScreen..

Dans l’exemple ci dessous, je fais tourner un jog shuttle sans math, juste grace au movementX.

Pour passer en fullScreen, veuillez cliquer sur le rectangle noir.

On peut voir que les propriétés mouseX(Y) ne fonctionnent qu’en normalScreen et que les movementX(Y) ne fonctionnent qu’en fullScreen. Cela est dû à l’activation du mouseLock au moment du passage en fullScreen.

Code simple qui permet de tester la chose.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

package
{
	import flash.display.Sprite;
	import flash.display.StageDisplayState;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		private var menuItems:Array;
		private var menu:Sprite;
		private var output:TextField;
		private var shuttle:Sprite;
 
		public function Main():void
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			output = new TextField;
			output.autoSize = TextFieldAutoSize.LEFT;
			output.y = 100;
			output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight;
			addChild(output);
 
			var btn:Sprite = new Sprite;
			btn.graphics.beginFill(0x000000);
			btn.graphics.drawRect(5, 40, 100, 50);
			btn.graphics.endFill();
			addChild(btn);
			btn.buttonMode = true;
			btn.addEventListener(MouseEvent.CLICK, btnClickHandler);
 
			shuttle = new Sprite;
			shuttle.graphics.beginFill(0x333333);
			shuttle.graphics.drawCircle(0, 0, 100);
			shuttle.graphics.endFill();
			shuttle.graphics.beginFill(0x999999);
			shuttle.graphics.drawCircle(- 50, -50, 10);
			shuttle.graphics.endFill();
			shuttle.x = 100;
			shuttle.y = 260;
			addChild(shuttle);
 
			stage.addEventListener(Event.RESIZE, stageResizeHandler);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);
		}
 
		/*__________________________________________________________________________________
		 *
		 *  Events Handlers
		 * __________________________________________________________________________________
		 */
 
		private function btnClickHandler(e:MouseEvent):void
		{
			stage.displayState = StageDisplayState.FULL_SCREEN;
			stage.mouseLock = true;
		}
 
		private function stageResizeHandler(e:Event):void
		{
			output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight;
		}
 
		private function stageMouseMoveHandler(e:MouseEvent):void
		{
			output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight +
			"\nmouseX: " + e.stageX + " - mouseY: " + e.stageY +
			"\nmovementX: " + e.movementX + " - movementY: " + e.movementY;
 
			shuttle.rotation += e.movementX;
		}
 
	}
 
}

Conclusion

Ces nouvelles fonctionnalités vont sans doute trouver un certain succès auprès des programmeurs… Surtout la gestion du clic droit et le fait de pouvoir faire ses propres menus contextuels.

Le mouseLock est très bien lorqu’on souhaitera avoir un contrôle qui va au-delà de l’espace de l’animation et même au-delà de l’écran (défilement de quelque chose, jeux, ..).

Il y a encore d’autres nouveautés telles que la mise à jour automatique du Player en arrière plan (tâche de fond) ou le décodage de la video (h264) en background, dans un thread séparé.

Les exemples de code (et swfs) présents sur cette page sont très primaires, ils ont pour but de démystifier les nouvelles fonctionnalités du Flash Player 11.2. A chacun d’y trouver un usage propre et de développer ses algorithmes persos…

Starling Framework ? Keskeussé ?

Avec la sortie de Flash player 11, une petite révolution fait son apparition : Stage3D. Connue auparavant sous le nom de Molehill, cette nouvelle API apporte ce dont beaucoup de développeurs Flash ont rêvé : la VRAIE 3D, calculée par le GPU (carte graphique) de l’ordinateur. Si Stage3D permet évidemment d’afficher des modèles 3D complexes de plusieurs dizaines de milliers de polygones (voir ici, ici et là), un autre usage a rapidement été envisagé : l’affichage 2D. En effet, qu’est ce que la 2D, sinon de la 3D avec une dimension en moins

Dans cette optique, Adobe a annoncé récemment la sortie d’une librairie nommée Starling Framework qui permet un affichage 2D beaucoup plus rapide que l’affichage « classique » de Flash, en s’appuyant sur la puissance de calcul du GPU et les nouvelles API de Stage3D. Signalons qu’Adobe n’a pas développé Starling directement, mais que c’est Thibault Imbert, product manager responsable de Stage3D, qui a demandé à Daniel Sperl de porter Sparrow – une librairie pour iOS reproduisant les mécanismes de la liste d’affichage de Flash – en ActionScript 3. La bonne nouvelle, c’est que Starling est Open Source et fortement communautaire : chacun a accès au code, peut le modifier et l’enrichir selon ses besoins propres ou ceux de la communauté !

Note culturelle : en français, Starling signifie étourneau. D’où l’image utilisée comme illustration

Demo Time !

Mettons de côté le blabla quelques secondes et allez voir ces deux petits tests que j’ai réalisé pour vous rendre compte des performances de Starling (ATTENTION : il faut le Flash Player 11) :

Des petites particules, parce que c’est joli et que… tout le monde aime les particules

Un stress test pour voir jusqu’où Starling tient : cliquez sur le bouton en haut à gauche pour ajouter plein de MovieClip et les faire bouger dans tous les sens.

Je ne sais pas ce que vous en pensez, mais personnellement je trouve que Starling envoie ! Pour les mauvais esprits (il y’en a), notez bien que Starling n’en est qu’à la V1 et que des optimisations sont déjà envisagées, qui seront ajoutées dans une mise à jour future.

Pourquoi utiliser Starling ?

En premier lieu, pour les performances ! D’autant que Stage3D arrivera bientôt sur nos téléphones et tablettes via AIR 3.1. Alors que des optimisations complexes étaient nécessaire pour atteindre péniblement les 30 fps avec la liste d’affichage traditionnelle de Flash, on peut tout à fait envisager que Stage3D nous permette de rivaliser en terme de performances avec les applications « natives ».

En second lieu, parce que Starling a été pensé pour coller à l’API de la DisplayList de Flash : on y retrouve nos Sprite, MovieClip, addChild(), removeChild(), etc… ainsi qu’un modèle événementiel calqué sur celui de Flash avec un support du bubbling. La transition est donc largement simplifiée pour les développeurs, avec tout de même des spécificités propres à un environnement « full GPU ». En effet, dès lors que l’on confie l’affichage au GPU et non plus au CPU, il faut dire adieu au vectoriel et n’utiliser que des bitmaps. Mais nous allons en reparler dans ce tutoriel…

Enfin, il faut reconnaître que Starling a été pensé avant tout pour le jeu 2D, et même si on peut tout-à-fait l’envisager pour de l’application mobile ou du site « multimédia », ce n’est pas son but premier… Pas étonnant dès lors que les premières démos crées avec Starling soient des casual games Flash :

Angry Bird pour le player 11, c’est pour bientôt dans le browser.

Toutefois, la nature « low-level » de Stage3D permet à chacun – pour peu qu’il en ait la capacité – de créer son propre moteur 2D. Il existe ainsi un « concurrent » à Starling : ND2D, qui fait à peu près la même chose et qui est plutôt plus optimisé. Et même si Starling est officiellement supporté par Adobe, rien ne vous oblige à l’utiliser !

Ceci étant dit, passons à la pratique !

Mise en place

Pour notre exemple nous utiliserons Flash Builder 4.5.

Téléchargements

Tout d’abord, il faut télécharger les fichiers suivants :

• Si le SDK 4.5.1 n’est pas déjà installé dans le dossier « sdks » du répertoire d’install de Flash Builder, il faudra le télécharger : http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.5

• Télécharger le SDK AIR 3.0 : http://www.adobe.com/special/products/air/sdk/
• Télécharger la librairie Starling : http://www.starling-framework.org (le gros bouton « DOWNLOAD »)

Installation du SDK

Windows

1) Allez dans le dossier « sdks » du répertoire d’installation de Flash Builder 4.5. Si le SDK 4.5.1 est déjà présent, faites-en une copie et renommez-la « AIR 3.0 ». Sinon, dézippez l’archive téléchargée à l’étape précédente et renommez le répertoire « AIR 3.0 ».

2) Copiez ensuite le .zip du SDK AIR 3.0 dans le dossier « AIR 3.0 » et dézippez-la en veillant bien à écraser les fichiers déjà présents.

MAC OS

1) Allez dans le dossier « sdks » du répertoire d’installation de Flash Builder 4.5. Si le SDK 4.5.1 est déjà présent, faites-en une copie et renommez-la « AIR 3.0 ». Sinon, dézippez l’archive téléchargée à l’étape précédente et renommez le répertoire « AIR 3.0 ».

2) Placer l’archive « AdobeAIRSDK.tbz2 » dans le répertoire « AIR 3.0 ».

3) Ouvrir le Terminal, aller dans le répertoire dans lequel on a copié le AIR SDK avec la commande suivante (valider en appuyant sur return) :

cd /Applications/Adobe Flash Builder 4.5/sdks/

Il faut échapper les espaces avec un « \ »

Note : on peut faire un drag n’drop du répertoire dans le terminal pour récupérer automatiquement le chemin d’accès. METTRE « cd » devant le chemin !!

4) Puis taper la commande suivante et appuyer sur return :

tar jxvf AdobeAIRSDK.tbz2

Cela dézippera l’archive et la fusionnera avec Flex SDK.

playerglobal.swc

Ajout du 27 octobre 2011 (merci à Dredge pour le commentaire).

Vous aurez éventuellement besoin du playerglobal.swc de Flash 11 : il contient les définitions de classes compilés et si il n’est pas présent par défaut dans le SDK, il faut donc l’ajouter.

Pour vérifier si ce fichier est présent, aller dans le répertoire de Flash Builder, puis dans « sdks\AIR 3.0\frameworks\libs\player ». Si le répertoire « 11.0 » n’est pas présent, il faut l’ajouter.

Pour remédier à ça :
- Télécharger le playerglobal.swc depuis cette url : http://fpdownload.macromedia.com/pub/flashplayer/updaters/11/playerglobal11_0.swc
- renommer le fichier en « playerglobal.swc »
- dans le répertoire de Flash Builder, aller dans « sdks\AIR 3.0\frameworks\libs\player »
- créer un répertoire « 11.0 » et y placer le « playerglobal.swc »

Si FB vous signale une erreur, nettoyer le projet via le menu « project/clean/ », cela devrait supprimer l’erreur.

Ajout du SDK à Flash Builder

1) Lancer Flash Builder et aller dans les préférences. Window > Preferences (Fenêtre > Préférences) sous Windows ou Flash Builder > Preferences sous MAC OS.

2) Dans le champ de recherche, taper “sdk”, puis sélectionner “Installed Flex SDKs”.

3) Vous pouvez voir la liste des SDKs installés, les mêmes que dans le répertoire « sdks » de l’application. Cliquer sur le bouton « Add… » situé à droite de la liste :

4) Dans la fenêtre ouverte, « Flex SDK location » : parcourir le disque dur et sélectionner le répertoire « AIR 3.0 » créé précédemment.

5) « Flex SDK name » : taper « AIR 3.0 ».

6) Puis valider en cliquant sur « OK« .

En principe, le SDK doit dorénavant apparaître dans la liste des SDKs installés.

Création d’une librairie Starling

Pour utiliser la librairie Starling dans différents projets Flash Builder, nous allons créer une librairie qui pourra être partagée entre différents projets, évitant ainsi la duplication des classes Starling.

1) Créer un projet de type « Flex Library Project »

2) Nommer ce projet StarlingLib et choisir le SDK « AIR 3.0 » :

3) Une fois le projet créé, faire un clic droit sur le projet > « Properties« , puis sélectionner « Flex Librairy Compiler » dans la colonne de gauche. Cibler le player 11.0.0 et ajouter « -swf-version=13 » dans les paramètres additionnels du compilateur :

4) Copier les classes de l’archive du Starling Framework dans le dossier « src » du projet StarlingLib. Les classes de Starling se trouvent dans le dossier « Starling/src » de l’archive. Il faut aussi copier le dossier « media », sinon une erreur d’embed sera générée par Flash Builder ! Au final, vous aurez trois répertoires dans le dossier « src » :

5) En principe, un fichier StarlingLib.swc a été créé dans le répertoire « bin » du projet StarlingLib.

Note : si Flash Builder peine à créer le .swc, faites un clic droit sur le projet > « Refresh ».

Vous pourrez maintenant utiliser cette librairie pour tous vos projets Starling, en l’ajoutant au « library path » du projet (voir exemple ci-dessous).

Création d’un premier projet Starling

1) Dans Flash Builder, créer un nouveau « ActionScript Project » :

2) Choisir le SDK « AIR 3.0 » :

3) Dans le panneau suivant, cliquer sur « Add Project » pour ajouter la StarlingLib à votre projet (Note : le projet StarlingLib doit être ouvert) :

4) Une fois le projet créé, faire un clic droit sur le projet > « Properties », puis sélectionner « ActionScript Compiler » dans la colonne de gauche. Cibler le player 11.0.0 et ajouter « -swf-version=13 » dans les paramètres additionnels du compilateur :

5) Dernière étape, il faut modifier le template HTML utilisé par Flash Builder. En effet le « wmode » utilisé par Stage3D est le mode « direct« . Si vous ne le modifiez pas, rien ne s’affichera dans le .swf !
Ouvrir le fichier « index.template.html » dans l’éditeur de texte de Flash Builder :

6) Il faut ajouter à ce template le wmode=direct à plusieurs endroits :

et là aussi :

Félicitations ! Vous voilà prêt à faire votre premier projet en Starling.

Codons un peu…

Pour fonctionner, un projet Starling doit contenir une classe qui hérite de « starling.display.Sprite » qui sera le root de notre application Starling. En effet, Starling n’utilise pas la display list de Flash mais s’affiche via Stage3D qui est une autre couche de rendu du player Flash, indépendante de la display list « classique ».

Nous allons donc commencer par créer cette « classe du document Starling » :

1) Clic droit sur le dossier « src » du projet, puis « New > ActionScript Class »

2) Indiquez un package (j’ai mis « classes »), nommez votre classe « StarlingMain » et faites-là hériter de « starling.display.Sprite » (et non de « flash.display.Sprite ») :

3) Créer un dossier « assets » dans votre projet HelloStarling et y placer un .jpg de votre choix en le nommant « starling.jpg » : cette image sera incluse via un embed et utilisée comme texture d’affichage.

4) Puis taper le code suivant :

Note : faites bien attention aux import des classes. En effet, Starling utilise les mêmes noms de classes que les DisplayObjects Flash, il peut donc y avoir des conflits entre les deux. Toutes les classes du framework commence par le package « starling ».

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package classes
{
	import starling.display.Image;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.textures.Texture;
 
	public class StarlingMain extends Sprite
	{
		// embed avec le chemin d'accès à notre .jpg contenu dans le dossier assets
		[Embed(source="../assets/starling.jpg")]
		private static const myBitmap:Class;
 
		public function StarlingMain()
		{
			this.addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		protected function init(event:Event):void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// création d'une Texture à partir du bitmap embedé
			var texture:Texture = Texture.fromBitmap ( new myBitmap() );
			// création d'une instance d'Image avec notre texture
			var image:Image = new Image(texture);
			// affichage de l'image
			addChild(image);
 
		}
	}
}

5) Dans la classe HelloStarling (classe du document) de votre projet, tapez le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

package
{
	import classes.StarlingMain;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
 
	import starling.core.Starling;
 
	[SWF(frameRate="60", backgroundColor="#DDDDDD", width="960", height="660")]
	public class HelloStarling extends Sprite
	{
 
		private var myStarling:Starling;
 
		public function HelloStarling()
		{
 
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			// création d'une instance de Starling
			myStarling = new Starling(StarlingMain, stage);
 
			// réglage de l'antialiasing (valeur haute = meilleure qualité, mais performances moindres)
			myStarling.antiAliasing = 1;
 
			// démarrage
			myStarling.start();
 
		}
	}
}

7) Compiler votre projet… et voilà le résultat :

Bravo ! Votre premier projet Starling fonctionne.

Rien de très impressionnant pour le moment, mais nous verrons dans de prochains tutoriels comment donner un peu vie à tout ça.

Merci pour votre patience et à bientôt pour la suite

Nicolas Gans

Le 4 octobre prochain de 14h à 15h, Nicolas Gans – formateur Flash chez Regart.net – sera chez Adobe France pour animer un e-seminaire sur le thème « Développement de jeu avec AIR mobile ».

Lors de cet atelier online, il abordera la création d’un casse-brique en AIR mobile avec Flash CS5.5 et Flash Builder, depuis la création des assets graphiques jusqu’au code et la compilation pour les différentes plate-formes (iOS, Android…).

Au programme :
- le concept de multi-screen et ses conséquences pour le développement d’applications mobiles
- préparation des éléments graphiques dans Flash CS5.5
- optimisation des éléments graphiques pour le mobile
- choix du mode de rendu : CPU ou GPU
- configuration de la compilation pour iOS et Android : certificats, provisioning profiles…
- gestion des différentes tailles d’écran
- liaison avec Flash Builder
- mise en cache des éléments graphiques
- partial et full blitting
- object pooling

Le e-seminar nécessite une inscription en ligne, cliquez sur ce lien :
http://www.adobe-events-france.com/event/creation-dapplications-mobile-flash-avec-flash-pro-et-flash-builder/

Edit du 4 octobre 2011 :
>> Télécharger les fichiers du e-séminaire

Notes :
- pour compiler le casse brique, il faudra importer le projet « Casse brique » dans Flash Builder 4.5
- il vous faudra aussi créer vos certificats .p12 et provisioning profiles si vous souhaitez compiler le projet

A très bientôt !

Pour optimiser les animations et augmenter le frame rate de nos .swf, il existe des techniques de mise en cache natives des éléments vectoriels (cacheAsBitmap, cacheAsBitmapMatrix…) ou « manuelles » (méthode draw() de la classe BitmapData) qui sont efficaces. Le principe est toujours le même : il s’agit de faire un rendu bitmap (une rasterisation) à l’exécution, autrement dit de générer un png transparent à partir des données vectorielles, plus lourd en mémoire, mais beaucoup plus rapide à animer en terme de CPU.

J’ai dressé un panorama de ces techniques de mise en cache et des gains associés lors de ma mini-conf des lightning talks. Toutefois, lorsque l’on souhaite mettre en cache des éléments animés de type MovieClip, ces techniques sont totalement inefficaces – voire contre-performantes.

C’est pourquoi je vous livre ici deux classes, AnimatedBitmap et AnimatedBitmapData qui permettent de mettre en cache à l’exécution les movie clips animés pour un gain de performance spectaculaire.

Un petit benchmark pour commencer, décochez « use Cache » pour passer à la version vectorielle (beaucoup plus lente).

Sur ma machine, je peux créer 2000 chiens animés et le frame rate reste à 30 ips. En mode vectoriel (use cache décoché), au-dessus de 100 chiens, le frame rate commence à diminuer.

Classes AnimatedBitmap et AnimatedBitmapData

Ces deux classes s’utilisent à la manière des classes Bitmap et BitmapData : une classe contient les data (AnimatedBitmapData) et l’autre gère l’affichage des data (AnimatedBitmap). De cette manière, on peut ré-utiliser les mêmes data pour x objets animés sans les dupliquer, d’où un gain de mémoire et de temps de rendu.

AnimatedBitmapData

La première chose à faire, avant tout rendu, c’est d’initialiser la classe en appelant dessus la méthode statique init() au moins une fois. La classe a en effet besoin d’une référence au Stage pour fonctionner.

1
2
3
4
5
6

// Initialisation de la classe
AnimatedBitmapData.init(this.stage);
// le clip à mettre en cache
var dog:Dog = new Dog();
// création des data
var abd:AnimatedBitmapData = new AnimatedBitmapData(dog);

En interne, la classe va parcourir la time line du clip et faire un draw() sur chaque frame, puis stocker les bitmapData obtenus dans un Vector.

Quelques infos sur le fonctionnement de cette classe :

• Si le clip a des couleurs modifiées (teinte, alpha…), mais que vous ne souhaitez pas les conserver, il faudra passer le second param « preserveColor » du constructeur à false.
• Dans certains cas, notamment avec des filtres flous, les images du rendu peuvent être coupées sur les bords. Cela est dû aux méthodes getBounds() et generateFilterRect() de Flash qui renvoient parfois des valeurs imprécises. Si cela arrive, vous pouvez passer en 3e param du constructeur une marge en pixel qui agrandira la zone de rendu.
• Enfin, si votre clip possède des étiquettes (frameLabels) elles seront conservées et accessibles.
• Les transformations « matricielles » du clips sont supportées (rotation, scale…), ainsi que les filtres.

Lorsque vous souhaitez détruire l’instance, appelez dessus la méthode destroy(), qui libèrera automatiquement la mémoire occupée via la méthode dispose() de la classe BitmapData.

1
2

// destruction des data et libération de la mémoire
abd.destroy();

AnimatedBitmap

C’est la classe d’affichage, qui a besoin d’un AnimatedBitmapData pour fonctionner.

On l’instancie de la façon suivante.

1
2
3
4

// instanciation : on passe en 1er param un AnimatedBitmapData
var ab:AnimatedBitmap = new AnimatedBitmap(abd, AnimatedBitmap.ENTER_FRAME, 30);
// affichage
this.addChild(ab);

Les params du constructeurs sont les suivants :

• source:AnimatedBitmapData > une instance d’AnimatedBitmapData
• ticker:String > le type « d’horloge » utilisé pour animer l’instance. Vous avez le choix entre « timer », « enterFrame » et « external ». Vous pouvez utiliser les constantes statiques de la classe pour renseigner ce param : AnimatedBitmap.TIMER, AnimatedBitmap.ENTER_FRAME ou AnimatedBitmap.EXTERNAL.
• frameRate:uint > la cadence d’animation de votre objet. Comme elle n’est pas liée au frameRate de votre swf, elle peut être différente de celui-ci (plus lente ou plus rapide).
• updateAfterEvent:Boolean > passez true si vous utilisez un ticker de type « timer » et que la cadence de l’objet est plus rapide que celle du document. Cela forcera le rendu du player à chaque nouvelle image pour plus de fluidité (et plus de process).
• pixelSnapping:Boolean > pour que les coordonnées des bitmaps du cache soit ou non sur des pixels entiers.
• smoothing:Boolean > activation ou non du lissage, utile lorsque l’objet subit une rotation ou un scale.

Quelques infos sur le type de ticker (2nd param) :

AnimatedBitmap.TIMER (défaut) : une instance de Timer est utilisée. Pratique si l’on souhaite aller plus vite que le frame rate de l’animation, mais moins optimisé qu’un enterFrame.
AnimatedBitmap.ENTER_FRAME : un enterFrame est utilisé. A choisir si votre objet animé doit avoir le même frameRate que votre animation.
AnimatedBitmap.EXTERNAL : aucune horloge interne ne sera mise en place, ce sera à vous d’implémenter votre propre horloge externe et d’appeler la méthode update() sur vos AnimatedBitmap. C’est la méthode la plus optimisée (pas de multiplication des horloges), à choisir si vous avez beaucoup d’objets animés ou si vous faites du jeu.

Exemple pour le type « external » :

1
2
3
4
5
6
7
8
9
10
11
12

this.addEventListener(Event.ENTER_FRAME, loop);
function loop(event:Event):void
{
    var lng:int = dogs.numChildren;
    var dog:AnimatedBitmap;
 
    for (var i:int = 0; i < lng; i++)
    {
        dog = dogs.getChildAt(i) as AnimatedBitmap;
        dog.update();
    }
}

Méthodes et propriétés de la classe AnimatedBitmap

J’ai repris l’API de la classe MovieClip, donc on retrouve toutes les méthodes et propriétés classiques d’un MC : totalFrames, currentFrame, currentLabel, currentFrameLabel, play(), stop(), gotoAndPlay(frame/label) …

Des méthodes spécifiques existent cependant :

• playTo(frame/label) : la tête de lecture part de sa position actuelle et s’arrêtera à la frame/étiquette passée en paramètre.
• playFromTo(startFrame, endFrame) : joue la tête de lecture depuis une frame/étiquette de départ jusqu’à une frame/étiquette d’arrivée.
• replace(target:MovieClip) : une petite méthode qui permet de remplacer automatiquement un clip affiché par un AnimatedBitmap. Pratique pour faire du remplacement automatique.

Des propriétés aussi :

• frameRate:uint > pour modifier à la volée le frameRate de votre instance.
• isPlaying:Boolean > pour savoir si le clip est en cours de lecture ou non.

Un petit aperçu :

Pour l’exemple, voici le code du swf ci-dessus :

1
2
3
4
5
6
7
8
9
10
11

AnimatedBitmapData.init(this.stage);
 
var dog:Dog = new Dog();
dog.scaleX = dog.scaleY = 2.2;
dog.x = stage.stageWidth * 0.5 + 100;
dog.y = stage.stageHeight * 0.5;
addChild(dog);
 
var abd:AnimatedBitmapData = new AnimatedBitmapData(dog);
var ab: = new AnimatedBitmap(abd, AnimatedBitmap.TIMER, stage.frameRate, true);
ab.replace(dog);

Destruction des instances :

La classe possède une méthode destroy(), qui supprime tous les écouteurs et retire l’instance de la display list.
Par ailleurs, il existe une propriété statique destroyData:Boolean, réglée par défaut sur false. Passée à true, elle met en place une destruction automatique et générale des AnimatedBitmapData au moment de la destruction d’un AnimatedBitmap ou lors de l’écrasement d’un animatedBitmapData par un autre via la propriété du même nom.

Conclusion

Ces classes se montreront particulièrement utiles pour du dev AIR mobile. Lorsqu’elles sont couplées au mode GPU (renderMode) le frame rate bondit !
Par contre les limites sont le temps de rendu et la mémoire occupée. Je vous renvoie aux slides de ma mini-conf pour cela. Je pense peut-être implémenter une classe SpriteSheet à coupler avec AnimatedBitmapData pour utiliser des sprite sheets et réduire le temps de rendu.

Faites-moi part de vos remarques, questions, et éventuels bugs.

La classe est documentée (en anglais) > accéder à la doc

Voici les sources : AnimatedBitmap_sources

Et merci à Thibault et son composant Banana Slice pour l’inspiration : http://www.bytearray.org/?p=117

A partir de la version 10.2 du player Flash, avec la possibilité de changer l’icône du mouseCursor, Adobe a introduit une couche supplémentaire permettant de lire de la vidéo de manière plus rapide et utilisant l’accélération matérielle des cartes graphique.

Cette couche se trouve au niveau de l’objet stage de votre animation, elle est directe et ne fait pas partie de la liste d’affichage à proprement parler, elle n’est pas un DisplayObject. En conséquence, elle ne bénéficie pas des méthodes et propriétés habituelles des DisplayObjects, elle ne gère pas non plus la couche alpha.

Cette couche est une instance de la classe StageVideo, je dis une, mais en réalité, lors de l’initialisation de l’objet stage, une série d’objets stageVideos vont être créés allant de 1 à x suivant votre matériel, sur mon portable, j’ai 16 layers stageVideo disponibles. Ces layers sont référencés dans un array en tant que propriété de stage.

Cliquer sur la vidéo pour mettre en lecture / pause

Au banc d’essai

Au départ, j’ai suivi le getting started rédigé par Thibault Imbert sur le site d’Adobe:

http://www.adobe.com/devnet/flashplayer/articles/stage_video.html

Sur mon portable, tout allait bien, mais sur une machine équipée d’une Matrox Parhélia 256 Tripple head, fini! Image noire! Elle pilote 3 écrans, mais ne possède pas de décodeur pour le H264 qui est la norme actuelle. Alors j’ai tout repris à partir de zéro.

Il est clair qu’il ne faut jamais implémenter un lecteur vidéo basé sur un stageVideo sans y ajouter une version normale de secours de type DisplayObject classique. Afin de s’assurer que l’objet stagevideo peut réellement prendre en charge la vidéo, il faut passer par 2 tests.

Il faut tester si un ou plusieurs objets stageVideos ont été créés par le player Flash, grâce à un Event StageVideoAvailability généré par le stage au moment de l’initiation de l’anim. Si ce test est ok, il faut encore tester le type de décodage sur l’event RenderState généré par l’objet video, c’est à dire par l’objet qui affiche la vidéo (stageVideo ou video), car le player peut reconnaître un decodeur matériel et instancier des stageVideos tout en affichant une image noire. Si un des test retourne « unavailable », il faut switcher sur une version classique sofware.

Il est à noter que l’objet stageVideo s’affiche dans un viewport (comme en 3D) et non dans un displayObject classique, donc, les réglages de taille et de coordonées x,y ne se font pas de la même façon. Le viewport se règle sur base d’un objet Rectangle. L’Event renderState n’émane pas du même target.

L’intégration HTML doit se faire en wmode= »direct » ou éventuellement « gpu » si vous n’avez pas de vectoriel à traiter dans l’application.

Le code AS3

Voici le code de base permettant d’utiliser le stageVideo en intégrant une prise en charge par un objet vidéo classique comme solution de secours.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.StageVideoAvailabilityEvent;
	import flash.events.StageVideoEvent;
	import flash.events.VideoEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.media.StageVideo;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	/**
	 *
	 * @author Alama
	 *
	 */
	[SWF(frameRate="1", backgroundColor="#000000")]
	public class Main extends Sprite
	{
		private static const FILE_NAME:String = "file.f4v";
 
		private var nc:NetConnection;
		private var ns:NetStream;
		private var rc:Rectangle;
		private var video:Video;
		private var stageVideo:StageVideo;
		private var ratioVideo:Number;
		private var videoObject:String;
		private var renderType:String;
		private var txtOut:TextField;
 
		/**
		 * Construct
		 *
		 */
		public function Main()
		{
			// On attend que la classe document soit complètement instanciée et dans la displayList.
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
 
		/**
		 *
		 * @param event
		 *
		 */
		private function onAddedToStage(event:Event):void
		{
			// Connection
			nc = new NetConnection();
			nc.connect(null);
			ns = new NetStream(nc);
 
			// client pour la fonction onMetaData
			var customClient:Object;
			customClient = new Object;
			customClient.onMetaData = onMetaDataHandler;
			ns.client = customClient;
 
			// on ecoute l'init des stageVideos sur le stage
			stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, stageVideoAvailabilityHandler);
 
			// text output
			txtOut = new TextField;
			txtOut.textColor = 0xffffff;
			txtOut.autoSize = TextFieldAutoSize.LEFT;
			addChild(txtOut);
		}
 
		private function stageVideoAvailabilityHandler(e:StageVideoAvailabilityEvent):void
		{
			// (facultatif) On peut vérifier l'existance de 1 à x StageVideos maximum en testant le array
			trace("Number of stageVideos: " + stage.stageVideos.length);
			// Nous n'avons plus besoin du listener
			stage.removeEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, stageVideoAvailabilityHandler);
			// on teste si on a un objet stageVideo de dispo
			if (e.availability == "available")
			{
				// si oui, on utilise le premier
				stageVideo = stage.stageVideos[0];
				// on lui colle le stream video
				stageVideo.attachNetStream(ns);
				// on ecoute l'etat du render qui sera déclenché au play()
				stageVideo.addEventListener(StageVideoEvent.RENDER_STATE, stageVideoRenderStateHandler);
				// on lance le play pour déclencher le renderState
				ns.play(FILE_NAME);
			}
			else
			{
				// Sinon, on utilise la méthode video normale (displayObject classique)
				useDisplayObjectVideo();
			}
		}
 
		// Handler du renderState StageVideo
		private function stageVideoRenderStateHandler(e:StageVideoEvent):void
		{
			// on vérifie si le décodage est bien réalisé ou pas
			if ( e.status == "unavailable")
			{
				// si pas de rendu, on libère les ressources
				stageVideo.removeEventListener(StageVideoEvent.RENDER_STATE, stageVideoRenderStateHandler);
				stageVideo = null;
				useDisplayObjectVideo();
			}
			else
			{
				// sinon, on garde l'objet stageVideo comme lecteur
				videoObject = "stageVideo";
				renderType = e.status;
			}
		}
 
		// video normale (DisplayObject)
		private function useDisplayObjectVideo():void
		{
			video = new Video();
			video.smoothing = true;
			video.attachNetStream(ns);
			video.width = stage.stageWidth;
			video.addEventListener(VideoEvent.RENDER_STATE, videoRenderStateHandler);
			addChild(video);
			ns.play(FILE_NAME);
		}
 
		//Handler du renderState video classique
		private function videoRenderStateHandler(e:VideoEvent):void
		{
			videoObject = "displayObjectVideo";
			renderType = e.status;
		}
 
		private function onMetaDataHandler(info:Object):void
		{
			trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
			// on prend le rapport d'image
			ratioVideo = info.height / info.width;
			// le cadrage video ne se fait pas de la même manière, stageVideo est un viewPort et non un displayObject.
			if (videoObject == "stageVideo")
			{
				var posY:int = (stage.stageHeight - info.height * ratioVideo) / 2;
				stageVideo.viewPort = new Rectangle(0, posY, stage.stageWidth, info.height * ratioVideo);
				txtOut.text = "Render Type: [StageVideo] - Decoder: " + renderType;
			}
			else
			{
				video.height = video.width * ratioVideo;
				video.y = (stage.stageHeight - video.height) / 2;
				txtOut.text = "Render Type: [DisplayObject] - Decoder: " + renderType;
			}
 
		}
 
	}
}

La classe FileReference permet de charger un MP3 depuis le disque dur local (client) via la méthode load(). Cependant, le fichier reçu se trouve dans un byteArray, nous recevons un RAW. Évidemment, la classe Sound ne permet pas de charger ce type de données, il faut alors passer par du code écrit sois même qui devra parser le MP3, gerer la partie ID3 et créer une classe Sound qui contient le son MP3. Ce genre de mini Framework existe, notamment AudioFx.

La méthode loadMp3FromByteArray de la classe Sound

J’avais posté sur la branche jira de bugs.adobe à ce propos, je me suis d’ailleurs trompé, j’ai publié un bug post au lieu d’un request feature, mais bon, ça n’a apparemment pas porté à préjudice.. lol
https://bugs.adobe.com/jira/browse/FP-5920

Toujours est-il qu’une nouvelle feature à été ajoutée à la classe Sound afin de résoudre ce souci, elle est en préview sur le player 11 bêta et il n’y aurait aucune certitude que cette feature restera pour la sortie RC. Alors, j’invite tous les lecteurs de mon tuto à appuyer cette demande en votant ou en laissant un message sur mon post chez Adobe. Il y a un lien Voting dans la colonne gauche.

Afin de tester cette feature, vous devez installer les versions beta du plugin et activeX du player 11, vous pouvez les télécharger ici: http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html

Une fois installé, pour Chrome, vous devez le sélectionner de la manière suivante:
Dans la barre d’adresse de chrome, tapez: about:plugins ensuite, cliquer sur details.

Dans la liste des plugins, il doit y avoir celui installé par chrome lui même et le 11 bêta installé dans votre système. Il suffit de désactiver celui installé par chrome et il prendra par défaut celui du système.

Si c’est réussi, vous devez voir lors de la lecture d’un SWF la mention Flash Player 11 (incubator build) en bas de l’animation.

Clic on black rectangle for load mp3.

Tester l’API du beta player 11 sous FlashDevelop

Afin de tester une API bêta, il faut préparer FlashDevelop en suivant les étapes suivantes:

• Télécharger le dernier SDK préconisé par Adobe Labs:
  http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero
• Téléchager le playerglobal.swc du player beta:
  http://download.macromedia.com/pub/labs/flashplatformruntimes/incubator/flashplayer_inc_playerglobal_022711.swc
• Créer un nouveau projet AS3 sous FD, ensuite, aller dans AS3Context et cibler le SDK téléchargé.
• Aller dans le répertoire framework/libs/players/10.1 du sdk et remplacer le playerGlobal présent par celui qu’on vient de télécharger. (en le renommant playerglobal.swc). C’est ce fichier qui contient toutes les références de classes de l’API que FlashDevelop utilise pour l’autoCompletion et que le mxmlc utilise pour compiler en mode strict.
• Aller dans les propriétés du projet, cibler le player 10.1, ensuite, aller dans l’onglet compiler options, et dans Additional Compiler Options, ajouter -swf-version=13.

Voilà, nous sommes prêt à programmer.

FD4 proposera peut être une auto reconnaissance des versions player par analyse du SDK ciblé, cela demandera moins de manipulation quand on devra tester des versions bêta et on ne devra plus attendre de mise à jour de FD pour cibler les nouveaux players. Là aussi, j’ai déposé une demande de feature, libre à vous de la soutenir également..
http://www.flashdevelop.org/community/viewtopic.php?f=5&t=8050

Au banc d’essai – code AS3

Voici le code minimum de base afin d’exploiter cette nouvelle fonctionnalité.
Il est a noté que la méthode close() et l’événement complete de la classe Sound ne fonctionne pas dans cette implémentation, ils ne s’appliquent apparemment qu’en cas de loading distant. Il ne faudra donc pas chercher a les utiliser pour un chargement local via FileReference.

Pour les ID3, AS3 propose les propriétés de base (songName, etc..) Mais je conseille d’utiliser directement les vrais identifiants définis par l’ID3 Org (les classiques sont les frames 4.2 serie): http://www.id3.org/d3v2.3.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.FileFilter;
	import flash.net.FileReference;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		private var fileRef:FileReference;
		private var sound:Sound;
		private var channel:SoundChannel;
		private var txt:TextField;
 
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			// button test
			var btn:Sprite = new Sprite;
			btn.graphics.beginFill(0x000000);
			btn.graphics.drawRect(50, 50, 150, 40);
			btn.graphics.endFill();
			addChild(btn);
			btn.buttonMode = true;
			btn.addEventListener(MouseEvent.CLICK, btnClickHandler);
 
			// output text
			txt = new TextField;
			txt.autoSize = TextFieldAutoSize.LEFT;
			addChild(txt);
		}
 
		private function btnClickHandler(e:MouseEvent):void
		{
			fileRef = new FileReference;
			fileRef.addEventListener(Event.SELECT, fileRefSelectHandler, false, 0, true);
			fileRef.browse(new Array(new FileFilter("Music: *.mp3", "*.mp3", "*.MP3")));
		}
 
		private function fileRefSelectHandler(e:Event):void
		{
			fileRef.addEventListener(Event.COMPLETE, fileRefCompleteHandler, false, 0, true);
			fileRef.load();
		}
 
		private function fileRefCompleteHandler(e:Event):void
		{
			fileRef = null;
			if (channel != null)
			{
				channel.stop();
				channel = null;
				sound = null;
			}
			sound = new Sound();
			sound.addEventListener(Event.ID3, soundID3Handler, false, 0, true);
			sound.loadMP3FromByteArray(e.target.data, e.target.data.length);
			channel = new SoundChannel;
			channel = sound.play();
		}
 
		private function soundID3Handler(e:Event):void
		{
			// sometimes, on fisrt load, this handler is invoked twice!!??
			// it's a light bug, but not serious..
			trace(e.target.id3.TIT2);
			txt.text = sound.id3.TIT2;
		}
 
	}
 
}

Voilà, espérons que cette feature restera définitivement au sein de l’APPI AS3.. car elle est bien plus simple et rapide que des classes de parsing.

Soutenez une autre request feature pour la gestion du son

A propos du son dans Flash, depuis le player 10, nous pouvons fabriquer nos propres sons de façon binaire et l’envoyer à la lecture grâce à l’événement SampleData. C’est super, mais celui ci souffre d’un problème majeur! La taille minimum du buffer (le byteArray des samples) est de 2048 samples !! cela introduit inévitablement une latence audible qui peut aller jusqu’à +/- 300 ms avec les pertes du modèle événementiel etc.. J’ai donc également introduit une demande de révision du principe en proposant d’autres solutions.. Cette tâche incombe à la partie Core Player, donc, impossible à régler via l’AVMplus, donc, à priori, seul Adobe peut changer cela.

Je vous invite également à soutenir cette demande en votant et éventuellement en participant à la discussion ici:
https://bugs.adobe.com/jira/browse/FP-5655

Enjoy

J’y ai présenté un aperçu des techniques et bonnes pratiques en matière de cache des éléments vectoriels pour un jeu ou une application AS3 pour AIR mobile. Toutes ces techniques permettent de faire grimper significativement le framerate de vos applications. Cliquez sur les slides, puis flèche droite/gauche du clavier pour se déplacer.

En bonus, une petite vidéo des démos que j’ai présenté à cette soirée, pour vous donner une idée des performances si vous appliquez ces techniques.

Merci à tous ceux qui étaient présents, à bientôt pour une prochaine édition !

MAJ 28 mars
Voici les sources de ces démos, ce sont des « ActionScript mobile projects » faits dans Flash Builder Burrito. Il faut télécharger et installer Burrito (preview de Flash Builder 4.5) pour les importer.

Télécharger les sources

Je n’ai pas inclus l’exemple qui utilise mes classes AnimatedBitmapData et AnimatedBitmap. Je dois cleaner un peu le code avant de les poster. Stay tuned !!

Avec la sortie de AIR 2.5, il est maintenant possible de développer avec Flash ou Flash Builder 4 des appli AIR s’exécutant sous Android 2.2 (Froyo).

Très bonne nouvelle donc, mais passer de l’intention à la pratique n’est pas de tout repos. Avec un peu de patience et ce tutoriel, vous devriez y parvenir !

Nous allons donc voir ensemble comment créer une appli AIR pour Android à l’aide Flash Builder 4.

Installation de AIR 2.5 pour Flash Builder 4

Tout d’abord il faut télécharger le SDK de AIR 2.5 à cette URL
http://www.adobe.com/products/air/sdk/

Si Flash Builder 4 est ouvert, le fermer.

Puis aller dans le répertoire de FB4 qui contient les SDK.
Sur windows, il se trouve par défaut ici : C:\Program Files\Adobe\Adobe Flash Builder 4\sdks

Dans ce répertoire se trouvent les différents SDKs installés :
Vérifier que le 4.1.0 est bien installé (si ce SDK n’est pas installé, il faut le télécharger à cette URL http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4, et suivre la même procédure) :

Créer une copie du répertoire 4.1.0 :

Renommer la copie en ‘AIR2.5′ :

Coller le .zip du SDK téléchargé précédemment dans ce répertoire, et extraire le .zip dans le répertoire en veillant bien à ce que les fichiers extraits écrasent les fichiers existant portant le même nom (c’est important) :

Lancer FB et aller dans les préférences. Window > preferences (Fenêtre > préférences)
Dans le moteur de recherche, taper “sdk”, puis sélectionner “Installed Flex SDKs”.
Vous pouvez voir la liste des SDKs installés, les mêmes que dans le répertoire ‘sdks’ vu précédemment. Cliquer sur le bouton ‘Add…’ situé à droite de la liste :

Dans la fenêtre ouverte,
‘Flex SDK location’ : parcourir le disque dur et sélectionner le répertoire ‘AIR2.5′ crée précédemment.
‘Flex SDK name’ : taper ‘AIR2.5′
Puis valider en cliquant sur ‘OK’ :

En principe, le SDK doit dorénavant apparaître dans la liste des SDKs installés :

Nous pouvons maintenant créer notre premier projet Android dans Flash Builder 4.

Créer un projet AIR 2.5 dans Flash Builder 4

Pour faire du AIR2.5 en ActionScript 3 pur (sans le framework Flex), il faut créer un projet « Flex Project ».
Il est en effet impossible de créer un projet AIR dans FB4 avec les projets ‘ActionScript’ ou ‘Flash Professional’.

Pour faire un projet Flex pour Android, il faudra attendre la sortie de Flex « Hero ».

Aller dans le menu ‘File > new > Flex Project’.
Donner un nom à votre projet, ici ‘PremiereAppli’
Laisser l’emplacement par défaut ou choisir un autre emplacement.
Sélectionner ‘Desktop’.
Sélectionner le SDK ‘AIR2.5′ crée précédemment.
Puis cliquer sur ‘Next’, puis à nouveau sur ‘Next’ pour arriver à la troisième étape.

Dans le champ ‘Main application file’ (la classe du document de votre projet), changer l’extension ‘.mxml’ en ‘.as’.
Donner une ID unique à votre projet en ajoutant un namespace (com.votresite.VotreAppli) dans le champ du dessous.
Puis cliquer sur ‘Finish’ :

En principe, votre projet doit apparaître dans le ‘Package Explorer’.
Dans le dossier ‘src’ (les sources), vous devriez voir votre classe du document (PremiereAppli.as) ainsi qu’un fichier ‘PremierAppli-app.xml‘ : il s’agit du fichier Descriptor, qui va vous permettre de configurer l’apparence et le comportement de base de votre appli Android.

Le fichier descriptor

Le fichier ‘PremierAppli-app.xml‘ est un fichier ‘descriptor’. Ce fichier est généré automatiquement lors de la création d’un projet AIR dans FB. Il s’agit d’un template, qu’il va falloir modifier.
Vous y trouverez une flopée de nœuds XML qui permettent de configurer notre appli. La plupart sont commentés (<!– <noeud> –>) : il faudra décommenter les noeuds que vous souhaitez renseigner.

Pour cibler AIR Android, il faudra obligatoirement renseigner certains noeuds.

Pour la liste complète des noeuds et leur description, c’est ici : http://j.mp/dB688N

Ouvrer le fichier descriptor du répertoire ‘src’ dans FB ou avec un éditeur XML.

A renseigner obligatoirement :

- Le namespace : version de AIR ciblée. Si vous ne voyez pas ceci au début du fichier, il y a un soucis :

<application xmlns="http://ns.adobe.com/air/application/2.5">

- Les ‘profiles‘ : un ‘profile’ permet de cibler tel ou tel device (appli de bureau, appli mobile…) en activant ou désactivant certaines fonctionnalités de AIR en fonction de cette cible. Pour la liste complète des ‘profiles’ AIR 2.5 et leur description, voir ici : http://bit.ly/aOlHQ3.
Si vous utilisez l’accéleromètre ou la géolocalisation dans votre appli, il faudra renseigner le noeud <supportedProfile> (penser à décommenter !) :

<supportedProfiles>mobileDevice</supportedProfiles>

- Décommenter le noeud <visible> et le passer à true :

<visible>true</visible>

Optionnel :
les icones de l’appli (pour android, ne mettre que les suivantes)

<icon>
<image16x16>icone_16x16.png</image16x16>
<image32x32>icone_32x32.png</image32x32>
<image48x48>icone_48x48.png</image48x48>
<image128x128>icone_128x128.png</image128x128>
</icon>

Pour Android, décommenter le noeud <android> qui va permettre de générer un manifest.xml dans l’appli :
<android>
…
</android>

Le certificat

Pour générer votre appli, il va vous falloir la signer avec un certificat, fichier au format .p12.

Si vous possédez déjà un tel fichier, vous pouvez l’utiliser, sinon il va falloir générer ce certificat. Flash Builder permet de le faire.

Cliquer sur l’icone ‘export release build’ :

Laisser tel quel et cliquez sur ‘next’ :

Cliquer sur ‘Create…’ pour créer un certificat :

Renseigner le certificat en indiquant votre nom, celui de votre organisation, le pays et taper un mot de passe.
Puis choisir l’emplacement de sauvegarde de votre certificat (‘Save as’). Pour ma part, j’ai créé un dossier ‘release’ dans mon projet Flex.

Pour générer le certificat, cliquez sur ‘Finish’ :

Courage, nous y sommes bientôt !

Fichiers de release

Dernière étape avant la génération de notre appli Android, vérifiez que vous avez en votre possession tous les fichiers requis. Pour ma part, j’ai crée un dossier ‘release’ dans lequel j’ai placé tous ces fichiers :

Au minimum, il vous faut :

• MonAppli.swf > l’appli
• MonAppli-app.xml > le fichier descriptor de l’appli .air
• monCertif.p12 > certificat

Voilà vous êtes prêts !

Création du fichier .apk

Dernière étape, il va nous falloir packager notre appli AIR dans un fichier .apk (le format des appli Android), qui n’est autre qu’un fichier .zip contenant pleins de fichiers ainsi que les fichiers de votre appli.

Pour packager, plusieurs options se présentent :

• Option NERD : ligne de commande…
  Voir http://polygeek.com/2958_flex_creating-your-first-air-app-for-android-using-flash-builder

• Option GEEK : tache Ant
  Voir http://unitedmindset.com/jonbcampos/2010/07/19/android-mobile-development/

• Option NOOB : package assistant pro de Serge Jespers
  http://www.webkitchen.be/package-assistant-pro/

Etant allergique à la ligne de commande et pas assez flexeux pour utiliser Ant, j’ai choisi l’option Noob, une petite appli AIR crée par Serge Jespers, qui vous package automatiquement votre .apk.

Serge, I Love You !

Après installation de package assistant pro, lancer l’appli.

Première étape, les préférences :

Where is JAVA.exe ?
Trouver le l’emplacement du fichier java.exe sur votre HDD.
Sur windows, il devrait se trouver ici : C:\Program Files\Java\jre6\bin\java.exe

Where is ADT.jar for AIR 2.5 ?
En principe, vous le trouvez ici : C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\AIR2.5\lib\adt.jar

Where is your certificate ?
Indiquez l’emplacement du certificat .p12 généré précédemment (chez moi, il se trouve dans le dossier ‘release’ de mon projet FB4).

Cliquez ensuite sur ‘Save’ :

Choisir Package APK :

1ere étape :
Indiquer l’emplacement de votre fichier descriptor (‘PremierAppli-app.xml’) :

2e étape :
Vérifier que le fichier SWF indiqué dans le champ est bien le bon. Sinon, sélectionnez le bon fichier :

3e étape :
Ajouter les éventuels fichiers additionnels de votre appli (assets, fichiers de config…) :

4e étape :
Indiquer le mot de passe de votre certificat :

5e étape :
Indiquer l’emplacement de sauvegarde et le nom de votre fichier .apk.
Puis cliquer sur ‘COMPILE‘ :

Roulements de tambour………
ça passe !

Vous retrouverez votre fichier .apk à l’emplacement indiqué :

OUF ! On a échappé à la ligne de commande ! Encore merci M. Jespers !

Conclusion

Comme vous le voyez, le process de création d’un .apk n’est pas d’une grande simplicité pour le moment… Souhaitons qu’Adobe fournisse très vite des outils intégrés à Flash Builder qui simplifient un peu tout ça.

Prochaine étape de ce tutoriel très bientôt : tester votre appli .apk sur votre device Android.

Ce tutorial a pour but d’expliquer comment faire une application AS3  utilisant une Runtime Shared Library (RSL) compilée avec FlashDevelop et le Flex SDK.

L’avantage d’une RSL est le partage d’une même ressource de classes pour plusieurs applications ou modules SWF. L’application s’en trouve plus légère étant donné que la ressource est chargée dynamiquement au RunTime. Très utile aussi pour externaliser des Skins dans un SWF externe afin de pouvoir le changer sans recompiler l’application, simplement en changeant le SWF RSL.

Il est important de distinguer qu’il s’agit de classes chargées dynamiquement, donc, instanciables à volonté, par rapport à  simplement charger un SWF avec la classe Loader, car dans ce cas, seuls, les objets (instances) sont accessibles. Le chargement de SWF par [Embed] permets l’intsanciation à volonté, mais sera compilé avec l’application, donc non chargés dynamiquement au runtime.

Nous verrons également une alternative un peu plus contraignante mais n’utilisant pas le framework Flex exploitant les propriétés de linkage export/import d’origines de Flash.

Préparer un SWF RSL avec FlashDevelop ( SWC)

Afin de pouvoir utiliser une RSL sous FlashDevelop, il faut 2 fichiers! un SWF qui contient les classes qui seront chargées au runTime et son Clone sous forme de SWC qui fournira les références de ces classes à FlashDevelop afin qu’elles existent au moment du codage. (obligatoire pour l’intelliscence et le compilateur).

Nous verrons que le SWC nous fournit tout ça, étant donné qu’un SWC n’est rien d’autre qu’une archive (zip, rar, ..) contenant le SWF et un XML de références.

Sous FD, créez un nouveau « AS3 Empty Project ». Créez vos nouvelles classes publiques AS3 à l’aide de la commande « Add » du menu contextuel de la fenêtre Project, dans le répertoire src.

Pour l’exemple, je crée 2 classes, une MyRectangle et une MyRound qui sont de simples objets graphiques.

Exemple pour la classe MyRectancle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package
{
    import flash.display.Sprite;
    /**
    * ...
    * @author Alama
    */
 
    public class MyRectangle extends Sprite
    {
	public function MyRectangle()
	{
		graphics.beginFill(0xFF0000);
		graphics.drawRect(0, 0, 150, 100);
		graphics.endFill();
	}
    }
}

Une fois les classes terminées, il faut compiler le projet en SWC. Celà peut être fait simplement à l’aide du plugin SWC pour FD que l’on peut trouver ici: http://sourceforge.net/projects/exportswc/

On peut également le faire manuellement à l’aide du compilateur du flex SDK compc. voir les commande ici:
http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_22.html

Préparer un SWF RSL avec Flash CS (création d’un SWC)

Dans un nouveau projet Flash, créez un symbole par élément (classe) qui sera désiré dans votre fichier partagé.

Le SWC que nous allons créer doit contenir toutes les classes des objets créés en bibliothèque. Donc, pour chaque symbole de la bibliothèque, il faut les exporter pour ActionScript. Il n’est pas obligatoire de les avoir sur la scène, uniquement en bibliothèque est suffisant. Mettez une majuscule à vos noms de symboles, car ce seront des classes.

Une fois tous les symboles créés, il suffit de publier votre projet Flash en cochant la case « Exporter SWC » de l’onglet Flash des Paramètres de publication.

Préparer et configurer FlashDevelop pour l’utilisation de Runtime Shared Libraries

Sous FD, créez un nouveau projet AS3.  Une des caractéristiques des RSLs est qu’elles ne sont normalement pas utilisables en AS3 pure! Du moins, à l’heure où ces lignes sont écrites, on peut supposer qu’Adobe changera ça prochainement. Il s’agit d’une fonctionnalité qui est prise en charge par Flex.  On peut contourner le problème en étendant notre Classe document en « SimpleApplication » Flex.

Pour ce faire, il est nécessaire d’utiliser la classe SimpleApplication de Flex. Il faut donc installer le fichier framework.swc dans notre projet (il se trouve dans le répertoire lib du framework Flex SDK). Je le place dans le répertoire « lib » mais ce n’est pas une obligation.

Ensuite, à l’aide du clic droit, il faut l’ajouter à la librairie de FD (« Add To Library »), comme représenté sur cette image:

Ensuite, nous avons besoin d’installer notre SWC créé précédemment de la même manière que nous avons installé le framework.swc. Mais nous avons également besoin d’installer le SWF correspondant au SWC dans le répertoire où s’éxécutera notre application (runtime), en l’occurrence ici, le répertoire « bin ».

Nous avons vu plus haut ce que contenait un SWC (SWF + XML). Donc, il faut ouvrir le SWC à l’aide d’un programme d’archives tel que WinRar. Extraire une copie du SWF (normalement appelé « library.swf ») et placer cette copie dans le répertoire « bin » de notre projet. En ouvrant l’arborescence de nos fichiers SWF et SWC de notre fenêtre Project, on voit qu’ils contiennent identiquement les mêmes classes.

Le SWC ne nous sert que de référence, il ne doit pas être compilé et inclus dans notre application finale, puisque les classes en questions seront chargée dynamiquement au runtime depuis le SWF RSL.

Pour éviter que ce SWC soit compilé, il faut l’exclure de la manière suivante : Clic droit >  Options > External Library.

On a presque fini! il ne nous reste plus qu’a informer le compilateur du fichier RSL à utiliser au runtime, grâce à cela, il ne cherchera pas les classes manquantes puisqu’on lui dit qu’elles seront chargées au runtime.

Pour ce faire, dans le menu principal de FalshDevelop il faut aller dans: Project > Properties > Compiler Options.

Dans « Additional Compiler Options », cliquez le bouton à l’extrême droite.

Dans la nouvelle fenêtre, il faut lui donner le chemin du fichier RSL. La 2 ème ligne sert a contourner une erreur de Sandox.  Comme ceci:

-rsl library.swf
-use-network=false

Voilà, notre système RSL est mis en place, nous sommes prêt à programmer notre application.

Rappel d’une chose ! La classe document doit absolument étendre SimpleApplication, donc elle aura ce look ci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package
{
	import flash.events.Event;
	import flash.system.Security;
	import mx.core.SimpleApplication;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends SimpleApplication
	{
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// entry point
 
			var rect:MyRectangle = new MyRectangle;
			rect.y = 20; rect.x = 20;
			addChild(rect);
			var round:MyRound = new MyRound;
			round.y = 200; round.x = 70;
			addChild(round);
		}	
 
	}
 
}

L’implémentation d’un système RSL sous FlashDevelop est terminée.

.

.

Solution Alternative sans Flex

Une autre solution sans utiliser le framework Flex ni l’obligation d’étendre la Classe Document en SimpleApplication consiste à utilsier le système classique de Flash CS, c’est à dire, l’export/import liking et de l’utiliser dans FlashDevelop à l’aide de la balise [Embed].

!!! Cette solution est intéressante, mais est plus contraignante car il nous faudra un couple de SWFs par Classe !!!

Pour cela, nous avons absolument besoin de Flash. Nous devons créer 2 FLAs! Un pour l’Export qui sera le vrai Shared Library, car il contiendra les classes. Et un autre, qui servira de référence au premier par linkage. On pourrait tout faire dans le même FLA, mais par clarté, on en fait 2. Donc, Créons 2 répertoires, un appelé « share » et l’autre « links« 

Création des Shared SWFs

Créez un FLA Sauvegardez le sous « share/shared_quelque_chose.fla ». Créez les symboles dont vous avez besoin.

Ensuite, nous devons  régler chaque symbole sur « Exporter.. » . Dans la bibliothèque, clic droit sur chaque symbole > « propriété » et cochez la case « Exporter pour le partage..« . L’URL n’est pas utile, si le nom de votre application se place automatiquement dedans, ça ne gênera pas. Comme ceci:

Une fois terminé, il reste à exporter chaque symbole en SWF séparés dans le répertoire share. A nouveau clic droit sur chaque symbole comme cette image:

Voilà, nos Shared SWFs sont à présent créés! (1 SWF par classe).

Création des SWFs de références (linked)

Tout en laissant ouvert le Shared..fla que nous venons de créer, créez un nouveau document et nommez le « Ref_links_quelque_chose.fla« , sauvegardez le dans le répertoire « links » Copier tous les symboles de la bibliothèque du FLA Share dans la bibliothèque du FLA links par la commande « copier/coller ».

Nous devons cette fois, régler les propriétés de chaque symbole de ce nouveau FLA sur « Importer pour le partage..« 

Attention!! ici, dans le champs « URL: » il faut impérativement donner le chemin du SHARED SWF auquel ce symbole sera lié!!

Donc, en mettant les mêmes noms que le SWF qui contient réellement les classes. comme ceci:

Pour terminer, exportez tous les symboles en SWF dans le répertoire « links« .

Utilisation des SWFs sous FlashDevelop

Créez un nouveau Project AS3, placez tous les SWFs du répertoire « links » dans le répertoire « lib » du projet et tous les SWFs du répertoire « share » dans le répertoire « bin » du projet.

Ajouter tous les SWFs de « lib » à la librairie de FD. (Clic droit > add to library). Ce n’est pas obligé dans ce cas ci, mais c’est mieux pour l’auto complétion.

A présent, vous pouvez Embeder vos SWF link (ceux du répertoire lib) dans votre code.   Vous pouvez cliquer droit dessus et faire « Insert Into Document ».

Une fois les swf embarqués et déclarés en tant que Class, vous pouvez les instancier comme n’importe quelle autre classe.

Voici un exemple d’utilisation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		[Embed(source = '../lib/btn.swf')] public var Btn:Class;
		[Embed(source = '../lib/round.swf')] private var Round:Class;
		[Embed(source = '../lib/ovale.swf')] private var Ovale:Class;
 
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			var btn:MovieClip = new Btn();
			btn.x = 50; btn.y = 50;
			addChild(btn);
 
			var round:MovieClip = new Round();
			round.x = 50; round.y = 150;
			addChild(round);
 
			var ovale:MovieClip = new Ovale();
			ovale.x = 50; ovale.y = 250;
			addChild(ovale);
 
		}
 
	}
 
}

this.tutorial.terminate( );

Comment créer un preloader d’image avec barre de progression et pourcentage ? La réponse ici !

1 – Préparation du document

−    Créer un nouveau document AS3 (Ctrl + N).

−    Créer 1 calque et nommez le : Actions

2 – Création des éléments graphiques du preloader.

−    Créez 2 symboles de type clip (Ctrl + F8) et nommez les : preloader et barre.

Nous avons maintenant deux clips dans la bibliothèque : preloader et barre.

−    Double-clickez sur le clip barre pour accéder à son interface graphique et dessiner la barre de chargement  avec l’outil rectangle.

−    Double-clickez sur le clip preloader et insérer le clip barre.

Pour pouvoir contrôler dynamiquement par la suite l’échelle (largeur en pourcentage) de votre clip barre, nous devons lui donner un nom d’occurrence : barreDeChargement_mc.

−    Sélectionnez le clip barre sur la scène et écrivez “barreDeChargement_mc” dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Pour afficher le taux de chargement, nous avons besoin d’un champs texte dynamique instancié.

−    Sur un deuxième calque, créez un champs de texte dynamique à l’aide de l’outil Texte et et écrivez “pourcentage_txt” dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Le clip preloader est prêt à l’emploi.

3 – Exportation pour ActionScript du clip preloader.

Pour créer dynamiquement ce clip sur la scène, nous devons l’exporter pour ActionScript.

−    Utilisez la boîte de dialogue Propriétés du panneau Bibliothèque.

1. Sélectionnez le clip preloader dans le panneau Bibliothèque.
2. Dans le menu contextuel du panneau Bibliothèque, choisissez Propriétés….

3. La boîte de dialogue Propriétés du symbole apparaît.

4. Dans la boîte de dialogue Liaison, activez l’option Exporter pour ActionScript.
Les champs Classe et Classe de base sont alors activés.
Par défaut, le champ Classe de base a la valeur flash.display.MovieClip

5. Cliquez sur OK.

Code AS3

−    Sur le calque Actions, Frame 1, ouvrez le panneau Actions et ajoutez le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

	/**
	 * @subject Preloader AS3
	 * @author Muriel Charon
	 * @date Janvier 2010
	 */
 
//Variables Preloader et Loader
var preloader:Preloader;
var chargeur:Loader;
 
//Instanciation de l'objet preloader
preloader = new Preloader();
 
//Centre le preloader sur la scène
preloader.x = Math.round ( (stage.stageWidth - preloader.width) / 2);
preloader.y = Math.round ( (stage.stageHeight - preloader.height) / 2);
 
//affichage du preloader avec la méthode addChild()
addChild(preloader);
 
//Instanciation de l'objet chargeur
chargeur = new Loader();
 
//L’écoute des différents événements propres au chargement se fait auprès de l’objet LoaderInfo accessible par la propriété contentLoaderInfo de l’objet Loader
 
//ProgressEvent.PROGRESS : diffusé lorsque le chargement est en cours. Informe sur le nombre d’octets chargés et totaux. Sa fréquence de diffusion est liée à la vitesse de téléchargement de l’élément
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, chargement);
 
//Event.COMPLETE : diffusé lorsque le chargement est terminé
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargement);
 
//IOErrorEvent.IO_ERROR : diffusé lorsque le chargement échoue
chargeur.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
 
//Chargement de l'image externe avec la methode load(). L'objet URLRequest contient l'adresse de l'élément à charger
chargeur.load(new URLRequest("la_gare.jpg"));
 
function chargement(pEvt:ProgressEvent):void
{
	//bytesLoaded et bytesTotal sont des propriétés qui renvoient le nombre d'octets de contenu chargé
	var ratio:Number = pEvt.bytesLoaded / pEvt.bytesTotal;
 
	//Affichage du taux de chargement dans le champs texte dynamique
	preloader.pourcentage_txt.text = (Math.round(ratio* 100).toString())+" %";
 
	//Mise à l'echelle de la barre de progression proportionnellement au taux de chargement
	preloader.barreDeChargement_mc.scaleX = ratio;
}
 
function finChargement(pEvt:Event):void
{
	//suppression de l'objet preloader
	removeChild(preloader);
 
	//suppression des références vers l'objet preloader pour qu'il puisse être supprimé de la mémoire
	preloader.pourcentage_txt = null;
	preloader.barreDeChargement_mc = null;
 
	//affichage du chargeur avec la méthode addChild()
	addChild(chargeur);
}
 
function onIOError(pEvt:IOErrorEvent):void
{
	//indique la nature de l'erreur
	trace(pEvt);
}
 
//**FIN DU SCRIPT

Et voilà, votre preloader est prêt à l’emploi !

Télécharger les sources : preloader_AS3_src.zip