Charger des images ou des swf en ActionScript 3 (AS3)

Le chargement d'images ou de swf en ActionScript 3 va se faire grâce à deux nouvelles classes : Loader et URLRequest. La classe MovieClipLoader, présente en ActionScript 2, n’existe plus.

La classe Loader permet le chargement d’une image (GIF, JPEG ou PNG) ou d’un fichier SWF. L’élément chargé est intégré en tant qu’enfant à l’objet Loader.

La classe Loader hérite de la classe DisplayObjectContainer, cependant il n’est pas possible d’ajouter plusieurs enfants dans un objet Loader.

La classe URLRequest va nous permettre de définir l'url absolue ou relative du fichier à charger.

Le conteneur de l’élément chargé va donc être créé via le constructeur de la classe Loader.

var conteneurImage:Loader = new Loader();// création du conteneur de l'image

L’url absolue ou relative sera défini dans un objet URLRequest.

// url de l'image à charger
var image:URLRequest = new URLRequest("images/madagascar.jpg");

Les événements liés au chargement ne sont pas diffusés par l’objet Loader lui-même mais par un objet LoaderInfo. Cet objet LoaderInfo est partagé entre l’objet Loader et l’élément chargé.

Il fournit des informations concernant la progression du chargement mais aussi une fois le chargement terminé, des informations sur l’élément chargé. Cet objet LoaderInfo est référencé par la propriété contentLoaderInfo de l’objet Loader.

La progression du chargement va pouvoir être gérer à travers l’événement ProgressEvent.PROGRESS. Cet événement est déclenché continuellement pendant le chargement.

Comme évoqué précédemment, ce n’est pas directement l’objet Loader qui va s’abonné à l’événement mais bien un objet LoaderInfo à travers la propriété contentLoaderInfo.

conteneurImage.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);//Abonnement à l'événement PROGRESS

La fonction onProgress sera appelée en réponse à l’événement. Un objet de type ProgressEvent lui sera passé en paramètre.

// Progression du chargement
function onProgress(evt:ProgressEvent):void
{
}

Cet objet ProgressEvent possède deux propriétés :

• bytesLoaded qui nous permet de connaître le nombre d’octets chargés
• bytesTotal qui nous permet de connaître le nombre d’octels total

Nous allons utiliser la classe ProgressBar pour définir visuellement la progression du chargement.

Cette classe permet la création d’une barre progression qui sera valorisé avec les propriétés bytesLoaded et bytesTotal.

Le rendu visuel de la barre de progression est défini par le composant ProgressBar. Le composant doit se trouver dans la bibliothèque de l'application (Fenêtre > Bibliothèque) lorsque le fichier SWF est compilé.

Pour ajouter un composant à la bibliothèque, faites-le glisser du panneau Composants (Fenêtre > Composants) vers le panneau Bibliothèque.

Afin de pouvoir utiliser cette classe, nous allons devoir l’importer au début de notre script. Nous importerons aussi la classe ProgressBarMode dont on va se servir par la suite.

 import fl.controls.ProgressBar;
import fl.controls.ProgressBarMode;

Nous allons ensuite créer un objet de type ProgressBar en utilisant le constructeur de la classe. Nous définirons la propriété mode sur manuel afin de pouvoir renseigner les valeurs dans l’événement PROGRESS.

La propriété mode prend pour valeur, des constantes de la classe ProgressBarMode.

var progressBar:ProgressBar = new ProgressBar();//barre de progression
progressBar.mode = ProgressBarMode.MANUAL;//Mode contrôle de la barre de progression

La barre de progression sera centrée dans la scène.

// La barre de progression est centrée
progressBar.x = (stage.width - progressBar.width) / 2;
progressBar.y = (stage.height - progressBar.height) / 2;
addChild(progressBar);//Affichage de la barre 

Pour afficher le pourcentage de progression, nous allons créer un objet de type TextField. Cet objet sera placé juste au dessous de la barre de progression.

//Champ de texte pour le pourcentage
var txtPourcent:TextField = new TextField();
txtPourcent.autoSize = TextFieldAutoSize.LEFT;
txtPourcent.x = progressBar.x;
txtPourcent.y = progressBar.y + 30;
addChild(txtPourcent);

Les valeurs de la barre de progression seront définies dans le gestionnaire d’événements onProgress, à travers la méthode setProgress de l’objet de type ProgressBar.

Cette méthode définit l'état de la barre pour qu'elle reflète l'avancée de la progression lorsque le mode MANUAL est utilisé.

Elle prend 2 paramètres :

• Le premier étant une valeur décrivant la progression qui s'est accomplie jusqu'à présent.
• Le deuxième étant la valeur de progression maximale de la barre de progression.

Nous utiliserons donc les propriétés bytesLoaded et bytesTotal en tant que paramètres de cette méthode.

// Progression du chargement
function onProgress(evt:ProgressEvent):void
{
    progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);
}

Le pourcentage de chargement peut-être récupéré avec la propriété percentComplete de l’objet progressBar.

// Progression du chargement
function onProgress(evt:ProgressEvent):void
{
    progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);//Valeurs de la barre
   txtPourcent.text = Math.round(progressBar.percentComplete) + "%";//affichage du pourcentage
}

La fin du chargement va pouvoir être gérer à travers l’événement Event.COMPLETE. Cet événement est déclenché à la fin du chargement lorsque les données sont disponibles.

Comme évoqué précédemment, ce n’est pas directement l’objet Loader qui va s’abonné à l’événement mais bien un objet LoaderInfo à travers la propriétécontentLoaderInfo.

conteneurImage.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);//Abonnement à l'événement COMPLETE

La fonction onComplete sera appelée en réponse à l’événement. Un objet de type Event lui sera passé en paramètre.

//Fin du chargement
function onComplete (evt:Event):void
{
}

Une fois le chargement terminé, nous allons supprimer de l’affichage la barre de progression et le champ de texte.

// Le chargement est terminé
function onComplete(evt:Event):void
{
     //Suppression des infos de progression
    removeChild(progressBar);
    removeChild(txtPourcent);
}

Il ne nous reste plus qu’à afficher les données chargées, en ajoutant notre objet conteneurImage à la liste d’affichage de la séquence.

// Le chargement est terminé
function onComplete(evt:Event):void
{
     //Suppression des infos de progression
    removeChild(progressBar);
    removeChild(txtPourcent);
    //affichage des données
    addChild(conteneurImage);
}

Le chargement sera lancé grâce à la méthode load() de l'objet loader. Cette méthode prend en paramètre l’objet URLRequest.

// chargement de l'image dans le conteneur
conteneurImage.load(image);

En testant le chargement de notre image (Contrôle > Tester l’animation), on remarque que l’on n’a pas le temps de visualiser la progression du chargement. En effet, notre test est réalisé localement donc le chargement est immédiat.

Nous allons activer la simulation du chargement pour visualiser correctement le chargement (Affichage > Simuler le chargement)

* Documentation officielle