Simulacion 3D con objetos 2D

Por: Diego Morales

Simulación 3D con objetos 2D

Por 3D se entiende a elementos con los que se pueden percibir la sensación de tres dimensione como son alto, ancho y profundidad, de similar manera 2D se entiende a objetos que en su percepción contienen solo dos dimensiones que son alto y ancho.

Bueno planteado esto es fácil trabajar en ello.

Lo que busque era crear la sensación de objetos tridimensionales, pero incluyendo imágenes planas, esto en realidad es muy fácil de lograr con los conocimientos básicos que tenemos de flash.

Un ejemplo es rotar una imagen en un espacio virtual de manera que da la sensación de un objeto tridimensional, en realidad el procedimiento es muy sencillo, primero necesitaremos una secuencia de imágenes que simulen el giro y un botón transparente de gran tamaño un poco más grande que el espacio que ocupa las imágenes del objeto.

Lo que se hace es crear un movie clip con la secuencia de imágenes y colocarlo en una de las capas a manera de un solo frame, y sobre este se coloca el botón transparente, lo que hará este botón es que al momento de dar click sobre la imagen y arrastrar el ratón la imagen gire.

Lo que hace el botón es comparar la posición del ratón al momento de hacer click y al arrastrarlo comparar la posición del ratón para traducirlo en un valor numérico y mostrar uno de los frames del movie clip, creando con esto la sensación de giro, pero para esto es necesario conocer el lenguaje de codificación actionscript.

De tal manera que el movie clip tendrá la codificación stop(); y esto lo que hace es impedir que se reproduzca automáticamente.

Luego la codificación del botón será únicamente en la zona activa dejando en blanco los fotogramas de reposo, sobre y presionado, y en la propiedades se cambia las propiedades de sincronización en evento y repetir con un valor de 0, y el resto de propiedades en ninguno, la codificación es la siguiente:

(los textos antepuestos con // son explicatorios, no de codificación)



on (press) {

// cuanto mayor sea el indice_rotacion más lento girará

indice_rotacion = 5;

// en el momento de presionar, almaceno la posición _x del

// puntero y el fotograma actual del clip que quiero rotar

fotograma_inicio = ohm_mc._currentframe;

posicion_puntero = _root._xmouse;

// lanzo un enterFrame que me rota el clip en función del

// movimiento del puntero mientras presiono

delete this.onEnterFrame;

this.onEnterFrame = function() {

// desplazamiento x del puntero desde que he apretado

var deslizamientoX = _root._xmouse-posicion_puntero;

// este deslizamiento lo paso a fotogramas, es decir

// cuanto más me alejo de la posición x inicial

// más frames tengo que desplazar

var deslizamientoFrames = int(deslizamientoX/indice_rotacion);

var fotogramaDestino = fotograma_inicio-deslizamientoFrames;

// compruebo si el fotograma destino es mayor que el total,

// es decir si tengo que ir al fotograma 70 y tengo 60,

// tengo que empeza desde el inicio e ir al frame 10

if (fotogramaDestino<1) {

fotogramaDestino = ohm_mc._totalframes+fotogramaDestino;

}

// hacia atrás igual, si tengo que ir al fotograma -5 de 60,

// en realidad voy al 55. Así aseguramos rotar las vueltas que queramos.

if (fotogramaDestino>ohm_mc._totalframes) {

fotogramaDestino = fotogramaDestino-ohm_mc._totalframes;

}

// voy al fotograma destino y produce la sensación de rotación.

ohm_mc.gotoAndStop(fotogramaDestino);

};

}

on (release, releaseOutside) {

// si libero dejo de rotar.

delete this.onEnterFrame;

}



Si se llega a comprender por completo el funcionamiento de este ejemplo es posible generar efectos mucho más complejos y inclusive simular el movimiento de cámaras.