L'idée de base est de s'assurer que tous les fichiers relatifs à une page ont été chargés lorsque celle-ci est exécutée. Pour l'exemple, voici une petite application :

MasapiDemo

Elle se compose des fichiers suivants :

  • storm.jpg : l'image que vous voyez en arrière-plan (prise ici)
  • text.txt : le texte 'ASTORM' (externalisé dans ce fichier texte)
  • font.swf : un SWF contenant la font utilisée par le texte
  • astorm.swf : le SWF qui affiche l'image et le texte
  • index.swf : le massloading du tout

Compliqué ? Certes ce n'est pas l'exemple le mieux adapté, mais il a le mérite d'être assez simple et de démontrer l'utilié que peut avoir masapi dans ce cas-la ! De plus, c'est beaucoup plus facile à mettre en place que ça en a l'air.

Le déroulement global se passe de la manière suivante :

  1. chargement de index.swf
  2. chargement (manuel) du fichier de configuration
  3. parsing du fichier de configuration dans masapi
  4. lancement du massive loading du fichier désiré (astorm dans notre cas - voir plus bas)

Avant tout, il faut paramétrer le fichier de configuration qui va être donné à masapi. Celui-ci se décline en deux parties : la liste des fichiers et leur dépendances. Pour l'exemple ci-dessus, il se présente comme suit :

<?xml version="1.0" encoding="utf-8" ?>
<application>
        <files>
                <file name="astorm"     url="astorm.swf"     type="swf" />
                <file name="font"       url="font.swf"       type="swf" />
                <file name="background" url="storm.jpg"      type="swf" />
		<file name="text"	url="text.txt"	     type="text" />
        </files>
        <dependencies>
		<dependency name="astorm">
			<file name="font" />
			<file name="background" />
			<file name="text" />
		</dependency>
	</dependencies>
</application>

Pour chacun des fichiers (<file ... />), on donne les paramètres suivants :

  • name : le nom du fichier qui sera utilisé dans notre code AS3
  • url : le chemin du fichier
  • type : le type de fichier (issu des constantes de LoadableFileType)

S'ensuit la liste des dépendances (<dependency ... />). Dans le cas ci-dessus, il n'y en a qu'une seule : le fichier 'astorm' a besoin que les fichiers 'font', 'background' et 'text' soient chargés.

Le code par la suite est vraiment simple. Le chargement du fichier de configuration et son parsing se fait comme ça :

import ch.capi.core.*;
 
//load the configuration file
var configLoader:URLLoader = new URLLoader();
configLoader.dataFormat = URLLoaderDataFormat.TEXT;
configLoader.addEventListener(Event.COMPLETE, onConfigurationLoaded);
configLoader.load(new URLRequest("configuration.xml"));
 
function onConfigurationLoaded(evt:Event):void
{
	//retrieve the XML document
	var xmlConfig:XMLDocument = new XMLDocument();
	xmlConfig.ignoreWhite = true;
	xmlConfig.parseXML(configLoader.data);
 
	//parse the configuration
	var parser:ApplicationFileParser = new ApplicationFileParser();
	parser.parse(xmlConfig.firstChild);
}

Le parser ApplicationFileParser va directement créer les instances d'ApplicationFile nécessaires. Cela signifie qu'une fois parsé, il n'y aura plus qu'à passer par la méthode ApplicationFile.getFile("nom") pour récupérer le fichier désiré.

Il est également possible que le fichier de configuration contienne d'autres informations relatives au développement du projet, c'est pourquoi la méthode parse prend en paramètre un XMLNode.

A présent, le fichier de configuration étant parsé, il ne reste plus qu'à charger le fichier désiré :

import ch.capi.core.*;
 
//retrieve the page application file
var pageToLoad:ApplicationFile = ApplicationFile.getFile("astorm");
 
//create the massloader
var massLoader:ApplicationMassLoader = new ApplicationMassLoader();
 
//add the page to load. That's the important line !
massLoader.addApplicationFile(pageToLoad);
 
//launch !
massLoader.start();

Et, une fois chargé, de l'afficher :

import ch.capi.core.*;
import ch.capi.net.*;
 
//retrieve the page
var astormPage:ApplicationFile = ApplicationFile.getFile("astorm");
var astormData:ILoadableFile = astormPage.loadableFile;
 
var ldr:Loader = astormData.loadManagerObject as Loader;
addChild(ldr);

Enfin, une petite passe rapide sur le code qui se trouve dans astorm.swf. Au moment ou le code est exécuté, masapi s'est occupé de charger tous les fichiers dont il a besoin, et donc il ne reste plus qu'a travailler avec nos éléments !

import ch.capi.display.text.*;
import ch.capi.core.*;
 
//retrieve the text
var titleFile:ApplicationFile = ApplicationFile.getFile("text");
fieldTitle.text = titleFile.loadableFile.getData() as String;
 
//retrieve the font
var fnt:AbstractFont = FontsManager.getFont("astormText");
fnt.applyFormat(fieldTitle);
 
//retrieve the picture
var pictureFile:ApplicationFile = ApplicationFile.getFile("background");
var pictureLoader:Loader = pictureFile.loadableFile.loadManagerObject as Loader;
pictureLoader.width = 400;
pictureLoader.height = 300;
 
addChildAt(pictureLoader, 0);

Je me suis également amusé à utiliser la mini-API de Font contenue dans masapi. Il est bien évidemment possible d'affiner tout cela en fonction de l'architecture utilisée. Il y a un exemple un peu plus poussé dans les fichiers que j'ai mis sur googlecode. J'ai également fait un autre tutorial sur les dépendances complexes.

Voila pour ce qui est de ce tutorial :) En annexe, vous trouverez les sources Flash CS3 (que j'ai du adapter très légèrement pour le blog). Et surtout, n'hésitez pas à me donner un retour !