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;
}
0 comentarios:
Publicar un comentario