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 !

Depuis la sortie de Flash CS5.5 et de Flash Builder 4.5, AIR 2.6 et AIR 2.7 vous permettent de développer des applications iOS en AS3 et de les déployer sur iPhone, iPad et iPod Touch. Il n’est dès lors plus nécessaire d’apprendre l’Objective C et de posséder un Mac pour créer des applications. Toutefois, la création de votre premier fichier *.ipa (le format des applications iOS) vous demandera de passer par des étapes préliminaires longues et complexes…

En effet, pour compiler et tester une application iOS sur votre iDevice, il faudra obligatoirement la signer avec :

• Un certificat Apple iOS au format .p12
• Un fichier de provisioning

Et vous allez le voir, la création de ces deux précieux fichiers ne se fera qu’au prix d’un périple épique.

Alors, accrochez-vous, restez braves et suivez-moi pour cette longue route !

Etapes Apple Developer

1)   S’inscrire au programme développeur

http://developer.apple.com/programs/register/

Suivre les étapes pour créer une Apple ID pour un « individual » ou une « company », ou utiliser une Apple ID existante (ajouter le « iOS developer program » si vous développez déjà pour Mac OS X). A l’étape « Select a program », choisir « iOS developer program ».

Note : si vous choisissez « company » plutôt que « individual », vous serez désigné en tant que « Team Agent » et pourrez inviter d’autres membres de votre équipe et choisir des admins d’équipe. Voir Apple iOS Developer’s guide pour plus de détails.
Si vous vous vous enregistrez en tant que « individual », votre nom apparaîtra en tant que vendeur de vos apps soumises à l’App Store. Si vous vous enregistrez en tant que « Company », c’est le nom de votre entreprise qui apparaîtra.

2)   Payer (99$ / an)

3)   Attendre l’email d’activation

Compter entre 24 et 48 heures, des fois moins pour le profil « individual ».

4)   Choisir le type de contrat à l’aide du lien iTunes Connect de l’email d’activation

Free Application Contract – Vous serez immédiatement éligible pour développer des applications gratuites pour l’app-store. Ce contrat est géré via iTunes Connect, dont vous recevrez un email avec un lien, et à partir duquel vous pourrez vous loguer en utilisant votre Apple Developer ID obtenue lors du processus d’inscription.

Paid Applications Contract – Vous devrez compléter un contrat séparé via iTunes Connect pour les applications que vous souhaitez vendre. Il faudra fournir vos coordonnées bancaires (pour les paiements) et des informations fiscales. Le contrat sera validé par Apple, cela peut prendre quelques jours. Note : vous pouvez compléter cette étape plus tard si vous souhaitez juste faire des tests.

Etapes Application

Vous êtes en phase de développement, de test et de debug de votre appli. Il vous faudra mettre en place certificats, profiles et devices pour pouvoir tester votre application en mode debug. Cette étape est sans doute la plus complexe du processus…

Note : les fichiers .p12 et provisioning ne sont pas les mêmes pour le debug et pour la release finale ! Il faudra refaire certaines étapes lorsque vous souhaiterez packager votre app pour la distribuer sur l’app-store. Voir la 3e partie Etape Distribution.

1)   L’iOS Provisioning Portal

Une fois les étapes précédentes achevées, loguez vous au Apple Developper Center avec votre developer ID, puis cliquez sur iOS Provisioning Portal.

TIP : n’hésitez pas à consulter l’onglet « How To » pour des infos détaillées sur les étapes de configuration et de création.

2)   Résumé des étapes :

• Requête, autorisation et téléchargement des Certificats.
• Définition des Devices de votre équipe de développement.
• Création d’App IDs uniques pour chacune de vos applications ou création d’une Wildcard App ID (*) pour un ensemble d’applications.
• Création et téléchargement d’un Provisioning Profile.

3)   Création d’un « developer certificate » (.cer) et d’un fichier P12

Liens utiles :
http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-8000.html
http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-7fff.html

Le developer certificate (.cer) est le fichier qui vous identifie en tant que développeur auprès d’Apple. Il est nécessaire pour générer le fichier .p12 qui va vous permettre de signer vos applications pour les installer sur votre iDevice.

Notez bien que ces 2 fichiers (.cer et .p12) n’ont besoin d’être générés qu’une seule fois : vous utiliserez le même .p12 pour signer toutes vos applications. Il ne sera pas nécessaire de refaire ces étapes plus d’une fois.

Mac OS X :

Création d’un fichier *.cer :

1. Lancer l’application Trousseau d’accès (« Keychain Access ») qui se trouve dans « Applications > Utilitaires > Trousseau d’accès ». Dans le menu du haut, choisir « Trousseau d’accès > Assistant de Certification > Demander un certificat à une autorité de certificat ». Entrer l’email que vous avez utilisé lors de l’enregistrement en tant que développeur et laisser le champ « Adresse électronique de l’AC » vide. Sélectionner « Enregistrée sur le disque » et cocher « Me laisser indiquer les informations sur la bi-clé ».

2. Il vous sera ensuite demandé d’enregistrer le fichier sur votre disque dur. Le fichier créé est un « certificate signing request » (CSR). Notez bien l’endroit où vous sauvegardez le fichier. Puis sur le panneau « Information de bi-clé », laisser les options « 2048 bits » et « RSA » par défaut et cliquer sur « Continuer ».

3. Puis retournez sur la page « iOS Provisioning Portal » du Apple Developper Center et cliquer sur « Certificates » dans la colonne de gauche.

4. Sur le premier onglet (« Development ») cliquer sur le bouton « Request Certificates ».

5. En bas de l’écran, cliquer sur « Choose File » et sélectionner le « certificate signing request » (CSR) créé précédemment avec le Trousseau. Le certificat doit apparaître dans la liste avec la mention « Pending Approval ». Cliquer sur le certificat et approuver votre certificat en cliquant sur le bouton « Approve ».

6. Puis vous devez télécharger le certificat fraîchement approuvé (developer_identity.cer) ainsi que le « WWDR intermediate certificate » (ne vous souciez pas de ce que c’est, téléchargez-le avec le lien fourni à côté de la « * » note située sous la liste des certificats).

7. Une fois les deux fichiers téléchargés, double-cliquer sur chacun d’eux sur Mac. Le trousseau s’ouvrira automatiquement, choisissez « Ajouter à votre trousseau ».

Création du fichier .p12 :

1. Lancer l’application « Trousseau d’accès ».

2. Si vous n’avez pas ajouté le certificat (.cer) au trousseau (étape 7 de la création du .cer), sélectionner « Fichier > Importer des éléments », puis naviguer jusqu’au .cer obtenu d’Apple.

3. Dans le bloc « Catégorie » situé à gauche, sélectionner « Clés ». Puis sélectionner la clé privée associée avec votre certificat de développeur.

4. Sélectionner « Fichier > Exporter des éléments » pour sauvegarder votre fichier .p12.

5. Il vous sera demandé de créer un mot de passe. C’est ce mot de passe qui vous sera demandé par Flash Builder ou Flash pour signer votre application avec votre .p12.

Autrement dit, ne l’oubliez pas !!

Vous voilà enfin en possession de votre fichier .p12, vous pouvez maintenant passer à l’étape 4 : « Enregistrer un device ».

Windows :

Vous êtes sous Windows ? Pas de chance… tout sera un peu plus compliqué que sous Mac OS. Mais soyez persévérant !

Sous Windows, on ne peut pas utiliser l’appli Trousseau d’accès. Il faudra donc générer le certificat par d’autres moyens : en ligne de commande.

Création d’un fichier *.cer :

1. Pour créer le fichier *.cer, nous avons besoin d’OpenSSL, téléchargeable ici : http://www.slproweb.com/products/Win32OpenSSL.html . Choisir la version Win32 OpenSSL v1.0.0d Light.

Par défaut, OpenSSL s’installe à la racine du disque C : « C:\OpenSSL-Win32 ».

2. Ouvrir une session de commande Windows en allant dans Démarrer > Accessoires > Invite de commandes ou plus simplement en tapant « cmd » puis entrée dans le champ « Exécuter » (XP) ou dans le champ recherche (VISTA/7). Taper « cd » et le chemin du dossier bin de l’application OpenSSL, par exemple :

cd C:\OpenSSL-Win32\bin

Astuce : sur XP, vous pouvez collez du texte dans la console de commande en faisant un clic-droit dans la barre supérieure de la fenêtre puis en choisissant « modifier > coller » dans le menu déroulant.
Sous Vista/7, un simple « clic-droit > coller » vous permet de coller du texte.

3. Puis taper

set RANDFILE=.rnd

4. Nous allons créer une clé privée, nous en aurons besoin plus tard. Entrez le texte suivant sur la ligne de commande :

openssl genrsa -out mykey.key 2048

En principe, un fichier mykey.key a été crée dans le dossier bin d’OpenSSL.

5. Créez le fichier .certSigningRequest (CSR) en entrant :

openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj "/emailAddress=email@example.com, CN=Regart.net, C=FR"

N’oubliez pas de remplacer l’emailAddress, la valeur CN (Company Name : nom de votre entreprise) et la valeur C (Country : pays) par vos coordonnées.

Un fichier « CertificateSigningRequest.certSigningRequest » a été crée dans le dossier bin.

6. Puis retournez sur la page « iOS Provisioning Portal » du Apple Developper Center et cliquer sur « Certificates » dans la colonne de gauche.

7. Sur le premier onglet (« Development ») cliquer sur le bouton « Request Certificates ».

8. En bas de l’écran, cliquer sur « Choose File » et sélectionner le « certificate signing request » (CSR) créé précédemment avec la ligne de commande. Le certificat doit apparaître dans la liste avec la mention « Pending Approval ». Cliquer sur le certificat et approuver votre certificat en cliquant sur le bouton « Approve ».

9. Puis vous devez télécharger le certificat fraîchement approuvé : developer_identity.cer.

Il va nous permettre de créer le fameux fichier .p12 !

Création du fichier P12 :

1. Copier le fichier .cer obtenu précédemment dans le dossier bin de l’application OpenSSL.

2. Dans l’invite de commande tapez :

openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

Un fichier *.pem a été créé dans le dossier bin :

3. Pour créer le fichier *.p12, taper :

openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

Vous aurez un message vous demandant un mot de passe, c’est le mot de passe du certificat .p12 utilisé dans Flash et Flash Builder.

Note : Les caractères du mot de passe que vous tapez n’apparaissent pas ? Pas de panique, c’est tout à fait normal.

Vous pouvez être fier de vous : voyez ce beau fichier iphone_dev.p12 présent dans le dossier bin ! Si vous lisez ces lignes, c’est que vous avez surmonté le plus difficile. Passons maintenant à l’enregistrement de vos iDevices.

4)   Enregistrer un device

Il faut ajouter au Provisioning Portal le « Unique Device ID » (UDID) de tout device sur lequel vous souhaitez tester vos applications, avec un maximum de 100 devices par an. Pour connaître l’UDID de votre device, vous pouvez utiliser iTunes. Connectez votre device et lancez iTunes. Sur l’onglet « résumé », cliquez sur le serial du device pour faire apparaître son identifiant de 40 caractères. Ne pas utiliser le numéro de série, cela ne fonctionnera pas !

Note : chaque nouveau device ajouté requiert le téléchargement d’un nouveau « provisioning profile » dans lequel le device et l’ID de l’application (« app ID ») sont associés. Autrement dit, à chaque fois que vous ajoutez un device au provisioning portal, il faudra éventuellement regénérez le provisioning profile correspondant.

5)   Créer une App ID unique

Une App ID est faite de 10 caractères générés par un Bundle seed ID d’Apple et par un Bundle Identifier spécifié par le développeur. Elle sera nécessaire pour installer une app sur votre device et utiliser certains services d’Apple (In App purchase, Game Center, iCloud…).

Note : En principe, chaque application doit avoir sa propre App ID : il vous faudra donc créer une App ID par application, en utilisant l’identifiant unique de l’application spécifié dans le fichier Descriptor de votre application AIR. Toutefois, pour des application de test, il ne sera pas nécessaire de générer une App ID par application, vous pourrez utiliser une « Wild Card App ID » (voir note plus bas).

Pour créer une App ID, sélectionner la rubrique App ID’s à gauche et cliquer sur le bouton « New App ID ».

A l’écran suivant, vous allez créer votre App ID.

Le Bundle seed ID est généré par Apple et se compose de lettres et de chiffres. Par exemple : A12BC3D45E.
Le Bundle Identifier utilise en général un nom de domaine inversé pour garantir son unicité.

Au final, une App ID ressemble à cela : « A12BC3D45E.net.regart.monAppli ».

Note : Si vous souhaitez faire des applis de test, je vous conseille d’utiliser une Wild Card App ID, par exemple : « A12BC3D45E.* » que vous pourrez associer à autant d’applis que vous le souhaiter, quelque soit leur Bundle Identifier (fr.kouma.app, net.regart.test, bob.groove.sonic…). Cela vous permettra de tester et d’installer plusieurs applications sans avoir à générer une App ID pour chaque appli.

6)   Créer et télécharger un provisioning profile

Un « provisioning profile » est le second fichier nécessaire pour tester votre application sur un device iOS. En gros, il s’agit d’une entité légale qui vous relie à un certificat, une device ID et une application. C’est ce fichier, en plus du .p12, qui vous sera demandé par Flash Builder ou Flash pour signer votre application.

TIP : si vous avez une erreur dans iTunes en essayant d’installer une app disant que le « Signer is not Valid », c’est probablement parce que vous n’avez pas généré à nouveau votre provisioning profile après avoir ajouté l’UDID de votre device.

Note : un device peut contenir plusieurs provisioning profiles liés à différents certificats, devices et app IDs. Il faut aussi se rendre compte que vous aller générer des tas de provisioning profiles, alors habituez-vous à cette étape ! Par ailleurs, chaque provisioning profile de développement expire après 90 jours, il faudra les renouveler (et oui !). Les profiles de distribution expirent plus tard (1 an).

Etapes Distribution

Votre appli est prête, et vous souhaitez la distribuer… Il faudra regénérer un .p12 et provisioning file spécifique (non, ce n’est pas une blague !!).

Vous utiliserez les mêmes sections « Certificates », « Devices » et « Provisioning » que précédemment, sauf que vous sélectionnerez l’onglet « Distribution » au lieu de l’onglet « Developement ».

Résumé des étapes :

• Création et téléchargement d’un « iOS Distribution Certificate ».
• Ajout d’un Device ID
• Création et téléchargement d’un « Distribution Provisioning Profile »
• Soumission de votre application pour la distribution

La plupart de ces étapes sont identiques à celle de la phase de développement. La chose la plus importante est le mode de distribution : Ad Hoc et App Store.

Ad Hoc signifie que vous allez distribuer votre application à un nombre limité de personnes pour qu’il la teste sur leur device (limité à 100 devices).

App Store est la phase finale lorsque votre application est prête pour l’App Store.

Chaque phase requiert un provisioning profile spécifique. L’application doit être recompilée avec ce nouveau provisioning profile après la création de celui-ci.

NOTE : vous verrez une note disant « Only Team Agents are authorized to prepare and submit applications for distribution. » Ne vous inquiétez pas, puisque vous êtes votre propre Team Agent.

1)   Création d’un « Distribution Certificate »

Mêmes étapes que précédemment, sauf que vous pouvez utiliser le nom de votre entreprise au lieu de votre nom si vous le souhaitez. C’est ce nom qui sera utilisé pour signer votre application pour les autres personnes. Ce certificat est valide un an pour la distribution.

2)   Enregistrement d’un Device

Enregistrez les devices ID’s des utilisateurs qui seront vos testeurs. Vous devez faire cette étape avant de générer votre provisioning profile, pour garantir que les device ID’s seront incluses dans dans le provisioning profile fourni à Flash Builder ou Flash lors de la compilation.

NOTE : à chaque fois que vous ajouterez un device ID, il faudra vous assurer de re-générer le provisioning profile de l’application et de le télécharger à nouveau.

3)   Création d’un provisioning profile de distribution

Vous choisirez Ad Hoc (pour distribuer à des testeurs) ou App Store (pour la release finale) en fonction de l’avancée de votre développement.

4)   Compilation en mode release dans Flash Builder

Recompiler votre application en mode release avec votre nouveau distribution provisioning profile et votre distribution certificate.

Vous pourrez choisir le « package type » : Ad Hoc ou Final Release.

5)   Distribution du fichier .ipa

Distribution Ad Hoc – vous pouvez envoyer votre .ipa à vos testeurs via un email ou un site web.

Distribution App Store – Il faudra vous rendre sur le site iTunes Connect pour soumettre votre application. Il faudra remplir des formulaires et donner les informations les plus spécifiques possibles pour éviter le rejet de votre application. Il faudra également uploader votre application en la renommant en .zip et uploader une image de 512*512 pixels séparément en tant qu’icône de grande taille pour le store dans iTunes.

Conclusion

Que dire en conclusion ? Que oui, générer ces fichiers est pénible et prend du temps, et que non, vous n’avez pas le choix. Donc, prenez le temps de vous familiariser avec ces étapes et ces fichiers. Une fois tout cela fait, vous verrez que générer une App ID ou ajouter un nouveau device se fait en quelques clics indolores. C’est juste la mise en place qui est lourde, après tout roule.

En note finale, je remercie devgirl qui a sorti un tuto en anglais au moment même où j’ai commencé à écrire ce tuto. Son article étant extrêmement détaillé et complet (mais uniquement pour Mac OS), des pans entiers de cet article sont directement adaptés de son tuto. Un énorme merci à elle :

http://devgirl.org/2011/06/20/flexair-for-ios-development-process-explained/

Hello Flash world !

Après avoir listé quelques features de la CS5.5, nous allons dans cet article vous en dire davantage sur Flash CS 5.5. Pas besoin de le cacher, la plupart est en rapport avec le développement multi-écrans.

Voici quelques-unes des nouveautés donc de Flash CS 5.5 :

Aide à la gestion des calques simplifiée (ENFIN :p).

Flash CS5.5 nous permet de faire directement des couper / copier / coller / dupliquer de calque dans un même document voir même d’un document à un autre !

Le menu contextuel a été quelque peu modifié.

Voici ce que nous obtenons maintenant lors du clic droit sur un calque dans Flash CS5.5 :

J’ai d’ailleurs effectué quelques tests et n’ai rencontré aucun problème.

Ces fonctionnalités simples et efficaces nous feront gagner un temps fou. Je me rappelle de ces longues animations image par image créées en oubliant de les imbriquer dans un clip. C’était quand même un peu galère de réorganiser l’imbrication du document. Et bien cette époque est révolue !

Une palanquée de nouveaux snippets de code

De supers nouveaux snippets, notamment pour les périphériques tactiles, AIR et AIR mobiles,  des actions simples mais très utiles que l’on retrouve dans la plupart des applications. On trouve des snippets pour par exemple :

- La fermeture de l’application

- La réduction de l’application

- La restauration de l’application

- Le chargement de fichier

- L’enregistrement de fichier

- La gestion de la géolocalisation

- La gestion d’évènements tactiles

- La gestion de l’accéléromètre

Bref, au total plus de 70 snippets plus efficaces les uns que les autres.

La transformation d’un symbole en bitmap

Et on continu avec les killer features !

Flash CS5.5 nous donne la possibilité d’exporter un symbole tel qu’un Clip en bitmap, et cela en vue d’une optimisation mobile of course !

Nous avons le choix entre deux formats, le JPEG ou le PNG / GIF

Concrètement, comment ça se passe ?

Plusieurs possibilités :

- Soit un symbole contenant uniquement des formes vectorielles ou d’autres symboles, mais aucune animation n’est présente. Si l’on fait clic droit sur le symbole puis convertir en Bitmap, un bitmap sera créé dans la bibliothèque et le symbole sur la scène remplacé par ce nouveau bitmap.

- Soit un symbole. Vous souhaitez le transformer en bitmap mais uniquement lors de la compilation de l’application.  Dans le panneau des Propriétés, un nouveau menu est maintenant disponible : « Exporter en temps que bitmap ». Dans ce cas, lors de l’export, le symbole sera directement exporté en bitmap ! Très bon.

Le gros avantage de cette seconde technique est que votre objet est toujours un objet vectoriel et qu’il conserve tous les avantages de ce format puisque ce n’est qu’à l’export qu’il est « bitmapisé ».

Mise à l’échelle du contenu d’un document lors du redimensionnement de la scène

Peut-être avez-vous déjà dû produire une application en plusieurs formats. Par exemple une version pour iPhone, une pour iPad, une pour un device Android…Les résolutions d’écran sont différentes, et vous devrez si vous n’utilisez pas de layout manager, dupliquer le projet et passer un temps incalculable à redimensionner vos symboles, recaler vos animations, etc.

Dans cette nouvelle mouture de Flash CS5.5 cette longue et éprouvante expérience se réduit à quelques secondes (notez qu’il faudra quand même retoucher deux, ou trois choses derrière, mais globalement c’est plutôt pas mal) !

Voici la procédure :

1) Votre application est terminée. Vous vous apprêtez à faire les différentes versions

2) Vous dupliquez votre projet

3) Ouvrez une copie de ce projet et rendez-vous dans la boîte de dialogue « Paramètres du document »

4) Redimensionnez votre scène à votre convenance

5) Cochez la case « Mettre à l’échelle le contenu avec la scène »

6) Confirmez en cliquant sur OK

Flash va redimensionner et replacer les différents élément de votre application !

Boite de dialogue « Paramètres du publication » simplifiés

Voici une toute petite feature qui fait quand même du bien !

La boite des paramètres de publication a été épurée et la petite case à cocher pour générer les SWC est bien plus accessible :

Sauvegarde automatique de vos précieux documents toute les x minutes

Voila LA case anti-coupure de courant ! LA case qui vous aidera à ne pas frapper sur vos collègues lorsque par « inadvertance » ils ont appuyés sur le bouton rouge de la multiprise…bref, je vous présente la case à cocher de « Sauvegarde automatique ». Celle-ci est disponible dans la boite de dialogue « Paramètres du document », juste en dessous de la cadence d’animation de votre document :

Voila pour les features qui paraissent les plus juteuses !

Pour plus d’info :

- Présentation de Flash Professional CS5.5

- Nouvelles fonctionnalités de Flash Professional CS 5.5

Amicalement.

Olivier.

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

Salut à tous. Pour mon premier petit tuto sur Flashxpress, je vous propose de réaliser un lecteur de Flux RSS, en AIR, sous Flash.

La but de ce tuto est donc de vous apprendre à récupérer un flux RSS en AS3 et instancier à la volée un MovieClip par article qui contiendra le titre de l’article ainsi qu’un bouton, qui, lorsqu’il sera cliqué, ouvrira le navigateur et affichera la page de l’article choisi.

Création du projet

Ouvrez Flash et sur l’écran d’accueil choisissez un fichier de type « Adobe AIR 2 ».

Enregistrer le fichier. Personnellement, je l’appelle « LecteurRSS ».

A partir de là, si on compile, on a bien une application AIR.

Préparation des éléments graphiques

Niveau design nous allons rester simples car ce n’est pas le but du tuto.

Pour commencer, je ne souhaite pas que mon application s’ouvre dans une fenêtre de type Windows. Je souhaite ici designer moi-même le type de fenêtre et ses contrôles de gestion (le bouton réduire et le bouton fermer l’application).

Afin de ne plus avoir cette fenêtre, rendons nous dans le panneau Propriétés, dans Flash, et cliquons sur le bouton « Modifier » correspondant aux paramètres d’Adobe AIR 2.

Dans la fenêtre qui vient de s’ouvrir, sélectionnons dans le menu déroulant « Style de fenêtre », « Chrome personnalisé (transparent) ».

Si l’on recompile l’application, nous ne voyons plus rien apparaitre… mais l’application est belle et bien lancée, en témoigne le petit icône d’Adobe AIR dans la barre des tâches.

Si rien n’est visible c’est simplement par ce que notre application est vide.

Attelons-nous à présent au design d’une des lignes du lecteur.

Commençons par tracer un rectangle de 300 pixels de largeur par 50 de hauteur.

Remplissons-le d’un dégradé allant d’un gris foncé (#666666) vers le noir (#000000).

Grace à l’outil de transformation de dégradé, orientons ce remplissage verticalement.

Voici le résultat :

Pour le bouton « Lire », qui lorsqu’il sera cliqué ouvrira le navigateur sur la page de l’article, dessinons simplement un rectangle de 50 pixels par 50 pixels et alignons-le à droite du premier rectangle dessiné. Inversons la direction du dégradé. Voici le résultat :

Nous devons à présent ajouter deux champs texte. L’un contiendra le titre de l’article et le second simplement le texte « Lire».

Grace à l’outil Texte, dessinons donc les deux champs.

Le champ pour le titre doit être de type « Classique » / « Dynamique ». Pendant que nous y sommes, donnons-lui comme nom d’occurrence « titreArticle ».

Le champ texte contenant le mot « Lire » quant à lui n’a pas besoin d’être dynamique. Je choisis donc comme type de champ « Classique » et « Statique ».

Voici comment j’ai placé mes textes :

Nous allons maintenant sélectionner le rectangle et le texte composant le bouton « Lire » et appuyer sur F8 afin de convertir le tout en symbole.

Nommons le symbole « boutonLire », sélectionnons le type « Bouton » dans le menu déroulant du même nom, laissons l’alignement par défaut et validons en pressant le bouton « OK ». Entrons dans le symbole et insérons une image clé pour l’etat « Dessus » ainsi que pour l’état « Abaissé ». Sur l’état « Dessus », sélectionnons le rectangle de fond et intervertissons la position des deux couleurs (on revient donc au même dégradé que celui que l’on a sur le rectangle sous le titre).

Une fois le symbole crée, sélectionnons l’occurrence de celui-ci présente sur la scène et donnons-lui pour nom d’occurrence « btnLire ».

La dernière étape consiste tout simplement à sélectionner l’occurrence du bouton, le rectangle de fond du titre de l’article ainsi que le champ de texte « titreArticle » et à convertir le tout en symbole de type Clip.

Nommez le « Ligne ». Lors de la création du symbole, choisissons donc comme type dans le menu déroulant « Clip ». Nous devons en plus de cela, cocher la case « Exporter pour ActionScript » ainsi que « Exporter dans l’image 1 » (cette dernière se coche normalement de façon automatique).

Cela va nous permettre d’instancier ce clip directement par code. Veillez en revanche à bien mettre une majuscule au nom du symbole car ici nous créons une classe et que, par convention, les noms de classe commencent par une majuscule.

Le champ « Classe de base » doit en principe directement pointer vers la classe MovieClip, du fait que nous ayons choisi comme type de symbole « Clip ».

Validons ensuite la création de ce symbole en cliquant sur le bouton « OK ».

Si l’on regarde à présent dans notre bibliothèque, nous avons donc deux symboles, un bouton (boutonLire) et un MovieClip (Ligne).

La colonne « Liaison » du bouton lire doit en principe être remplie avec comme mention « Ligne ».

Notre premier élément graphique est prêt. Nous pouvons à présent supprimer l’occurrence du MovieClip présent sur la scène.

Bien, je vais maintenant importer le logo que je souhaite placer dans mon application. Histoire de faire bien original, je vais utiliser le logo Flashxpress (super site, vous connaissez ? ^_^).

Je me contenterais ici de faire un copier / coller depuis Illustrator.

Une fois importé et redimensionné (il fait maintenant 100 pixels de largeur pour 30 de hauteur), je le convertis en symbole de type Clip, sans cocher cette fois ci l’option « Exporter pour ActionScript » et le nomme « logoFXP ». Je place enfin l’occurrence du clip « logoFXP » sur la scène à une position en X et en Y de 0. Notre logo est prêt.

Il nous reste deux petits éléments à préparer. En effet, ayant choisi de ne pas afficher mon application dans une fenêtre classique, je dois quand même donner la possibilité aux utilisateurs de la réduire et de la fermer. Nous allons donc dessiner une petite croix ainsi qu’un petit tiret.

Avec l’outil rectangle, je dessine un rectangle et lui donne des dimensions de 12 par 5 avec des coins arrondis. Voici ce que j’obtiens :

Pour créer la croix nous allons nous servir de ce trait d’union. Sélectionnons-le et dupliquons-le (CTRL + C / CTRL + V).

A l’aide de l’Outil de Transformation, faisons pivoter de 45° (donc en maintenant la touche SHIFT pour nous simplifier la tâche) le tiret. Dupliquons ce tiret et faisons le pivoter de 90°. Notre croix est prête.

Nous devons à présent convertir nos deux icônes en symbole. Une fois de plus nous choisirons comme type « Bouton » et nommerons nos symboles respectivement « traitUnion » pour l’icône de réduction de l’application et « croix » pour l’icône de fermeture.

Profitons-en pour attribuer le nom d’occurrence à nos icônes. Utiliser pour chaque icône le nom du symbole.

Pour finaliser nos boutons, ouvrons chacun des deux symboles, et insérons une image clé sur les états « Dessus » et « Abaissé ». Sur l’état « Dessus » changeons la couleur de l’objet. Je vais pour ma part choisir du rouge.

Il ne nous reste plus qu’à positionner les boutons sur la scène. Pour cela je glisse depuis la bibliothèque une occurrence du MovieClip « Ligne ». Et le positionne juste sous le logo. Je place en suite mes deux icones.

Et voilà, tous nos éléments graphiques sont prêts. Nous allons compiler l’application afin de tester l’interaction sur les boutons.

Nous pouvons supprimer l’occurrence du MovieClip, sauvegarder, aller prendre un café, fumer une cigarette et nous passerons ensuite à la partie code…

Le code

Dans cette seconde partie nous allons passer au code. Créons donc un nouveau calque et nommons-le AS.

Nous devons dans un premier temps récupérer notre flux RSS. Pour cela, nous utiliserons un URLLoader. L’URLRequest de l’URLLoader est simplement l’url du flux. Pour la récupérer, cliquons-droit sur le lien « S’abonner au flux RSS » présent en bas du site FlashXPress et sélectionnons « Copier l’adresse du lien ».

Voici l’url que j’obtiens : http://www.flashxpress.net/feed/

Le code de mon URLLoader est donc :

1

var chargeur:URLLoader = new URLLoader(new URLRequest("http://www.flashxpress.net/feed/"));

Afin de récupérer le contenu de l’URLLoader une fois qu’il aura fini de le charger, nous devons ajouter un écouteur sur ce dernier pour l’évènement « Event.COMPLETE »:

1

chargeur.addEventListener(Event.COMPLETE, init);

Ici j’ai choisi de nommer la fonction “init”.

Cette fonction va avoir plusieurs rôles :

• lire le RSS

• instancier à chaque fois qu’un article est repéré le MovieClip « Ligne »

• remplir le champ « titreArticle » avec le titre de l’article

• ajouter sur le MovieClip une propriété dynamique urlArticle et la remplir avec l’url de l’article

• ajouter un écouteur sur ce bouton pour que lorsqu’il est cliqué, l’article s’ouvre dans le navigateur

• positionner la ligne

Pour faire cela nous utiliserons une boucle.

Créons donc notre fonction :

1
2
3

function init(e:Event):void{
 
}

Nous avons besoin d’un objet de type XML pour stoquer les données présente dans l’URLLoader :

1
2
3
4
5

function init(e:Event):void{
 
           var monFlux:XML = new XML(e.target.data);
 
}

Comme source de données pour l’objet XML nous choisissons ici e.target.data. Cela nous renvoie les données présentes dans l’URLLoader « chargeur » du fait que l’écouteur est placé dessus.

Afin de nous assurer que les données arrivent bien a destination, réalisons un petit trace de notre objet XML « monFlux ».

1
2
3
4
5
6
7

function init(e:Event):void{
 
var monFlux:XML = new XML(e.target.data);
 
trace(monFlux) ;
 
}

Exécuter le programme. Rien ne se passe ? Mais si, guettez votre panneau de sortie et attendez quelques secondes…magie, les données envahissent votre petit panneau !

Bien. Si on observe ces données on voit que le titre des articles est contenu dans le nœud <title> et que l’url de notre article ce trouve dans le nœud <link>. Ces deux nœuds sont tous deux contenus dans le nœud <item>. Le nœud <item> quant à lui se trouve dans le nœud <channel>, lui-même étant dans le nœud <xml>.

Voici une version quelques peu raccourcie du contenu de l’objet XML :

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

<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" …>
 
<channel>
 
…
 
<item>
 
<title>Graphic Live Session à Meudon-la-Forêt</title>
 
<link>http://feedproxy.google.com/~r/flashxpress/~3/O0doqsfPls8/</link>
 
<comments>http://www.flashxpress.net/news/graphic-live-session-a-meudon-la-foret/#comments</comments>
 
<pubDate>Tue, 25 Jan 2011 14:35:51 +0000</pubDate>
 
<dc:creator>Olivier</dc:creator>
 
<category><![CDATA[News]]></category>
 
<guid isPermaLink="false">http://www.flashxpress.net/?p=5543</guid>
 
…
 
</item>
 
</channel>
 
</rss>

Pour récupérer notre titre nous devrons donc faire : channel.item.title

Et pour le lien : channel.item.link

Créons donc notre boucle. Celle-ci va devoir parcourir chaque nœud item et effectuer pour chacun d’eux toutes les tâches décrite ci-dessus.

1
2
3
4
5
6
7
8
9

function init(e:Event):void{
 
var monFlux:XML = new XML(e.target.data);
 
           for(var i:int; i<monFlux.channel.item.length(); i++){
 
           }
 
}

Commençons par essayer de récupérer dans le panneau de sortie tous les titres des articles :

1
2
3
4
5

for(var i:int; i<monFlux.channel.item.length(); i++){
 
           trace(monFlux.channel.item[i].title);
 
}

Cela fonctionne. En effet à chaque itération de la boucle « i » s’incrémentant, et récupérant le titre présent dans le nœud item[i], on arrive a tracer le nœud titre de chacun des nœuds item. Chaque nœud item correspondant a un article, on récupère bien le titre de tous les articles.

Bien. Supprimons ce trace, et maintenant nous voulons qu’à chaque itération de la boucle une occurrence de notre MovieClip soit instanciée et qu’elle soit remplie.

Dans notre boucle on crée donc une instance :

1

var ligneArticle:Ligne = new Ligne();

On va remplir le champ titre juste après avec les informations du RSS :

1

ligneArticle.titreArticle.text = monFlux.channel.item[i].title;

Rappelez-vous, titreArticle c’est le nom d’occurrence du champ texte dans le MovieClip « Ligne ».

On crée une propriété urlArticle sur le MovieClip de la ligne en cour de création :

1

ligneArticle.urlArticle = monFlux.channel.item[i].link;

On ajoute un écouteur sur le click du bouton de la ligne pour qu’au clic il ouvre la navigateur et affiche la page de l’article :

1

ligneArticle.btnLire.addEventListener(MouseEvent.CLICK, ouvrirArticle);

Nous créons la fonction ouvrir article sous la fonction init :

1
2
3
4
5

function ouvrirArticle(e:MouseEvent):void{
 
           navigateToURL(new URLRequest(e.target.parent.urlArticle));
 
}

Cette fonction contient un simple navigateToURL. L’URLRequest à pour valeur e.target(donc le bouton).parent(le MovieClip en somme).urlArticle(la propriété dynamique crée dans la boucle) .

Bien. Nous pouvons à présent nous occuper de placer notre occurrence sur la scène.

Nous lui donnons une position en x de 0, et en y de la hauteur du MovieClip * i. Comme à la première itération de la boucle i à pour valeur 0, la première ligne ce placera alors à 0*50. A la seconde itération, i aura une valeur de 1 donc le Movie clip sera placé à 50 pixels en y et ainsi de suite. A cela nous devons ajouter un décalage de la hauteur du logo car celui-ci se trouve en haut de la liste plus une petite marge. J’ajouterais donc 35. J’aimerais aussi laisser 1 pixel entre chaque MovieClip. J’ajout donc 1 à la hauteur du Movie clip.

En synthèse :

MovieClip.y = (i * (hauteur du MovieClip + 1(pour espacer de 1))) + 35 (pour laisser la place au logo).

Voilà tout ce charabia traduit en AS3 :p :

1
2
3

ligneArticle.x = 0;
 
ligneArticle.y = (i*51) + 35;

On l’ajoute à la liste d’affichage :

1

addChild(ligneArticle);

Voici donc le code final de notre boucle :

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

for(var i:int; i<monFlux.channel.item.length(); i++){
 
           var ligneArticle:Ligne = new Ligne();
 
           ligneArticle.titreArticle.text = monFlux.channel.item[i].title;
 
           ligneArticle.urlArticle = monFlux.channel.item[i].link;
 
           ligneArticle.btnLire.addEventListener(MouseEvent.CLICK, ouvrirArticle);
 
           ligneArticle.x = 0;
 
           ligneArticle.y = (i*51) + 35;
 
           addChild(ligneArticle);
 
}

Compilons. Ça fonctionne ! Merveilleux. Si on clique sur l’un des boutons lire, le navigateur s’ouvre a la page de l’article relatif au bouton cliqué !

Alors peut être, selon la hauteur de vos éléments (pour ne pas dire « si vous avez utilisez les mêmes dimensions que moi » ^_^ ‘), une partie de votre application sera tronquée (vers le bas). Pour remédier à cela, changez les dimensions de la scène de Flash. Pour ma par j’ai fini par mettre 500px de large par 1000px de haut.

Bien. Nous sommes presque au bout. Il ne nous reste plus qu’à faire une fonction pour permettre le drag de l’application, une pour la réduire dans la barre des tâches ou le dock selon le système d’exploitation et une pour la fermer.

Commençons par nous occuper du drag.

Ajoutons un écouteur sur le stage et créons la fonction dragAPP sous la fonction ouvrirArticle:

1
2
3
4
5

stage.addEventListener(MouseEvent.MOUSE_DOWN, dragAPP);
 
function dragAPP(e:MouseEvent):void{
 
}

Dans la fonction dragAPP nous allons utilizer la methode startMove() de la class nativeWindows afin de drager notre application.

1
2
3
4
5

function dragAPP(e:MouseEvent):void{
 
           stage.nativeWindow.startMove();
 
}

Si l’on compile et que l’on drag l’application en la prenant par le logo ou tout autre point, on arrive à la déplacer. Formidable.

Maintenant la fonction pour la réduire dans le dock ou dans la barre des tâches. On doit ajouter un écouteur sur l’icône réduire et créer la fonction minimizeAPP:

1
2
3
4
5
6
7

traitUnion.addEventListener(MouseEvent.CLICK, minimizeAPP);
 
function minimizeAPP(e:MouseEvent):void{
 
           stage.nativeWindow.minimize();
 
}

Nous faisons de nouveau appel à la classe nativeWindows, mais cette fois ci à sa méthode minimize() afin d’effectuer cette action.

Ajoutons un écouteur sur le bouton de fermeture de l’application et créons la fonction closeAPP :

1
2
3
4
5
6
7

croix.addEventListener(MouseEvent.CLICK, closeAPP);
 
function closeAPP(e:MouseEvent):void{
 
           NativeApplication.nativeApplication.exit();
 
}

Compilons et testons.

L’application est fonctionnelle. Nous pouvons donc préparer le fichier .air que vous distribuerez.

Dans le panneau des propriétés, cliquons sur le bouton « Modifier » des Paramètres d’Adobe AIR 2.

Dans l’onglet « Général » saisissons nos informations.

Notez que pour ID APP la convention veux que l’on retourne son nom de domaine et, qu’après un slash, on mette le nom de l’application.

A présent nous allons configurer l’icône de notre application. Pour cela, rendez-vous dans l’onglet « Icônes ». Vous devez avoir au préalable créé 4 tailles d’icône. Une en 16*16px, une autre en 32*32px, une troisième en 48*48 et une dernière en 128*128px. Indiquons donc en cliquant sur le petit bouton parcourir la path vers l’icône correspondante à la taille sélectionnée.

Pour terminer, rendons nous dans l’onglet « Signature ».

Dans celui-ci nous allons devoir cibler un certificat au format p12 et saisir son mot de passe.

Dans le cas ou vous n’avez pas de certificat, vous pouvez en générer un en cliquant sur le bouton « Créer » et en remplissant le champ de la fenêtre qui viens de s’ouvrir.

Cliquons maintenant sur le bouton « Publier ».

Notre fichier AIR est généré et prêt à être distribué.

Le but de ce didacticiel est atteint, je pense donc que nous arrivons au terme de ce tuto.

En espérant qu’il vous aura servi.

Amicalement,

Olivier.

Télécharger les sources ! Flash CS5 est nécessaire pour ouvrir le .fla !