La clase pasada conlcuimos nuestra galerÃa de productos con movies externas. Ahora puedes hacer galerÃas de imágenes y otras presentaciones utilizando y combinando las herramientas de las clases anteriores. Sin embargo, en el sitio de ejemplo de la clase pasaba las movies tardaban en cargar y no habÃa forma de darse cuenta si los productos se estaban cargando o no y cuánto faltaba para que la finalice carga.
Para evitar marear al usuario de nuestro sitio tenemos que agregar preloaders o precargas. Hoy te voy a enseñar a hacer precargas fáciles.
La idea de una precarga es:
- Anunciar que algo se está cargando
- Dar una idea de cuánto falta para que se termine de cargar
El segundo punto no es absolutamente necesario, pero por una cuestión de respeto a nuestro usuario es mejor calmar su ansiedad y decirle cuánto falta. ¿Es realmente muy difÃcil hacerlo?
La forma que vamos a utilizar para orientarlo es a través de un porcentaje numérico o un elemento que se vaya completando a medida que se efectúa la carga. Con el tiempo y más experiencia en Flash podrás hacer cosas verdaderamente increÃbles con las precargas. De momento…
¿Te acuerdas de la lÃnea de tiempo? Bueno, la precarga va a estar siempre en el primer frame. Va a ser lo primero en cargarse y, al finalizar va a mostrar inmediatamente la movie que queremos ver.
Armado de la precarga: fase diseño
Abre el archivo FLA del primer detalle de la clase pasada, detalle1.fla (por si no lo tienes, haz clic aquà para descargar). En la lÃnea tiempo podrás ver un solo frame con una imagen y texto. Como la precarga se muestra antes que la imagen (en el primer frame), debemos agregar un frame antes del que ya tenemos. Asà nos queda el frame 1 vacÃo y el frame 2 con la imagen.
En el frame 1 voy a diseñar mi precarga. En este caso quiero que se vea, por un lado una lÃnea que se vaya completando a medida que se cargue la movie y por otro lado un porcentaje que llegue a 100 en el momento también en que se termine de cargar esta pelÃcula.
Por una cuestión de diseño, recuerda ubicar el diseño de la precarga en el centro de la imagen que se va a ver al cargar la movie completa.
¿Que quiero decir con esto? En este caso la imagen que quiero cargar no está en el centro de la página, sino a un costado. Por eso la precarga debe verse sobre ese costado, preferentemente en el centro, como en la imagen de arriba.
Mi diseño en el frame 1 es muy sencillo y se ve similar a la imagen de la derecha. Sólo un fondo, con un texto que dice “Cargando”. Tú puedes hacer lo que quieras…
Ahora vamos a crear una nueva capa a la que llamaremos “Precarga”. Debes ubicarla por encima de la capa “Detalle” que ya tenÃamos.
LÃnea de carga
En el primer frame de la capa “Precarga” (sólo en el primero) comenzaremos con la lÃnea que se completa a medida que se carga la movie:
- Crea un rectángulo pequeño, que será el comienzo de la lÃnea en un 1%.
- Convierte el rectángulo en gráfico y luego en movie (F8).
- Entra en esa movie, selecciona el gráfico y mueve el centro hacia el costado izquierdo del rectángulo. Esto es para que luego podamos agrandarlo únicamente hacia la derecha.
- Crea un nuevo fotograma clave en el frame 100.
- Dentro del frame 100 agranda el rectángulo cuando quieras, teniendo en cuenta que asà se verá cuando alcance el 100% de carga.
- Sal de la movie (yendo a la escena original) y nombra esta movie como “linea_carga”.
No es necesario que completes exactamente estos pasos. Tampoco que hagas una “lÃnea”, sino cualquier animación contenida en 100 frames. La idea es que el usuario de nuestro sitio no se aburra mientras se carga la pantalla… Créeme, con estas herramientas y un poco de imaginación se pueden hacer cosas sorprendentes. Sino échale un vistazo a los sitios de ejemplo que te propongo al final del artÃculo.
Porcentaje de carga
De nuevo en el primer frame de la capa “Precarga” vamos a generar el texto de porcentaje que aumenta de numeración a medida que se carga la movie, hasta llegar a 100%:
Crea un campo de texto en el lugar donde quieras que se muestre el porcentaje.- Selecciona el campo de texto y en la barra de propiedades, conviértelo en Dynamic Text. Esto nos permite que cambie de acuerdo al código ActionScript que agreguemos después.
- Nombra a este campo de texto como “porcentaje_texto”.
Para varias la tipografÃa, el color y el tamaño, basta con seleccionar el cuadro y darle las especificaciones correspondientes.
Código ActionScript para que todo funcione
Es el momento de meternos con el código. Para eso vamos a crear una nueva capa donde únicamente introduciremos código. Por eso la llamaremos… sÃ: “Código” 
La única forma de que todo funcione es que a través de ActionScript, con el siguiente código:
function cargando() {
var total, cargados, porcentaje;
total=_root.getBytesTotal();
cargados=_root.getBytesLoaded();
porcentaje=Math.floor((cargados*100)/total);
porcentaje_texto.text=porcentaje+”%”;
linea_carga.gotoAndStop(porcentaje);
if(cargados==total){
clearInterval(hiloPrecarga);
play();
}
}
var hiloPrecarga=setInterval(cargando,1);
stop();
Quizás tengas que arreglar el indentado o escribirlo nuevamente a mano, pero es exactamente esto lo que debes copiar en el frame 1 de la capa Código.
Ahora voy a explicarlo:
function cargando()
Declaro una nueva función: “precarga”, que va a ejecutarse hasta que se termine de cargar la movie.
var total, cargados, porcentaje;
Declaro las variables que voy a manejar: la cantidad total de bytes de la movie, los cargados hasta el momento y el porcentaje de bytes cargados al momento.
total=_root.getBytesTotal();
A nuestra variable “total” le asignamos el valor total de bytes que tiene la movie.
cargados=_root.getBytesLoaded();
A la variable “cargados” le asignamos el valor total de los bytes de la pelÃcula que fueron cargados hasta el momento.
porcentaje=Math.floor((cargados*100)/total);
Ahora hacemos una regla de tres simple para asignarle a la “variable” porcentaje el valor que deberÃa tener.
porcentaje_texto.text=porcentaje+"%";
Le decimos que el porcentaje me lo muestre en el campo dinámico de texto “porcentaje_texto”.
linea_carga.gotoAndStop(porcentaje);
Esto es para relacionar la lÃnea que habÃamos hecho con el número de porcentaje al momento. Asà reproduce la movie “linea_carga” hasta el número de frame igual al número de porcentaje cargado.
if(cargados==total){
Si la cantidad de bytes cargados es igual a la cantidad total de bytes de la pelÃcula…
clearInterval(hiloPrecarga);
…dejar de ejecutar la función Precarga…
play();
…e iniciar la movie (o sea, ir al frame 2)
var hiloPrecarga=setInterval(cargando,1);
La función setInterval le dice a la función “cargando” que se ejecute cada 1 milisegundo. De esta manera se muestra información actualizada.
stop();
Evita que la movie se inicie.
Otra cosa que debes tener en cuenta es que debes incluir un stop(); en el segundo frame, de lo contrario se reproducirÃa la función constantemente.
Ahora lo único que falta es pegar el primer frame de cada capa y pegarlos en todas las movies, para que todas tengan su precarga…
Haz clic aquà para ver la movie detalle1.SWF con la precarga
Haz clic para descargar el archivo original comprimido detalle1.FLA (100 kb)
Te aseguro que con este tutorial se pueden hacer precargas súmamente interesantes, sólo necesitas usar la imaginación. Para que te inspires, te dejo algunos sitios con precargas para destacar:
1. 
2. 
3.
4. 
5. 
6.
Bueno, eso es todo amigos… ¡Hasta la próxima!
| << CLASE ANTERIOR |
Lunes, 21 de Abril de 2008 a las 14.34
Gracias por esta ayuda de la PreCarga la verdad es que esas paginas de muestra son un gran ejemplo a seguir…
Felicitaciones…
Martes, 22 de Abril de 2008 a las 12.46
Me encantaron las paginas de muestra, son inspiradoras, sobre lo que uno puede conseguir con imagiancion y muchas horas de esfuerzo
Lunes, 28 de Abril de 2008 a las 20.37
hola.
soy nueva en flash, y estoy intentano aprender. tengo una dudita en la linea de precarga en el punto 3 “Entra en esa movie, selecciona el gráfico y mueve el centro hacia el costado izquierdo del rectángulo. Esto es para que luego podamos agrandarlo únicamente hacia la derecha” podrias hacerme el favor de explicarme mas detalladamente. plis
Martes, 29 de Abril de 2008 a las 16.24
me gustyo mucho este tutorial tan practico. hice el ejercicio de precarga, pero no me funciona, me manda dos errores al correr el archivo:
1120: Acceso a una propiedad _root no definida.
1120: Acceso a una propiedad _root no definida.
la verdad no entiendo suii seguà los pasos como los marcan, ojalá y puedan ayudarme… gracias y felicidades nuevamente por el sitio.
Martes, 29 de Abril de 2008 a las 17.14
Hola Lyla… Te explico brevemente: todos los sÃmbolos en Flash tienen un punto de ancla que viene predeterminado en el centro. Si dejo el punto allÃ, en el momento que quiera “estirar” o agrandar el sÃmbolo, este lo va a hacer proporcionalmente para ambos lados del centro. En el caso de la barra de precarga, no quiero que se agrande para ambos lados, sino que quiero que se “estire” únicamente hacia la derecha. Por esta razón tengo que ubicar el punto de ancla del lado izquierdo. Te aconsejo que pruebes estirando distintos elementos flash y luego cambiándoles el punto de ancla…
Martes, 29 de Abril de 2008 a las 17.19
Hola Viridiana… ten en cuenta que la precarga la verás sólo cuando hayas subido el swf a la red. De otra forma no podrás ver la animación ya que no habrá nada que cargar
Es muy extraño el error que te ha dado. Si copias y pegas el código no creo que tengas problema… Suerte!
Miércoles, 18 de Junio de 2008 a las 15.46
Alejandra, no hace falta subirlo a la web para visualizar la precarga. Si apretas CTRL + ENTER, dos veces en flash, vas a poder verla. Salu2!
Viernes, 27 de Junio de 2008 a las 18.18
Excelente : material de apoyo,ojala lo puedan actualizar
para contar , con los últimos avances en este tema.
Gabriel.
Martes, 29 de Julio de 2008 a las 17.07
MUY BUENAS TARDEZ INGENIERO QUIERO PREGUNATARTE UNAS PREGUNTAS SOBRE FLASH 8 ESQUE NO PUEDO UTILIZAR MI PRECARGA YA LO HICE PERO TENGO SELECCIONAR DONDE DICE SIMILAR PRECARGA ALGO ASI PERO QUIERO QUE FUNCIONE BIEN CUAN LO EJECUTE PERO AL EXPORTAR YA NO APARECE MI PRECARGA
Miércoles, 30 de Julio de 2008 a las 09.50
Hola a todos…
Antes que nada quiero felicitar a las personas que han hecho posible tan maravilloso curso de flash.
Muchas gracias por compartir sus conociemientos con todos.
Saludos
Viernes, 1 de Agosto de 2008 a las 21.37
hola a todos los responsables de esta pagina, bueno les queria decir que cuando bajo el archivo en .fla no me abre en el flash asi que lo estoy haciendo con otros tipos de imagenes, y tengo un problema, en la aprte final donde dice “”"Ahora lo único que falta es pegar el primer frame de cada capa y pegarlos en todas las movies, para que todas tengan su precarga…”"” si alguien me podria ayudar en eso aqui les dejo mi correo, apizarro57@hotmail.com, muchas gracias
Miércoles, 6 de Agosto de 2008 a las 13.25
Hola a todos, estuve revisando este tutorial y esta muy bueno, pero me genera el mismo error que a Viridiana, el cual detallo acontinuación: Descripción: 1120: Acceso a una propiedad _root no definida. Origen: total=_root.getBytesTotal(); || Descripción: 1120: Acceso a una propiedad _root no definida. Origen: cargados=_root.getBytesLoaded(); , estoy usando el CS3. Mi teoria era que tal vez sea la versión del action script, estoy usando el 3.0, pero al cambiar la configuración de publicación para que use el 1.0 ó 2.0 no me muestra la animación completa se detiene en el frame 2, mas al usar el 3.0 me notifica el error que detalle arriba pero se muestra la animación completa. Si alguien me podria ayudar favor, dejo mi email: orphe@live.com , Saludos Roberti.
Miércoles, 6 de Agosto de 2008 a las 17.19
Bueno, bueno. Prometo ayudarlos en breve… Veré cuál es el problema.
Lunes, 18 de Agosto de 2008 a las 19.14
Hola, pude solucionar el problema de la carga del archivo de flah, sucede que habia colocado acciones en algunos frames como prueba y habia olvidado de eliminarlos, además en el frame 1 coloque stop(); por ello no pasaba de ese frame. Viridiana si podria compartirme tu archivo para revisarlo asi podrÃa ayudarte, mi email es orphe@live.com. Saludos Roberti.
Martes, 9 de Septiembre de 2008 a las 17.13
Saludos a la distancia…
Primeramente agradesco a totas las personas que son participes de esta pagina ojala sigan mandando tutoriales de Flash, me parecio un curso muy interesente… Gracias por la ayuda…
Martes, 23 de Septiembre de 2008 a las 16.12
Buenas tardes, excelente esfuerzo el que hacen con estos tutoriales, una pregunta, las directrices del código vienen en español, eso afecta en algo, si mi programa está en inglés? Traté de incluirlo en una página que tenemos en la empresa, y me sale parpadeando… entiendo que la precarga no se verá hasta que esté en la red… les agradezco si me pueden dar luz en este aspecto…
Miércoles, 11 de Febrero de 2009 a las 15.55
Excelente el tutorial! Sigan adelante! Gracias Christian por el CTRL + ENTER, dos veces en flash para ver la precarga.
Martes, 18 de Agosto de 2009 a las 05.59
esta es uno de los sitios web que he creado http://www.lamagiadelangel.com en el tengo un problema con las precargas. Las precargas funcionan muy bien, pero en los subarchivos leidos por un MX_LOADER me pasa lo siguiente: si en la galeria le di cargar una seccion y esta esta cargabdo, si aun no termina de gargar y desido ver otra seccion de la galeria, empieza a ciclarse todo el archivo principal. ¿Que puedo hacer en estos casos? ¿podrias ayudarme alejandra? aqui te dejo mi correo levi_rat@yahoo.com.mx y el otro levi_the_slave@hotmail.com
Martes, 18 de Agosto de 2009 a las 13.14
Hola,
Mira, es complicado responder porque tendrÃa que ver el archivo para ver dónde está el problema…
Martes, 18 de Agosto de 2009 a las 19.03
ok… Dejame tu correo para que te envie el o los archivos XD.
Gracias
Martes, 6 de Octubre de 2009 a las 15.36
Hola .
el motivo de e-mail es porque he comenzado con el aprendizaje del flas y su sitio esta super bien para este objetivo… pero me encuentro en la parte de precarga y al final hay un archivo .zip que puedo descargar, cuando intento abrirlo en flas 8 ne dice que el formato del archivo es inesperado y no logro ver el archivo flash.
Pueden ayudarme ?..
Sábado, 6 de Marzo de 2010 a las 00.01
Yo pregunto: si asi se puede realizar sitios de precargas en flash, se puede realizar sitios tanto en flash como en DW de descargas? y si asi fuera, cual seria el codigo correcto que se deberia escribir en flash o DW? espero respuestas breves!!!! saludos
Sábado, 7 de Agosto de 2010 a las 18.21
Fijate que estoy realizando una pagina web, hice todo en flash unas sola pagina y le puse movies externas y si me kedo bien cuando abro el swf principal todo se ve perfecto y jala las movies y se ve todo, pero a la hora ponerlo en la pag web en dreamweaver no se ve nada de la movies externas no se por que me puedes ayudar, gracias…
Viernes, 13 de Agosto de 2010 a las 15.19
te hago una pregunta yo quiero saber como se hace o si se puede hacer que la el archivo este de precarga me carge una página html , porque yo no tengo idea de como se hace eso….si me podrias explicar te lo agradezco!! saludos
Domingo, 17 de Octubre de 2010 a las 17.03
La precarga es para “entretener” a los “espectadores” de nuestro sitio web mientras se carga el archivo swf (que es mucho mayor por definición); para evitar que se vayan a otra página por aburrimiento.
No es un objetivo en sà misma.
Si necesitamos de precargas en páginas HTML es que están “mal hechas”: hay fotos de un peso excesivo -les recomiendo OPTIMIZAR con Photoshop o Fireworks, por ejemplo, a JPG o GIF nunca usar BMP o PNG- o audio, o vÃdeo que se carga desde el mismo SERVIDOR y misma CARPETA en que tenemos alojada la página, es decir INCRUSTADOS en la página. Si se necesita incluir este tipo de material pues lo mejor es utilizar archivos FLV (que son los de YouTube por ejemplo) y llamarlos INDEPENDIENTEMENTE de la carga del resto de la página.
Asà mientras carga el vÃdeo, la gente puede ir curioseando el resto.
Otra cosa es que pillemos una red muy sobrecargada, conexión lenta o tengamos la página alojada en un servidor de asquito y que se caiga cada 2 por 3.
Saludos
Lunes, 11 de Abril de 2011 a las 13.20
Hola!
Que tal amigos de “elwebmaster” primeramente felicidades por los tuturiales buenÃsimos que tienen pero quisiera que hagan una cosita mas por todos los nuevos que estamos iniciandonos en lo que es diseño web y me incluyo, es que si al final de cada capitulo de cada clase pudieran colocar una opcion para descar el tutorial en pdf.
Saludos…
Eduardo
Sábado, 23 de Julio de 2011 a las 21.46
Hola!! A mi me funcionó correctamente a no ser por una cosa y que no puedo encontrar por el momento el error: cuando termina la precarga muestra más corta del lado derecho la imagen del “detalle” y con el fondo color de la precarga que asoma detrás, y ambos tienen el mismo tamaño, si alguien puede decirme cuál puede ser el error… gracias!