Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Charger une animation/image

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

Nous allons voir comment monter un preloader basique afin de tester l'avancée du chargement d'une animation ou d'une image externe. Ce tutorial se sert uniquement des méthodes fournies par MovieClip. Pour effectuer un preloader avancé, vous avez à disposition la classe MovieClipLoader, existante depuis Flash MX 2004. Une démonstration est disponible ici !

Vous avez à disposition, ce tutorial qui se base sur le même fonctionnement mais qui donne plus de détails !

Clip conteneur

Avant tout, nous avons besoin d'un clip conteneur pour pouvoir y placer l'animation/image que nous allons charger :

var conteneur:MovieClip = this.createEmptyMovieClip("clipConteneur", 0);
  • Ne mettez aucune propriétés sur ce clip pour l'instant car seules les valeur _x , _y, _xscale et _yscale seront gardées lorsque le chargement arrivera à son terme !

Lancer le chargement

Tout bêtement, on dit à notre clip conteneur : “charge cette animation/image” :)

var conteneur:MovieClip = this.createEmptyMovieClip("clipConteneur", 0);
conteneur.loadMovie("autreAnimation.swf");

Ecouter le chargement

Afin de connaitre l'avancée du chargement, nous allons créer une fonction qui sera appelée régulièrement afin de vérifier tout ca :

var conteneur:MovieClip = this.createEmptyMovieClip("clipConteneur", 0);
conteneur.loadMovie("autreAnimation.swf");
 
var fonctionEcoute:Function = function(Void):Void
{
   //récupération du nombre de bytes chargés
   var loaded:Number = conteneur.getBytesLoaded();
 
   //récupération du nombre de bytes total
   var total:Number = conteneur.getBytesTotal();
 
   //calcul du ratio (%)
   var ratio:Number = loaded/total*100;
 
   //affichage dans la console
   trace("chargement à "+ratio+"%");
 
   //vérification si l'animation/image a été totalement chargée
   if (ratio == 100)
   {
     //si oui, alors on arrete d'appeler la fonction
     clearInterval(interval);
   }
}
 
//chaque 20ms, appelle la fonction fonctionEcoute
var interval:Number = setInterval(this, "fonctionEcoute", 20);

Ici, c'est un affichage console du pourcentage de chargement qui est effectué. Vous pouvez bien évidemment l'afficher dans un TextField ou pour calculer l'avancement d'une barre de progression.

Conclusion

L'idée est de montrer comment fonctionne un preloader basique. Bien entendu, beaucoup de choses restent à gérer (fichier introuvable, arrivée du fichier dans flash, …) mais cela relève plus du détail par la suite lorsque l'on est habitué.
L'avantage du code ci-dessus est qu'il est aussi utilisable pour un LoadVars ou un XML. Toutefois pour ce genre de chose, la procédure serait un peu différente.

  • Notez que le code ci-dessus est utilisable depuis Flash MX (il suffit d'enlever le typage des variables).