Uso del componente ProgressBar

El componente ProgressBar muestra el progreso de carga de contenido, que resulta tranquilizador para el usuario cuando el contenido es de gran tamaño y puede retrasar la ejecución de la aplicación. El componente ProgressBar es útil para mostrar el progreso de las imágenes y partes que se cargan de una aplicación. El proceso de carga puede ser determinado o indeterminado. Una barra de progreso determinada es la representación lineal del progreso de una tarea en el tiempo y se utiliza cuando la cantidad de contenido que va a cargarse es conocida. Una barra de progreso indeterminada se utiliza cuando la cantidad de contenido que va a cargarse es desconocida. Asimismo, se puede añadir un componente Label para mostrar el progreso de carga como porcentaje.

El componente ProgressBar utiliza la escala de 9 divisiones y tiene un aspecto de barra, un aspecto de seguimiento y un aspecto indeterminado.

Interacción del usuario con el componente ProgressBar

Existen tres modos en los que se puede utilizar el componente ProgressBar. Los valores más frecuentes de este parámetro son event y polled. Estos modos especifican un proceso de carga que emite los eventos progress y complete (modos event y polled), o bien, expone las propiedades bytesLoaded y bytesTotal (modo polled). También se puede utilizar el componente ProgressBar en modo manual estableciendo las propiedades maximum , minimum y value junto con las llamadas al método ProgressBar.setProgress() . Se puede establecer la propiedad indeterminada para indicar si ProgressBar tiene un relleno discontinuo y un origen de tamaño desconocido ( true ) o un relleno continuo y un origen de tamaño conocido ( false ).

El modo de ProgressBar se define estableciendo su propiedad mode , mediante el parámetro mode del inspector de propiedades o del inspector de componentes, o bien, mediante ActionScript.

Si se utiliza ProgressBar para mostrar el estado de procesamiento, como el análisis de 100.000 elementos, y se encuentra en un solo bucle de fotograma, no se podrán ver actualizaciones para ProgressBar porque la pantalla no se actualiza.

Parámetros del componente ProgressBar

A continuación se indican los parámetros de edición que se pueden definir para cada instancia del componente ProgressBar en el inspector de propiedades o en el inspector de componentes: direction , mode y source . Cada uno de ellos tiene una propiedad de ActionScript del mismo nombre.

Puede escribir código ActionScript para controlar éstas y otras opciones del componente ProgressBar utilizando sus propiedades, métodos y eventos. Para obtener más información, consulte la clase ProgressBar en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación con el componente ProgressBar

En el procedimiento siguiente se muestra cómo añadir un componente ProgressBar a una aplicación durante la edición. En este ejemplo, ProgressBar utiliza el modo event. En el modo event, el contenido de carga emite los eventos progress y complete que ProgressBar distribuye para indicar el progreso. Cuando se produce el evento progress , el ejemplo actualiza una etiqueta para mostrar el porcentaje del contenido que se ha cargado. Cuando se produce el evento complete , el ejemplo muestra "Carga completa" y el valor de la propiedad bytesTotal , que es el tamaño del archivo.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre el componente ProgressBar del panel Componentes al escenario.

    • En el inspector de propiedades, introduzca el nombre de instancia aPb .

    • En la sección Parámetros, introduzca 200 en el valor X.

    • Introduzca 260 en el valor Y.

    • Seleccione event para el parámetro mode .

  3. Arrastre el componente Button desde el panel Componentes al escenario.

    • En el inspector de propiedades, introduzca loadButton como el nombre de instancia.

    • Introduzca 220 en el parámetro X.

    • Introduzca 290 en el parámetro Y.

    • Introduzca Load Sound para el parámetro label .

  4. Arrastre un componente Label al escenario y asígnele el nombre de instancia progLabel .

    • Introduzca 150 en el valor de anchura.

    • Introduzca 200 en el parámetro X.

    • Introduzca 230 en el parámetro Y.

    • En la sección Parámetros, borre el valor del parámetro text .

  5. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente, que carga un archivo de 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. Seleccione Control > Probar película.

Creación de una aplicación con el componente ProgressBar en modo polled

En el ejemplo siguiente, se establece ProgressBar en el modo polled. En el modo polled, el progreso se determina detectando eventos progress en el contenido que se carga y utilizando sus propiedades bytesLoaded y bytesTotal para calcular el progreso. En este ejemplo se carga un objeto Sound, se detectan sus eventos progress y se calcula el porcentaje cargado mediante sus propiedades bytesLoaded y bytesTotal . Se muestra el porcentaje cargado tanto en una etiqueta como en el panel Salida.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre un componente ProgressBar del panel Componentes al escenario e introduzca los valores siguientes en el inspector de propiedades:

    • Introduzca aPb como nombre de instancia.

    • Introduzca 185 en el valor X.

    • Introduzca 225 en el valor Y.

  3. Arrastre el componente Label al escenario e introduzca los valores siguientes en el inspector de propiedades:

    • Introduzca progLabel como nombre de instancia.

    • Introduzca 180 en el valor X.

    • Introduzca 180 en el valor Y.

    • En la sección Parámetros, borre el valor del parámetro de texto.

  4. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente, que crea un objeto Sound ( aSound ) y llama a loadSound() para cargar un sonido en el objeto 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. Seleccione Control > Probar película para ejecutar la aplicación.

Creación de una aplicación con el componente ProgressBar en modo manual

En el ejemplo siguiente, se establece ProgressBar en el modo manual. En el modo manual, se debe establecer el progreso manualmente llamando al método setProgress() y llenándolo con los valores actuales y máximos a fin de determinar el alcance del progreso. Pero no se necesita definir la propiedad source en modo manual. El ejemplo utiliza un componente NumericStepper, con un valor máximo de 250, para incrementar ProgressBar. Cuando el valor de NumericStepper cambia y activa un evento CHANGE , el controlador de eventos ( nsChangeHander ) llama al método setProgress() para avanzar el componente ProgressBar. También muestra el porcentaje del progreso completado, según el valor máximo.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre el componente ProgressBar del panel Componentes al escenario y asígnele los valores siguientes en el inspector de propiedades:

    • Introduzca aPb como nombre de instancia.

    • Introduzca 180 en el valor X.

    • Introduzca 175 en el valor Y.

  3. Arrastre un componente NumericStepper al escenario e introduzca los valores siguientes en el inspector de propiedades:

    • Introduzca aNs como nombre de instancia.

    • Introduzca 220 en el valor X.

    • Introduzca 215 en el valor Y.

    • En la sección Parámetros, introduzca 250 para el parámetro máximo, 0 para el valor mínimo, 1 para el parámetro stepSize y 0 para el parámetro value .

  4. Arrastre un componente Label al escenario e introduzca los valores siguientes en el inspector de propiedades:

    • Introduzca progLabel como nombre de instancia.

    • Introduzca 150 en el valor de anchura.

    • Introduzca 180 en el valor X.

    • Introduzca 120 en el valor Y.

    • En la ficha Parámetros, borre el componente Label como valor del parámetro de texto.

  5. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente: 

    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. Seleccione Control > Probar película para ejecutar la aplicación.

  7. Haga clic en la flecha arriba de NumericStepper para avanzar ProgressBar.

Creación de un componente ProgressBar con ActionScript

En este ejemplo se crea un componente ProgressBar utilizando ActionScript. Al margen de ello, se duplica la funcionalidad del ejemplo anterior, que crea un componente ProgressBar en modo manual.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre el componente ProgressBar al panel Biblioteca.

  3. Arrastre el componente NumericStepper al panel Biblioteca.

  4. Arrastre el componente Label al panel Biblioteca.

  5. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente: 

    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. Seleccione Control > Probar película para ejecutar la aplicación.

  7. Haga clic en la flecha arriba de NumericStepper para avanzar ProgressBar.