Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

loadMovie et MovieClipLoader

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

Article issu du forum, écrit par guepard le 2 sept 2006
:!: Merci de laisser là-bas toute question ou commentaire.


Les problèmes avec loadMovie (ou les movieClipLoader) étant récurrents sur ce forum, voici un post expliquant en détail (avec des exemples) l’utilisation de ces 2 méthodes permettant de charger des images ou des swf externes.

Sachez pour commencer qu’il est conseillé d’utiliser des movieClipLoader si vous utiliser flash 7 ou plus récent.

Vous trouverez aussi, en fin de post, une liste de liens vers des posts traitant de ces problèmes avec les solutions apportées.

Commençons par un peu de théorie (sisi) :

Les 2 méthodes permettent donc de charger une image ou un swf dans un clip de votre animation. En général, on loade dans un clip vide (créé avec createEmptyMovieClip()). Dans le cas d’un swf , il faut savoir que (quand le chargement est terminé) le clip est remplacé par la racine du swf chargé et qu’on peut donc accéder à tous les éléments de l’animation chargée en passant par ce clip.

Quand on fait appel à loadMovie (ou loadClip pour les movieClipLoader), flash va aller chercher l’image ou le swf et s’il le trouve il va commencer à le charger dans l’animation. Le problème (source d’erreur dans la majorité des cas) vient du fait que le chargement n’est pas instantané mais qu’il s’effectue de manière asynchrone.

Le mot est lâché, qu’est-ce que c’est que cette bête-là ?!

C’est tout simple en fait : ça veut dire que flash n’arrête pas l’exécution du code pour attendre que le chargement se termine (le chargement continue en arrière-plan si vous voulez). Donc, si après votre loadMovie (ou loadClip), vous voulez par exemple redimensionner votre image, elle n’est pas encore chargée et le code ne fonctionnera pas.

Pour résoudre cela, il faut attendre que le chargement soit terminé. Comment ? La méthode est différente pour loadMovie et les movieClipLoader. Commençons par celle pour loadMovie avec un exemple complet :

loadMovie

Version 8 et +

//on crée le clip vide dans lequel on va loader notre image (on le nomme container et on lui donne la première profondeur libre)
var conteneur:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
 
//on loade notre image (ou notre swf) dans le clip vide
conteneur.loadMovie("image.jpg");
 
//à chaque fps, un événement enterFrame est déclenché par flash, on définit un écouteur sur cet événement : à chaque fps, le code entre { } va être exécuté (ce qui va nous permettre de tester à chaque passage si le chargement est fini ou pas).
this.onEnterFrame = function():Void 
{
    //on définit une variable charge dans laquelle on met le nombre de bytes qui ont déjà été chargés par le loadMovie (dans le clip conteneur)
    var total:Number = conteneur.getBytesTotal();
 
    //on définit une variable total dans laquelle on stocke le nombre de bytes total de notre image (ou swf)
    var charge:Number = conteneur.getBytesLoaded();
 
    //on calcule le pourcentage chargé (arrondi avec le Math.round) et on le stocke dans la variable pourcent
    var pourcent:Number = Math.round(charge/total*100);
 
    //on teste si le pourcentage = 100 pour savoir si le chargement est terminé
    if (pourcent == 100) {
        //si oui, le chargement est fini, on supprime lécouteur pour ne plus exécuter tout ça
        delete this.onEnterFrame;
 
        //ici on est sûr que notre image (ou swf) est bien chargée, on peut la redimensionner ou accéder aux éléments de notre swf
        conteneur._x = 100; //je place mon image (ou swf) à 100pixels du bord gauche.
    }else{
        //ici le chargement nest pas terminé, on peut par exemple faire progresser une progressbar (en fonction de la valeur de pourcent pour montrer lavancement du chargement.
    }
}

Version 7 et -

this.createEmptyMovieClip("container", this.getNextHighestDepth());
 
this.container.loadMovie("image.jpg");
 
this.onEnterFrame = function() {
 
    total = this.container.getBytesTotal();
    charge = this.container.getBytesLoaded();
    pourcent = Math.round(charge/total*100);
 
    if (pourcent == 100) {
        delete this.onEnterFrame;
    }
}



MovieClipLoader

Voici maintenant comment procéder avec un movieClipLoader :

Version 8 et +

//Idem, on commence par créer le clip vide
var conteneur:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
 
//on définit un écouteur pour écouter ce que le movieClipLoader dira (notamment, l'avancement du chargement)
var mclListener:Object = new Object();
 
//quand le chargement est fini, le movieClipLoader déclenche un événement loadInit qu'on va écouter et quand il surviendra, le code entre { } sera exécuté. 
//le movieClipLoader renvoie aussi le clip dans lequel il fait le chargement (et on le récupère dans target_mc)
mclListener.onLoadInit = function(target_mc:MovieClip):Void 
{
    //ici on est sûr que notre image (ou swf) est bien chargée, on peut la redimensionner ou accéder aux éléments de notre swf
    conteneur._x = 100; //je place mon image (ou swf) à 100pixels du bord gauche.
}
 
//le movieClipLoader envoie aussi un événement loadProgress qui permet de savoir où en notre chargement
mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void 
{
    //on va passer ici tout au long du chargement
    //on peut aussi faire avancer une progressbar en fonction des paramètres reçus (bytesLoaded et bytesTotal)    
}
 
//on définit notre movieClipLoader
var mcl:MovieClipLoader = new MovieClipLoader();
 
//on lui attache notre écouteur pour qu'il puisse entendre ce que le mcl émét
mcl.addListener(mclListener);
 
//on lance le chargement de notre image (ou de notre swf).
mcl.loadClip("image.jpg", conteneur);

Version 7

this.createEmptyMovieClip("container", this.getNextHighestDepth());
 
var mclListener = new Object();
 
mclListener.onLoadInit = function(target_mc) 
{
    target_mc._x = 100; //je place mon image (ou swf) à 100pixels du bord gauche.
}
 
mclListener.onLoadProgress = function(target, bytesLoaded, bytesTotal) 
{
 
}
 
var mcl = new MovieClipLoader();
 
mcl.addListener(mclListener);
 
mcl.loadClip("image.jpg", this.container);

Liens