<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 : loader

Cours ActionScript 3 ‘loader’

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.

Comment créer un préloader en AS3 ?

Commentaires fermés sur Comment créer un préloader en AS3 ?

Ecrit le 21 juillet par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Cette fois, sur le site bit-101, j’ai trouvé une option de compilation très pratique.

La création d’un preloader en pure AS3 pour les applications flash imposantes (supérieure à 200Ko).

Il suffit pour cela de rajouter une seule ligne de code dans votre classe principale Main.

Très utile pour indiquer à vos visiteurs la progression du chargement de votre application et les inviter à patienter 😉

Dans le cours ci-dessous, apprenez à utiliser cette option de compilation du SDK Flex.

Préloader en AS3

Version démonstration

Ci-dessous, le résultat dans de l’application FLV Slicer.

https://www.actionscript-facile.com/wp-content/uploads/2011/07/FLV-Slicer-preloader.swf

Télécharger le code source flv slicer

Vous trouverez l’ensemble du code source commenté pour vous aider dans l’intégration de cette fonctionnalité dans vos applications flash.

Télécharger “FLV Slicer” ex-flv-slicer.zip – Téléchargé 387 fois – 23 MB

Ci-dessous, une partie de la classe Main modifiée.

package
{
 
	import flash.events.MouseEvent;
	import button.ButtonValider;
	import flash.net.FileReference;
	import org.bytearray.video.events.SlicedEvent;
	import org.bytearray.video.FLVSlice;
	import flash.media.Video;
	import flash.net.NetStream;
	import flash.net.NetConnection;
	import org.bytearray.video.FLVSlicer;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	import com.demonsters.debugger.MonsterDebugger;
 
	// permet de créer un preloader en AS3
	[Frame (factoryClass = "Preloader")]
	public class Main extends Sprite
	{
		// intègre la video flv directement dans le swf
		[Embed( source="beyond-black-mesa-trailer.flv", mimeType="application/octet-stream" )]
		private var flvBytes:Class;
 
		private var oNetConnect : NetConnection;
		private var oNetStream : NetStream;
		private var video : Video;
 
		private var oBtnCut : ButtonValider;
		private var oBtnPlayPause : ButtonValider;
		private var oBtnDownload : ButtonValider;
 
		private var merged : FLVSlice;
		private var slicer : FLVSlicer;
 
		/**
		 * Constructeur.
		 *
		 */
		public function Main()
		{
			// attend la fin de l'initialisation de la scène
			this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true);
		}
 
		/**
		 * Démarrage de l'application.
		 *
		 */
		protected function onReady(event : Event) : void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, onReady);
 
			// Init De MonsterDebugger
            		MonsterDebugger.initialize(this);
            		MonsterDebugger.trace(this, "Start Application");
            	}
         }

La classe Preloader.as, celle qui affiche la progression du chargement de l’application.

package
{
 
	import flash.ui.ContextMenu;
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.utils.getDefinitionByName;
 
	public class Preloader extends MovieClip
	{
		// le nom de la classe qui lance l'application, généralement Main
		private var mainClassPath : String;
 
		/**
		 * Constructeur.
		 *
		 */
		public function Preloader()
		{
			stop();
			mainClassPath = "Main";
			configureStage();
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
 
		public function onEnterFrame(event : Event) : void
		{
			graphics.clear();
			if (framesLoaded == totalFrames)
			{
				removeEventListener(Event.ENTER_FRAME, onEnterFrame);
				init();
			}
			else
			{
				// affiche une barre de progression
				var percent : Number = root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal;
				graphics.beginFill(0x006f77);
				graphics.drawRect(0, stage.stageHeight /2 - 10, stage.stageWidth * percent, 20);
				graphics.endFill();
			}
		}
 
		/**
		 * Lance l'application swf sur la 2ème frame.
		 *
		 */
		private function init() : void
		{
			nextFrame();// passe à la frame suivante (notre application)
 
			// instanciation de notre application
			var mainClass : Class = Class(getDefinitionByName(mainClassPath));
			if (mainClass)
			{
				var app : Object = new mainClass();
				addChild(app as DisplayObject);
			}
		}
 
		/**
		 * Personnalisation des options du stage.
		 *
		 */
		private function configureStage() : void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			var menu : ContextMenu = new ContextMenu();
			menu.hideBuiltInItems();
			contextMenu = menu;
		}
	}
}

Et vous, utilisez cette technique de la création d’une frame ?

Ou préférez-vous celle, plus classique, d’un swf léger qui preload votre application flash ?


justo ut ut felis felis at Praesent mattis Lorem nec elit. ut