Cómo crear un Cargador o Preload en Flash

13 de octubre de 2011
Valoración del artículo:
En este artículo veremos cómo crear desde cero un Cargador o Preload para nuestras películas Flash.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

El primer paso una vez abierto nuestro programa Flash será dar los valores de nuestro archivo. En nuestro caso serán de 550 px de ancho y 400 px de alto.

Posteriormente, vamos a insertar un clip de película. Para ello, pinchamos en Menú/Insertar/Nuevo Símbolo y en la ventana emergente que aparece seleccionamos la opción clip de película y lo nombramos como "barra_mc" y aceptamos.

Estando situados en el frame 1, pinchamos en Menú/Archivo/Importar/Importar a escenario si queremos utilizar una imagen que ya tengamos creada como preload o precarga. También podemos crear una nosotros en Flash como un rectángulo.

En la línea del tiempo, nos situamos en el frame 100 y pinchamos F6 para copiar los fotogramas y que nuestra precarga tenga una duración de 100 frames. Esto nos permitirá que el porcentaje que añadiremos más adelante se ajuste con los frames, es decir, cuando haya cargado un 35% nos encontraremos en el fotograma 35, cuando nos encontremos en el fotograma 70, llevará un 70% de la carga.

El siguiente paso será crear un cuadrado que convertiremos en máscara. Para ello, insertamos una nueva capa pinchando sobre el círculo marcado en color rojo y sobre el fotograma 1 crearemos el rectángulo de un tamaño aproximado que cubra la imagen creada o importada en la capa 1.

En el fotograma 1 la ubicamos a la izquierda de la imagen de precarga. Posteriormente, nos situamos sobre el frame 100 y pinchamos en F6 para copiar la imagen y la moveremos hasta que cubra la precarga.

Para hacer que se mueva desde la posición del frame 1 hasta la del frame 100, sobre la línea del tiempo de la capa 2 pinchamos al botón derecho del ratón y seleccionamos Crear interpolación de movimiento; otra opción para conseguir esto es Menú/Insertar/Línea del tiempo/Crear interpolación de movimiento. El último paso será pinchando con el botón derecho del ratón sobre el nombre de la capa en la que hemos realizado el rectángulo (capa 2) seleccionar la opción Máscara.

Al seleccionar máscara debemos notar cambios en nuestro archivo. El primero de ellos el que está marcado con el círculo rojo, veremos que han cambiado los iconos de ambas capas. Además, veremos en el escenario como la imagen de precarga va apareciendo a medida que nos movemos sobre la línea del tiempo.

El siguiente paso será añadir el texto que queramos que aparezca cuando se está cargando nuestro archivo. Para ello, seleccionamos la herramienta texto y sobre el escenario creamos un cuadro de texto en el escrimos "100 %". Para que el porcentaje vaya aumentando a medida que se carga el archivo debemos seleccionar Texto dinámico en la parte inferior, en propiedades ya que por defecto aparece Texto estático y en el nombre de la instancia escribimos "porcentaje_txt".

Para añadir a nuestro archivo la barra de precarga creada, pinchamos Escena 1 para situarnos y arrastramos de la biblioteca la barra_mc. Veremos que ya se encuentra en la escena. Además, tenemos que añadir un nombre de instancia, en este caso será "barra_mc".

Ahora creamos una nueva capa a la que llamamos ActionScript, en ella abrimos acciones y copiamos los siguientes comandos:

/* Declaro la función de precarga "cargando", esta función se ejecutará
todo el tiempo hasta que haya cargado totalmente la película */
function cargando() {
// Declaración de variables
var total, cargados, porcentaje;
// A la variable "total" se le asigna el tamaño de la pelicula en bytes
total = _root.getBytesTotal();
// A la variable "cargados" se le asignan el total de bytes hasta el
//momento descargados de la web
cargados = _root.getBytesLoaded();
//Por medio de una regla de tres obtiene el porcentaje cargado y redondea el valor con la función
//"Math.floor"
porcentaje = Math.floor((cargados*100)/total);
//Asigna al campo de texto porcentaje_txt el porcentaje cargado
porcentaje_txt.text = porcentaje + " %";
//Mueve la barra de carga al frame correspondiente al porcentaje
barra_mc.gotoAndStop(porcentaje);
//Si la cantidad de bytes cargados es igual a la cantidad total de bytes
if (cargados == total) {
//Hacer que se deje de ejecutar esta función
clearInterval(hiloPrecarga);
//Iniciar la película
play();
}
}
// setInterval nos servirá para que la función "cargando" se ejecute cada 1 milisegundo
// Así, nuestra función revisará constantemente la cantidad de bytes descargados
// y solo iniciará la película hasta que la descarga termine
// la variable "hiloPrecarga" nos servirá para saber que está corriendo nuestra función
// y frenar su ejecución cada milisegundo por medio de "clearInterval"
hiloPrecarga = setInterval(cargando, 1);

//Evita que inicie la película
stop();

IMPORTANTE: Copiad todos los comandos porque aunque se incluyan las explicaciones sobre la función que desarrollan, no influye en el efecto final.

Ahora vamos a añadir una nueva escena en la que insertaremos el archivo que queremos que se cargue tras la precarga. Para ello, pinchamos en Menú/Insertar/Escena o en la ventana de Escena pinchamos sobre el icono + e insertamos otro clip de película clickando sobre Menú/Insertar/Nuevo Símbolo y seleccionamos clip de película y le damos el nombre que nos guste y aceptamos.

Por último, insertamos el archivo que queramos. En nuestro caso, hemos seleccionado algunas fotografías y las hemos insertado interpolación de movimiento para que desaparezcan y vayan apareciendo las fotografías posteriores.

Aquí os dejamos el ejemplo que nosotros hemos realizado. Esperamos que os guste.

Comentarios

Los comentarios de los visitantes son para ampliar la
información del artículo. Cualquiera puede participar.

Añadir un comentario al artículo Publicar un comentario del artículo

Mostrando 2 comentarios revisados

 hnosllontop.jimdo.com
23/4/12 

Comentario de jorge:

bien chvr el ejm m gustaria q m lo nviaran a mi correo pa revisarlo maz a fondo..sobre todo el codigo..graxiaz x publicarlo a la web...


 Muy complicado
18/7/12 

Comentario de G:

Muy complicado


Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 2 comentarios sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...