animacion que se reproduzca segun movimiento del raton

Buenas!

Quería hacer una animación controlada por el ratón, como la que hay en esta página, en la que la persona va rotando.
Ejemplo

Tengo la animación hecha, frame a frame.

En el ejemplo, la animación se activa frame a frame segun clicas en el ratón y arrastras, mi idea sería que con el movimiento del ratón, rote la persona, si muevo el ratón a la izquierda, la persona ha de rotar para un lado y si muevo el ratón para otro lado, la persona ha de rotar para el otro lado.

Alguien me puede ayudar? gracias de antemano

Pues... Simplemente lo que necesitas saber primero es la dirección. O sea... Tracemos un eje imaginario en el video, digamos su mitad:

Código ActionScript :

var eje:Number = mc.width/2;

Bien ahora sabemos cual es la mitad de nuestro clip, que segun imagino estará centrado en pantalla, ergo no necesitamos más calculo para saber el eje.

Ahora necesitamos conocer la dirección, o sea:

Código ActionScript :

this.onMouseMove = function() {
   trace(eje-this._xmouse);
};

Si te fijas restamos el eje por la posición del mouse. Así que si estamos arriba de 0 es derecha, abajo izquierda, 0 en el centro. Podemos asi también definir margenes de no interacción, ejemplo: de 10 a -10 detectar como el centro.

Ahora que tenemos esto, solo resta trasladar nuestro calculo usando porcentajes. O sea:

Código :

Si mi movie tiene 1000 frames, eso es el 100 %, entonces donde moverme cuando este al 50%.
1000............100
X................50

X = 1000 * 50 / 100 ;

Lo cual es lo mismo que:

X = Total * Porcentaje / 100

Así que ahora solo resta saber cual es el porcentaje de desplazamiento, más alla sea de derecha o izquierda. Ya que tendremos lo siguiente:

Código :

 1000 Frames totales, en el frame 500 esta centrado. En el frame 0 a 500 los valores 0 a 100 de derecha y viceversa

Calculas y solo haces un salto con gotoAndStop() o un seek()

Saludos, Hernán . -

Muchas gracias Hernán, lo has explicado tan claro que parecía que hasta lo había entendido y me he animado a hacerlo jeje

lo que pasa que soy novato y estoy un poco pez en actionscript a pesar de haberme leido los tutoriales basicos.

Bien, la película está en un mc llamado mc_rotacion.

La variable imaginaría que tengo que definir con

Código :

var eje:Number = mc_rotacion.width/2;

, deduzco que lo he de hacer en el primer frame del root.... ¿o quizás en el primer frame dentro del mc?

y este código,

Código :

this.onMouseMove = function() { 
   trace(eje-this._xmouse); 
};

supongo que tengo que ponerlo en el mismo mc_rotacion

no se si voy bien hasta aquí....

y en las dos siguientes explicaciones ya me he perdido totalmente, no se como traducirlas a código,

Código :

Si mi movie tiene 1000 frames, eso es el 100 %, entonces donde moverme cuando este al 50%.
1000............100
X................50

X = 1000 * 50 / 100 ;

Lo cual es lo mismo que:

X = Total * Porcentaje / 100

y

Código :

1000 Frames totales, en el frame 500 esta centrado. En el frame 0 a 500 los valores 0 a 100 de derecha y viceversa

quizás abuso un poco pero, me podrías ayudar un poco más por favor? te lo agradecería muchísimo.

Bueno veamos...

Primero que nada... El código que te dije, va todo en el primer frame del _root.

La idea sería hacer algo así:

Código ActionScript :

var eje:Number = mc_rotacion.width/2;
var mc:MovieClip = mc_rotacion;
var posicion_actual:Number;
var direccion:Number;
var percent:Number;

function seek_mc(POS:Number,DIR:Number,PER:Number,MC:MovieClip):Void{

    var frame = Math.round(500 * PER / 100);

   if(DIR==1){
     
      MC.gotoAndStop(frame);      

   }else{

      MC.gotoAndStop(frame+500);     

   }

}

this.onMouseMove = function() { 
   posicion_actual = eje-this._xmouse; 
   direccion = posicion_actual>0 ? 1 : -1;
   percent = posicion_actual * 100 / eje;
   seek_mc(posicion_actual,direccion,percent,mc);
};

Cuidado que esta escrito directo al foro, sin comprobar y sin mucho pensarlo. Es solo para que te guies, puede contener errores.

Saludos, Hernán . -

mmm no funciona,

este código es en as2 o as3?
debería poner un stop en cada frame de la película?

Alguien puede ayudarme o decirme si hay algun ejemplo x el foro?

Llevo días buscando pero dando palos de ciego, porque tampoco se como se llama esta técnica ni que palabras usar en la búsqueda. :´(

Al fin he encontrado algo que me vale, (y no quiero agenciarme el mérito, es de un tuto de otra web y tiene licencia de creative commons)
se controla el mc por mediación de arrastre del botón, poniendo este código en un botón transparente:

Código :

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 = rotacion_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 = rotacion_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>rotacion_mc._totalframes) {
         fotogramaDestino = fotogramaDestino-rotacion_mc._totalframes;
      }
      // voy al fotograma destino y produce la sensación de rotación.
      rotacion_mc.gotoAndStop(fotogramaDestino);
   };
}
on (release, releaseOutside) {
   // si libero dejo de rotar.
   delete this.onEnterFrame;
}

Ahora lo que intento es que todo esto se de lugar sin la condición de tener que presionar el ratón, he probado de cambiar el on(press) por on (release), y quitar la última sentencia de on (release) del final, pero no funciona, hasta que no hago click no se pone en marcha la película. ¿Por qué puede ser?

Eso es lo que pasa cuando copias, obtienes algo que manipularlo es muy difícil. Ese código no puede ir dentro de un botón, quitalo y usa el evento this.onMouseMove() que detecta cuando se mueve el Mouse.

Saludos, Hernán . -

Gracias por todo Hernán, es que no puedo hacer gran cosa más, mis conocimientos de programación son muy limitados, y aunque la forma que tienes de explicarlo es muy buena, si no dispongo de esa base para interpretar ese "pseudocódigo" no puedo hacer nada. En fin, me conformaré con lo que tengo porque sino te voy a volver loco

Buff estoy perdidísimo me van a estallar los ojos de tanto probar cosas.
No consigo entenderlo, el onRelease es solo para botones, y el evento this.onMouseMove() no se usarlo, he mirado en todo el directorio de http://www.cristalab.com/tutoriales/ uno por uno y no sale nada.

Recuerdo la idea principal por si alguien es tan amable de ayudarme, estoy un poco desesperado, lo agradecería muchisimo.

El concepto es que tengo una animación de una pieza tridimensional que he ido rotando, hecha foto a foto, y la tengo metida en un mc llamado mc_rotacion. Lo que quiero conseguir es que cuando el raton pase por encima de esa animacion, rote hacia un lado, y si muevo el raton hacia el otro lado, cambie de dirección.

Pasando este concepto a estructura, el objetivo es que cuando mueva el ratón por encima de ese mc_rotacion,
según el movimiento del ratón por el eje horizontal (x) la animación se reproduzca en una dirección u otra.

ayuda por favor!

motormac1, me tomo 5 minutos despejar la idea que te había ya dejado en código, no creo te hayas esforzado demasiado en aplicar lo que te dije.

Pero te ves realmente desesperado, así que te modele un pequeño ejemplo, dentro de este SWF, arme una animación de 200 frames, de un clip donde inicialmente es rojo, si vas a la izquierda se convierte en azul y para la derecha verde (RGB ). Es lo mismo que rotar el objecto si tienes el 3d.




El código que use fue este:

Código ActionScript :

var eje:Number = mc_rotacion._width/2;
mc_rotacion.gotoAndStop(100);
var mc:MovieClip = mc_rotacion;
var posicion_actual:Number;
var direccion:Number;
var percent:Number;

function seek_mc(POS:Number, DIR:Number, PER:Number, MC:MovieClip):Void {

   var frame = PER;


   if (DIR == 1) {

      MC.gotoAndStop(Math.round((100-frame)));

   } else {

      MC.gotoAndStop(Math.round((frame*-1)+100));

   }

}


this.onMouseMove = function() {
   posicion_actual = eje-this._xmouse;
   direccion = posicion_actual>0 ? 1 : -1;
   percent = posicion_actual*100/eje;
   seek_mc(posicion_actual,direccion,percent,mc_rotacion);
};

Saludos, Hernán . -

Increible Hernán, muchísimas gracias te debo una grande, en programación no te puedo ayudar, pero si necesitas alguna composición musical algun día, aquí me tienes. Disculpa las molestias, te aseguro que conozco las normas, y que no me gusta pedir códigos ni que me lo den todo hecho, porque comprendo que los novatos robamos tiempo y creatividad a los expertos, pero esta situación ha sido excepcional, estaba muy saturado.

Bien, he analizado la estructura del código, y gracias a ti ahora lo entiendo, aunque sigue habiendo instrucciones que no había visto nunca como el void y el Math.round, me pongo a investigar todo. un saludo

De nada...

Void solo declara que la función no devolverá ningún parametro y Math.round() redondea a un número entero una cifra dada.

Saludos, Hernán . -