Cómo crear un Preload.

Por Andrés Cuartero Alonso

e-mail:andres@andrescuartero.com


      1.- Explicación
      2.- ¿Cómo probar la película?
      3.- ¿En qué servidor puedo colocar la pelicula para probarla?
      4.- Valora la explicación
      5.- Comentarios realizados
      Siguiente Explicación : Utilización de PROTOTYPE en animaciones con ActionScript.

EXPLICACION

En primer lugar debemos explicar la "base" del PRELOAD. Se trata de realizar una barra que se vaya rellenando de izquierda a derecha según los Bytes cargados de la película.

Existen en actionScript unos términos que nos indican los Bytes totales que tiene la película y los que se han cargado de esta: getBytesTotal() y getBytesLoaded().

Lo que haremos será crear un Cip de pelicula en la biblioteca (que llamaremos avance) para colocarlo posteriormente en el fotograma 1 de la escena 1 de nuestra película. Este Movie estará formado por dos objetos de la biblioteca: un borde (de la barra de avance) en la capa 1 y un relleno (de la barra de avance) en la capa 2:

Insertaremos un fotograma clave en el Frame 50 de la capa 2 y posteriormente seleccionaremos el fotograma 1 de esta misma capa para crear una Interpolación de movimiento. La interpolación de movimiento la realizaremos pulsado con el botón derecho del mouse sobre el fotograma 1 de la capa 2 y seleccionando Crear Interpolación de movimiento:

El siguiente paso es seleccionar el relleno que se encuentra en la capa 1 y colocarle un ancho de 1 en el panel propiedades:

Ahora insertamos un fotograma en la posicicón 50 de la capa 1:

Llegado este punto, tenemos creado la barra de precarga. Ahora solo nos falta colocarla en la escena 1 y escribir el código que hará que avance.

Colocamos el Clip de película Avance (que está en la biblioteca) en el fotograma 1 de la capa 1 (escena 1); lo llamaremos Barra (en el panel de propiedades); después insertamos un Frame en la posición 2 de esa misma capa:

Insertamos una nueva capa (capa 2). Seleccionamos su fotograma 1 y escribimos el siguiente código en su Panel de acciones:

¿Qué hace este código?
1.- En la variable Carga_total se almacena el número total de bytes de la pelicula.
2.- En la variable Carga_parcial se recoge el número de bytes que se han cargado. Ten en cuenta que despues colocaremos en el fotograma 2 de la capa 2 un código que envie al fotograma 1 la cabeza de reproducción si no se ha cargado completamente la pelicula. Por lo tanto, Carga_parcial tomará cada vez un valor mientras que Carga_total siempre tendrá el mismo.
3.- El porcentaje de carga de la película se almacenará en la variabel porcentaje, que no es mas que la carga parcial entre la carga total y el resultado dividido entre 100 (por lo de porcentaje). Seguidamente le indicamos que redondee mediante Math.floor().
4.- Indicamos que ejecute únicamente (MovieClip.gotoAndStop) el fotograma porcentaje/2 del movie Barra. Dividimos el procentaje entre dos por que el Clip de pelicula Barra solo tiene 50 frames. Es decir, que cuando el porcentaje de carga de la película sea el 100% , Barra debe ejecutarse en el fotograma 50.

Ahora insertamos un fotograma clave vacio en la posición 2 de la capa 2 y escribimos el siguiente código:

¿Qué hace este código?
El código anterior envia la cabecera de reproducción al frame 1 si no se ha cargado totalmente la pelicula, es decir, si Carga_total es mayor que Carga_parcial.

Hasta aquí estaría ya creada la precarga.

¿Cómo probarla?

Para poder probar la precarga, importemos a la biblioteca una canción o archivo de sonido de aproximadamente 1Mb.

Insertemos un fotograma clave Vacio en el frame 3 de la capa 1. Seleccionemos ese fotograma y arrastremos a la zona de trabajo la musica o sonido.

Insertaremos también un fotograma clave vacio en el frame 3 de la capa 2 y le colocaremos el código Stop();

Exportamos la película como SWF. La subimos al servidor y posteriormente en el explorador de internet, escribimos la URL de la pelicula y la ejecutamos.

Si la ejecutamos en nuestro PC en vez de hacerlo en el servidor, es posible que la película se cargue tan rápido que no de tiempo a visualizar la precarga.

¿En qué servidor puedo colocar la pelicula para probarla?

En cualquier servidor.

Si no tienes, prueba a darte de alta en Geocities, utiliza los mismos datos de usuario que Yahoo!.

Valora la explicación

Valoracion:
Nick o email:
Comentario:
(200 Caract. Max)
 

Comentarios realizados:


Comentario 1- Por Luis, 25/11/2005 16:37:22
Valoración: Buena
buena explicación. Yo le colocaría tb el codigo fuente para poderlo descargar . :D
———
Comentario 2- Por Juan Martinez juan_m1@hotmail.com, 25/11/2005 16:50:29
Valoración: Buena
Si Luis, es buena pero le colocaría el codigo fuente yo tb. Además podría llevar un ejemplo SWF.
———
Comentario 3- Por andres, 25/11/2005 19:05:58
Valoración: Sin valoración
En siguientes secciones lo pondré.
———
Comentario 5- Por daniel.steckler@gmail.com, 28/11/2005 19:43:48
Valoración: Muy buena
Tal como te lo dije en el foro, ingrese, esta muy bueno, claro y explicito
———
Comentario 10- Por samy200384@hotmail.com, 15/03/2006 19:53:44
Valoración: Muy buena
Es muy buena la explicacion ya que apenas estoy aprendiendo FLASH y ademas me encantan todos estos temas.
———
Comentario 16- Por dustersito@hotmail.com, 03/05/2006 23:21:39
Valoración: Muy buena
esta bien explicado, aunque me gustaria que puesieras un .swf garcias
———
Comentario 19- Por gloriabecock@hotmail.com, 18/06/2006 0:40:08
Valoración: Muy buena
Es muy buena la explcacion, pero es laprimera vez que leo sobre el tema del prototype
———
Comentario 20- Por Pablo, 26/06/2006 15:43:31
Valoración: Muy buena
Gracias ,muy bueno
———
Comentario 21- Por astrosa@retena.com, 01/07/2006 11:47:40
Valoración: Regular
hay muchas palabras q no se q significan, tales como frame, swf,etc. tb no se de donde puedo sacar un fotograma. soy nuevo en esto, (ya veis)y q pasos tengo q seguir para colgarla en un servidor. grac
———
Comentario 22- Por Juan, 11/07/2006 16:05:18
Valoración: Sin valoración
ASTROSA, antes querer saber como colocarla en un servidor, es mejor que se empiece poco a poco. Ponte en contacto conmigo en andres.cuartero@gmail.com
———
Comentario 23- Por gerardo@cali.gov.co, 19/07/2006 14:31:06
Valoración: Muy buena

———
Comentario 24- Por , 20/07/2006 19:28:13
Valoración: Muy buena

———
Comentario 25- Por LuthorCorp, 03/08/2006 0:28:17
Valoración: Buena
Buen tutorial
———
Comentario 26- Por aescamilla@dgepi.salud.gob.mx, 22/08/2006 16:59:21
Valoración: Buena
Me parece bueno prero un corto
———
Comentario 27- Por , 18/10/2006 7:24:01
Valoración: Mala

———
Comentario 28- Por fyemtab@hotmail.com, 25/01/2007 14:19:45
Valoración: Muy buena
falta un ejemplo en swf
———
Comentario 29- Por Paulis, 04/02/2007 4:13:51
Valoración: Muy buena
Excelente, concreta y clara.
———
Comentario 31- Por maga, 02/07/2007 22:52:26
Valoración: Muy buena
exelente explicación
———
Comentario 32- Por , 10/07/2007 19:56:37
Valoración: Sin valoración

———
Comentario 53- Por , 02/01/2008 18:41:19
Valoración: Mala
no funciona acceso clave de visualizacion tutorial
———
Comentario 55- Por sincere@mail.ru, 09/04/2008 15:04:53
Valoración: Regular
50df1f0a0444af7b3e3d82966e41005e