Regresar   Foros del Web > Diseño de Sitios web > Flash y Actionscript > Recursos

El registro es Gratis en Foros del Web
Respuesta
 
Herramientas Buscar en Tema Desplegado
Antiguo 16/10/03, 15:13:45   #1 (permalink)
juwe tiene un saldo positivo de karma
 
Registrado: nov 2002
Ubicación: Guadalupe Inn
Mensajes: 623
Contactar con juwe a través de ICQ
juwe is offline  
Tutorial - Precarga en flash

Igual y muchos hemos hecho un precargador, pero ¿realmente sabemos como es que funciona? yo hasta hace poco lo descubrí, o lo razoné si le quieren llamar así. =P Pongo este tutorial para no quedarnos en el copy>paste y entender un poco más allá. Se necesita un conocimiento más o menos básico del Flash y algunos conceptos también básicos, este es para la versión MX.

Antes de todo, es importante saber para que demonios nos sirve una precarga en una película flash, si, esas que se va llenando una barrita y nos va diciendo un porcentaje, bueno.

Cuando creamos una animación en flash, estamos creando un archivo con extensión .swf; el caso es que cuando entramos a un sitio ese archivo tendrá que viajar por la red hasta nuestra máquina, y si tenemos una conexión con módem, nuestra compu anda corta de memoria, hay mucho tráfico en la web, y si a eso le sumamos que nuestro archivo pesa 100 kb pues tardará en cargarse. Aquí es donde empieza el problema pues la gente que creó el Flash, lo hizo tan ágil que al archivo swf no le importará si ya termino de transferirse para empezar su ejecución, entonces podemos tener un archivo de 100 kb del cual solo se han bajado 30 kb's y ya reproduciéndose, lo que pasará al llegar al fotograma 30 será que se detendrá hasta que se haya cargado más archivo, entonces esto nos da como resultado una reproducción lenta y entrecortada.

Otro problema que podemos tener es que tenemos un menú con diferentes fotogramas, y en cada botón le damos una orden, en este caso ir al fotograma x, donde x puede ser cualquier número, entonces si dentro de la carga no se ha bajado, digamos, el fotograma 50 y un botón tiene la orden de ir a ese fotograma, al darle clic nos llevará al último frame cargado, aunque no sea el 50.

Entonces, esa es la función de un precargador, se detiene al principio de la película y no la deja arrancar hasta que se haya terminado de cargar. Mientras tanto nos va mostrando algunas monerías como el porcentaje de carga o imágenes, o cualquier cosa que se nos ocurra.

Bueno, a lo que nos truje chencha, como decimos por acá:

Lo primero es preparar el escenario; en la línea de tiempo, hay que insertar dos fotogramas (al inicio de la película) como se ve en esta imagen:



y en el tercer fotograma le ponemos como etiqueta "inicio" pues ahí es donde realmente iniciará nuestra animación.



ahora, en el segundo fotograma ponemos este código:
Código:
gotoAndPlay (_currentframe -1)
La propiedad _currentframe nos sirve para referirnos al fotograma en el cual estamos posicionados, en este caso es el 2 y le podemos restar o sumar números para decirle a Flash que queremos ir a X fotograma, en este caso al 1 (2-1=1)

Esto nos sirve para que cada vez que pasemos por el segundo frame nos regrese al primero, y en ese primer frame es donde entra el chiste del precargador.
En el primer frame pondremos este código:

Código:
porcentaje = (_framesloaded/_totalframes)*100;
bytes = _root.getBytesLoaded() add " Bytes cargados de " add _root.getBytesTotal() add " Bytes totales";
cargados = int(porcentaje) add " % Cargado";
if (porcentaje>=100) {
	gotoAndPlay ("inicio");
} else {
	_root.barra._xscale = porcentaje;
	play ();
}
Ahora se los explicaré de manera detallada, puede parecer complejo a simple vista, pero es más sencillo de lo que imaginan:
Código:
porcentaje = (_framesloaded/_totalframes)*100
En esta linea declaramos una variable, (si no sabes que es una variable, haz clic aquí) la cual se llama porcentaje, y lo que hace es una ecuación sencillita, divide los frames cargados entre los totales (_framesloaded entres _totalframes; ambas propiedades que flash toma automaticamente de nuestro archivo) y el resultado de esa división lo multiplica por cien (100) y con esto saca el porcentaje de la película cargada. Nos traerá como resultado una cantidad con decimales.
Código:
bytes = _root.getBytesLoaded() add " cargados de " add _root.getBytesTotal();
Aqui tenemos otra variable, en este caso se llama bytes, y nos servirá para decirnos cuantos Bytes de nuestra película se han cargado (el peso del archivo). La propiedad getBytesLoaded() nos trae los Bytes cargados y la propiedad getBytesTotal() los bytes totales (el peso de la película) y lo que hace es crear una cadena de caracteres por medio de una concatenación que es ni más ni menos que juntarlo todo:
Código:
_root.getBytesLoaded()	add	" Bytes cargados de "	add	_root.getBytesTotal()		add	" Bytes totales"
Si nos damos cuenta entre cada una de las propiedades tenemos un add que es el signo que nos juntará las cadenas de texto en una sola. En medio tenemos entre comillado un " cargados de " ¿se imaginan que hará esto? Suponiendo que ya se termino de cargar una película de 100 kbs, nuestra variable bytes quedará:

1000 Bytes cargados de 1000 Bytes totales

Una variable más:
Código:
cargados = int(porcentaje) add " % Cargado";
En esta variable mostramos el porcentaje cargado, recuerden que ya lo calculamos con la primera variable pero no se lo hemos mostrado al usuario, para ello es necesario crear un campo de texto que lo almacene, en la barra de herramientas seleccionamos la de texto y arrastramos en el escenario para dibujar el campo. Luego en la ventana de propiedades en donde dice texto estático/static text seleccionamos la opción de texto dinámico/dinamic text

luego se activara en ese mismo panel de propiedades un campo que dice var, ahi escribimos "cargados" (sin comillas)


Lo que hace la variable "cargados" es pasar el valor de porcentaje (el que les había dicho que era un número decimal) a enteros con la acción int (porcentaje) y le concatena una cadena que dice "% Cargado"

Con lo que en el campo de texto que acabamos de dibujar irá apareciendo un número que estará variando del 0 al 100 conforme se vaya cargando la película.

100% Cargado

Y la última parte del código:
Código:
if (porcentaje>=100) {
	gotoAndPlay ("inicio");
} else {
	_root.barra._xscale = porcentaje;
	play ();
la traducción de if es algo así como "sí", pero no el si de afirmación sino un condicional, es decir, sí pasa esto, sí pasa lo otro, entonces, aqui lo que le decimos a flash es

si (porcentaje es mayor o igual a 100) {(entonces)
gotoAndPlay ("inicio") (ve a "inicio" y empieza la función baby)
} de otro modo { (si porcentaje NO es mayor o igual a 100)
_root.barra._xscale = porcentaje (esto lo expliacare en el siguiente párrafo*)
play(); (ve al segundo frame, y por ende regresate pa'ca hasta que porcentaje sea mayor o igual a 100, jejeje)
}

Esa es la esencia del precargador.
Podemos también crear una barra que se vaya llenando conforme se vaya cargando la película, para ello es necesario crear una movie clip; dibujamos un rectángulo en la escena principal, lo seleccionamos, presionamos F8 y nos aparecerá un ventana como esta:



Seleccionamos Movie Clip y le ponemos un nombre, el que sea.

Luego, ya que lo creamos, lo seleccionamos y en el panel de propiedades, podremos ver algo así:



En el campo de nombre de instancia le ponemos un nombre, en este caso barra.
* La acción que quedó pendiente de explicar:
Código:
_root.barra._xscale = porcentaje
Aqui lo que decimos es que la propiedad escala del eje X (_xscale) del objeto "barra" sea igual a porcentaje (nuestra primera variable)

Como dije arriba, lo que hará este precargador es estarse moviendo entre los fotogramas 1 y 2 hasta que se cumpla la condición de que porcentaje sea 100 o mayor, y las variables se actualizarán cada vez que pase por el frame 1. Eso es todo, espero que me hayan entendido, jeje si no, pues no duden en escribirme, con gusto les ayudo.

Última edición por juwe fecha: 29/10/04 a las 13:54:49.
  Responder Con Cita
Antiguo 22/11/04, 06:02:31   #2 (permalink)
oscar_sito ha deshabilitado el Karma
 
Registrado: nov 2004
Mensajes: 16
oscar_sito is offline  
Muchas gracias, entendí todo el tutorial, ahora, disculpen mi ignorancia, pero yo tengo hecha una animación llamada pelicula.swf, como la inserto en el ejemplo??
  Responder Con Cita
Antiguo 25/11/04, 07:58:48   #3 (permalink)
dsiis tiene un saldo positivo de karma
 
Registrado: jul 2004
Ubicación: Palencia (España)
Mensajes: 70
Contactar con dsiis a través de MSN
dsiis is offline  
Alegría Gracias pero...

Muchas gracias por la explicacion, que nos ayuda a saber el porque....
A mi me gustaria saber como se haria un preload, pero con una animacion en concreto que vaya acorde con el numero de bites cargados, por ejemplo quesitos que vayan apareciendo conforme se van cargando los bites yque al final compongan un queso entero, me gustaria que me explicasen como se haria eso...

Muchas gracias por compartir vuestros conocimientos con simples mortales
  Responder Con Cita
Antiguo 29/12/04, 12:25:09   #4 (permalink)
^engonga^ tiene un saldo positivo de karma
 
Registrado: nov 2002
Mensajes: 655
Contactar con ^engonga^ a través de Yahoo
^engonga^ is offline  
a mi no me funciona

el campo de cargados se me queda en 60 y no abanza


he puesto un campo de texto dinamico que se llama bytes i este si que funciona


que puede suceder?
  Responder Con Cita
Antiguo 30/12/04, 07:55:08   #5 (permalink)
Picher ha deshabilitado el Karma
 
Registrado: nov 2004
Mensajes: 127
Picher is offline  
Cool Con bytes no frames

Esta muy bien, pero lo que ocurre es que en mi aplicación, no se por qué, hasta que no se carga el 60 % del archivo en bytes no comienza el 1er Frame
con lo que la precarga se inicia cuando tenemos el 60 % de la animación cargada.

Esto se explica porque antes de entrar en el codigo Flash carga todos los componentes de la biblioteca: botones, movieclips , etc y después comienza la precarga del video.
  Responder Con Cita
Antiguo 15/01/05, 18:28:50   #6 (permalink)
almaesdi ha deshabilitado el Karma
 
Registrado: ene 2005
Mensajes: 49
almaesdi is offline  
Gracias!!!!

Mitra super pero super buena el tutorial, gracias me sirvio caleta, lo si em gustaria saber lo q otra persona te pregunto antes, si tu sabes hacer una animacion de precarga como lo del queso, de q se valla poniendo un queso despues otro y que al final es decir 100% se transforme a un queso completo ese redondo


Gracias
  Responder Con Cita
Antiguo 17/01/05, 16:24:16   #7 (permalink)
Pitu. ha deshabilitado el Karma
 
Registrado: ene 2005
Mensajes: 56
Pitu. is offline  
Me pasa exactamente igual que ha ENGONGA. Alguien sabe porque??

Muxas gracias
  Responder Con Cita
Antiguo 20/01/05, 08:36:04   #8 (permalink)
sc_cris tiene un saldo positivo de karma
 
Registrado: mar 2004
Mensajes: 18
sc_cris is offline  
Yo tambien quiero saber sobre los Quesitos!!!

Expliquen como es que se hace por fa'

Cris
  Responder Con Cita
Antiguo 29/01/05, 22:23:10   #9 (permalink)
daidalos tiene un saldo positivo de karma
 
Registrado: ene 2005
Mensajes: 395
daidalos is offline  
Idea solucion a lo del 60% porciento

Lo primero es agardecer a juwe por el tutorial y a maltos por el archivo .fla,ambos me fueron muy útiles para hacer la precarga que necesitaba.
Al igual que varios tuve dos problemas: el primero que no me salian los números y el segundo que la barra llega al 60% casi inmediatamente se abre la pagina y ahí para (en el 60%) y despues de un rato carga.
El primer problema es simple: el color de la letra es transparente el el archivo .fla
El segundo problema tambien es simple pero mas sutil, si se pone atención a la explicación el tamaño de la barra depende de la variable "porcentaje" que de depende del numero de frames de la pelicula ¿cuantos frames tiene la pelicula? ¡Tres! asi que el segundo frame es el 60% (66 aprox) cuando la pelicual está en el el segundo frame la barra deberia estar el la tercera parte de su largo, y cuando TERMINE de cargar el tercer frame la barra se completaria pero eso no lo vemos por que inmediatamente se actualiza y se carga la pélicula. Medir los frames es util cuando se tiene una pelicula de varios frames que pesen en Kilobites mas o menos lo mismo
ver grafico: GRAFICO
La solución es medir los Kb descargados y no los frames descargados para hacerlo no hay mas que mirar el script que hay dice como se miden los Kb descargados, así la primera linea de script en vez de ser
porcentaje = (_framesloaded/_totalframes)*100;

seria:
porcentaje = (_framesloaded/_totalframes)*100;

Asi pues queda resuelto el misterio, lo de controlar otras variables imagino que se pueden usar en vez de "xscale" otras cosas como rotación o alfa, la pregunta base tambien es si se puede controlar una pelicula que imagino, avanze segun la carga, pienso que se podria equiparando alguna propiedad del numero de frames de una pelicula con el porcentaje, si logro hacerlo lo publico aqui, si no pues no.
  Responder Con Cita
Antiguo 04/02/05, 11:19:12   #10 (permalink)
miguelogm ha deshabilitado el Karma
 
Registrado: feb 2005
Mensajes: 2
miguelogm is offline  
holaaaaaa!, yo tambien querria saber, si sabes como se hace para hacer la precarga amena, en lugar de mostrar la barrita de progreso, una imagen que se va coloreando por ejemplo, me da igual quesitos que salchichones...xD

SALUDOS, y gracias tronko!
  Responder Con Cita
Antiguo 13/02/05, 06:31:51   #11 (permalink)
basterillo tiene un saldo positivo de karma
 
Registrado: dic 2003
Mensajes: 71
basterillo is offline  
¿y si tienes que cargar una escena?

Hola a todos!

Muy buena la explicación de la precarga, pero yo tengo una duda. En vez de tener una película en el tercer fotograma, la tengo en una escena. He creado una escena para la precarga y otra para la película. ¿Cómo hago para que me aparezca la segunda escena cuando se haya cargado?

Gracias...
  Responder Con Cita
Antiguo 01/03/05, 03:33:33   #12 (permalink)
daidalos tiene un saldo positivo de karma
 
Registrado: ene 2005
Mensajes: 395
daidalos is offline  
dos nuevos problemas dos nuevas soluciones

hola otra vez, como dicen las gallinas vamos al gano:
1° abrir en una escena específica. La instrucción "gotoandplay" de la línea bajo la instrucción "if" además del nombre del fotograma, antes llevaría el nombre de la escena:
...
if (porcentaje >= 100) {
gotoAndPlay ("escena x" "arranque");
...
donde "escena x" es la escena ala que va. Tambien revisa las opciones de escena siguiente y anterior

2° si la precarga esta en una pelicula que se lee dentro de otra con un load movie la precarga leerá los bytes de toda la pelicula asi que se debe cambiar la instrucción _root. por this. que aparece antes de los getBytes...
porcentaje = (this.getBytesLoaded()/this.getBytesTotal())*100;
bytes = this.getBytesLoaded() add " Bytes cargados de " add this.getBytesTotal() add " Bytes totales";
NOTA: Como no manejo action script esto lo descubrí por esayo y error y otro error y más errores, se que funciona pero las razones del por que me resultan un poco oscuras asi que no me hago responsable por si escribí alguna barbaridad

NOTA2: la pagina que estoy haciendo (para un cliente) está http://www.hypertextografico.com/lucaso/index2.htm si alguien tiene sugerencias o quiere opinar puede hacerlo sin problemas.
  Responder Con Cita
Antiguo 27/04/05, 09:04:27   #13 (permalink)
locombiano tiene un saldo positivo de karma
 
Registrado: nov 2002
Ubicación: Medellín
Mensajes: 124
locombiano is offline  
Salu2 gente.
Está muy bueno el tutorial, pero quiero saber una cosa, espero que alguien me la pueda enseñar, quiero hacer una animación de precarga, pero en vez de mostrar el porcentaje cargado de la animación muestre el porcentaje cargado de la página completa. Es decir que cuando llegue a 100% es porque ya todo (html, imágenes, texto y otras animaciones) ha terminado de cargarse.

Gracias por su atención y su tiempo.
  Responder Con Cita
Antiguo 14/05/05, 18:20:09   #14 (permalink)
thesilentman tiene un saldo positivo de karma
 
Registrado: mar 2004
Mensajes: 2
Contactar con thesilentman a través de ICQ
thesilentman is offline  
Cita:
Originalmente publicado por daidalos
La solución es medir los Kb descargados y no los frames descargados para hacerlo no hay mas que mirar el script que hay dice como se miden los Kb descargados, así la primera linea de script en vez de ser
porcentaje = (_framesloaded/_totalframes)*100;

seria:
porcentaje = (_framesloaded/_totalframes)*100;
Por mas que le busco no le encuentro diferencia a esos dos renglones, jeje.
A tambien se me queda atorada pero en el 21%... seguire batallandole
  Responder Con Cita
Antiguo 16/05/05, 15:05:27   #15 (permalink)
daidalos tiene un saldo positivo de karma
 
Registrado: ene 2005
Mensajes: 395
daidalos is offline  
Alegría esta si es...

caray, que pena, este si es el codigo, ademas pego de nuevo todo el script, si se te pega en 21% te puedo apostar que tienes 5 frames y no 3

el script que hay dice como se miden los Kb descargados, así la primera linea de script en vez de ser

porcentaje = (_framesloaded/_totalframes)*100;

seria:

porcentaje = (this.getBytesLoaded()/this.getBytesTotal())*100;

aqui va todo el script:
porcentaje = (this.getBytesLoaded()/this.getBytesTotal())*100;
regresiva = 10 - int(porcentaje / 10);
cargados = int(porcentaje) add "%";
if (porcentaje >= 100) {
gotoAndPlay ("arranque");
} else {
_root.barra._xscale = porcentaje;
play ();
}
  Responder Con Cita
Antiguo 17/05/05, 00:31:10   #16 (permalink)
thesilentman tiene un saldo positivo de karma
 
Registrado: mar 2004
Mensajes: 2
Contactar con thesilentman a través de ICQ
thesilentman is offline  
ah muy bien.. lo voy a probar. el otro lo habia correjido y solo me daba broncas a veces porque se quedaba atorado en el 99%. si cierro la ventana y la vuelvo a abrir abre en el 99% y no avanza. voy a probar con este. gracias
y efectivamente.. tenia 5 keyframes, jaja. bueno, en algunos porque ya puse el loading como en 10 SWFs
-----
esta es la linea que yo me saque de la manga:
porcentaje = (_root.getBytesLoaded()/_root.getBytesTotal())*100;
parece que si funciona, aunque en algunas peliculas por alguna razon no me ha jalado.

Última edición por thesilentman fecha: 18/05/05 a las 08:38:56. Razón: añado
  Responder Con Cita
Antiguo 20/06/05, 20:58:51   #17 (permalink)
Artemier tiene un saldo positivo de karma
 
Registrado: jun 2005
Mensajes: 39
Artemier is offline  
Problemin con el loader

Arkahuasi:

Estuve revisando el tutorial, lo probe y funciona todo bien,, perooo hice otra pagina que requeria que fuese una aplicacion (hartas diapositivas), el problema fue que el preloader no me funciona aca, cambie cosas y probe pero no paso na.

Se me ocurrio la idea de probar con el preloader que trae el Flash component, y logro que funcione pero no me desaparece,,que hago doctor??

Alguna modificacion para la primera opcion o algun codigo para la segunda... cualquier cosa me ayudaria,,,

saludos
Artemier
__________________
...y la nieve cubrió mis huellas para nunca volver atrás.

Artemier D'artagnan Lerton

:ojotes:
  Responder Con Cita
Antiguo 21/06/05, 12:26:52   #18 (permalink)
daidalos tiene un saldo positivo de karma
 
Registrado: ene 2005
Mensajes: 395
daidalos is offline  
no se si entendi bien

no se si lo de aplicaion te refieres a un .exe, pero tambien dices que es una pagina. Necesitaria mas datos para saber que podria estar pasando, ¿tienes la dirección de la página o puedes subir el .fla para verlo?
  Responder Con Cita
Antiguo 08/09/05, 06:44:01   #19 (permalink)
xinxan22 tiene un saldo positivo de karma
 
Registrado: sep 2005
Ubicación: Barcelona
Mensajes: 184
xinxan22 is offline  
Ayuda En La Precarga

Hola a todo el mundo, he visto lo que habeis dicho y escrito en el foro sobre la precarga, espero que me podais echar una mano porque estoy intentandolo y no hay manera. Primero tengo este trozo de cogido sacado de aqui:

porcentaje = (this.getBytesLoaded()/this.getBytesTotal())*100;
regresiva = 10 - int(porcentaje / 10);
cargados = int(porcentaje) add "%";
if (porcentaje >= 100) {
gotoAndPlay ("arranque");
} else {
_root.barra._xscale = porcentaje;
play ();
}

me gsutaria que me explicarais para que sirve "regresiva" i la funcion _xscale
y si puede ser los pasos que tengo que hacer para las animaciones, etc en el flash porque solo tengo esa barra azul y no hace nada :-P
  Responder Con Cita
Antiguo 08/09/05, 15:50:49   #20 (permalink)
eldervaz tiene un saldo positivo de karma
 
Registrado: ago 2003
Ubicación: lima
Mensajes: 599
Contactar con eldervaz a través de MSN
eldervaz is offline  
http://www.eldervaz.com/precarga/

saludos
__________________
eldervaz
www.eldervaz.com | www.ini4.com
  Responder Con Cita
Antiguo 03/10/05, 18:41:42   #21 (permalink)
iralon ha deshabilitado el Karma
 
Registrado: abr 2005
Mensajes: 2
iralon is offline  
Hola gente, muy bueno todo esto.
Yo planteo mi duda, quiero hacer un cargador que solo cargue 3 escenas de 4 que tengo. Como hago?? Gracias!!!!!!
  Responder Con Cita
Antiguo 03/10/05, 20:09:47   #22 (permalink)
iralon ha deshabilitado el Karma
 
Registrado: abr 2005
Mensajes: 2
iralon is offline  
Exclamación

Cita:
Originalmente publicado por iralon
Hola gente, muy bueno todo esto.
Yo planteo mi duda, quiero hacer un cargador que solo cargue 3 escenas de 4 que tengo. Como hago?? Gracias!!!!!!
  Responder Con Cita
Antiguo 04/10/05, 06:24:31   #23 (permalink)
xinxan22 tiene un saldo positivo de karma
 
Registrado: sep 2005
Ubicación: Barcelona
Mensajes: 184
xinxan22 is offline  
Pregunta Loadign Flash

hola, he echo una web en flash y he echo un loading (en vez de hacer que se carguen los archivos y una vez cargados se ejecute la siguiente escena, he echo un bucle de 100 y cuando llega ejecuta la escena 2)
El problema es que me sale un cuadrado blanco (donde esta el flash) y despues me carga el loading y la escena. No entiendo por que sale el cudrado blanco, porque en teoria debería de aparecer el loading ... si quereis ver el ejemplo consultad la pagian web trabucaires del renaixement y vereis a lo que me refiero (quien tenga mas de 1 MB casi que no lo vera...)
gracias espero alguna respuesta si puede ser en mi email xinxan22 @ hotmail.com
  Responder Con Cita
Antiguo 14/10/05, 19:04:51   #24 (permalink)
lemming tiene un saldo positivo de karma
 
Registrado: nov 2002
Ubicación: Parral, VII Región del Maule
Mensajes: 44
Contactar con lemming a través de ICQ
lemming is offline  
no entiendo
  Responder Con Cita
Antiguo 11/12/05, 19:25:45   #25 (permalink)
PC's Troll tiene un saldo positivo de karma
 
Registrado: jun 2005
Ubicación: Caracas-Venezuela
Mensajes: 45
PC's Troll is offline  
Todo Bien, Y La Fuente?

Saludos a todos y gracias por el Tutorial.

Ahora mi pregunta es: Cómo hago para que cada variable que muestre por pantalla tenga X tipo de fuente?

Gracias
  Responder Con Cita
Antiguo 22/12/05, 18:28:39   #26 (permalink)