<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

Sujets sur : classe

Cours ActionScript 3 ‘classe’

Le chargement dynamique des graphismes, swf, ressources externes…

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

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

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.

var oLoader:AssetLoader = AssetLoader.instance;

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

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

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 :

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

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.

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

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

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

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 :

/*
    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".
 
*/

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.

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

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.

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.");
}

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).
AssetLoader.instance.loadClass("assets.swf", "ClassName", getAsset);
 
private function getAsset(asset:*):void
{
	trace("Asset chargé : " + asset);
}

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.

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

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.

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) + "%");
}

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

var nPercentProgress:Number = AssetLoader.instance.percentDone;

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.

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

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.

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

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.

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
}

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é.

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;
}

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://www.actionscript-facile.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é 166 fois – 464 KB

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.

Utiliser un code source AS3 avec Adobe Flash CS5 – Import des fichiers .as et .swc

2 questions

Ecrit le 28 février par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Editeur ActionScript

Le thème de la formation flash de cette semaine répond à une question qui revient souvent parmi les Développeurs qui suivent la Formation AS3 Facile :

  • Comment utiliser des codes sources et importer les classes as directement dans Adobe Flash CS5.
  • La technique pour utiliser les fichiers .swc avec Adobe Flash CS5.

C’est très simple d’importer un code source complet pour le compiler avec Adobe Flash CS5.

C’est ce que je vous propose de découvrir à travers ce tutoriel flash sur Adobe Flash CS5.

Vous apprendrez également comment compiler votre application avec Adobe Flash CS5 pour créer un swf tout neuf !

Adobe Flash CS5 – import des fichiers as et swc

Télécharger le code source du tutoriel AS3

Vous trouverez l’ensemble du code source utilisé durant cette formation flash.

Télécharger “Adobe Flash CS5 - Import des classes .as et .swc” flash-cs5-ticket-a-gratter.zip – Téléchargé 218 fois – 281 KB

Souhaitez-vous d’autres tutoriels sur Adobe Flash CS5 ?

Donnez-moi les thèmes des prochains tutoriels sur Adobe Flash CS5, via les commentaires ci-dessous.

[adrotate block=”2″]

Utiliser un code source AS3 avec l’éditeur FDT – Import des fichiers .as

Commentaires fermés sur Utiliser un code source AS3 avec l’éditeur FDT – Import des fichiers .as

Ecrit le 16 février par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Editeur ActionScript

Le thème de la formation ActionScript 3 de cette semaine répond à une question qui revient souvent parmi les Développeurs qui suivent la Formation AS3 Facile :

  • Comment utiliser des codes sources et importer les fichiers as directement dans l’éditeur FDT ?

En fait, c’est très simple et très rapide d’importer un code source complet dans un projet FDT PowerFlasher.

C’est ce que je vous propose de découvrir à travers cette formation flash sur l’éditeur FDT.

Vous apprendrez également comment compiler très rapidement et efficacement votre projet Flash avec FDT pour créer un swf tout neuf !

L’éditeur FDT – import des fichiers as

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source utilisé durant cette formation flash.

Télécharger “FDT import des fichiers as” exercice-fdt-import-classes.zip – Téléchargé 108 fois – 278 KB

Souhaitez-vous d’autres cours sur l’éditeur FDT PowerFlasher ?

Donnez-moi les prochains thèmes des cours sur l’éditeur FDT, via les commentaires ci-dessous.


porta. sem, at libero Aenean diam