Rota un objeto en 3D con Flash y AS3
Escrito por Revista NeoPixel Lunes, 24 de Mayo de 2010 23:46
En Flash, desde la versión CS4 se implementaron buenas opciones para el manejo de elementos 3D. No estamos hablando del poder o las opciones que maneja Papervision o incluso efectos 3D tipo los que vemos con sofware como Maya o 3D Max, mas bien es el reconocimiento, manejo y manipulación de objetos en 3 ejes, X, Y, y Z siendo este último el que le dará profundidad a los objetos creando el efecto de tercera dimensión.
Para lograr esto utilizaremos Actionscript 3 (AS3) y las herramientas de rotación en Flash.
1.- Creamos un rectángulo de 300 pixeles de ancho por 420 de altura. Lo colocamos como se muestra en la imagen (cordenadas X: 0 Y: 30)
2.- En Modify - Convert to Symbol o presionando F8 sacamos un cuadro de dialogo para convertir nuestro objeto en MovieClip. Le asignamos un nombre y damos click en Ok.
3.- Lo selecionamos de nueva cuenta y lo convertimos una vez mas a MovieClip, asignandole un nombre y dando click en Ok. A este nuevo MovieClip le damos el nombre de instancia (dentro del panel de propiedades) de rectangulo_mc. Damos después doble click para editar el MovieClip que está dentro (frenteCuadrado).
4.- Selecciona el MovieClip y dale el nombre de instancia "lado1". Copia el MovieClip, crea un nuevo Layer y pegalo en el nuevo Layer en la misma posición (Edit - Paste in Place). A este nuevo objeto dale el nombre de instancia "lado2".
5.- En los dos layers que tenemos selecciona ambos Keyframes y con el botón derecho selecciona la opción Create Motion Tween.
6.- Selecciona el objeto del layer superior (lado2) y ve a la herramienta 3D Rotation Tool (w). Rota tu objeto en el eje Y 90°, ya sea en el stage seleccionando la línea verde y arrastrandola o por medio del Motion Editor poniendo el valor numérico como se indica.
7.- Selecciona la herramienta 3d Translation Tool y desplazala en los ejes Y y Z para colocarla como se muestra en la imagen, donde ambos vértices coincidan del lado izquierdo. Puedes dar Click en Show All Layers as Outlines para posicinarlos mejor. Ahora pon el Layer (Lado1) por arriba del Lado2.
8.- Regresa a la escena principal y en el único Layer que tenemos da click derecho y selecciona Create Motion Tween.
9.- Ve al Frame 30 y con 3D Rotation Tool hazlo girar -90º en el eje Y. Ve al frame 36 y utiliza la herramienta 3D Translation Tool para posicionar tu objeto de manera que quede tal cual y como se ve en el frame 1. Tendrás que trasladarlo en el eje Y y Z. Ten en cuenta que tu primer y ultimo frame necesitan ser identicos de otra manera se verá un salto en la animación. Puedes usar tus guías para asegurarte de que esto quede a la perfección.
10.- Ve tu animación en la línea de tiempo y revisa que sea fluida. Puedes agregar más Frames para darle otro efectos como profundidad, ease in o ease out. Nosotros en el Frame 9 hicimos que el objeto se moviera un poco para atrás (eje Z) para lograr mejor el efecto 3D.
11.- Crea un nuevo Layer que se llame botones. Crea 4 botones a tu gusto y colocalos en el Stage, nosotros los hemos puesto en la parte superior del rectangulo 3D.
12.- A cada boton ponle un nombre de instancia. En este caso elegimos naranja_btn, azul_btn, verde_btn, morado_btn.
13.- Seleccionamos los frames de los 2 layers y los movemos un frame a la derecha, dejando el Frame 1 vacio en ambos layers. Creamos después un tercer layer y lo nombramos Acciones. En el primer cuadro insertamos un keyframe y tecleamos en el panel de Actions el siguiente código:
var previtem:String = "imagen01";
var init:Boolean = true;
14.- Con esto establecemos que la imagen "imagen01" será la primera que se verá en el rectangulo 3D. El nombre de "imagen01" se lo daremos más adelante al establecer las propiedades de los Movieclips desde la librería.
15.- En el frame 2 insertamos un nuevo Keyframe y en el panel de Actionscript escribimos lo siguiente, que determinará la el contenido activo que se cargará en la parte frontal del cubo:
stop();
var currentitem:String;
rectangulo_mc.lado1.alpha = 1;
16.- El "lado1" que es el frontal dentro del Movieclip principal establecemos que sea visible dandole el valor de 1 en la propiedad alpha. Tecleamos a continuación lo siguiente:
if (init==true) {
init=false;
} else {
previtem=currentitem;
}
Básicamente lo que se hace aquí es que el item que está al frente del cubo (osea el que previamente había sido seleccionado) pasará a ser el de un lado del cubo 3D cuando rote.
17.- Importamos 4 imágenes a nuestra librería, que serán los 4 lados del cubo. Estas las colocaremos cada una dentro de un Moviclip. Dentro de la librería damos click derecho en cada uno de nuestrso Moviclips que contienen nuestras imágenes y seleccionamos la opción de Properties. Damos click en la opción Advanced y seleccionamos la opción Export for Actionscript. Lo mismo haremos con las otras 3 imágenes. En la opción de "Class:" escribiremos "imagen01" en el primer Movieclip, "imagen02" en el segundo y así sucesivamente hasta el 4to Movieclip.
18.- Tecleamos lo siguiente en el keyframe 2, por debajo del código que previamente habíamos puesto:
var classRef:Class=getDefinitionByName(previtem) as Class;
var instance:Object = new classRef();
rectangulo_mc.lado1.addChild(DisplayObject(instance)).name;
19.- A continuación creamos MouseEvent Listeners para cada boton, es decir que cada uno estará asociado a una función cuando sea presionado:
naranja_btn.addEventListener(MouseEvent.CLICK, clickNaranja);
azul_btn.addEventListener(MouseEvent.CLICK, clickAzul);
verde_btn.addEventListener(MouseEvent.CLICK, clickVerde);
morado_btn.addEventListener(MouseEvent.CLICK, clickMorado);
La primera parte del código (naranja_btn, azul_btn, etc) es el nombre de instancia que previamente le pudismoa a cada botón.
20.- A continuación definimos las funciones, una para cada uno de nuestros botones y que definirán qué imagen llamar desde nuestra librería. Es el mismo código para todas las funciones a excepción del nombre de de la función así como el "currentitem", que será para cada caso el nombre Class que le pusimos desde el panel de Symbol Properties en la librería (paso 17):
function clickNaranja(evt:MouseEvent):void {
previtem=currentitem;
currentitem="imagen01";
loadPicture();
}
function clickAzul(evt:MouseEvent):void {
previtem=currentitem;
currentitem="imagen02";
loadPicture();
}
function clickVerde(evt:MouseEvent):void {
previtem=currentitem;
currentitem="imagen03";
loadPicture();
}
function clickMorado(evt:MouseEvent):void {
previtem=currentitem;
currentitem="imagen04";
loadPicture();
}
21.- Hasta aqui hemos cargado y mandado a llamar las imágenes en el lado correcto del cubo. Lo que necesitamos ahora es que nuestra animación corra haciendo girar el cubo ya con las imágenes cargadas en cada lado:
function loadPicture() {
gotoAndPlay(2);
var classRef2:Class=getDefinitionByName(currentitem) as Class;
var instance2:Object = new classRef2();
rectangulo_mc.lado2.addChild(DisplayObject(instance2)).name;
}
22.- Ahora nos vamos al frame 31, en el layer de Actions insertamos un Keyframe y tecleamos el siguiente código en el panel de Actions para hacer el lado 1 invisible:
rectangulo_mc.lado1.alpha = 0;
23.- En el frame 37 hay que especificar que se regrese al frame 2 para volver a iniciar con la animación una vez que se apriete un boton nuevamente.
gotoAndStop(2);
De esta forma logramos un buen efecto de manera sencilla y sin tantas complicaciones. Puedes experimentar poniendo Movieclips animados o con interactividad en vez de imágenes o incluso videos, así la experiencia será mejor.
RSS feed Comments
escrito por adolfo, diciembre 27, 2010
ebuscado ayuda con xbox pero no me responden no quiero quebarntar las reglas pero si megustaria que solo estubiera esto en la seccion del team
escrito por Me, mayo 23, 2011
Los podràs compartir?? me ayudarías mucho!.
escrito por pancho, diciembre 06, 2011
Felicidades por el blog y muchas gracias por los ejercicios