Zips del Conocimiento - Barra de progreso de carga (Flash)

Muchas veces realizamos una presentación, o más aún, un sitio completo en flash y a medida que vamos agregando al mismo imágenes, videos, sonido, etc. El archivo .swf que generamos va creciendo en tamaño y esto hace necesario la utilización de alguna forma de mostrar el progreso de carga de la película en el explorador del visitante ya que si el mismo no ve durante algún tiempo indicios de que la película ha terminado de “bajar” o se encuentra “bajando”, lo más probable será que este abandona nuestro sitio ante la presunción de malfuncionamiento del mismo. Para llevarlo a cabo generamos un nuevo documento en Flash y agregamos tres Layers o Capas. Una la nombraremos “Actions”, otra “Labels” y por ultimo otra “Contenido”. Cabe destacar que esta última pueden ser varias y no una sola, pues allí agregaremos el contenido de nuestra película.

Luego en la capa Labels crearemos un Keyframe (Insertar / Fotograma Clave) en el frame Nº 2 y le agregaremos el nombre “load” en el campo fotograma de la barra de propiedades y luego haremos lo mismo en el frame Nº 15 y lo llamaremos “inicio”. El número de frame aquí es irrelevante, lo importante aquí es que a partir de este frame empezamos a colocar el contenido de nuestra película.

Ahora crearemos en la Capa “Contenido” dos Keyframe, uno en el Nº 2 y otro en el Nº 15 o a partir del número en que hayamos decidido poner la etiqueta “inicio”.

Crearemos un nuevo símbolo (Insertar / Nuevo símbolo...), lo llamaremos “Barra Load” y seleccionaremos Comportamiento tipo Gráfico. Dibujaremos un rectángulo de 100 x 5 pixeles del color que prefieran (seleccionar un color que contraste con el fondo) y eliminaremos el contorno. Lo ubicaremos de la siguiente forma por medio del panel de propiedades X=50 e Y=2,5 Hecho esto volvemos a la escena principal.

Nuevamente crearemos un nuevo símbolo (Insertar / Nuevo símbolo...), lo llamaremos “Load Movie” y seleccionaremos Comportamiento tipo Clip de Película. Dentro de este símbolo crearemos dos Capas la superior la llamaremos “Mascara” y la inferior “Barra Load”.

En la capa “Mascara” dibujaremos un rectángulo de cualquier color y sin contorno de 100 x 3 pixeles y lo ubicaremos así: X=150 e Y= -2,5. Luego en la capa “Barra Load” arrastraremos de la Biblioteca (F11) el gráfico “Barra Load” y lo ubicaremos en X=0 e Y=-5 además selecionaremos la opcion “Clip de Película” del menú de la barra de propiedades y la nombraremos “BarraLoad” en el campo de nombre de Instancia en la barra de propiedades. Hecho esto seleccionaremos la capa “Mascara” con el botón derecho del mouse y seleccionaremos “Máscara” del menú contextual. Con esto desapareceran de la pantalla las dos figuras. Volvemos a la escena principal.

Ahora en la Capa “Contenido” y a partir del Keyframe Nº 2 arrastraremos el símbolo “Load Movie” desde la biblioteca y lo ubicaremos aproximadamente en el centro de la escena. Nuevamente seleccionaremos la opción “Clip de Película” del menú de la barra de propiedades y la nombraremos “visorcarga” en el campo de nombre de Instancia en la barra de propiedades.

Puede agregar algún texto como “Cargando” en esta capa.

Nuevamente en la capa “Contenido” pero a partir del Keyframe Nº 15 ahora, pondremos el contenido de nuestra película.

Por último crearemos en la capa “Actions” un Keyframe en el frame Nº 2 y otro en el Nº 4 y pondremos las siguientes acciones respectivamente:

En el Keyframe Nº 2

Código:

byteloaded = _root.getBytesLoaded();
bytetotal = _root.getBytesTotal();
loaded = int(byteloaded/bytetotal*100);
_root.visorcarga.BarraLoad._x = loaded;

y en el Keyframe Nº 4

Código:

if (byteloaded>=bytetotal) {
gotoAndPlay ("inicio");
} else {
gotoAndPlay ("load");
}

Básicamente lo que sucede en el Keyframe Nº 2 es que Flash toma el peso total de la película y el cargado hasta el momento, con ello se saca el porcentaje de película que se ha cargado hasta el momento y por último mueve la barra que se encuentra debajo de la mascara en el Clip de Película “Load Movie” hacia la derecha el numero de pixeles correspondiente al porcentaje cargado. Luego la película sigue corriendo y al llegar al Keyframe Nº 4 compara si el número de bytes cargados hasta el momento es menor al total de la película entonces vuelve al Keyframe 2 sino va al Keyframe 15 y comienza nuestra presentación.

Fuente: seminarios.dattatec.com