Comunidad de diseño web y desarrollo en internet online

Rotar una imagen SOBRE SU EJEEEEE!!!!

Citar            
MensajeEscrito el 22 Mar 2010 08:54 pm
Buenas creo que el titulo es claro, necesito rotar una imagen sobre su eje asi la imagen queda en el mismo rectangulo donde estaba inicialmente antes de rotarla. Cuando uso la opcion rotate rota la imagen desde el punto 0,0 de la imagen (o sea su punto de eje es arriba a la izq). Quiero tener este efecto con Imagenes, nada de movie clip, etc imagen tipo IMAGE, se podra hacer??? :shock:

Gracias!!
Diego

Por diego_G_09

31 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Mar 2010 07:50 am
Me temo que no lo vas a poder hacer :(
Pero hay una solución fácil para no tener que convertir todas tus imágenes en MovieClip ni nada de eso: Hacerse una Clase que carge la imagen.
Vale, no es tan difícil. Cogiendo un ejemplo de un Loader, un corta y pega y demás, tenemos una Clase "ImageCentrada" como esta

Código ActionScript :

package  
{
   import flash.display.Bitmap;
   import flash.display.DisplayObject;
   import flash.display.Loader;
   import flash.display.LoaderInfo;
   import flash.display.Sprite;
   import flash.net.URLRequest;
   import flash.events.Event;
   import flash.system.LoaderContext;
   
   public class ImageCentrada extends Sprite 
   {
      private var content:Bitmap;
      private var smooth:Boolean;
      public function ImageCentrada(url:String,_smooth:Boolean=true) 
      {
         
         var urlReq:URLRequest = new URLRequest(url);
         var ldr:Loader = new Loader();
         smooth = _smooth;
         ldr.load(urlReq);
         ldr.contentLoaderInfo.addEventListener(Event.INIT, initHandler);

      }
      private function initHandler(event:Event):void
      {
         var loader:Loader = Loader(event.target.loader);
            var info:LoaderInfo = LoaderInfo(loader.contentLoaderInfo);
         info.removeEventListener(Event.INIT, initHandler);
         content = info.content as Bitmap;
         content.smoothing = smooth;
         addChild(content);
         content.x = -content.width / 2;
         content.y = -content.height / 2;
      }
   }
}

Ahora sólo tienes que poner en tu película algo como

Código ActionScript :

var img:ImageCentrada = new ImageCentrada("img/logo.jpg");
img.rotation = 45;
addChild(img)

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Mar 2010 07:56 am
Existe otra opción que es que, además de rotarla la desplaces según los valores de imagen.width*Math.cos(imagen.rotation*Math.PI/180) e imagen.height*Math.sin(imagen.rotation*Math.PI/180) pero te juro que es bastante farragoso porque no te sirve más que la primera vez que rotes la imagen (el ancho y el alto de una imagen cambia cuando se rota, así que hay que guardar dicho ancho.

Si tienes las imágenes en la biblioteca y no las quieres sacer de ahí, te puedes hacer de nuevo una Clase a la que le pasas el nombre que tiene en la biblioteca y la añades cambiándole el tamaño

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Mar 2010 09:28 am
Si lo queremos hacer en Flex, checka este link

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Mar 2010 06:37 pm
Muchas gracias por responder sos una grande en flex, voy a estar haciendo las pruebas hoy y te comento. muchas gracias gracias eliseo 2..

Por diego_G_09

31 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Mar 2010 07:10 pm
una pregunta con lo primero que hiciste, vos estas extendiendo de un sprite, entonces no esta heredando la funcion por ejemplo move, que es una que utilizo en el proyecto entonces cuando la llamo me da error como soluciono esto, despues lo demas esta exelente, era lo que yo buscaba, el tema es que yo llamo a funciones como move y otras mas propias de una IMAGE, se podra hacer que tambien herede las funciones de una imagen???????????

Por diego_G_09

31 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Mar 2010 03:08 am
Se podra hacer que la clase tambien extienda de Image??? o sea dos extends??

Por diego_G_09

31 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Mar 2010 03:11 am
ayudaaaaaaaaa!!!!!

Por diego_G_09

31 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Mar 2010 07:23 am
La Clase que puse anteriormente era para Flash. No sé que tal daría extender la clase directamente desde Image (Image extiende de
Image ----> SWFLoader ----> UIComponent -----> FlexSprite ------> Sprite

Código ActionScript :

public class ImageCentrada extends Image{
   ....
}  

Aunuqe supongo que se puede hacer algo mejor que eso (dame un tiempo de investigación)

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Mar 2010 08:53 am
Vale, creo que ya lo tengo (pero no aseguro nada)
Tenemos en un fichero .as en el mismo sitio que el Main.mxml, llamado "CenteredImage.as"

Código ActionScript :

package {
    import mx.controls.Image;
    import flash.display.Loader;
    import flash.display.Bitmap;
    import flash.events.Event;
    import mx.core.mx_internal;
    
    use namespace mx_internal;
    
    public class CenteredImage extends Image {
        
        public function CenteredImage():void {
            super();
        }
        
        override mx_internal function contentLoaderInfo_completeEventHandler(event:Event):void {
            var smoothLoader:Loader = event.target.loader as Loader;
            var smoothImage:Bitmap = smoothLoader.content as Bitmap;
            smoothImage.smoothing = true;
            smoothImage.x = -smoothImage.width / 2;
            smoothImage.y = -smoothImage.height / 2;
            super.contentLoaderInfo_completeEventHandler(event);
        }
    }
}

Nuestro Main.mxml quedaría, p.e.

Código ActionScript :

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="*">
<comps:CenteredImage source="banana.jpg" width="10%" height="10%" rotation="45" />   
</mx:Application>

no sé si servirá

NOTA:Si queremos tener en otro directorio nuestro CenteredImage, p.e. en "varios" deberíamos
1.-Cambiar el nombre del package

Código ActionScript :

package varios {
    ....
}

2.-Cambiar el Main.mxml para que "apunte" a ese directorio

Código ActionScript :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="varios.*">

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Mar 2010 04:20 pm
Muchas gracias por la ayuda realmente me a solucionado un gran problema (aunque es algo estetico el movimiento de la imagen) es algo importante, muchas gracias por haberte tomado un tiempo para averiguar todo esto me dio una gran ayuda GRACIAS!!! eliseo 2 :lol:

Por diego_G_09

31 de clabLevel



 

firefox

 

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