Mover agujas de reloj con AS2 - drag and drop

digonuz · #1 (**permalink**) 08/10/2011, 06:00

Hola a tod@s!

Tengo un pequeño problemilla. Necesito hacer un reloj en el que se pueda mover la aguja de las horas mediante drag and drop con distintos targets. Esto es para un juego infantil en el que el niño debe mover la aguja hasta la hora que le están pidiendo para lanzar una locución diciendo "bieeeen" o "inténtalo de nuevo" según donde caiga. Lo que es el drag and drop con targets lo tengo pillado, el problema es "anclar" la aguja al reloj para que parezca real...

Alguna idea?
GRACIAS DE ANTEMANO!

Mahalo · #2 (**permalink**) 10/10/2011, 01:50

No creo que el drag and drop sea lo más correcto sino con eventos del Mouse. Yo lo haría capturando la posición del mouse y calculando el ángulo que forma con el centro del reloj. Por ejemplo, si tienes el centro del reloj en (0, 0) y sueltas el mouse en (5, 5) el ángulo que debe mostrar la aguja es 45º. Eso se hace con las propiedades seno y coseno de la clase Math (que pide los ángulos en radianes: 180º = pi rad). El seno de un ángulo es igual al cateto opuesto dividido por la hipotenusa.
Saludos!

digonuz · #3 (**permalink**) 10/10/2011, 14:40

No me he enterao de ná... jejeje es que yo sólo sé programar a niveles "básicos"... Eso sí, GRACIAS por tu respuesta... voy a intentar seguir la pista que me das a ver que sale. Toca estudiar.

Gracias!

Mahalo · #4 (**permalink**) 11/10/2011, 02:17

Lo siento, hace mil años que dejé atrás el as2 por lo que ahora no lo tengo muy fresco. Sin embargo seguro que puedo montarte un ejemplillo en pocos minutos.
Saludos!

Mahalo · #5 (**permalink**) 11/10/2011, 02:27

Me he picado y lo he montado. Lo que no sé es si le quieres echar un vistazo o sacarlo por tu cuenta.

digonuz · #6 (**permalink**) 12/10/2011, 05:25

Hombre muchísimas gracias! La verdad es que voy fatal de tiempo. Si me dejases el ejemplo te estaría muy agradecido.

Mahalo · #7 (**permalink**) 13/10/2011, 01:53

Perdona por la tardanza, ayer festivo no toqué el ordenador en todo el día. Ahí va el código:

Código ActionScript:

Ver originalaguja.onMouseDown = function () {
    this.onEnterFrame = function() {
        var contiguo:Number     = _root._xmouse - 175;
        var opuesto:Number      = _root._ymouse - 175;
        var hipotenusa:Number   = Math.sqrt(Math.pow(opuesto, 2) + Math.pow(contiguo, 2));
        var angulo:Number       = Math.asin(opuesto / hipotenusa) * 180 / Math.PI;
        if (contiguo < 0)       angulo = 180 - angulo;
        aguja._rotation         = angulo;
    }
}
onMouseUp = function() {
    delete aguja.onEnterFrame;
}

Para crear el símbolo de la aguja debe descansar horizontalmente con el punto de anclaje a la izquierda. Cuando la instancies en el escenario, puedes ponerla apuntando a donde quieras (nombre de instancia 'aguja').
Y eso es todo. Es un código mejorable pero para empezar vale.
Saludos!

digonuz · #8 (**permalink**) 14/10/2011, 10:06

GRACIAS!! Voy a probarlo y te cuento!

digonuz · #9 (**permalink**) 14/10/2011, 10:32

Dos cosas, una me da errores de sintaxis... seguramente sea fallo mío al pegar el código, pero lo he revisado y en mi corto entendimiento del tema no veo fallos. La otra es saber dónde pego el código, si en el fotograma o en el propio objeto (imagino que en el objeto de cara a luego meter la programación para detectar colisiones)... es que yo me dedico sobre todo a medios impresos, y la programación se me escapa jeje

MUCHAS GRACIAS!

digonuz · #10 (**permalink**) 14/10/2011, 10:52

Ya! Lo conseguí!! Muchas gracias otra vez. Tenía un fallo relativamente "tonto" y junto con un tutorial que también encontré cuando me diste las primeras pistas lo he completado.

MUCHAS GRACIAS AMIGO!!

Mahalo · #11 (**permalink**) 14/10/2011, 11:47

El código iba en el fotograma, por eso la referencia a la 'aguja'.
Me alegro que ya lo tengas resuelto.