Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Préchargement avec MovieClipLoader

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.

Je vais ci-dessous expliquer un peu plus en détail l'utilisation de cette classe qui est apparue dans Flash MX 2004 (7) et qui, la plupart du temps, peut (devrait) être utilisée pour charger les animations flash externes. En effet, cette classe étant native, elle est beaucoup plus puissante.

Utilisation

Pour pouvoir faire un chargement, il faut commencer par créer un objet qui va gérer le chargement, donc une instance de MovieClipLoader :

var monClip:MovieClip = this.createEmptyMovieClip("conteneur", 0); //clip conteneur
var mcl:MovieClipLoader = new MovieClipLoader(); //gestionnaire du chargement
 
mcl.loadClip("monswf.swf", monClip); //chargement de monswf.swf dans monClip

Cela marchera très bien mais est d'une utilité quasi nulle ! L'idée est de pouvoir gérer l'affichage des pourcentage dans un champs de texte (un exemple parmi d'autres). Il nous faut donc créer un objet qui va “écouter” le gestionnaire de chargement.

  • Notez que la seule utilité (ou presque) de la classe MovieClipLoader et de gérer les évènements qui se produisent lors d'un chargement. En aucun cas ce n'est cette classe qui va s'occuper d'afficher/modifier quoi que ce soit ! Si vous ne voulez pas effectuer d'action lors de chargement, l'utilisation de la méthode loadMovie suffira amplement !

Ecouteur

Nous nous passerons de la POO pour le moment. Nous allons créer notre écouteur qui recevra les évènements appelés par la classe MovieClipLoader. Je vous fait grâce de l'explication des évènements qui peuvent être appelés. Tout est noté ici !

var monClip:MovieClip = this.createEmptyMovieClip("conteneur", 0); //clip conteneur
var mcl:MovieClipLoader = new MovieClipLoader(); //gestionnaire du chargement
 
var ecouteurChargement:Object = new Object(); 
ecouteurChargement.onLoadStart = function(target:MovieClip):Void { trace("start"); };
ecouteurChargement.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number):Void { trace("progress"); };
ecouteurChargement.onLoadComplete = function(target:MovieClip):Void { trace("complete"); };
ecouteurChargement.onLoadInit = function(target:MovieClip):Void { trace("init"); };
ecouteurChargement.onLoadError = function(target:MovieClip, code:String):Void { trace("erreur"); }
 
mcl.loadClip("monswf.swf", monClip); //chargement de monswf.swf dans monClip

Nous avons maintenant notre écouteur, mais personne qui n'utilise ses méthodes… Il nous faut donc dire à notre gestionnaire de préchargement un truc du genre “maintenant, appelle aussi les méthodes de cet écouteur” (il peut y avoir plusieurs écouteur sur le même MovieClipLoader) ! Et pour ce faire, il y a une méthode toute faite : addListener. Ce qui nous donne ceci :

var monClip:MovieClip = this.createEmptyMovieClip("conteneur", 0); //clip conteneur
var mcl:MovieClipLoader = new MovieClipLoader(); //gestionnaire du chargement
 
var ecouteurChargement:Object = new Object(); 
ecouteurChargement.onLoadStart = function(target:MovieClip):Void { trace("start"); };
ecouteurChargement.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number):Void { trace("progress"); };
ecouteurChargement.onLoadComplete = function(target:MovieClip):Void { trace("complete"); };
ecouteurChargement.onLoadInit = function(target:MovieClip):Void { trace("init"); };
ecouteurChargement.onLoadError = function(target:MovieClip, code:String):Void { trace("erreur"); }
 
mcl.addListener(ecouteurChargement);
mcl.loadClip("monswf.swf", monClip); //chargement de monswf.swf dans monClip

et voila, tout est opérationnel, votre préloader est prêt à fonctionner !

  • PS : Si vous voulez charger plusieurs clips, il n'est pas nécessaire de remettre tout le code à chaque fois. Vous pouvez appeler plusieurs fois la méthode loadClip avec des urls/clips différents, les méthodes de l'écouteur seront appelées correctement !

POO

Comment intégrer un écouteur dans un mécanisme de classe en POO ? C'est tout simple ! Au lieu de créer un nouvel objet comme nous l'avons fait avant, nous pouvons encapsuler ces méthodes dans une classe.

Classe Ecouteur

class Ecouteur
{
   public function Ecouteur(Void) { } //constructeur
 
   public function onLoadStart(target:MovieClip):Void { trace("start"); }
   public function onLoadProgress(target:MovieClip, loaded:Number, total:Number):Void { trace("progress"); }
   public function onLoadComplete(target:MovieClip):Void { trace("complete"); }
   public function onLoadInit(target:MovieClip):Void { trace("init"); }
   public function onLoadError(target:MovieClip, code:String):Void { trace("error"); }
}

Dès lors, votre code s'en retrouve grandement simplifié :

var monClip:MovieClip = this.createEmptyMovieClip("conteneur", 0); //clip conteneur
var mcl:MovieClipLoader = new MovieClipLoader(); //gestionnaire du chargement
 
var ecouteurChargement:Ecouteur = new Ecouteur(); 
 
mcl.addListener(ecouteurChargement);
mcl.loadClip("monswf.swf", monClip); //chargement de monswf.swf dans monClip

Interface IEcouteur

Conceputellement, il serait intéressant de “forcer” la mise en place des différentes méthodes au sein des classes devant écouter un chargement. Pour ce faire, la mise en place simple d'une interface est utile :

class IEcouteur
{
   public function onLoadStart(target:MovieClip):Void;
   public function onLoadProgress(target:MovieClip, loaded:Number, total:Number):Void;
   public function onLoadComplete(target:MovieClip):Void;
   public function onLoadInit(target:MovieClip):Void;
   public function onLoadError(target:MovieClip, code:String):Void;
}

et il suffit de l'implémanter dans notre autre classe :

class Ecouteur implements IEcouteur
{
   public function Ecouteur(Void) { } //constructeur
 
   public function onLoadStart(target:MovieClip):Void { trace("start"); }
   public function onLoadProgress(target:MovieClip, loaded:Number, total:Number):Void { trace("progress"); }
   public function onLoadComplete(target:MovieClip):Void { trace("complete"); }
   public function onLoadInit(target:MovieClip):Void { trace("init"); }
   public function onLoadError(target:MovieClip, code:String):Void { trace("error"); }
}

Classe SMovieClipLoader

Et pour forcer l'utilisation du tout, nous pouvons encore faire une spécialisation de la classe MovieClipLoader. Attention toutefois à cette astuce : cela fonctionne en actionscript, mais serait inutile dans des langages comme Java qui supportent la surcharge de méthode.

class SMovieClipLoader extends MovieClipLoader
{
    public function SMovieClipLoader(Void) { } //constructeur
 
    public function addListener(l:IEcouteur):Void { super.addListener(l); }
    public function removeListener(l:IEcouteur):Void { super.removeListener(l); }
}

Code final

Au final, nous obtenons ce code :

var monClip:MovieClip = this.createEmptyMovieClip("conteneur", 0); //clip conteneur
var mcl:SMovieClipLoader = new SMovieClipLoader(); //gestionnaire du chargement
 
var ecouteurChargement:Ecouteur = new Ecouteur(); 
 
mcl.addListener(ecouteurChargement);
mcl.loadClip("monswf.swf", monClip); //chargement de monswf.swf dans monClip

L'avantage de toutes ces manipulations ? C'est principalement pour éviter les erreur de conception (manque d'une méthode) et de synthaxe à l'intérieur d'une classe d'écouteur.

Si vous avez des questions, vous pouvez en discuter ici !