Muchas veces tenemos un desarrollo que debe cargar muchas fotos externas como una galería de fotos o así también hay sitios en Flash que tienen muchas secciones y a la hora de la carga de los swf externos nos encontramos con el problema de como gestionamos las cargas de los mismos incluido a esto el problema de los cargadores, problemas de rutas y mucho mas.
Para ello flash implementa una clase que se llama MovieClipLoader con un sub conjunto de propiedades como detectores para que sepamos en tiempo real que esta sucesiendo con nuestra carga externa y así controlarla como queramos.
Un uso recomendado es cuando tenemos un sitio que tiene mucha secciones y en vez de hacer todas las secciones en un solo swf las hacemos en diferentes y con solo un contenedor en nuestra película principal las otras secciones se irán cargando a medida que el usuario las solicite y nuestras aplicasiones tendrán menos tiempo de espera en su carga.
Actionscript:
-
//carpeta donde guardamos nuestros elementos a cargar
-
var almacen:String = "elementos/";
-
//ancho de nuestra película en flash
-
var ancho:Number = Stage.width;
-
//alto de nuestra película
-
var alto:Number = Stage.height;
-
//creamos un contenedor donde se cargaran los files externos
-
//tambien puedes crear manualmente un pequeño movie clip donde va a ir el contenido le quevantemos
-
this.createEmptyMovieClip("contenedor_mc", 20);
-
//aquí creamos una transición para nuestras pelis para cuando se carguen tengan
-
//un efectito de Fade
-
//importamos los elementos necesarios para este efecto
-
import mx.transitions.*;
-
import mx.transitions.easing.*;
-
//creamos una función y le pasamos como parámetro que película debe ser afectada por el efecto
-
function fade(peli) {
-
TransitionManager.start(peli, {type:Fade, direction:Transition.IN, duration:1, easing:None.easeNone});
-
}
-
//creamos una nueva película que será un marco alrededor de la que carguemos
-
this.createEmptyMovieClip("marco_mc", 10);
-
//creamos una función para que pinte cada película que carguemos
-
function pintarMarco(target_mc:MovieClip, largoMarco:Number, altoMarco:Number) {
-
//el espesor del marco
-
var anchorMarco:Number = 20;
-
//el color del marco
-
var colorBorde = 0x00CCFF;
-
//la transparencia del marco
-
var transparenciaBorde = 100;
-
//y aplicamos los cambios
-
//uso "with" para no tener que escribir el nombre de instancia de nuevo
-
with (target_mc) {
-
beginFill(colorBorde, transparenciaBorde);
-
moveTo(0, 0);
-
lineTo(10, 0);
-
lineTo(10, 10);
-
lineTo(0, 10);
-
lineTo(0, 0);
-
endFill();
-
_width = largoMarco+anchorMarco;
-
_height = altoMarco+anchorMarco;
-
_x = contenedor_mc._x-(anchorMarco/2);
-
_y = contenedor_mc._y-(anchorMarco/2);
-
}
-
}
-
//creamos un nuevo elemento MovieClipLoader que es el encargado de controlar y cargar nuestras pelis
-
var mcLoader:MovieClipLoader = new MovieClipLoader();
-
//creamos un escuchador con el cual sabremos que esta pasando en cada proceso
-
var escuchar:Object = new Object();
-
//si se inicia y mientras este cargándose...
-
escuchar.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
-
//creamos lo necesario para averiguar el porcentaje de carga
-
var persoTotal = bytesTotal;
-
var cargados = bytesLoaded;
-
var porcentaje = Math.round(cargados*100/persoTotal);
-
//movemos la barra al porcentaje cargado
-
barraPorcentaje_mc.gotoAndStop(porcentaje);
-
//escribimos el porcentaje en modo texto en la barrita de carga
-
barraPorcentaje_mc.cargado_txt.text = porcentaje+"%";
-
};
-
//con esta función podemos asignarle propiedades antes de que se muestre
-
escuchar.onLoadInit = function(target:MovieClip) {
-
//posicionamos el elemento que s esta cargando al centro, ustedes colóquenlo donde lo necesiten
-
target._x = (ancho/2)-(target._width/2);
-
target._y = (alto/2)-(target._height/2);
-
//mostramos el marco
-
marco_mc._visible = true;
-
//pintamos y acomodamos el marco
-
pintarMarco(marco_mc, target._width, target._height);
-
//aplicamos el efecto fade
-
fade(target);
-
//como pueden ver "target" es la peli afectada
-
};
-
//si la carga comenzó
-
escuchar.onLoadStart = function(target:MovieClip) {
-
marco_mc._visible = false;
-
barraPorcentaje_mc._visible = true;
-
};
-
//si la carga finalizo
-
escuchar.onLoadComplete = function(target:MovieClip, httpStatus:Number) {
-
barraPorcentaje_mc._visible = false;
-
};
-
//
-
mcLoader.addListener(escuchar);
-
//ACCIONES SIMPLES BOTONES
-
cargarJpg_btn.onRelease = function() {
-
//en este caso llamamos a un jpg y el destino es "contenedor_mc"
-
//como contenedor_mc tiene un escuchador activara automáticamente todo lo que vimos arriba
-
mcLoader.loadClip(almacen+"1.jpg", contenedor_mc);
-
//esto es por si nuestro efecto fade se descontrola
-
contenedor_mc._alpha = 100;
-
};
-
cargarPng_btn.onRelease = function() {
-
//en este caso llamamos a un png y el destino es "contenedor_mc"
-
//como contenedor_mc tiene un escuchador activara automáticamente todo lo que vimos arriba
-
mcLoader.loadClip(almacen+"1.png", contenedor_mc);
-
//esto es por si nuestro efecto fade se descontrola
-
contenedor_mc._alpha = 100;
-
};
-
cargarSwf_btn.onRelease = function() {
-
//en este caso llamamos a un swf y el destino es "contenedor_mc"
-
//como contenedor_mc tiene un escuchador activara automáticamente todo lo que vimos arriba
-
mcLoader.loadClip(almacen+"1.swf", contenedor_mc);
-
//esto es por si nuestro efecto fade se descontrola
-
contenedor_mc._alpha = 100;
-
};
20 marzo, 2007 at 6:28 am
Buenisimo el ejemplo! Felicitaciones!
Y este mismo ejemplo se puede usar para cargar, por ejemplo, varias películas, pero que el cargador vaya cargandolas simultáneamente? Y mostrando el texto (ej)
Cargando Item 1
Cargando item 2
etc cada uno con su linea que muestra el progreso...
se entiende?
lo intenté pero no me salió..
saludos desde chile.
Diego.
24 abril, 2007 at 4:33 pm
exelente ejemplo... !!lo felicito¡¡
4 julio, 2007 at 3:52 pm
hola, he estado mirando muchas galerias, de todo tipo, las sè personalizar, (ejemplo: una q personalize para hacer esta pagina http://www.fotoserrano.com), pero ahora necesito q me aparezcan una imagenes, q pasen una a una en transicion, pero.... q me las carge centradas (ya q son de diferente tamaño), tu ejemplo las carga centradas, super bien, pero como hago para no tener q colocar ni ningun boton ni ninguna miniatura. q apenas carge el swf empiece la presentacion. gracias!
8 agosto, 2007 at 12:56 pm
otra felicitación más... genial!
8 mayo, 2008 at 12:52 pm
Felicitaciones tambien muy buen código, una preguntita como le hago para cerrar la película cargada?..
Saludos
27 junio, 2008 at 10:17 am
Hola Leo, la verdad es que es muy bueno tu trabajo y admirable como compartis tus conocimientos. Respecto a este tutorial: necesito hacer que las imágenes se carguen solas, sin llamarlas de un botón, con un intervalo de tiempo entre ellas, loop y si es posible con un efecto de blur de transición.
Auxilio!
Muchas Gracias
Saludos
8 agosto, 2008 at 9:35 am
Muy bueno tu código, mi amigo
20 septiembre, 2008 at 2:23 pm
hola leo, me ha sido muy útil tu código pero tengo un problemilla y llevo días investigando pero no encuentro la solucion. Te cuento, he usado tu código para cargar distintos swf, lo que pasa es que cuando paso de uno a otro siempre se mantiene el anterior por debajo, es decir sus botones. te mando un trozo de código relativo a uno de los botones de menú
si supieras qué está pasando me ayudarías mucho. un saludo y gracias
23 septiembre, 2008 at 1:42 am
carga todos tus swf en un mismo contenedor, por lo visto utilizas 2 diferentes "contenedor_mc" "contenedor1_mc" si los cargas en el mismo contenedor la nueva carga eliminara la anterior!
25 noviembre, 2008 at 11:34 am
Muy bueno tu codigo, pero yo tambien tengo un problema, ¿hay alguna forma de poner un boton para cerrar el contenedor? Gracias
25 noviembre, 2008 at 10:15 pm
6 febrero, 2009 at 8:13 am
Tengo un problema que creo que este codigo puede solucionar pero no consigo aplicarlo.
Tengo una serie de imágenes que se cargan de manera aleatoria con random dentro de un clip vacio con un alpha de 0 a 100 , las precargas normales precargan otros elementos pero el .jpg aleatorio, tarda en salir una vez ya realizada la precarga.
Intente adaptar el codigo pero no consegui el objetivo, siento el tostón pero si me pudieran dar una pista por donde tengo que ir, lo agradecería.
Saludos *
10 febrero, 2009 at 10:19 pm
Johnny te envie la respuesta por email, gracias
11 febrero, 2009 at 12:47 am
Buen dia
Estoy desarrollando un sitio donde mando llamar o cargo (como lo quieras llamar) un .swf, pero al aparecer no realiza ninguna accion, es una galeria que sola funciana bien, espero puedas apoyarme en la mejor alternativa para este caso.
11 febrero, 2009 at 7:31 pm
en la primera línea y primer frame de tu galería coloca lo siguiente:
11 febrero, 2009 at 10:33 pm
muchas gracias por esta linea, funciono bien
20 marzo, 2009 at 11:12 pm
Hola Leo: serías tan amable de explicar a este docente inexperto en flash como soy yo, este dilema:
1º quiero cargar un swf externo a mi peli flash(el swf es un fragmento de video)
2º Este primer paso lo he resuelto pero el swf se reproduce constantemente en bucle, y obviamente me gustaría controlarlo para q los alumnos hagan lo propio con sus respectivos botones.
3º La idea es hacer un exe de flash
4º Resumiendo : me gustaría que cualquier alumno pulsando un botón reprodujese el swf, y a su vez tb pudiese deternerlo a su voluntad.
Esperando no haber abusado de tu paciencia, un docente de Bilbao
21 marzo, 2009 at 12:56 am
Rik Me podrias decir si el video que cargas es en formato FLV?
21 marzo, 2009 at 11:08 am
Leo, la verdad es que pruebo con swf y flv.
Gracias por tu amabilidad
21 marzo, 2009 at 5:00 pm
Rik, la respuesta y ejemplo te lo envie a tu email.
21 marzo, 2009 at 9:44 pm
Gracias Leo; eres muy amable.
22 marzo, 2009 at 7:21 pm
Leo, estoy en ello, ok? Cualquier duda te lo digo.
Jamás pensé q por la red hubiera gente como vos, preparada en el tema y ATENTA. Los vascos sabemos agradecer.
6 julio, 2009 at 5:26 pm
Hola muy bueno tu tutorial, pero creo un moviclip manual para que alli se descarguen los swf, o jpg, pero no lo hace, devo cambiar la instancia contenedor o que...Gracias por la respuesta ojala pudiera enviarme un ejemplo fla.Un abrazo
6 julio, 2009 at 5:28 pm
Se me olvido preguntar si se puede linkear la barra (loadbar) para que se llame solo cuando vaya a carga algo.Gracias nuevamente
9 julio, 2009 at 4:36 pm
Uyyyy muchisimas gracias por al codigo :this._lockroot = true; en realidad me salvo de una, tenia el mismo problema de Roberto y llescas, fue como caido del cielo, pase toda la noche depepitandome hasta qque me acorde donde lei eso y pues AQUI GENIAL
21 diciembre, 2009 at 7:35 pm
Hola Leo:
Antes que nada te quiero agradecer por compartir tu conocimiento que veo que es mucho y de buena calidad con todos los internautas del mundo. Tu ejemplo de precarga lo modifiqué para acomodarlo a mi diseño y te comento que en las sucesivas pruebas he notado que la película cargada comienza al 80%. Se reproduce antes de que la barra de preloader llegue hasta 100%. Con todo respeto te pregunto a que se debe ese comportamiento y cuál sería su solución. Desde ya Muchísimas gracias. Saludos, Pablo.
21 diciembre, 2009 at 11:35 pm
Hola Pablo, gracias por tus comentarios y me gusta mucho cuando los usuarios cuando preguntan o me indican si me equivoque en algo, porque de esa manera incentivan a que haga mas cosas. Pensando en el problema que me comentas, es extremadamente extraño que se de con el uso del movieClipLoader, no sera que estas usando el cargador que esta en este link http://www.leobaraldi.com.ar/2008/01/precarga-de-una-pelicula-dentro-de-otra-pelicula/ en vez de este? confírmame si es asi o no porque ya me entro la duda el problema que tenes :) nuevamente muchas gracias por aportar a la web!!
22 diciembre, 2009 at 3:07 pm
Hola Leo: Utilicé este mismo preloader de esta página y debido a que realizo pruebas con el simulador de descargas de flash CS3 comprobé que en velocidades bajas se nota ese desfasaje que te comenté. Pero Cuando realizé la prueba en el servidor no ví ese comportamiento ya que al cargar rápido da la sensación de que llegò a 100% y comenzo la reproducción. Pero en una ocación probando en una laptop y de conexión lenta pude comprobar que al 78-81% veia por detrás de la barra de precarga la pelicula flash que había comenzado. He buscado en la web el motivo de ese comportamiento y en una respuesta han mencionado que Flash hace eso por defecto. Es decir que larga la pelicula ya cargada sin esperar la confirmación por medio de actionscript. Todo esto salió porque me interesa meter mano y entender el código. No soy programador pero me las rebusco como puedo. Mi profesión es el diseño. Volviendo al tema agrego que de ninguna manera considero este comportamiento de flash un error tuyo de programación. Mi intención es saber ante un comportamiento no lógico (considero no logico que la pelicula se reproduzca antes que le avise el actioscript que lo haga) la manera de solucionarlo. Para poder apreciar mejor ese comportamiento en la simulación de descarga del Flash Cs3 yo lo probé con un archivo de 2mb a 14.400 de velocidad de transmición.
Leo Gracias por tu interés en responderme. Me gustaría contar contigo para consultarte futuros problemas de programación.
Saludos.
24 diciembre, 2009 at 3:12 am
se me ocurre que quizás colocando un stop() en la peli que se carga y con el evento init llamar una función que de play se solucionaría, pero es verdad, hice unas pruebas y pasa eso que mencionas, ya veré que solución se le puede dar, si sabes de algo bienvenido será tu aporte, desde ya te agregue a mis contactos para que podamos charlar mas de estos casos e intercambiar opiniones o problemas, feliz navidad!!!
8 abril, 2010 at 9:36 am
Hola, muy útil el código. Tengo una consulta. En la página principal tengo un fondo de imágenes en transición. Cómo hago para que al pasar a otra sección este fondo se borre, ya que me queda abajo.
Utilice en pag. ppal un cargador y deje fijo solo el menú
Gracias
24 abril, 2010 at 12:06 am
Hola LeoBaraldi, he estado leyendo varios comentarios de la gente y tus respuestas y la verdad que me gustaria si es posible que me indicara porqué cuando quiero cargar sample10.swf (archivo creado con el programa Aneesoft 3D Flash Gallery) en mi otro flash (pueba.SWF) no me lo carga ?? y en cambio si me carga otros arhivos *.SWF no hechos por la aplicacion Aneesoft ?? Existe algun problema ?? la funcion que uso para cargar el sample10.SWF externo es on (rollOver) {loadMovie("sample10.swf", "Punto1Studio");}
on (rollOut) {unloadMovie("Punto1Studio");} (que estoy haciendo con el Adobe flash CS4 profesional. Ya me comentara alguna cosa... y Muchas gracias por su atencion muy interesantes sus explicaciones !!
12 julio, 2010 at 8:30 am
Hola, estoy modificando la web y este ejemplo me viene muy bien, pero tengo un problema es posible que antes de cargar vaya a un frame y después cargue?.
La intención es dar al botón ir a un frame y después cargar el .swf externo.
22 julio, 2010 at 9:16 am
Hola LeoBaraldi. Le comento una inquietud. Estoy trabajando con MovieClipLoader, y cargo un swf el cual tiene una estrada de texto, la cual funciona si reproduzco el swf solo pero no funciona cuando es cargado dentro de otro swf, simplemente no puedo seleccionar la entrada de texto.
No puedo encontrar posibles causas del problema. Agradecería me oriente por donde buscar. Muchas Gracias!!
13 enero, 2011 at 2:31 pm
es posible cargr externamente una imagen en formato .psd es que tengo una web en donde si o si la imagen debe ser transparente debido a que debe verse la animacion del fondo.
y como es un logo y no quiero perdida de calidad hace muy pesado el .swf
muchas gracias desde ya!
3 octubre, 2011 at 8:03 pm
Hola, cómo hago para cargar una película pero que en vez de cargarla al apretar el botón la cargue al llegar a cierto fotograma. Podrías ayudarme? Gracias!!
18 octubre, 2011 at 4:02 pm
Cómo hacemos para que la película que cargamos de manera externa (loadmovie), respete el centrado de nuestra película raíz.
Creo que es utilizando la variable target. Muchas gracias.
11 enero, 2012 at 1:26 pm
como sería en AS3???? pero sin botones y que las imagenes roten