Documentación de Flash CS3

Aprendizaje de ActionScript 2.0 en Adobe Flash > Utilización de imágenes, sonido y vídeo > Creación de animaciones progresivas para archivos multimedia > Creación de una barra de progreso para cargar archivos FLV con ActionScript

Creación de una barra de progreso para cargar archivos FLV con ActionScript

Puede crear una barra de progreso para mostrar el progreso de carga de un archivo FLV. Para obtener información sobre la carga de archivos FLV en un archivo SWF, consulte Precarga de archivos FLV. Para obtener otro tipo de información sobre los archivos FLV y Flash, consulte Utilización de vídeo FLV.

El ejemplo siguiente utiliza la API de dibujo para crear una barra de progreso. El ejemplo también utiliza las propiedades bytesLoaded y bytesTotal que muestran el progreso de carga de video1.flv en la instancia de objeto de vídeo denominada my_video. Asimismo se crea de forma dinámica un campo de texto llamado loaded_txt para ver información sobre el proceso de carga.

Para crear una barra de progreso que muestre el progreso de carga:

1. Cree un nuevo archivo FLA denominado flvProgress.fla.
2. En el panel Biblioteca (Ventana > Biblioteca), seleccione Nuevo Vídeo en el menú emergente
   Biblioteca.
3. En el cuadro de diálogo Propiedades de vídeo, asigne un nombre al símbolo de vídeo y seleccione Vídeo (controlado por ActionScript).
4. Haga clic en Aceptar para crear el objeto de vídeo.
5. Arrastre el objeto de vídeo desde el panel Biblioteca hasta el escenario para crear una instancia del mismo.
6. Con el objeto de vídeo seleccionado en el escenario, introduzca my_video en el cuadro de texto Nombre de instancia del inspector de propiedades (Ventana > Propiedades > Propiedades).
7. Con la instancia de vídeo aún seleccionada, introduzca 320 en el cuadro de texto de anchura y 213 en el cuadro de texto de altura.
8. Seleccione el fotograma 1 de la línea de tiempo y escriba el siguiente código en el panel Acciones:

   var connection_nc:NetConnection = new NetConnection();
   connection_nc.connect(null);
   var stream_ns:NetStream = new NetStream(connection_nc);
   my_video.attachVideo(stream_ns);
   stream_ns.play("http://www.helpexamples.com/flash/video/typing_short.flv");
   
   this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 160, 22);
   this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
   progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
   with (progressBar_mc.bar_mc) {
      beginFill(0xFF0000);
      moveTo(0, 0);
      lineTo(100, 0);
      lineTo(100, 10);
      lineTo(0, 10);
      lineTo(0, 0);
      endFill();
      _xscale = 0;
   }
   progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
   with (progressBar_mc.stroke_mc) {
      lineStyle(0, 0x000000);
      moveTo(0, 0);
      lineTo(100, 0);
      lineTo(100, 10);
      lineTo(0, 10);
      lineTo(0, 0);
   }
   
   var loaded_interval:Number = setInterval(checkBytesLoaded, 500, stream_ns);
   function checkBytesLoaded(my_ns:NetStream) {
      var pctLoaded:Number = Math.round(my_ns.bytesLoaded / my_ns.bytesTotal * 100);
      loaded_txt.text = Math.round(my_ns.bytesLoaded / 1000) + " of " + Math.round(my_ns.bytesTotal / 1000) + " KB loaded (" + pctLoaded + "%)";
      progressBar_mc.bar_mc._xscale = pctLoaded;
      if (pctLoaded>=100) {
         clearInterval(loaded_interval);
      }
   }
   

9. Seleccione Control > Probar película para probar el código.

   El vídeo se carga y una barra de animación y valores de texto que cambian comunican el progreso de carga. Si estos elementos se superponen con el vídeo, desplace el objeto de vídeo en el escenario. Puede personalizar el color de la barra de progreso mediante la modificación de beginFill y lineStyle en el fragmento de código anterior.

   NOTA

   Si la barra de progreso se carga de forma instantánea, el vídeo se ha almacenado en la caché del disco duro (al probar ya este ejemplo o al cargarlo mediante otro procedimiento). Si ocurre esto, cargue un archivo FLV en el servidor y cárguelo en su lugar.

Para ver un ejemplo de archivo de origen, tweenProgress.fla, que utiliza animación mediante scritps para crear una animación de barra de progreso, visite la página de ejemplos de Flash en www.adobe.com/go/learn_fl_samples_es. Descargue el archivo zip Samples y vaya a la carpeta ActionScript2.0/Tween ProgressBar para acceder al ejemplo.

Flash CS3

Enviarme un mensaje de correo electrónico cuando se añadan comentarios a esta página | Informe de comentarios

Página actual: http://livedocs.adobe.com/flash/9.0_es/main/00001045.html

Añadir comentario