Utilisation du composant ProgressBar

Le composant ProgressBar affiche la progression du contenu en cours de chargement, ce qui est rassurant pour l’utilisateur, car un contenu volumineux peut retarder l’exécution de l’application. Le composant ProgressBar permet d’afficher l’avancement du chargement des images et des parties d’une application. Le processus de chargement peut être déterminé ou indéterminé. Une barre de progression determinate est une représentation linéaire de la progression d’une tâche dans le temps. Elle est utilisée lorsque la quantité de contenu à charger est connue. Une barre de progression indeterminate est utilisée lorsque la quantité de contenu à charger est inconnue. Vous pouvez également ajouter un composant Label afin d’afficher la progression du chargement sous la forme d’un pourcentage.

Le composant ProgressBar utilise la mise à l’échelle à 9 découpes et possède une enveloppe de barre, une enveloppe de rail et une enveloppe indéterminée.

Interaction de l’utilisateur avec le composant ProgressBar

Le composant ProgressBar peut s’utiliser de trois façons. Les modes les plus couramment utilisés sont event et polled. Ces modes définissent un processus de chargement qui émet des événements progress et complete (modes event et polled) ou qui exposent des propriétés bytesLoaded et bytesTotal (mode polled). Vous pouvez également utiliser le composant ProgressBar en mode manuel en définissant manuellement les propriétés maximum , minimum et value , ainsi que les appels à la méthode ProgressBar.setProgress() . Vous pouvez configurer la propriété indéterminée pour indiquer si le composant ProgressBar contient un remplissage hachuré et une source de taille inconnue ( true ) ou un remplissage plein et une source de taille connue ( false ).

Spécifiez le mode du composant ProgressBar en définissant sa propriété mode , via le paramètre mode dans l’Inspecteur des propriétés ou l’Inspecteur des composants, ou via ActionScript.

Si vous utilisez le composant ProgressBar pour afficher l’état du traitement, comme le filtrage de 100 000 éléments, et s’il se trouve dans une boucle d’image simple, aucune mise à jour de ProgressBar ne sera visible, car rien ne sera redessiné à l’écran.

Paramètres du composant ProgressBar

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres suivants pour chaque occurrence du composant ProgressBar : direction , mode et source . A chacun de ces paramètres correspond une propriété ActionScript du même nom.

Vous pouvez contrôler ces options et d’autres options du composant ProgressBar à l’aide des propriétés, méthodes et événements d’ActionScript. Pour plus d’informations, voir la classe ProgressBar dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application à l’aide du composant ProgressBar

La procédure suivante explique comment ajouter un composant ProgressBar à une application lors de la programmation. Dans cet exemple, le composant ProgressBar utilise le mode event. En mode event, le contenu en cours de chargement émet des événements progress et complete que le composant ProgressBar envoie pour indiquer l’avancement de l’opération. Lorsque l’événement progress se produit, l’exemple met à jour une étiquette afin d’afficher le pourcentage du contenu qui a été chargé. Lorsque l’événement complete se produit, l’exemple affiche « Loading complete » et la valeur de la propriété bytesTotal , qui est la taille du fichier.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant ProgressBar du panneau Composants jusqu’à la scène.

    • Dans l’Inspecteur des propriétés, entrez le nom d’occurrence aPb .

    • Dans la section Paramètres, tapez 200 pour la valeur X.

    • Tapez 260 pour la valeur Y.

    • Sélectionnez event comme paramètre de mode .

  3. Faites glisser le composant Button du panneau Composants jusqu’à la scène.

    • Dans l’Inspecteur des propriétés, entrez le nom d’occurrence loadButton .

    • Tapez 220 pour la valeur du paramètre X.

    • Tapez 290 pour la valeur du paramètre Y.

    • Entrez Load Sound pour le paramètre label .

  4. Faites glisser le composant Label sur la scène et donnez-lui le nom d’occurrence progLabel .

    • Tapez 150 pour la valeur W.

    • Tapez 200 pour la valeur du paramètre X.

    • Tapez 230 pour la valeur du paramètre Y.

    • Dans la section Paramètres, effacez la valeur du paramètre text .

  5. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant, qui permet de charger un fichier audio .mp3 : 

    import fl.controls.ProgressBar; 
import flash.events.ProgressEvent; 
import flash.events.IOErrorEvent; 
 
var aSound:Sound = new Sound(); 
aPb.source = aSound; 
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3"; 
var request:URLRequest = new URLRequest(url); 
 
aPb.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
aPb.addEventListener(Event.COMPLETE, completeHandler); 
aSound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); 
loadButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function progressHandler(event:ProgressEvent):void { 
        progLabel.text = ("Sound loading ... " + aPb.percentComplete); 
} 
 
function completeHandler(event:Event):void { 
    trace("Loading complete"); 
    trace("Size of file: " + aSound.bytesTotal); 
    aSound.close(); 
    loadButton.enabled = false; 
} 
 
function clickHandler(event:MouseEvent) {         
    aSound.load(request); 
} 
 
function ioErrorHandler(event:IOErrorEvent):void { 
    trace("Load failed due to: " + event.text); 
}

  6. Choisissez Contrôle > Tester l’animation.

Création d’une application à l’aide du composant ProgressBar en mode polled

L’exemple suivant définit le composant ProgressBar en mode polled. En mode polled, l’avancement est déterminé en écoutant les événements progress dans le contenu en cours de chargement et en employant ses propriétés bytesLoaded et bytesTotal pour calculer l’état d’avancement. Cet exemple charge un objet Sound, écoute ses événements progress et calcule le pourcentage chargé au moyen de ses propriétés bytesLoaded et bytesTotal . Le pourcentage chargé est affiché dans une étiquette et dans le panneau Sortie.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant ProgressBar du panneau Composants vers la scène et entrez les valeurs suivantes dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence aPb .

    • Tapez 185 pour la valeur X.

    • Tapez 225 pour la valeur Y.

  3. Faites glisser le composant Label sur la scène et entrez les valeurs suivantes dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence progLabel .

    • Tapez 180 pour la valeur X.

    • Tapez 180 pour la valeur Y.

    • Dans la section Paramètres, effacez la valeur du paramètre text.

  4. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant, qui crée un objet Sound ( aSound ) et appelle la méthode loadSound() pour charger un son dans l’objet Sound : 

    import fl.controls.ProgressBarMode; 
import flash.events.ProgressEvent; 
import flash.media.Sound; 
 
var aSound:Sound = new Sound(); 
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3"; 
var request:URLRequest = new URLRequest(url); 
 
aPb.mode = ProgressBarMode.POLLED; 
aPb.source = aSound; 
aSound.addEventListener(ProgressEvent.PROGRESS, loadListener); 
 
aSound.load(request); 
 
function loadListener(event:ProgressEvent) { 
    var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100; 
    progLabel.text = "Percent loaded: " + percentLoaded + "%"; 
    trace("Percent loaded: " + percentLoaded + "%"); 
}

  5. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

Création d’une application à l’aide du composant ProgressBar en mode manuel

L’exemple suivant définit le composant ProgressBar en mode manuel. En mode manuel, vous devez définir l’avancement manuellement en appelant la méthode setProgress() et en lui fournissant les valeurs maximale et minimale, de manière à déterminer l’avancement de l’opération. Vous ne définissez pas la propriété source en mode manuel. Cet exemple emploie un composant NumericStepper, avec une valeur maximale de 250, pour faire augmenter le composant ProgressBar. Lorsque la valeur dans NumericStepper change et déclenche un événement CHANGE , le gestionnaire d’événement ( nsChangeHander ) appelle la méthode setProgress() afin de faire augmenter ProgressBar. Il affiche également le pourcentage d’avancement, sur la base de la valeur maximale.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant ProgressBar du panneau Composants vers la scène et spécifiez les valeurs suivantes pour celui-ci dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence aPb .

    • Tapez 180 pour la valeur X.

    • Tapez 175 pour la valeur Y.

  3. Faites glisser un composant NumericStepper sur la scène et entrez les valeurs suivantes dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence aNs .

    • Tapez 220 pour la valeur X.

    • Tapez 215 pour la valeur Y.

    • Dans la section Paramètres, entrez 250 pour la valeur maximale, 0 pour la valeur minimale, 1 pour le paramètre stepSize et 0 pour le paramètre value.

  4. Faites glisser un composant Label sur la scène et entrez les valeurs suivantes dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence progLabel .

    • Tapez 150 pour la valeur W.

    • Tapez 180 pour la valeur X.

    • Tapez 120 pour la valeur Y.

    • Dans l’onglet Paramètres, effacez la valeur Label pour le paramètre text.

  5. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code suivant : 

    import fl.controls.ProgressBarDirection; 
import fl.controls.ProgressBarMode; 
import flash.events.Event; 
 
aPb.direction = ProgressBarDirection.RIGHT; 
aPb.mode = ProgressBarMode.MANUAL; 
aPb.minimum = aNs.minimum; 
aPb.maximum = aNs.maximum; 
aPb.indeterminate = false; 
 
aNs.addEventListener(Event.CHANGE, nsChangeHandler); 
 
function nsChangeHandler(event:Event):void { 
    aPb.value = aNs.value; 
    aPb.setProgress(aPb.value, aPb.maximum); 
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%"; 
}

  6. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

  7. Cliquez sur la flèche vers le haut sur le composant NumericStepper pour atteindre le composant ProgressBar.

Création d’un composant ProgressBar à l’aide d’ActionScript

Cet exemple crée un composant ProgressBar à l’aide d’ActionScript. Il duplique en outre la fonctionnalité de l’exemple précédent, qui crée un composant ProgressBar en mode manuel.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant ProgressBar vers le panneau Bibliothèque.

  3. Faites glisser le composant NumericStepper vers le panneau Bibliothèque.

  4. Faites glisser le composant Label vers le panneau Bibliothèque.

  5. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code suivant : 

    import fl.controls.ProgressBar; 
import fl.controls.NumericStepper; 
import fl.controls.Label; 
import fl.controls.ProgressBarDirection; 
import fl.controls.ProgressBarMode; 
import flash.events.Event; 
 
var aPb:ProgressBar = new ProgressBar(); 
var aNs:NumericStepper = new NumericStepper(); 
var progLabel:Label = new Label(); 
 
addChild(aPb); 
addChild(aNs); 
addChild(progLabel); 
 
aPb.move(180,175); 
aPb.direction = ProgressBarDirection.RIGHT; 
aPb.mode = ProgressBarMode.MANUAL; 
 
progLabel.setSize(150, 22); 
progLabel.move(180, 150); 
progLabel.text = ""; 
 
aNs.move(220, 215); 
aNs.maximum = 250; 
aNs.minimum = 0; 
aNs.stepSize = 1; 
aNs.value = 0; 
 
aNs.addEventListener(Event.CHANGE, nsChangeHandler); 
 
function nsChangeHandler(event:Event):void { 
aPb.setProgress(aNs.value, aNs.maximum); 
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%"; 
}

  6. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

  7. Cliquez sur la flèche vers le haut sur le composant NumericStepper pour atteindre le composant ProgressBar.