Le chargement dynamique des graphismes, swf, ressources externes…

Commentaires fermés sur Le chargement dynamique des graphismes, swf, ressources externes…

Écrit le 20 mars par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Mots clés : AssetLoader, classe, definition, externe, fonts, Graphics, loader

Lors du développement d’applications et jeux flash complexes, nous sommes tous confrontés un jour ou l’autre au problème de la taille du swf.

Plus votre jeu flash est complet, plus le fichier swf devient lourd à charger. Et donc l’utilisateur doit patienter pour l’affichage du flash player. Ce qui peut vous faire perdre des visiteurs !

Il existe plusieurs solutions solutions pour réduire la taille d’un fichier swf :

optimiser les différents éléments : images, animations, polices de caractères…
utiliser le chargement dynamique.

Dans ce tutoriel flash, nous allons donc apprendre à charger dynamiquement nos ressources (images, animations, swf, polices de caractères, fichiers xml, bibliothèque de code, etc…).

En fonction des actions de l’utilisateur, nous lancerons le chargement des ressources externes nécessaires pour l’affichage du flash.

Notre application swf de base est donc très légère, car l’ensemble du chargement s’effectue au fur et à mesure de la navigation de l’utilisateur.

La librairie AssetLoader

AssetLoader est conçu spécialement pour le chargement de fichiers externes. C’est très facile d’obtenir une référence unique affectée à une ressource externe.

Le fait d’effacer cette référence libère la ressource externe de la mémoire.

AssetLoader implémente plusieurs évènements associés au Flash Loader :

Démarrage du chargement de la pile ou d’un fichier.
Progression du chargement de la pile ou d’un fichier.
Fin du chargement de la pile ou d’un fichier.
Gestion des erreurs.
etc…

AssetLoader simplifie le chargement avec la gestion de plusieurs types de fichiers : xml, .swf, .aif, .mp3, .wav, .bmp, .png, .jpg, .html, .txt, .bin, et .zip.

Un des avantages d’AssetLoader, c’est qu’il est capable de charger une classe ou une définition de classe à partir d’un fichier swf. C’est exactement ce qu’il nous faut pour externaliser facilement nos ressources graphiques en dehors de notre application flash principale. Et ainsi réduire la taille de notre swf.

Utilisation AssetLoader

AssetLoader est un singleton.

Pour récupérer sa référence, il faut utiliser AssetLoader.instance.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

var oLoader:AssetLoader = AssetLoader.instance;

1	var oLoader:AssetLoader = AssetLoader.instance;

[/codesyntax]

Chargement d’un fichier externe

L’utilisation la plus courante pour charger un fichier comme un .jpg, .swf ou .xml est la méthode loadFile().

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

AssetLoader.instance.loadFile("config.xml", getXML);

1	AssetLoader.instance.loadFile("config.xml", getXML);

[/codesyntax]

Le premier paramètre est l’url du fichier, la second paramètre est la fonction qui va recevoir l’élément une fois chargé.

Dans cet exemple, nous chargeons un fichier config.xml. Une fois chargé, les données XML sont transmises dans le premier argument de la fonction getXML().

La fonction getXML peut ressembler à ceci :

[codesyntax lang= »actionscript3″ title= »getXML » bookmarkname= »getXML »]

private function getXML(oConfig:XML):void
{
        trace("XML CONFIG:" + oConfig);
}

private function getXML(oConfig:XML):void

{

trace("XML CONFIG:" + oConfig);

}

[/codesyntax]

Remarquez que le premier paramètre de getXML() reçoit une classe de type XML. Si vous chargez un fichier .mp3, la classe sera de type Sound.

[codesyntax lang= »actionscript3″ title= »getSound » bookmarkname= »getSound »]

private function getSound(oSound:Sound):void { // ... }

1	private function getSound(oSound:Sound):void { // ... }

[/codesyntax]

Si vous chargez un fichier .jpg, la classe sera de type Bitmap.

[codesyntax lang= »actionscript3″ title= »getBitmap » bookmarkname= »getBitmap »]

private function getBitmap(oBmp:Bitmap):void { //... }

1	private function getBitmap(oBmp:Bitmap):void { //... }

[/codesyntax]

La méthode loadFile() de la classe AssetLoader utilise les extensions de fichiers pour reconnaitre le type de fichier chargé.

AssetLoader gère les types de fichiers suivants :

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

/*
    SUFFIX              CLASS               FILE TYPE
    ".xml"              XML                 Extensible Markup Language
    ".swf"              Sprite/MovieClip*   Shockwave Flash
    ".zip"              Object**            Data compression and archive format
    ".bmp"              Bitmap              Bitmap image file format
    ".png"              Bitmap              Portable Network Graphics
    ".jpg", or ".jpeg"  Bitmap              Joint Photographic Experts Group
    ".aif", or ".aiff"  Sound               Audio Interchange File Format
    ".mp3"              Sound               MPEG-1 Audio Layer 3
    ".wav"              Sound               Waveform Audio Format
    ".bin"              ByteArray           Binary data
    ".txt"              String              Text
    ".html"             String              Hypertext Markup Language
    ".var" or ".vars"   URLVariables        Url variables

* Les fichiers .swf doivent avoir un type Sprite si il n'y a qu'une frame, ou type MovieClip si il y a plusieurs frames.

** Les fichiers .zip files renvoient un objet librairie qui contient le contenu du fichier zip avec un identifiant pour chaque fichier.
Les fichiers zip peuvent contenir des fichiers comme ".bmp", ".png", ".jpg", ".jpeg", ".gif", ".swf" et ".xml".

*/

SUFFIX CLASS FILE TYPE

".xml" XML Extensible Markup Language

".swf" Sprite/MovieClip* Shockwave Flash

".zip" Object** Data compression and archive format

".bmp" Bitmap Bitmap image file format

".png" Bitmap Portable Network Graphics

".jpg", or ".jpeg" Bitmap Joint Photographic Experts Group

".aif", or ".aiff" Sound Audio Interchange File Format

".mp3" Sound MPEG-1 Audio Layer 3

".wav" Sound Waveform Audio Format

".bin" ByteArray Binary data

".txt" String Text

".html" String Hypertext Markup Language

".var" or ".vars" URLVariables Url variables

* Les fichiers .swf doivent avoir un type Sprite si il n'y a qu'une frame, ou type MovieClip si il y a plusieurs frames.

** Les fichiers .zip files renvoient un objet librairie qui contient le contenu du fichier zip avec un identifiant pour chaque fichier.

Les fichiers zip peuvent contenir des fichiers comme ".bmp", ".png", ".jpg", ".jpeg", ".gif", ".swf" et ".xml".

[/codesyntax]

Erreur de chargement de fichiers

Lors d’un erreur de chargement d’un fichier, la fonction de callback est comme même appelée. La premier paramètre transmis renvoie null.

L’exemple ci-dessous, à la fin du chargement d’un fichier xml, montre le test d’une erreur de chargement.

[codesyntax lang= »actionscript3″ title= »getXML » bookmarkname= »getXML »]

private function getXML(oConfig:XML):void
{
          if (! oConfig)
              trace("Erreur de chargement du fichier XML");
          else
              trace("XML CONFIG:" + oConfig);
}

private function getXML(oConfig:XML):void

{

if (! oConfig)

trace("Erreur de chargement du fichier XML");

else

trace("XML CONFIG:" + oConfig);

}

[/codesyntax]

Chargement d’une pile de fichiers

Vous pouvez charger une pile de plusieurs fichiers de différents types (.swf, .png, .jpg…).

Vous avez la possibilité d’utiliser la méthode whenDone() avec en paramètre la fonction à appeler à la fin du chargement de l’ensemble des fichiers.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

public function LoadQueueExample()
{
	var oLoader:AssetLoader = AssetLoader.instance;
	oLoader.loadFile("config.xml", getAsset);
	oLoader.loadFile("myGraphic.jpg", getAsset);
	oLoader.loadFile("mySound.mp3", getAsset);
	oLoader.whenDone(onLoadComplete);
}

/**
 * Appelé à la fin du chargement d'un fichier.
 * Permet de récupérer l'élément chargé
 * via une classe spécifique en fonction du type de fichier.
 */
private function getAsset(asset:*):void
{
	trace("Asset chargé : " + asset);
}

/**
 * Appelé à la fin du chargement de la pile.
 *
 */
private function onLoadComplete():void
{
	trace("Tous les éléments sont chargés.");
}

public function LoadQueueExample()

{

var oLoader:AssetLoader = AssetLoader.instance;

oLoader.loadFile("config.xml", getAsset);

oLoader.loadFile("myGraphic.jpg", getAsset);

oLoader.loadFile("mySound.mp3", getAsset);

oLoader.whenDone(onLoadComplete);

}

/**

* Appelé à la fin du chargement d'un fichier.

* Permet de récupérer l'élément chargé

* via une classe spécifique en fonction du type de fichier.

private function getAsset(asset:*):void

{

trace("Asset chargé : " + asset);

}

/**

* Appelé à la fin du chargement de la pile.

private function onLoadComplete():void

{

trace("Tous les éléments sont chargés.");

}

[/codesyntax]

Chargement d’une classe externe via un swf

Cette fonctionnalité est très utile pour charger une bibliothèque graphique contenue dans un fichier swf.

Ensuite, il nous reste plus cas utiliser l’instance de la classe pour récupérer ses éléments graphiques.

Il suffit d’utiliser la méthode loadClass() :

le premier paramètre est l’url du fichier.
le second paramètre est le nom de la classe à instancier.
le troisième paramètre est le nom de fonction qui reçoit la classe déjà instanciée (un objet).

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

AssetLoader.instance.loadClass("assets.swf", "ClassName", getAsset);

private function getAsset(asset:*):void
{
	trace("Asset chargé : " + asset);
}

AssetLoader.instance.loadClass("assets.swf", "ClassName", getAsset);

private function getAsset(asset:*):void

{

trace("Asset chargé : " + asset);

}

[/codesyntax]

Chargement d’une définition de classe externe via un swf

C’est le même principe de fonctionnement que ci-dessous, sauf que là vous chargez une définition de classe.

En utilisant la méthode loadClassDefinition(), les paramètres sont identique à la méthode loadClass().

Sauf, la fonction appelée à la fin du chargement renvoie la classe à instancier et non l’objet comme précédemment. C’est très utile pour ajouter plusieurs fois le même objet graphique dans votre application flash.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

AssetLoader.instance.loadClassDefinition("asset.swf", "ClassName", getClass);

private function getClass(myClass:Class):void
{
	// votre classe est disponible pour l'instanciation
	var asset:* = new myClass();
	trace("Un élément de l'Asset est instancié : " + asset);
}

AssetLoader.instance.loadClassDefinition("asset.swf", "ClassName", getClass);

private function getClass(myClass:Class):void

{

// votre classe est disponible pour l'instanciation

var asset:* = new myClass();

trace("Un élément de l'Asset est instancié : " + asset);

}

[/codesyntax]

Progression du chargement de la pile

Vous pouvez récupérer la progression du chargement globale de la pile via un évènement de l’AssetLoader.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

import com.lowke.assetLoader.events.ProgressEvent;

AssetLoader.instance.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);

public function onLoadProgress(evt:ProgressEvent):void
{
	trace("Progression du chargement : " + Math.round(evt.percentDone*100) + "%");
}

import com.lowke.assetLoader.events.ProgressEvent;

AssetLoader.instance.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);

public function onLoadProgress(evt:ProgressEvent):void

{

trace("Progression du chargement : " + Math.round(evt.percentDone*100) + "%");

}

[/codesyntax]

La progression du chargement peut être récupérée directement via le Singleton AssetLoader.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

var nPercentProgress:Number = AssetLoader.instance.percentDone;

1	var nPercentProgress:Number = AssetLoader.instance.percentDone;

[/codesyntax]

Stopper le chargement d’un élément

Pour arrêter le chargement d’un élément, il suffit d’appeler la méthode close en lui passant en paramètre l’url du fichier.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

 AssetLoader.instance.close("asset.swf");

1	AssetLoader.instance.close("asset.swf");

[/codesyntax]

Supprimer la progression du chargement

Il est possible de supprimer la diffusion de l’évènement « progression du chargement » pour un élément particulier.

Il suffit de passer la propriété showProgress à false.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

AssetLoader.instance.loadFile("myGraphic.jpg", getGraphic).showProgress = false;

1	AssetLoader.instance.loadFile("myGraphic.jpg", getGraphic).showProgress = false;

[/codesyntax]

C’est pratique lorsque l’on veut masquer la progression du chargement pour un type défini de fichier.*

Transmettre des paramètres supplémentaires

Pour les méthodes loadFile(), loadClass(), loadClassDefinition(), et addSwf(), il est possible de transmettre des paramètres supplémentaires.

Ces paramètres sont ensuite transmis à la fonction appelée à la fin du chargement de l’élément.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

AssetLoader.instance.loadFile("config.xml", getXML, "A", 1);

private function getXML(oConfig:XML, arg0:String, arg1:Number):void
{
        trace("print XML CONFIG:" + oConfig);
        trace("print arg0:" + arg0);// print arg0: A
        trace("print arg1:" + arg1);// print arg1: 1
}

AssetLoader.instance.loadFile("config.xml", getXML, "A", 1);

private function getXML(oConfig:XML, arg0:String, arg1:Number):void

{

trace("print XML CONFIG:" + oConfig);

trace("print arg0:" + arg0);// print arg0: A

trace("print arg1:" + arg1);// print arg1: 1

}

[/codesyntax]

Utilisation d’une fonction de récupération automatique des ressources

Dans les méthodes comme loadFile() et loadClass(), il est possible d’utiliser les paramètres supplémentaires pour fournir une variable qui contiendra l’instance de l’élément une fois chargé.

L’élément peut être affecté à une variable en utilisant une fonction générique qui associe l’élément dès qu’il est chargé.

[codesyntax lang= »actionscript3″ title= »AssetLoader » bookmarkname= »AssetLoader »]

private var _config:XML;                // XML
private var _click:Sound;               // Sound

AssetLoader.instance.loadFile("config.xml", assign, "_config");
AssetLoader.instance.loadFile("click.mp3", assign, "_click");

/**
 * Associe automatiquement l'élément chargé à une variable.
 *
 */
private function assign(asset:*, variableName:String):void
{

  if (! asset)// erreur de chargement de l'élément !
      throw new Error("Erreur de chargement pour l'élément : " + variableName + ".");

  // Association de l'élément chargé à la variable passée en paramètre
  this[variableName] = asset;
}

private var _config:XML; // XML

private var _click:Sound; // Sound

AssetLoader.instance.loadFile("config.xml", assign, "_config");

AssetLoader.instance.loadFile("click.mp3", assign, "_click");

/**

* Associe automatiquement l'élément chargé à une variable.

private function assign(asset:*, variableName:String):void

{

if (! asset)// erreur de chargement de l'élément !

throw new Error("Erreur de chargement pour l'élément : " + variableName + ".");

// Association de l'élément chargé à la variable passée en paramètre

this[variableName] = asset;

}

[/codesyntax]

C’est une solution très pratique pour affecter automatiquement des éléments chargés à des variables d’une classe.

Cette technique est utilisée pour le chargement des fichiers sons du jeu Super Mario Bros.

Exemple d’utilisation AssetLoader

Ci-dessous, un exemple complet utilisant plusieurs fonctionnalités AssetLoader.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2012/03/AssetLoader.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2012/03/AssetLoader.swf

Télécharger le code source AssetLoader

Consultez le site officiel AssetLoader.

Vous trouverez ci-dessous l’ensemble du code source commenté de l’exemple.

Télécharger “Exemple AssetLoader” ex-assetloader.zip – Téléchargé 793 fois – 463,66 Ko

Comment optimisez-vous vos jeux flash ?

Quelles sont vos astuces, techniques pour améliorer les performances de vos jeux et applications flash, partagez-les ci-dessous avec la Communauté AS3 Facile.

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Le chargement dynamique des graphismes, swf, ressources externes…

La librairie AssetLoader

Utilisation AssetLoader

Chargement d’un fichier externe

Erreur de chargement de fichiers

Chargement d’une pile de fichiers

Chargement d’une classe externe via un swf

Chargement d’une définition de classe externe via un swf

Progression du chargement de la pile

Stopper le chargement d’un élément

Supprimer la progression du chargement

Transmettre des paramètres supplémentaires

Utilisation d’une fonction de récupération automatique des ressources

Exemple d’utilisation AssetLoader

Télécharger le code source AssetLoader

Comment optimisez-vous vos jeux flash ?

Cours Récents

Liens / Partenaires

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Le chargement dynamique des graphismes, swf, ressources externes…

La librairie AssetLoader

Utilisation AssetLoader

Chargement d’un fichier externe

Erreur de chargement de fichiers

Chargement d’une pile de fichiers

Chargement d’une classe externe via un swf

Chargement d’une définition de classe externe via un swf

Progression du chargement de la pile

Stopper le chargement d’un élément

Supprimer la progression du chargement

Transmettre des paramètres supplémentaires

Utilisation d’une fonction de récupération automatique des ressources

Exemple d’utilisation AssetLoader

Télécharger le code source AssetLoader

Comment optimisez-vous vos jeux flash ?

Cours AS3 pouvant vous intéresser :

Cours Récents

Liens / Partenaires