Auteur: Alama alias Alain Mazy
Date: 25/05/2010
Environnement: Flashdevelop
Min Player cible: 9.0

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( );