Obtener el ancho y alto REAL de una imagen carga en un Image

Hola,
tengo un panel sobre el que cargo una lista de imagenes sobre componentes Image, reduciéndolos a un tamaño 50x50 para que actúen como thumbnails

Código :

var img:Image = new Image();
img.source=imagenes_marca[i].@ruta;
img.width=50;
 img.height=50;

Lo siguiene que hago es aplicar un evento MouseEvent.CLICK sobre cada imagen reducida, de forma que al hacer click me presente la imagen en un componente basado en TitleWindow con un PopUpManager, adaptando el TitleWindow al tamaño de la imagen,siempre que sea menor a 640x480, si la imagen supera ese tamaño quiero reducir su tamaño y luego adaptar el titleWindow.

El único problema es que no consigo obtener el tamaño REAL de la imagen cargada en el componente image para poder adaptar dinámicante mi titlewindow. Y de forma estática no vale por razones obvias. Pensaba que era con:

Código :

img.contentHeight;
img.contentwidth;

pero no me devuelve nada hasta que no hago img.width=50; img.height=50...


Gracias, un saludo.

... porque hasta que no termine de cargar no tienes acceso a sus propiedades, usa bytesLoaded y bytesTotal para saber si ya ha sido cargada (extiende de SWFLoader)

Jorge

Si pero eso no me soluciona el problema, como consigo el ancho y alto real del objeto imagen que encapsulo en el componente Image?

En otras palabras: básicamente tienes que agregar un preloader, luego si podrás acceder al ancho y alto

Jorge

¿Cómo es eso del preLoader? Nunca lo he usado, puedes explicarte un poco más porfavor?

Aja, bueno, puedes pronunciarlo "priloader", en español precarga, una de las técnicas fundamentales de Flash.
Aquí uno en AS3 http://www.cristalab.com/tips/ejemplo-de-precarga-simple-en-actionscript-3-c50687l/
En la ayuda de Flex creo que hay un ejemplo con SWFLoader, del que hereda Image, con lo cual te vale igual

Jorge

Mmmm pero creo que no estamos hablando de lo mismo.
El SwfLoader por lo que veo The SWFLoader control lets you load one Flex application into another Flex application as a SWF file. It has properties that let you scale its contents, vale para cargar una aplicación o película dentro de otra aplicación, en la ayuda de Flex dice que para imágenes estáticas se debe de usar Image

Flex also includes the Image control for loading GIF, JPEG, PNG, SVG, or SWF files. You typically use the Image control for loading static graphic files and SWF files, and use the SWFLoader control for loading Flex applications as SWF files. The Image control is also designed to be used in custom cell renderers and item editors.

Entonces en mi caso el SwfLoader no tiene mucho sentido, yo con lo que trabajo son con imágenes estáticas, según la API de flex con Image.contentHeight e Image.contentWidth tendría que recuperar el ancho y alto real de la imagen sin necesidad de Pre-Loader como dices, aunque no lo he consegudo la verdad.

He mirado el ejemplo que me has puesto de flash pero no tiene mucha relación con lo que trato de hacer, además de que no sé nada de Flash, solo Flex y AS3.

Usa el evento complete

Código ActionScript :

private function init():void{
   trace(testImg.contentWidth+" : "+testImg.contentHeight)
}
(....)
<mx:Image x="3" y="84" source="images/algun.gif" id="testImg"  complete="init()"/>

Jorge

Pues he probado lo que me has dicho pero nada, no se si es que no lo estoy usando donde debo o que no puedo usar 2 EventListener para el mismo objeto o que...

Código :

for (var i:Number = 0; i < imagenes_marca.length; i++) {  //imagenes_marca contiene las imagenes
   var img:Image = new Image();
   img.source=imagenes_marca[i].@ruta;       
   img.x=((i%num_columnas)*60);                   
   img.y=(Math.floor(i/num_columnas)*60);
   img.maintainAspectRatio=true; 
    img.width=50;
    img.height=50;

   panel_imagenes.addChild(img);
    img.addEventListener("complete",function(e:Event):void{                  
               img.data.y0=img.contentHeight;
                img.data.x0=img.contentWidth;   
        });
   img.addEventListener(MouseEvent.CLICK,function(e:MouseEvent):void {   //Si se hace click la imagen se abre
                                                                                                      //en un TitleWindow
                var imagen:Image = e.target.parent as Image;
                 var app:DisplayObject = Application.application as DisplayObject;
var popUp:CustomTitleWindow = CustomTitleWindow(PopUpManager.createPopUP(app,CustomTitleWindow,true));
   popUp.ancho=imagen.data.x0 //Estas 2 líneas no funcionan....
   popUp.alto=imagen.data.yo;         
   popUp.setImg=imagen;         
   PopUpManager.centerPopUp(popUp);
                       
       });  //Fin function(e:MouseEvent):vod
} //Fin del for

No entiendo que es lo que estoy haciendo mal, con un tamaño fijo para el popUp funciona perfectamente, en cambio no consigo pasarle el tamaño de la foto...
Alguna idea?

Más o menos he conseguido ajustar el CustomTitlewindow del PopUp a la imagen pero me surge otro problema que se me escapa...
si al popUp le doy un valor ancho y alto, PopUpManager.centerPopUp(popUp); me lo centra en pantalla correctamente

[img][/img]
Sin embargo si no le doy un valor, toma por defecto el valor de la imagen (que es lo que no conseguía en el post anterior) pero ahora me centra el popUp su esquina izquierda superior con respecto al centro de la pantalla!!!!! ??¿¿

[img][/img]

El código donde creo el popUp es:

Código :

var app:DisplayObject = Application.application as DisplayObject;   
var popUp:CustomTitleWindow = CustomTitleWindow(PopUpManager.createPopUp(app,CustomTitleWindow,true));
          popUp.setImg=imagen;
          popUp.ancho=640;
          popUp.alto=480;            
          PopUpManager.centerPopUp(popUp);

Y el CustomTitleWindow.mxml

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow  xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" verticalAlign="middle" horizontalAlign="center"      
    showCloseButton="true" close="onClose()" width="{ancho}" height="{alto}">
 <mx:Image id="imag" source="{imagen}" />    
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.managers.PopUpManager;
            
            [Bindable]
            public var ancho:Number;
            [Bindable]
            public var alto:Number;
                   
            public function set setImg(im:Image):void{
               imag.source=im.source;             
            }
            
            private function onClose():void {
                if(this.isPopUp) {
                    PopUpManager.removePopUp(this);                    
                }                
            }
        ]]>
    </mx:Script>
    
   
    
</mx:TitleWindow>

Esta tontería me está dando unos quebraderos de cabeza tremendos....por qué centra el titlewindow respecto de su esquina superior izquierda? A ver si alguien me da una luz porfavor.

Desplázalo la mitad de su tamaño a la izquierda y hacia arriba (cambiandole el x y el y a popUp)

Jorge

No consigo saber el ancho y alto del popUp, popUp.heigth y popUp.width devuelven 0.

Pero sabes el ancho y alto de la imagen ....

Jorge

No no lo se, ya lo he dicho en los post anteriores. No consigo sacar el ancho y alto de la imagen, ni con Height ni con ContentHeight.
He usado el event.COMPLETE como me has dicho pero me da que no lo estoy usando correctamente o lo uso en el lugar equivocado.

Dos errores veo en tu anterior code:

- Le asignas ancho y alto a 50 antes de que se dispare el evento complete, eso hará que no reporte su tamaño
- Usas una función anónima en el addEventListener ... no lo he probado, pero yo usaría por las dudas una función standard

Jorge

A qué te refieres con función anónima?
img.addEventListener(MouseEvent.CLICK,function(e:MouseEvent):void { en vez

img.addEventListener(MouseEvent.CLICK,ampliar);

A eso?

correcto

Jorge

Entonces dices asigno el event.Complet justo después de hacer
var img:Image;
img.addEventListener("complete",function(e:Event):void{

o de asignar el source
var img:Image;
img.source=imagenes_marca[i].@ruta;
img.addEventListener("complete",function(e:Event):void{


y luego el MouseEvent.CLICK que vaya anidado dentro de complete, o justo debajo pero sin anidar?
Gracias.

Código ActionScript :

img.source=imagenes_marca[i].@ruta;
img.addEventListener("complete", cargoEntero)
function cargoEntero(evt:Event):void{
  //Ahora tengo tamaño original
  trace(evt.target.width+":"+evt.target.height)
  //Ahora lo cambio
  evt.target.with - evt.target.height = 50
}

Lo mismo para el evento click, discriminas quien lo originó por el Event.target ... lo de funciones anónimas era en AS2, AS3 ya no sigue ese modelo

Jorge

He hecho cómo en tu ejemplo, pero solo asignando source, nunca lanza el evento carga_completa, por lo que no aparecen ni las miniaturas

Código :

//La función va dentro del for porque necesito el valor del índice i para posicionar las miniaturas.
 for (var i:Number = 0; i < imagenes_marca.length; i++) {
              var img:Image=new Image;
              img.source=imagenes_marca[i].@ruta;
              img.addEventListener(Event.COMPLETE,cargo_entero);
        function cargo_entero(event:Event);void{       //Por aquí nunca pasa.
                  event.target.x=((i%num_columnas)*60);                   
                  event.target.y=(Math.floor(i/num_columnas)*60);       
      img.buttonMode=true;           
      event.target.width=50;
                  event.target.height=50;
                 canvas_imagenes.addChild(img);
         }
  }

Estás declarando la funcion cargo_entero dentro de un loop, es decir la sobreescribes tantas veces como imágenes tengas, quítala de dentro del loop

Jorge

Lo hacía asi porque necesito el índice i del loop para ir posicionando los thumbnails uno después del otro, con las funciones anónimas me funcionaba.

Declarando como dices la función fuera del loop ¿hay forma de pasarle a esa función el índice i del propio loop para ir colocando las imágenes correctamente en el infowindow cuando se dispara el "complete" de cada una?

Mira la función cargoEntero que puse, verás que recibe un Event como argumento, quien lo genera lo puedes identificar mediante event.target

Jorge

No me refiero a quien lo genera, eso ya lo se que lo capturo con event.target, me refiero a que necesito el incremento de la variable i pues la posiciones x e y de las imagenes las saco con

event.target.x=((i%num_columnas)*60);
event.target.y=(Math.floor(i/num_columnas)*60);

para poder mostrarlas en filas de 10. Sin esa variable i las posiciones siemrpe serían las mismas pq en la función cargo no puedo pasar parametros tampoco.

Copia el valor de i al data, luego usalo desde allí

img.data = i

Luego

event.target.x=((event.target.data%num_columnas)*60);

Jorge

Si, eso había pensado.
Una última cosa, tú me has dicho que lo haga escuchando el event.COMPLETE sin más despues de asignar el source. Buceando entre ejemplos y manuales he visto que en muchos sitios recomiedan usar un Loader, creo que esto se usa para archivos externos,pero no estoy seguro, en mi caso las imágenes ya se encuentran cargadas en un array.

Puedes aclararme si estoy en lo cierto? Puedo seguir con ello tal y como me decías sin usar Loader?
Gracias.

A menos que las imágenes esten embebidas, el componente Image carga imágenes externas que indicas en la propiedad source. Si has buceado en el manual, habrás visto que Image extiende a SWFLoader, que es una variante de Loader en el contexto del framework de Flex.

Jorge

Bueno, a ver,o hay algo que estoy haciendo mal o no entiendo qué pasa o puede que las 2.

Esto no funciona, nunca lanza el evento.Complete por tanto nunca entra en cargar

Código :

for (var i:Number = 0; i < imagenes_marca.length; i++) {
              var img:Image=new Image();
              img.source=imagenes_marca[i].@ruta;
              img.addEventListener("complete",cargar);
       }

function cargar(event:Event):void{
   trace("IMAGEN CARGADA");
   trace (trace (event.target.width + ":" + event.target.height);
 }

Sin embargo si dentro del loop añado la línea canvas_imagenes.addChild(img) si que entra. A lo mejor el error viene de atrás.

main.mxml

Código :

for (var i:Number = 0; i < markersCount; i++) {
  createMarker(......)
}
public function createMarker(......){
customContent:new [b]InfoWindowContenido6([/b]marker,id,imagenes_marca),
}

InfoWindowContenido6.as

Código :

public class InfoWindowContenido6 extends UIComponent {
    public function InfoWindowContenido6(m:Marker,id_m:int,imag_marca:Array) {

         var canvas_imagenes:Panel = new Panel() ; 
        
               for (var i:Number = 0; i < imagenes_marca.length; i++) {
                     var img:Image=new Image();
                      img.source=imagenes_marca[i].@ruta;
                     img.addEventListener("complete",cargar);
                 }

               function cargar(event:Event):void{
                       trace("IMAGEN CARGADA");
                       trace (trace (event.target.width + ":" + event.target.height);
                }

          addChild(canvas_imagenes);
      }
   }
 }

Alguna idea? Gracias.

La carga se incia cuando lo agregas al DisplayList (addChild)

Jorge

No lei absolutamente todo lo que dicen los otros, pero lei un poco de tu problema.

Un par de cuestiones: No se puede saber el tamaño de una imagen antes de que esta este completa al 100%, por eso se sugiere hacer un listener con un Event.COMPLETE que dispaer una funcion eventoCompleto (o como quieras llamarla) que sería algo asi private function eventoCompleto(e:Event):void { // aca va el codigo que hara la funcion } si no asignaste estaticamente ningún valor al objeto que queres tomarle el ancho y el alto antes de que termine de cargarse del todo la imagen ( la carga es rapida pero la lectura de codigo lo es más y flash no para a esperar que tu imagen este cargada, por el contrario continua leyendo codigo posterior a la carga por mas que esta no este terminada) despues del evento complete deberias poder tomar width y heigth sin problemas.

En mi caso esto me parece una soberana cagada, me he encontrado con este problema quiero hacer un preloader que dinamicamente se ponga al medio de la imagen, si necesidad de saber yo ni ingresar los valores de alto y ancho.

Que es lo que pasa con esto, el preloader se genera antes de que la imagen este cargada... entonces no tengo forma de saber el ancho y el alto en ese momento, lo unico que se me ocurrio para subsanar el problema es hacer una clase que cargue aparte que tire un evento mediante dispatchEvent cuando termino de cargar para solamente tomar las medidas, y despues volver a hacer la misma carga en mi pelicula pero robando las medidas del primer cargador.... medio tosco pero no encontre otra forma.