Comunidad de diseño web y desarrollo en internet online

Girar una imagen como el logo de Cristalab

Citar            
MensajeEscrito el 06 Ago 2014 11:59 am
Buenas,
estoy intentando hacer girar una imagen con el mismo efecto que hace el logo circular de esta misma web pero no lo consigo.
Por favor, alguien que me eche una mano.
Tengo una imagen en la que defino el efecto rollOverEffect="{rotate}"

Luego tengo definido rotate como

Código Flex :

<mx:Rotate id="rotate"
               target="{logoArcade}"
               angleFrom="0"
               angleTo="360"
               duration="1000"
               originX="{logoArcade.height}"
               originY="{logoArcade.width}" />


Pero hace un efecto que no es el deseado...

Muchas gracias

Por empardopo

71 de clabLevel



 

chrome
Citar            
MensajeEscrito el 07 Ago 2014 10:30 am
Por ejemplo, he encontrado este link en el que viene la siguiente función

Código Flex :

private static function rotateImage(image:Image, degrees:Number):void {
            // Calculate rotation and offsets
            var radians:Number = degrees * (Math.PI / 180.0);
            var offsetWidth:Number = image.width / 2.0;
            var offsetHeight:Number =  image.height / 2.0;
            
            // Perform rotation
            var matrix:Matrix = new Matrix();            
            matrix.translate(-offsetWidth, -offsetHeight);
            matrix.rotate(radians);
            matrix.translate(+offsetWidth, +offsetHeight);
            matrix.concat(image.transform.matrix);
            image.transform.matrix = matrix;   
         }


a la cual le pasamos la imagen que queremos rotar y los grados pero el problema es que me lo hace del tirón es decir, no se ve un efecto de ralentización... Si le pongo 360 grados no hace absolutamente nada.

¿Se os ocurre algo?

Por cierto, tengo declarado mi componente imagen así

Código Flex :

<s:Image id="logoArcade" source="assets/pics/logo.png" mouseOver="rotateImage(logoArcade,20)" />


Thanks!

Por empardopo

71 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Ago 2014 09:54 am
Al final después de dar muchas vueltas y tras preguntar en un foro inglés me han recomendado esto.

Puesto que no daba con ninguna otra solución que me agradace, he empezado a trastear con esta librería y lo he conseguido.

El código usado a parte por supuesto de meter las correspondientes librerías ha sido poner las correspondientes líneas de importación:

Código Flex :

import com.greensock.*;
         import com.greensock.easing.*;


y luego la línea que hace el efecto:

Código Flex :

TweenMax.to(logoArcade, 3, {transformAroundCenter:{rotation:360}, ease:Circ.easeInOut});


donde logoArcade es el id de mi componente Image.

Por si le sirve a alguien.

Saludos

Por empardopo

71 de clabLevel



 

chrome

 

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