Dificultad 
Cuando tenemos un web que hace uso de muchas imágenes, corremos el riesgo de crear una película demasiado pesada, la solución
pasa por cargar los archivos de imagen externamente, es decir, no están en nuestra biblioteca, sino en una carpeta del servidor y se cargan cuando son necesarias, un ejemplo claro sería un portafolio de un fotógrafo, donde seguramente habrian thumbnails que al ser clicados mostrarí an una ampliación de la imagen. Este ejemplo contempla un caso más sencillo, pero es un primer paso.
Vamos a pasar por varias etapas, cada una de ella completamente funcional y a medida que avanzemos iremos añadiendo funcionalidades nuevas.
Básico:
this.createEmptyMovieClip("cargador",1)
this.cargador._x=0
this.cargador._y=0
this.cargador.loadMovie("../img/robot_flasxl.jpg")
Avanzado:
No está mal, hemos conseguido nuestro principal objetivo, pero podemos mejorarlo si añadimos una precarga
this.createEmptyMovieClip("cargador", 1);
this.createTextField("porcentaje", 2, 0, 0, "200", "16");
this.cargador._x = 0;
this.cargador._y = 0;
this.cargador.loadMovie("../img/robot_flasxl.jpg");
//
this.onEnterFrame = function() {
this.cargador.percent = (this.cargador.getBytesLoaded()/this.cargador.getBytesTotal())*100;
if (!isNan(this.cargador.percent)) {
this.porcentaje.text = Math.round(this.cargador.percent)+" %";
}
if (this.cargador.percent == 100) {
delete this.onEnterFrame;
}
};
Ya tenemos un cargador de imágenes en toda regla, vamos a mejorar algunos aspectos gráficos, primero añadiremos un marco a la imagen.
this.createEmptyMovieClip("cargador", 1);
this.createTextField("porcentaje", 2, 0, 0, "200", "16");
this.cargador._x = 0;
this.cargador._y = 0;
this.ancho = 300;
this.alto = 366;
this.cargador.loadMovie("../img/robot_flasxl.jpg");
//
with (this) {
lineStyle(2, 0x000000, 100);
moveTo(this.cargador._x, this.cargador._y);
lineTo(this.cargador._x+this.ancho, this.cargador._y);
lineTo(this.cargador._x+this.ancho, this.cargador._y+this.alto);
lineTo(this.cargador._x, this.cargador._y+this.alto);
lineTo(this.cargador._x, this.cargador._y);
}
this.onEnterFrame = function() {
this.cargador.percent = (this.cargador.getBytesLoaded()/this.cargador.getBytesTotal())*100;
if (!isNan(this.cargador.percent)) {
this.porcentaje.text = Math.round(this.cargador.percent)+" %";
}
if (this.cargador.percent == 100) {
delete this.onEnterFrame;
}
};
Ahora añadiremos un efecto fadeIn, cuando la imagen esté totalmente cargada, aparecerá paulatinamente, para ello usaremos
una función que aumente la propiedad _alpha del clip de película ‘cargador’ desde 0 a 100. Este es resultado final:
//función FX fadeIn
//Previamente hemos asignado el valor 0 al clip de película cargador
alfa = function (clip) {
this.createEmptyMovieClip("loop", 3);// creamos un clip de pelicula para hacer un loop
loop.onEnterFrame = function() {
clip._alpha += 10;
if (clip._alpha>=100) {
delete loop.onEnterFrame;// eliminar loop
}
};
};
// crear un clip vacio para cargar la imagen
this.createEmptyMovieClip("cargador", 1);
// crear un campo de texto para mostrar el porcentaje cargado de la imagen
this.createTextField("porcentaje", 2, 10, 10, 200, 16);
// situamos el clip de película en la posición que nos conviene
this.cargador._x = 0;
this.cargador._y = 0;
// este es el tamaño de la imagen, nos hace falta paa crear el marco
this.ancho = 300;
this.alto = 366;
// cargar la imagen
this.cargador.loadMovie("../img/robot_flasxl.jpg");
this.cargador._alpha = 0;
// dibujar marco
with (this) {
lineStyle(2, 0x000000, 100);
moveTo(this.cargador._x, this.cargador._y);
lineTo(this.cargador._x+this.ancho, this.cargador._y);
lineTo(this.cargador._x+this.ancho, this.cargador._y+this.alto);
lineTo(this.cargador._x, this.cargador._y+this.alto);
lineTo(this.cargador._x, this.cargador._y);
}
// precarga
this.onEnterFrame = function() {
// calculamos el porcentaje cargado
this.cargador.percent = (this.cargador.getBytesLoaded()/this.cargador.getBytesTotal())*100;
// mostrar porcentaje
if (!isNan(this.cargador.percent)) {
this.porcentaje.text = Math.round(this.cargador.percent)+" %";
}
// imagen cargada
// cargamos la función para el fx y eliminamos el campo que muestra el porcentaje
if (this.cargador.percent == 100) {
this.porcentaje.removeTextField()
alfa(this.cargador);
delete this.onEnterFrame;
}
};
Como he dicho en un principio, cada etapa que hemos pasado es completamente funcional, te aconsejo, que pruebes cada etapa
para entender mejor el funcionamiento. Para visualizar el progreso del campo que muestra el porcentaje, deberás subir el archivo a un servidor, puedes hacerlo en local, pero no verás este valor.
Para evitar la proxicache, substituye :
this.cargador.loadMovie("../img/robot_flasxl.jpg");
por la siguiente línea
this.cargador.loadMovie("../img/robot_flasxl.jpg?id="+random(1000));
Descargar archivos » (6939 hits)
Enero 4th, 2004 at 3:02 am
Genial, es justo lo que andaba buscando para mi portafolio
Parece muy completito.
)
Sólo echarí a en falta que hubiese un ejemplo on-line (pa vagos
Salu2
Enero 4th, 2004 at 3:28 am
Mendi colega! endeluego, al final del articulo se lee:
Esto es todo, si has llegado hasta aquí , gracias por leerme. Por si me he equivocado en algo, aquí puedes descargarte un ejemplo.
No seas tan vago y leelo todo!
;-)
Saludos!
Enero 4th, 2004 at 6:01 am
Genial, en verdad que me da gusto ver personas que en verdad saben y ademas comparten sus conocimientos con otras personas que pueden o no ser del mismo nivel que vos.
Enero 4th, 2004 at 8:06 pm
Felicidades por la web, porque creo que es muy interesante. Estare al loro de nuevas noticias.
Un abrazo!!!!!!!
Enero 4th, 2004 at 9:29 pm
Gracias, intentaré que cada visita sea provechosa.
saludos.
Marzo 26th, 2004 at 1:59 am
Muchas gracias por tu ayuda, es genial. Yo no soy muy entendido en Flash así que despues de ver esto me ha surgido una duda ¿cómo puedo colocar la imagen que creo dinámicamente dentro de una capa en especial? es decir, los objetos cargados dinámicamente siempre me quedan encima y yo quiero poder cargar por ejemplo unas imágenes de fondo ¿cómo podrí a hacer esto?
Muchisimas gracias por vuestra ayuda
Agosto 14th, 2004 at 12:27 pm
Si en lugar de crear el clip cargador con CreateEmptyMovieClip lo creas a mano, y lo pones en la capa del fondo, podrí as conseguirlo.
Otra opción serí a, por ejemplo, que cargases el resto de elementos con attachMovieClip en niveles superiores al del mc “cargador". Seguro que hay otras formas
Agosto 24th, 2004 at 11:46 am
no funciona con gifs transparentes verdad?:-( no hay ninguna forma? Gracias el script es muy bueno.
Agosto 24th, 2004 at 12:01 pm
Puedes crear 1 swf con cada imagen y usar el mismo fla, solo que en lugar de cargar un JPG cargas un swf, el resultado nadie lo notará.
Claro está que esto es si tienen que ser gifs, lo recomendable (sobre todo por ahorro de tiempo) es usar JPG.
Saludos
Noviembre 10th, 2004 at 12:46 am
hola:
esta sxuper genial, solo tenia una duda: puedo ponerlo en un boton para q llame a la foto? puedo jalar varias una detras de otra? por favor te agradeceria una ejemplito de descarga
Noviembre 10th, 2004 at 7:11 pm
Hola Martha, puedes usarlo desde un botón, por ejemplo:
miboton.onRelease=function(){
clipdepeliculacargador.loadMovie(""nombredelarchivo.jpg");
}
saludos
Noviembre 29th, 2004 at 10:47 pm
Hola Toni,
quiero cargar mis fotos en la web de mejor forma, estoy emigrando a Flash, tengo MX.
Me encanta el cargador de fotos de www.ciberimagen.com que junto con la carga de cada imagen tiene un seguimiento muy original a la dcha para cada imagen. He pasado por muchos tutoriales, no encuentro algo así .
He utilizado en www.marsilka.com/Galeria.html un cargador pero quiero algo más sencillo visualmente.
Saludos, Ana
Enero 27th, 2005 at 10:07 pm
Hola Tonilopez,
el tutorial genial. Muchas gracias por compartir tu experiencia.
Estoy preparando una web con esta idea cargando imagenes dinámicamente. Para ello difinà una variable a la que llamo “id” y le doy el valor de 1 con lo que consigo que me cargue la imagen “imagen1″.
// this.cargador.loadMovie("img/imagen"+id+".jpg");
La idea es poder subir la carpeta del servidor fotos y que se vayan incorporando dinámicamente. Pero tengo 2 problemas que no consigo solucionar:
1- Me cargan en el vertice superior izquierdo del clip “cargador". Se puede poner como referencia el centro del clip para que salgan centradas tanto si son verticales como horizontales? o como se puede hacer?
2- A los botones les defino la variable id al princio con id=– y id=++ respectivamente para que vaya abriendo por orden las fotos pero el problema es cuando se acaban las fotos. Como se define unos valores , por ejemplo, entre id=1 y id=10 y si llega a la 10 que vaya al la 1 o que abra un clip que diga FIN ??
O lo mejor serÃa que contase automáticamente cuantas imagenes hay y realize lo mismo, no? pero ahà ya no llego .
Asà que aquà dejo este post para ver si consigo avanzar con vuestra ayuda.
Muchas gracias.
Noviembre 9th, 2005 at 8:57 pm
Hola a todos. Es la primera vez que escribo porque ya estoy deseperadÃsimo. Me ha venido muy bien el tutorial de cargar imágenes externas a flash. Estoy haciendo una página web con mis trabajos y cuando me carga las fotos me salen superpixeladas y no se porqué, ya que las imágenes las guardo con buena calidad y cuando las veo en mi ordenador se ven muy bien pero en la web no. La página web que estoy haciendo se llama http://personales.ya.com/javierurraco por si kereis verla para comprobar lo que digo. Las secciones en las que de momento he introducido imágenes son la de fotografÃa e ilustraciones. Ayudadme por favor. OS LO AGRADEZCO
Noviembre 10th, 2005 at 6:38 am
Yo veo las imágenes muy bien, pero puedes mejorar usando la propiedad ‘_quality’ cuyos valores pueden ser:
LOW
MEDIUM
HIGH
BEST
Tambien puedes modificar la calidad de las imagenes que estén en la biblioteca haciendo clic en propiedades, desmarcas la casilla ‘Used imported JPEG data’ y puedes cambiar el nivel de compresión.
La mejor solución (si trabajas con mapas de bit en la biblioteca) es importar PNG
Noviembre 17th, 2005 at 10:22 pm
Super bueno el Script, sólo me queda una duda. Cómo puedo hacer para que al cliquear el la imagen externa abierta esta se cierre.
AgradecerÃa una pespuesta
Noviembre 18th, 2005 at 6:31 am
Escribes:
cargador.onRelease = function(){
this.unloadMovie()
}
saludos
Noviembre 21st, 2005 at 9:43 pm
Muy buen ejemplo ….me podrias decir como hacerle para que llame las imagenes…pero a la vez que esta imagen tenga ciertos botones con tooltips …es que estoy haciendo unos mapas geograficos y cada uno de los botones da informacion acerca de unas trampas de insectos ….ya lo eh intentado ….pero el tooltip lo lee abajo de la imagen y eh intentado cambiar de orden las capas ..pero no me resulta….no se si me explique bien ….espero me puedas ayudar!!
Noviembre 22nd, 2005 at 6:39 am
Hola Juan, estaremos encantados de ayudarte, pero deberÃas dirigir tus preguntas al foro:
En el foro podrás plantear mejor tu problema y podrás contrastar las opiniones de diferentes flasheros.
Sobre lo que comentas, no sé hasta que punto entiendo lo que necesitas, pero según lo que me cuentas, lo que tienes que hacer es:
1. poner una imagen en el escenario (no la cargaria externamente)
2. Crear un botón movieclip para cada zona sensible
3. Crear el tooltip
Te dejo un par de enlaces que te pueden ayudar con esto:
un buen tooltip
Por si no has trabajado con moviclips como botones
Te esperamos en el foro
Febrero 12th, 2006 at 7:41 pm
y como hago para que la imagen se posicione en el lugar que deseo?
Febrero 13th, 2006 at 12:57 am
Si te fijas, la imagen es cargada en un clip de pelÃcula con nombre de instancia cargador. Lo que tienes que hacer, es modificar las propiedades _x _y de ese clip de pelÃcula. Por ejemplo:
this.cargador._x = 100;
this.cargador._y = 100;
Esto situará la imagen en _x = 100 _y=100
Si tienes mas dudas, utiliza el foro
Saludos
Marzo 16th, 2006 at 12:53 pm
Hola. Muchas gracias por este código. Es perfecto. Quería introducir la siguiente mejora. ¿Como podría dar al texto de carga de imágenes el formato, color, tamaño… que quiera? Me hago una idea pero no me sale.
Marzo 16th, 2006 at 12:59 pm
Hola. Gracias por el código. ¿Como se asignaría un estilo a las letras del porcentaje?
Mayo 1st, 2006 at 8:10 am
hola
tengo un problema, todo me sale muy bien pero al cambiar de frame me sigue apareciendo la imagen y no quiero que suceda eso, ¡que puedo hacer para que al ir al otro frame desaparezca?.
gracias
Mayo 2nd, 2006 at 1:25 pm
Hola Hector, como supongo que estarás trabajando con varias capas; en la capa donde cargas las imágenes, en el fotograma donde no quieres que se vea, inserta un fotograma vacio (F5)
Saludos
Mayo 2nd, 2006 at 3:26 pm
hola!!!
se que mi duda no tiene nada que ver con este tutorial, pero es que no encuentro el sitio adecuado donde preguntar,
Resulta que he hecho mi pagina web en un mac con flash MX 2004, y ya esta en la red, si lo abro con un mac se ve bien, pero la gente que lo ha visto con un PC, me dice que el texto se ve todo muy pekeño… lo he hecho mas grandde (a mi ya me parece exagerado) y la gente desde el pc , me sigue diciendo que se ve pekeño, no entiendo nada, será que hay algun tipo de incompatibilidad o que tengo que poner algun codigo de tamaño de letra para que un pc lo lea bien??, es que hasra cambie la fuente por una que fuera mas clara, y nada
iria
Mayo 2nd, 2006 at 6:14 pm
iria, lo que te ocurre tiene solución. El problema es que yo no trabajo con mac, pero sé que en el foro se ha hablado alguna vez de ello. Te recomiendo que consultes en el foro donde muchos amigos te pueden ayudar.
Foro: http://www.after-hours.org/foro/
Un saludo
Mayo 17th, 2006 at 11:48 am
Hola Toni:
En primer lugar agradecer a gente como tú la generosidad que demostrais con la comunidad a la hora de razonar y explicar estos códigos.
En segundo lugar plantearte un pequeño problema para el que no encuentro solución.
Verás, cargo las imágenes dinámicamente, creo los contenedores de la misma forma, todo perfecto… a excepción… las imágenes provienen de clientes y su tamaño es variable, puedo adaptar dicho tamaño global al tamaño del contenedor?
Por ejemplo, una imágen puede ir desde los 800x600 a los 1024… etc. pero el espacio reservado para dicha imágen es de 100 px X 100 px… con _xscale e _yscale se vuelve a escapar pues es un escalado sobre un ancho y alto que no es fijo… con _heigth y _width… sólo modifico el contenedor, e incluso he creado una class con una funcíón para el loadmovie dinámico y aplicar allí el height y el width… pero nada… alguna solución? hace tiempo creo recordar que lei algo al respecto…
Muchas gracias de antemano…
David Moreno.
Mayo 17th, 2006 at 2:16 pm
Hola David, puedes hacer lo siguiente:
this.createEmptyMovieClip("image_mc", this.getNextHighestDepth());
var mclListener:Object = new Object();
mclListener.onLoadStart = function(target_mc:MovieClip) {
target_mc.startTimer = getTimer();
};
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._width = 100;
target_mc._height = 100;
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("http://www.after-hours.org/blog/img/top2.jpg", image_mc);
Saludos
Mayo 23rd, 2006 at 4:18 pm
Este codigo es muy bueno ya le hice algunas modificaciones y me esta quedando de lujo, solo q tengo una duda, al querer verlas imagenes en Firefox:
1.- La cuenta del cargador la deja en 0% y de ahy no se mueve.
2.- No muestra ninguna imagen.
En cambio en Explorer las muestra muy bien.
A q se debera.