Alejandra 17 de abril de 2008 a las 14.53
   Imprimir artículo
elWebmaster.com

Taller de Flash: Precargas


Logo FlashLa 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:

  1. Anunciar que algo se est√° cargando
  2. 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.

Lugar de precargasEn 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.

Preview de dise√Īo de precarga en Adobe FlashMi 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:

  1. Crea un rect√°ngulo peque√Īo, que ser√° el comienzo de la l√≠nea en un 1%.
  2. Convierte el rect√°ngulo en gr√°fico y luego en movie (F8).
  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.
  4. Crea un nuevo fotograma clave en el frame 100.
  5. Dentro del frame 100 agranda el rectángulo cuando quieras, teniendo en cuenta que así se verá cuando alcance el 100% de carga.
  6. Sal de la movie (yendo a la escena original) y nombra esta movie como “linea_carga”.

Pasos para preloader lineal

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%:

  1. Precarga con porcentajeCrea un campo de texto en el lugar donde quieras que se muestre el porcentaje.
  2. 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.
  3. 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…

SWF icono

Haz clic aquí para ver la movie detalle1.SWF con la precarga

Zip file

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:

http://www.escriba.es/ 1. 2. 3.

4. 5. 6.

  1. ESCRIBÀ
  2. Orange
  3. Microsoft Office : mac 2008
  4. DESUDESU
  5. Food of the Food
  6. Dave Werner’s Portfolio 2006

Bueno, eso es todo amigos… ¬°Hasta la pr√≥xima!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (29)

  1. Danniels Castillo dice:

    Gracias por esta ayuda de la PreCarga la verdad es que esas paginas de muestra son un gran ejemplo a seguir…
    Felicitaciones…

  2. Dalila Pacheco dice:

    Me encantaron las paginas de muestra, son inspiradoras, sobre lo que uno puede conseguir con imagiancion y muchas horas de esfuerzo

  3. lyla dice:

    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

  4. VIRIDIANA L√ďPEZ JIMENEZ dice:

    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.

  5. Alejandra dice:

    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…

  6. Alejandra dice:

    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!

  7. Christian dice:

    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!

  8. Gabriel Aguilera dice:

    Excelente : material de apoyo,ojala lo puedan actualizar
    para contar , con los √ļltimos avances en este tema.
    Gabriel.

  9. francisco ruiz hernandez dice:

    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

  10. frehd dice:

    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

  11. Augusto dice:

    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

  12. Roberti dice:

    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.

  13. Alejandra dice:

    Bueno, bueno. Prometo ayudarlos en breve… Ver√© cu√°l es el problema.

  14. Roberti dice:

    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.

  15. Miriam Coaquira dice:

    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…

  16. Cynthia dice:

    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…

  17. Nicolas dice:

    Excelente el tutorial! Sigan adelante! Gracias Christian por el CTRL + ENTER, dos veces en flash para ver la precarga.

  18. Josafat dice:

    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

  19. Alejandra dice:

    Hola,

    Mira, es complicado responder porque tendr√≠a que ver el archivo para ver d√≥nde est√° el problema…

  20. Josafat dice:

    ok… Dejame tu correo para que te envie el o los archivos XD.

    Gracias

  21. Juana Caudillo dice:

    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 ?..

  22. cristian dice:

    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

  23. Luis Alberto dice:

    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…

  24. luis dice:

    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 ūüėÄ

  25. pedro (desde espa√Īa) dice:

    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

  26. Eduardo Rosales dice:

    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

  27. Eli dice:

    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!

  28. Lenin Del Castillo dice:

    Hola a todos planeo hacer unas fichas para marcar alternativas como la que se muestra en el link, alguien tiene ejemplos que me pueda proporcionar, gracias

    http://catedu.es/chuegos/control/relacion.swf

  29. carlos dice:

    disculpa pero como puedo hacer este mismo menu pero para un discointeractivo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder