Bienvenido a éste tutorial de cómo crear iconos en 3D. El objetivo final para conseguir es el siguiente:
Para poder seguir correctamente con el Tutorial, es necesario:
Tener instalado adobe Flash CS3 o superior.
Conocimientos Básicos de Actionscript 3.
La librería flash
GTween
1. Abrimos un nuevo documento Flash con ActionScript 3
2. Importamos el icono que más nos guste al escenario, en mi caso he usado un icono de un post de @Crack_314
3. Teniendo seleccionado el icono, pulsa F8 y te aparecerá el siguiente panel, lo rellenas como está indicado en la imagen y pulsas aceptar.
4. Ahora en el panel de propiedades ponemos de nombre de instancia al objeto: "img"
5. En la línea de tiempo, creamos una nueva capa, la movemos abajo del todo y en el escenario creamos un cuadrado teniendo seleccionado la herramienta Rectángulo y dibujamos uno en la misma posición y con un color de relleno igual que el fondo o con alpha = 0
6. Seleccionamos ahora las dos capas y pulsamos F8, nos volverá a aparecer el panel, rellenamos de la siguiente manera y le damos click a aceptar.
7. Damos "doble click" al Clip de película que acabamos de entrar, creamos una nueva capa en su interior.
8. Seleccionando el fotograma de la capa que acabamos de crear, pulsamos F9 y nos aparecerá lo siguiente:
9. Ahora comenzaremos con el ActionScript y en el interior de ése panel iremos escribiendo lo siguiente:
*Nota: No copies "<?as3 ..... ?>"
<?as3
//Importamos las librerías necesarias (la carpeta que descargaste de GTween "com" tiene que estar al lado del archivo .fla)
import flash.events.MouseEvent;
import com.gskinner.motion.GTween;
import com.gskinner.motion.easing.*;
//Añadimos los listeners
this.addEventListener(MouseEvent.ROLL_OVER, encima);
this.addEventListener(MouseEvent.ROLL_OUT, fuera);
//Ésta es la variable GTween que define ciertas propiedades de la animacion va de la siguiente manera: (instancia del movieclip, duración, null, {ease:tipo de animacion})
var animacion:GTween = new GTween(img, 0.5, null, {ease:Sine.easeOut})
//Ahora las funciones que habíamos creado previamente en los listeners
function encima(e:MouseEvent):void{
//Se pone la variable GTween (en este caso: animacion) seguido de .proxy. y el tipo de propiedad que queremos modificar
animacion.proxy.rotationY = 180
animacion.proxy.alpha = 0.5
}
function fuera(e:MouseEvent):void{
animacion.proxy.rotationY = 0
animacion.proxy.alpha = 1
}
//Fin del código
?>
Y usando la misma técnica con muchos más iconos podremos lograr algo como ésto:
link: