Comunidad de diseño web y desarrollo en internet online

¿PQ se me descentra el mc? (precargas múltiples)

Citar            
MensajeEscrito el 01 Jun 2009 09:04 pm
Hola a todos, tengo este script:

Código ActionScript :

var cargador:MovieClipLoader = new MovieClipLoader(); 
cargador.addListener( this ); 

this.createEmptyMovieClip("elClip1", this.getNextHighestDepth() ); 
this.createEmptyMovieClip("elClip2", this.getNextHighestDepth() );

this.elClip1.createEmptyMovieClip("_contenedor1", 0 ); 
this.elClip2.createEmptyMovieClip("_contenedor2", 1 );

cargador.loadClip("publicaciones/miniaturas/1.jpg", this.elClip1._contenedor1 );
cargador.loadClip("publicaciones/miniaturas/2.jpg", this.elClip2._contenedor2 );

//la posicion es la del centro
elClip1._x=429;
elClip1._y=148;

elClip2._x=543;
elClip2._y=148;


En realidad, son muchos , pero os he puesto sólo dos, que es suficiente, pues es lo mismo en todos, pues bien, estoy intentando que a cada clip q se va cargando añadirle una precarga, pero cada vez que lo intento, las imagenes que se cargan se descolocan, se me desplazan todas unos pixeles más abajo y más a la derecha, todas se desplazan lo mismo.

La precarga lo he intentado hacer así, cómo muestro en este code (con una sola imagen):

Código ActionScript :

/*Ahora, creo dos mc's dinamicamente, uno el principal, y otro dentro de él, para centrar la imagen, y cargo las imagenes externamente*/
var cargador:MovieClipLoader = new MovieClipLoader(); 

this.createEmptyMovieClip("elClip1", this.getNextHighestDepth() ); 
this.elClip1.createEmptyMovieClip("_contenedor1", 0 ); 

var mcload:MovieClipLoader = new MovieClipLoader();
var mclist:Object = new Object();
mclist.onLoadStart = function(clip:MovieClip) {
   trace("Iniciar Carga")
   _root.attachMovie("loadingID", "loading", _root.getNextHighestDepth());
   //Ubicamos la barra en las coordenadas del elclip
   _root.loading._y = elClip1;
   _root.loading._x = elClip1;
}
mclist.onLoadProgress = function(clip:MovieClip) {
    trace("Cargando...");
   //Declaramos la variable de calculo de porcentaje
   var porcentaje:Number;
   //Calculamos el porcentaje con las variables que le llegan por parametro a la función
   porcentaje = Math.round((loadedBytes*100)/totalBytes);
   //Vamos al frame del porcentaje en nuestra barra de carga
   _root.loading.gotoAndStop(porcentaje);
   //Ahora escondemos el objeto de la precarga y lo frenamos
   clip._visible = false;
   clip.stop();
}
mclist.onLoadInit = function(clip:MovieClip) {
       trace("Carga Completa");
   _root.loading.removeMovieClip();
   //Y mostramos el objeto
   clip._visible = true;
   clip.play();
}
cargador.addListener(mclist);
cargador.loadClip("publicaciones/miniaturas/1.jpg", this.elClip1._contenedor1 );
//la posicion es la del centro
elClip1._x=429;
elClip1._y=148;


Pero no hay forma, se me descolocan, quizás no es la manera más adecuada de añadir múltiples precargas a múltiples imagenes cargadas a la vez (que aunque en mc's distintos) todos aparecen en la misma escena.

Si alguién sabe porqué me ocurre ésto, se lo agradecería... y sino.... cómo puedo añadir las precargas?? algún tuto o algo??

Mil gracias :)

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jun 2009 08:55 am
El clip lo sitúas en el centro pero las imágenes se cargarán situando su esquina izquierda superior en este punto, por lo que las mismas no te quedarán centradas.

Lo que puedes hacer es que en el evento onLoadInit calcules el tamaño de la imagen y la situes en el centro de la pantalla:

Código ActionScript :

mclist.onLoadInit = function(clip:MovieClip) { 
      
    _root.loading.removeMovieClip();

    clip._x = (Stage.width - clip._width) / 2;
    clip._y = (Stage.height - clip._height) / 2;   

    clip._visible = true; 
    //clip.play(); Como te dije en otro post no hace falta que reproduxcas nada (se trata de una imagen)
} 

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 02 Jun 2009 04:25 pm
Pues no me funciona... pero mira... si al code que yo puse antes, justo a continuación de lo último que se ve, pongo otra funcion onloadinit, así (he añadido para ajustar el tamaño tb):

Código ActionScript :

function onLoadInit(target:MovieClip):Void 
{ 
   target._width = Math.min(target._width, 100); 
   target._height = Math.min(target._height, 100); 
   target._x -= target._width / 2 ;    
   target._y -= target._height / 2 ;  
} 


Si que me lo centra, me lo deja todo centrado y ajustando al tamaño de 100px, pero si ese script lo meto dentro del anterior onloadinit, y target, lo cambio por "clip" pues ya deja de funcionar ¿pq?

Y otra cosa que no me había fijado pq estaba centrada en el tema de la alineación, y es lo más IMPORTANTE, ¿pq no se ve el preload?

A unas malas, el centrado pues lo q puedo hacer es cambiar las coordenadas (es una putadilla, pero bueno), pero el loading, sí que necesito que se muestre... ¿pq no se muestra?

Gracias de nuevo.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jun 2009 06:15 pm
¿Lo que quieres es cargar varias imágenes, cada una con su propio movieclip cargador? Si es así, yo haría una clase a la que pasarle los parámetros del movieclip que las contendrá, la posición, el tamaño y el nombre, y que la clase gestione el resto.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 02 Jun 2009 06:26 pm
Exacto.

Tengo un índice de imágenes q se muestran en un escenario , y que cada imagen tenga su propio loading.

Y me parece una gran idea lo que me sugieres, pero no sé cómo llevarla a cabo, algún ejemplo o tuto que me ayude a hacer lo que me dices??

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jun 2009 06:46 pm
He modificado una clase que hice hace unos meses a tu caso. Espero que te sirva:
En un módulo de clase llamado "ImageLoad":

Código :

class ImageLoad {
   
   private var container_mc:MovieClip;
   private var image_mc:MovieClip;
   private var loader:MovieClip;
   
   public function ImageLoad(target_mc:MovieClip, name:String, x:Number, y:Number, w:Number, h:Number) {
      container_mc = target_mc.createEmptyMovieClip(name ,target_mc.getNextHighestDepth());
      image_mc = container_mc.createEmptyMovieClip("image_mc", container_mc.getNextHighestDepth());
      
      var image_mcl:MovieClipLoader = new MovieClipLoader();
      var mclListener:Object = new Object();
      
      mclListener.onLoadInit = function(target:MovieClip) {
         target._width = w;
         target._height = h;
         target._x = x;
         target._y = y;
      }
      mclListener.onLoadStart = function(target:MovieClip) {
         loader = target_mc.attachMovie("loadingID", "loader" + name, target_mc.getNextHighestDepth());
         loader._x = x;
         loader._y = y;
      }
      mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
         var loaded:Number = Math.round((bytesLoaded * 100) / bytesTotal);
         loader.gotoAndStop(loaded);
      }
      mclListener.onLoadComplete = function(target:MovieClip, httpStatus:Number):Void {
         loader.removeMovieClip();
      }
      image_mcl.addListener(mclListener);
      image_mcl.loadClip(name + ".jpg", image_mc);
   }
}


Y para usarlo, pones "ImageLoad.as" en la misma carpeta de tu .fla, importas la clase, y creas las instancias que quieras. Aquí te pongo un ejemplo:

Código :

import ImageLoad;

var imageLoad1 = new ImageLoad(this, "aini", 50, 50, 200, 200);
var imageLoad2 = new ImageLoad(this, "diyici", 100, 100, 200, 200);

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 02 Jun 2009 07:10 pm
Jolines, millones de gracias... ahora mismo me pongo a probarla y enseguida te cuento, a ver qué tal fue...

Por cierto, los parámetros una vez que se crea la instancia de la clase, ¿ como son exactamente? (this(ruta), aini(el mc) 50 50 200 200.... son primero las coordenadas x e y, y luego tamaño??? o como va??

Gracias y mil gracias.... :D

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jun 2009 07:19 pm
Ah, sí, los parámetros...
ImageLoad(target_mc:MovieClip, name:String, x:Number, y:Number, w:Number, h:Number)

-target_mc: MovieClip donde se crearán las imágenes
-name: nombre del archivo de imagen (sólo está hecho para jpg que estén en la misma ruta que el fla, pero en el loadClip puedes cambiar la ruta y la extensión)
-x: coordenada x
-y: coordenada y
-w: ancho
-h: alto

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 02 Jun 2009 08:41 pm
Jo... estoy liada con ello, pero no consigo q me cargue las imagenes, quizás estoy haciendo algo mal... te explico cómo lo estoy haciendo, a ver dónde estoy fallando:

En el .as que me distes, en la última línea, lo modifiqué para añadirle la ruta de dónde se encontraba las imagénes, de esta forma:

Código ActionScript :

image_mcl.loadClip("publicaciones/miniaturas/"+ name + ".jpg", image_mc);


Y luego ya en mi flash, con nombre de vinculación "loadingID" el preloader, y luego en as, lo siguiente (sólo pongo dos mc's, pero en realidad son 15:

Código ActionScript :

import ImageLoad;

var imageLoad1 = new ImageLoad(this, "1", 429, 148, 100, 100);
var imageLoad2 = new ImageLoad(this, "2", 543, 148, 100, 100);


Y nada más... no hay más....
los números "1" y "2" son los nombres de los .jpg's. 429 la pos x , 148 la pos y, y los 100 el tamaño.

¿entonces? tengo q modificar algo más q se me escapa? las rutas las he comprobado dos veces, y están bien :S...

Espero tu orientación y espero no abusar.... gracias!

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jun 2009 09:41 pm
Pues no sé... Yo lo he probado y a mí sí que me cargan ...¿te da algún error al compilar el swf?
Por cierto, ¿(429, 148), (543, 148) son las coordenadas del centro, o de la esquina superior izquierda? Te lo pregunto porque si son las coordenadas donde quieres que esté el centro de las imágenes, habría que cambiar un poco la clase:
target._x = x - (w / 2);
target._y = y - (h / 2);
en lugar de:
target._x = x;
target._y = y;

y:
loader._x = x - (w / 2);
loader._y = y - (h / 2);
en lugar de:
loader._x = x;
loader._y = y;

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 03 Jun 2009 10:22 am
A ver, pues al final, cómo no sabía qué ocurría, lo que he echo ha sido hacerlo todo de nuevo (q suele funcionar jeje) y efectivamente me ha funcionado :) .... Así que ahora sí que se ven perfectamente las imágenes, pero...

En el tema del tamaño de la imagen, que en mi caso es 100x100 (que eso lo tenía yo puesto pq era el "tope" de tamaño de la imagen), pero en realidad las imagenes no son siempre ese tamaño, sino que puede ser 90x100 etc... He intentado no poner nada en el fla de los parámetros correspondientes a w y h. Pero si no los pongo, las imagenes se colocan todas en una esquina del escenario, todas juntitas (unas encima de otras), es decir, que si dejo en blanco dichos parametros en el fla no me respeta tampoco las x e y.

Luego probé a eliminar estos parámetros del imageload.as, dejando esta linea así:

Código ActionScript :

 public function ImageLoad(target_mc:MovieClip, name:String, x:Number, y:Number)


Pero el resultado es el mismo, se me alinean todas en la esquina del escenario unas encima de otras.

Además, hice la modificación q me dijistes para ponerlo en el centro, pq efectivamente el punto que pongo es el centro y no la esquina superior izqda, pero el loader se me ejecuta, aún con los cambios, en la esquina superior izqda. :(

¿Cómo puedo hacer para solucionar que el tamaño sea "libre" y no forzarlo y reescalarlo a 100x100?

isidoro, de nuevo, te agradezco toda la ayuda que me estás dando.... gracias de verdad, eres muy amable :)

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Jun 2009 10:43 am
Borra las líneas:
target._width = w;
target._height = h;
Pero aun así, tienes que pasarle como parámetros w y h, hasta que no se ha cargado completamente la imagen no puedes obtener su width y height.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 03 Jun 2009 08:11 pm
Pero, si le tengo q pasar los parámetro de w y h, entonces me sigue redimensionando la imagen cargada a 100x100, y me la "desfigura"completamente la imagen :( ... No hay alguna posible modificación para que ésto no pase?? :(

Y tb he borrado lo q me dices, pero el loader se sigue reproduciendo en la esquina :(

Y si... nos olvidamos de que la imagen esté centrada, y la coja por la esquina? sería más fácil poder cargarla sin redimensionar??

Jo... perdonad las molestias ...

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Jun 2009 08:57 pm
Sólo tienes que borrar las líneas:

target._width = w;
target._height = h;

El resto del código queda igual. Tienes que seguir pasándo los parámetros w y h porque también son usados para centrar la imagen. Yo lo he probado y a mí sí que me funciona.
¿Y eso de que el loader se reproduce en la esquina? ¿En la esquina del Stage o de cada imágen?

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Jun 2009 12:09 pm
Sí, es en la esquina de cada imagen.

Y no se podría "anular" los parámetros de w y h. Aunque se sacrifique el centrado de la imagen? Yo le pongo manualmente las coordenadas a la imagen (aunque sea en su esquina, ya da igual, se me acaba el tiempo :(), y lo mismo con el loader? no podría hacer que yo le ponga a cada loader creado sus coordenadas?? Es que el centrado y tal, lo puedo "sacrificar", pero que me "distorsione" la imagen obligandola a tener siempre 100x100, es no puedo :S

Gracias de nuevo por todo...

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Jun 2009 12:38 pm
A ver si me explico:
Si borras únicamente las líneas "target._width = w;" y "target._height = h;", (pero sigues pasando los parámetros), no te reescalará las imágenes.
Piensa que estos dos parámetros, al borrar estas líneas, sólo se usarán para calcular la posición de las imágenes, no el tamaño.

Y en cuanto a la posición de los loaders, cuando te puse que para centrarlo pusieses:
loader._x = x - (w / 2);
loader._y = y - (h / 2);
sólo tienes que sustituir w por el ancho de tu movieclip cargador, y h por su altura.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Jun 2009 04:45 pm
En la parte que hemos modificado , queda así:

Código ActionScript :

public function ImageLoad(target_mc:MovieClip, name:String, x:Number, y:Number, w:Number, h:Number) {
      container_mc = target_mc.createEmptyMovieClip(name ,target_mc.getNextHighestDepth());
      image_mc = container_mc.createEmptyMovieClip("image_mc", container_mc.getNextHighestDepth());
      
      var image_mcl:MovieClipLoader = new MovieClipLoader();
      var mclListener:Object = new Object();
      
      mclListener.onLoadInit = function(target:MovieClip) {
      target._x = x - (w / 2);
      target._y = y - (h / 2);
      }
      mclListener.onLoadStart = function(target:MovieClip) {
         loader = target_mc.attachMovie("loadingID", "loader" + name, target_mc.getNextHighestDepth());
      loader._x = x - (100 / 2);
      loader._y = y - (100 / 2);
      }


Y luego en el fla, está así:

Código ActionScript :

import ImageLoad;

var imageLoad2 = new ImageLoad(this, "1", 429, 148, 100, 100);
var imageLoad2 = new ImageLoad(this, "2", 543, 148, 100, 100);
var imageLoad3 = new ImageLoad(this, "3", 657, 148, 100, 100);
var imageLoad4 = new ImageLoad(this, "4", 771, 148, 100, 100);
var imageLoad5 = new ImageLoad(this, "5", 885, 148, 100, 100);

Esa son la primera fila, en total son 15 imagenes.

Bien, pues el resultado lo puedes ver AQUI

Verás, que lo de la alineación central de cada imagen, sería lo perfecto, pq sino está alineada en su centro, y se juntan seguidas una imagen ancha con otra delgada, parece que no hay orden, queda mal, por eso yo quería que se cogiera el centro, para que pareciera todo más ordenado...

Tamibén puedes ver que el loader se reproduce en la esquinita de cada imagen.

He solucionado con lo que me has dicho, lo del reescalado, pero la alineación sigue con el problema :(

De todas formas, no quiero abusar más, demasiado has echo, así que si no ves a simple vista el fallo en el code q te he puesto, déjalo, no te quiero molestar más, me aguantaré y lo dejaré sin precarga :( (pero si ves el fallo a simple vista siin que te suponta ningún trabajo extra más, te lo agradeceré por toda la vida jeje)

Gracias de nuevo.

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Jun 2009 05:44 pm
Mira, llegados a este punto tengo que dar con el problema como sea, o esta noche no dormiré tranquilo.
El fallo que estabas cometiendo, es que tú estabas pasando como tamaños en todas las imágenes 100x100 (new ImageLoad(.... 100, 100);), cuando lo que tenías que pasar era el tamaño de cada una de las imágenes.
De todos modos he modificado la clase para que no haya que pasarle los tamaños como parámetros. Prueba esto:
Clase ImageLoad:

Código :

class ImageLoad {
   
   private var container_mc:MovieClip;
   private var image_mc:MovieClip;
   private var loader:MovieClip;
   
   public function ImageLoad(target_mc:MovieClip, name:String, x:Number, y:Number) {
      container_mc = target_mc.createEmptyMovieClip(name ,target_mc.getNextHighestDepth());
      image_mc = container_mc.createEmptyMovieClip("image_mc", container_mc.getNextHighestDepth());
      
      var image_mcl:MovieClipLoader = new MovieClipLoader();
      var mclListener:Object = new Object();
      
      mclListener.onLoadInit = function(target:MovieClip) {
         target._x = x - (target._width / 2);
         target._y = y - (target._height / 2);
      }
      mclListener.onLoadStart = function(target:MovieClip) {
         loader = target_mc.attachMovie("loadingID", "loader" + name, target_mc.getNextHighestDepth());
         loader._x = x - (loader._width / 2);
         loader._y = y - (loader._height / 2);
      }
      mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
         var loaded:Number = Math.round((bytesLoaded * 100) / bytesTotal);
         loader.gotoAndStop(loaded);
      }
      mclListener.onLoadComplete = function(target:MovieClip, httpStatus:Number):Void {
         loader.removeMovieClip();
      }
      image_mcl.addListener(mclListener);
      image_mcl.loadClip("publicaciones/miniaturas/" + name +".JPG", image_mc);
   }
}

Y en tu película:

Código :

import ImageLoad;
//date cuenta de que ahora ya no hay que pasar el tamaño de las imágenes
var imageLoad1 = new ImageLoad(this, "aini", 0, 148);
var imageLoad2 = new ImageLoad(this, "diyici", 543, 148);

NOTA: Comprueba que el movieClip del loader que has hecho esté en las coordenadas (0, 0)

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Jun 2009 06:33 pm
jejeje... pues muchisimas gracias por seguir en ello :)

Mira, cuándo me has dicho lo de las coordenadas, lo miré, y sí está en la 0,0, pero claro, lo que he echo ahora es cambiarlo y ponerlo en x22 y75 y ya se queda en su sitio jeje... de forma manual, pero me vale :)

Y lo otro, pss... he aplicado la nueva clase, y mira : AQUI Se cargan todas en la esquinita juntitas :(

Y sobre los tamaños, no puedo pasarlo yo todos los tamaños, pq la idea es que el tamaño sea libre, que se pueda subir la imagen que se quiera con el tamaño que se quiera, sin tener que tocar el fla...

Gracias de nuevo...

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Jun 2009 07:18 pm
Pero cómo!!!???
¿Cómo puede ser que estén los clips en la esquina, y que donde deberían estar estén los eventos click? ¿Estás poniendo otros mc invisibles debajo para los eventos de ratón?

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Jun 2009 07:24 pm
Si si claro, para los eventos, cree botones invisibles... sólo quiero colocar las imagenes ya está....

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Jun 2009 06:13 am
La idea de hacer una clase como ImageLoad, aparte de cargar y colocar las imágenes, es que puedas poner en ella los eventos de ratón, y evitarte el engorro de hacerlo uno a uno, simplemente añadiendo en la clase:
container_mc.onPress = function():Void {
//Lo que sea
}
De todos modos la clase debería funcionar (a mí me funciona). ¿Cuando lo compilas en local no te funciona? ¿Has probado a borrar la cache del explorer?

PD: ¿Cuando modificas la clase ImageLoad, antes de compilar el .fla, estás guardando los cambios? Lo digo porque a diferencia del .fla, cuando modificas un archivo .as es necesario que guardes los cambios. Si no lo haces seguirá compilando la versión anterior.

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Jun 2009 09:52 am
Eyyy ¡¡que funciona!! :D

Cómo veía que a mi no me funcionaba, y a tí si, pues en estos casos suele ser un error muy tonto que no veo, y siempre lo que hago es borrar todo, y empezar absolutamente de nuevo, y siempre me funciona :d

Pues lo dicho.... miles y miles y miles y millones de gracias!!!!! :D:D

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Jun 2009 12:12 pm
SSSSIIIII, POR FÍN!!!
Me quedo con la duda de dónde estaría el error, pero bueno, me alegro de que al final funcione :).

Por isidoro

Claber

498 de clabLevel

2 tutoriales

Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Jun 2009 12:38 pm
Pues no te comas el tarro con "donde estaría el error" , pq he estado revisando con el antiguo (el que no funcionaba) y sigo sin verlo, así que creo q sería algún problemilla al compilar (q no guardaba el .fla antes de compilar) así q sería eso... pq yo lo veo en el otro todo perfecto.... así que ...¡¡ya podemos dormir tranquilos! :D

Gracias!!! :D

Por Hapki

Claber

268 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.