Tutorial para rotar objetos simulando 3D en Flash.

Creado a las // comentar

Para simplificar el objeto sólo se rotará sobre el eje vertical. Para comenzar el tutorial necesitamos tener la secuencia de imágenes que componen la rotación. Una vez que tengamos esto, vamos a incluir la secuencia dentro de la línea de tiempo de un movieclip y le vamos a poner un stop(); en el primer fotograma.

Por otro lado vamos a definir un botón transparente, para ello solo definimos la zona áctiva, dejando en blanco los fotogramas Reposo, Sobre y Presionado. En este botón es donde va a ir la programación del ejemplo.

El funcionamiento del ejemplo es sencillo:
Cuando presionamos el botón almacenamos la posición _x del puntero y el fotograma actual del movieclip. Después, mendiante un evento entreFrame vamos comparando la posición _x del puntero mientras lo desplazo presionado con la pos inicial almacenada. En función de este desplazamiento obtengo la "cantidad" que se debe rotar el objeto o lo que es lo mismo, el fotograma del clip que tengo que mostrar. Lo mejor es descargarse este fla de ejemplo que
viene con el código actionscript comentado:


boton girar

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;

}



ejemplo_rot3D.fla


0 comentarios: