Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les ressources externes et leur chargement

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par goabonga (goabonga@gmail.com), le 10 février 2010

Bonjour, aujourd'hui, grâce à ce tutoriel orienté FlashPlayer10, nous allons voir comment charger en toute simplicité une ressource externe : fichier image, library swf, ou bien encore, une image cryptée.

Chargement d'une image, ou un swf

Pour charger une image ou un swf, rien de plus simple ! Il vous suffit d'utiliser la class Loader, toutefois, faites attention aux Listeners que vous placez sur cette dernière car c'est la cause la plus courante des fuites mémoire du flash player.

Pour charger l'image nous allons dans un premier temps instancier un loader :

var my_loader:Loader = new Loader();

Maintenant nous allons placer les listeners sur leur objet contentLoaderInfo (vous pouvez vous reporter au tutoriel de tanoy qui traite ce sujet) :

my_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);

Une fois le chargement effectué, la méthode onCompleteHandler sera appelée , mais avant de voir le contenu de cette fonction nous allons lancer le chargement :

my_loader.load(new URLRequest('http://127.0.0.1/c2088cc393d5e1906c65b1260c6140ed6d15cd26.jpg'));

Comme je le dis au début de l'article, il est très important de faire attention aux listeners posés sur le contentLoaderInfo car, bien souvent, les développeurs oublient de les supprimer et dans certains cas la surcharge de la mémoire peut fermer votre navigateur.

Dans mon exemple nous avons placé deux listeners , or,une fois le chargement fini il vous faudra les supprimer :

private function onIoErrorHandler(e:IOErrorEvent):void 
{
(e.currentTarget as LoaderInfo).removeEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
(e.currentTarget as LoaderInfo).removeEventListener(Event.COMPLETE, onCompleteHandler);
}
private function onCompleteHandler(e:Event):void 
{
(e.currentTarget as LoaderInfo).removeEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
(e.currentTarget as LoaderInfo).removeEventListener(Event.COMPLETE, onCompleteHandler);
var child:DisplayObject = (e.currentTarget as LoaderInfo).content;
addChild(child);
}

Maintenant que l'image est chargée, vous pouvez la récupérer dans le LoaderInfo et l'afficher .

Si vous êtes intéressés par la question de charger plusieurs images dans un ordre défini, vous pouvez lire Charger des images à la file.
(note de lilive)

Chargement d'une library

Pour une library, il n'ya pas de grands changements dans la méthode de chargement, seule la function onCompleteHandler change. Lors du chargement d'une library nous n'affichons pas les éléments mais nous les instancions.

Si, par exemple, vous voulez récupérer la class MyUI dans la library, il vous suffira de l'instancier après avoir récupérer sa définition :

private function onCompleteHandler(e:Event):void 
{
(e.currentTarget as LoaderInfo).removeEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
(e.currentTarget as LoaderInfo).removeEventListener(Event.COMPLETE, onCompleteHandler);
var clazz:Class = (e.currentTarget as LoaderInfo).applicationDomain.getDefinition('MyUI') as Class;
var obj:DisplayObject  = new clazz();
addChild(obj);
}

Maintenant, si votre library contient des fonts, c'est un peu la même logique :

private function onCompleteHandler(e:Event):void 
{
(e.currentTarget as LoaderInfo).removeEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
(e.currentTarget as LoaderInfo).removeEventListener(Event.COMPLETE, onCompleteHandler);
var clazz:Class = (e.currentTarget as LoaderInfo).applicationDomain.getDefinition('Library_MyFont') as Class;
Font.registerFont(clazz);
}

Voilà vous êtes prêt à charger tout objet contenu dans une library .

Chargement d'une image en mode binaire et utilisation de la class URLLoader .

Le flash player, depuis sa version 10, nous permet d'injecter des bytes dans un loader, cette nouvelle fonctionnalité est super pratique pour l'affichage d'image cryptée (ou la sauvegarder en raw dans une base de donnée….). Pour mettre en œuvre ce type de chargement nous allons utiliser la class URLLoader qui est destinée à charger des données binaires. Ensuite, nous décrypterons ces données et nous les injecterons dans un objet Loader.

Le chargement avec la class URLLoader est quasiment identique à ce que nous avons vu précédemment, nous instancions un objet URLLoader puis nous le forçons à charger les données en mode binaire, enfin on place les listeners.

var my_loader:URLLoader = new URLLoader();
my_loader.dataFormat = URLLoaderDataFormat.BINARY;
my_loader.addEventListener(Event.COMPLETE, onCompleteHandler);
my_loader.addEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
my_loader.load(new URLRequest('image.jpg'));

Une fois le chargement effectué, il nous suffit de récupérer les données binaires, et de les injecter dans un Loader, si votre image est cryptée c'est à ce niveau que vous la décrypterez. Une fois l'image injectée dans le Loader il appellera la méthode onLoaderCompletHandler qui affichera cette image.

private function onCompleteHandler(e:Event):void 
{
(e.currentTarget as URLLoader).removeEventListener(IOErrorEvent.IO_ERROR, onIoErrorHandler);
(e.currentTarget as URLLoader).removeEventListener(Event.COMPLETE, onCompleteHandler);
var data:ByteArray = (e.currentTarget as URLLoader).data as ByteArray;
//decryptage data = Decrypt(data);
var img_loader:Loader = new Loader();
img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderCompletHandler);
img_loader.loadBytes(data as ByteArray);
}
 
 
private function onLoaderCompletHandler(e:Event):void 
{
(e.currentTarget as LoaderInfo).removeEventListener(Event.COMPLETE, onCompleteHandler);
var obj:DisplayObject  = (e.currentTarget as LoaderInfo).content;
addChild(obj);
}