Chargement d'objets graphiques externes

L'un des principaux intérêts de flash est qu'il permet de charger tout type de contenu image et multimédia externe : jpg, png, gif, flv ou même swf. Le chargement peut être dynamique et activé après une action de l'utilisateur.

Loader et URLRequest

• La classe Loader permet de charger des fichiers SWF ou des fichiers d’image (JPG, PNG ou GIF). L’objet d'affichage chargé est intégré en tant qu’enfant à l’objet Loader.
• La classe URLRequest capture les informations des requêtes http ou https, ces informations sont transmises aux méthodes load() de certaines classes, notamment de la classe Loader.

Une méthode simple consiste à créer un objet Loader puis à l'afficher directement sur le clip dans lequel on le charge, de cette manière :

var _request = new URLRequest('image.png');
var _loader = new Loader();

this.addChild(_loader);
_loader.load(_request);

Téléchargement du fichier de travail

Erreur fréquente

Une erreur fréquente consiste à manipuler directement l'objet Loader à la suite de la méthode load(), afin de le redimensionner par exemple : rien ne s'affichera. En réalité cela se produit car l'on cherche à redimensionner un objet qui n'est pas encore présent sur la scène, de cette manière :

var _request = new URLRequest('image.png');
var _loader = new Loader();

this.addChild(_loader);
_loader.load(_request);

// CE CODE NE FONCTIONNE PAS :
_loader.width=400;
_loader.height=500;

Ce code ne fonctionne pas car lorsque l'on cherche à manipuler un objet qui n'est pas encore sur la scène (il faut le temps de le charger). Pour palier à ce problème, on peut utiliser les événements.

Evénements et manipulation d'objets chargés dynamiquement

Pour palier au problème du précédent paragraphe, on peut attacher un événement à l'objet Loader qui déclenchera une fonction lorsque le chargement de image.png sera terminé.

Loader dispose d'un attribut intitulé contentLoaderInfo de type LoaderInfo qui fournit des informations relatives à un fichier SWF ou à un fichier d’image (JPEG, GIF ou PNG) chargé. Les objets LoaderInfo sont disponibles pour n’importe quel objet d'affichage. C'est sur cet attribut que nous allons placer l'écouteur sur l'événement Event.COMPLETE qui correspond au moment ou l'image sera chargée :

//création de la requête
var _request = new URLRequest('image.png');
//création de l'objet Loader
var _loader = new Loader();
//On attache l'événement au LoaderInfo, lorsque que l'image est chargée, on exécute la fonction loaded
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaded);
//On lance le chargementloader.load(_request);

//fonction loaded 
function loaded(e:Event)
{
    //ajout du loader contant l'image sur la scène
    this.addChild(_loader);
    //On redimensionne le loader
    _loader.width = 550;
    _loader.height = 400;
}

Barre de progression

Si l'on charge un contenu dont la taille est très importante, il est parfois recommandé d'afficher une barre de progression, vulgairement appelée preloader, pour cela, ajoutons un autre événement à la pile de notre LoaderInfo et un champ de texte indiquant le pourcentage de chargement.

Soit txt_pourcentage le nom d'occurrence d'un textfield :

var _request = new URLRequest('image.jpg');
var _loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaded);
//On attache l'événement pour la progression du téléchargement
_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progression);
_loader.load(_request);
function loaded(e:Event)
{
    this.addChild(_loader);
    _loader.width = 550;
    _loader.height = 400;
}
//Fonction qui affiche le pourcentage de chargement
function progression(e:Event)
{
    this.txt_pourcentage.text = (LoaderInfo(e.target).bytesLoaded/LoaderInfo(e.target).bytesTotal*100)+"%";
}

Téléchargement des fichiers de travail