Le chargement dynamique des graphismes, swf, ressources externes…
Commentaires fermés sur Le chargement dynamique des graphismes, swf, ressources externes…
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 »]
|
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 »]
|
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 »]
|
1 2 3 4 |
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 »]
|
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 »]
|
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 »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* 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 »]
|
1 2 3 4 5 6 7 |
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 »]
|
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 |
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 »]
|
1 2 3 4 5 6 |
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 »]
|
1 2 3 4 5 6 7 8 |
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 »]
|
1 2 3 4 5 6 7 8 |
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 »]
|
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 »]
|
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 »]
|
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 »]
|
1 2 3 4 5 6 7 8 |
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 »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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.
|
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é 429 fois – 463,66 KoComment 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.
Développement Facile