Preloader une animation Flash

Voici la nouvelle méthode pour faire un preloader (à partir de Flash MX 2004). Cette méthode est plus fiable que l’ancienne et présente quelques nouvelles fonctionnalités intéressantes.

Dans l’exemple ci-après, nous afficherons un simple champ de texte affichant le pourcentage de l’animation chargée, mais rien ne vous empêche, sur le même principe, d’afficher la nième image d’un clip.

Code sur l’image 1 du calque actions on crée d’abord un clip conteneur et on le positionne en haut à gauche

this.createEmptyMovieClip("conteneur_mc", 10);
conteneur_mc._x = 0;
conteneur_mc._y = 0;

On crée un objet loader avec un écouteur d’événements

loader_mcl = new MovieClipLoader();
ecouteur = new Object();

Voici maintenant les différentes méthodes de cette nouvelle classe MovieClipLoader

// appelée quand le chargement démarre
ecouteur.onLoadStart = function(cible_mc)
{
    // création d'un champ de texte dynamiquement
    _root.createTextField("chargement_txt",110,0,0,50,20);
    // quelques attributs
    chargement_txt.border = true;
    chargement_txt.borderColor = 0x000000;
    chargement_txt.textColor = 0x000000;
}

La méthode appelée pendant le chargement, c’est l’endroit idéal pour afficher le preloader.

ecouteur.onLoadProgress = function(cible_mc, charge, total)
{
    _root.chargement_txt.text = Math.floor((charge/total) * 100) + "%";
}

Le chargement est terminé, on efface le texte avec le pourcentage.

ecouteur.onLoadComplete = function(cible_mc)
{
    _root.chargement_txt.removeTextField();
}

On peut maintenant travailler avec le clip chargé, par exemple on peut connaître sa taille, ce qui peut être pratique lorsqu’il s’agit d’images à afficher dans une galerie.

ecouteur.onLoadInit = function(cible_mc)
{
  // trace(cible_mc._width);
}

On ajoute l’écouteur à notre objet

loader_mcl.addListener(ecouteur);

La nouvelle méthode loadClip remplace LoadMovie et LoadMovieNum

loader_mcl.loadClip("fichier.swf", "_root.conteneur_mc");
// attention cette méthode ne fonctionne pas en local avec MX 2004
stop(); // on arrête la tête de lecture

Pour pouvoir tester avec Flash MX 2004, il faut charger un fichier depuis le web, par exemple

loader_mcl.loadClip("http://www.site.com/monGrosJPEG.jpg", "_root.conteneur_mc");

Voici tout le code en un seul bloc à copier

avec en prime un centrage du champ de texte et quelques attributs…

this.createEmptyMovieClip("conteneur_mc", this.getNextHighestDepth());
conteneur_mc._x = 0;
conteneur_mc._y = 0;
loader_mcl = new MovieClipLoader();
ecouteur = new Object();

// on définit le style du champ de texte (liste non exhaustive)
var style_fmt:TextFormat = new TextFormat();
style_fmt.font = "arial";
style_fmt.bold = true;
style_fmt.italic = true;
style_fmt.size = 18;
style_fmt.align = "center";

ecouteur.onLoadStart = function(cible_mc)
{
  largeur = 100; // largeur du champ de texte
  hauteur = 22; // hauteur
  _root.createTextField("chargement_txt",110,(Stage.width-largeur)/2,
(Stage.height-hauteur)/2, largeur, hauteur);
  chargement_txt.border = true;
  chargement_txt.borderColor = 0x000000;
  chargement_txt.textColor = 0x000000;
}

ecouteur.onLoadProgress = function(cible_mc, charge, total) {
  _root.chargement_txt.text = Math.floor((charge/total) * 100) + "%";
  _root.chargement_txt.setTextFormat(style_fmt);
}

ecouteur.onLoadComplete = function(cible_mc) {
    _root.chargement_txt.removeTextField();
}

loader_mcl.addListener(ecouteur);
loader_mcl.loadClip("fichier.swf", "_root.conteneur_mc");
stop();

Preloader à l’ancienne au cas où…

Décidément, Flash est plein de mystères et si jamais le preloader ci-dessus ne marchait pas, voici le code à mettre dans l’animation à preloader, sur la première image du scénario.

stop();
largeurTexte = 100;
hauteurTexte = 22;
this.createTextField("chargement_txt",getNextHighestDepth(),
(Stage.width-largeurTexte)/2, (Stage.height-hauteurTexte)/2,
 largeurTexte, hauteurTexte);
chargement_txt.border = true;
chargement_txt.borderColor = 0x000000;
chargement_txt.textColor = 0x000000;	

var appel:Number = setInterval(preloadSite, 50);

function preloadSite():Void {
  var charge:Number = _root.getBytesLoaded();
  var total:Number = _root.getBytesTotal();
  var pourcentage:Number = Math.round(charge/total*100);
  _root.chargement_txt.text = pourcentage + "%";

  if (charge >= total) {
    clearInterval(appel);
    _root.chargement_txt.removeTextField();
    gotoAndPlay(2);
  }
}