Comunidad de diseño web y desarrollo en internet online

Unir Preguntas respuesta con lineas

Citar            
MensajeEscrito el 04 Feb 2014 01:04 am
Saludos a todos y gracias de antemano por la ayuda

El problema es el siguiente: estoy realizando una pequeña actividad para niños y necesito que unan las preguntas a la respuesta jalando una linea desde la opcion hacia la respuesta y con un hitTestObject ver cuando ya han llegado a la respuesta y desactivar dicha opcion hasta aca todo bien
ahora lo que no encuentro la manera de hacer es que la linea se quede visible si me pueden echar una mano se los agradeceria mucho

Código ActionScript :

import flash.display.MovieClip;
var line:Sprite;
line = new Sprite();
addChild(line);
var iniciox:Number
var inicioy:Number
var correcto:MovieClip ;

op1.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);
op2.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);
op3.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);

stage.addEventListener(MouseEvent.MOUSE_UP,detener_linea);
function comenzar_linea(e:MouseEvent):void {
   line.graphics.lineStyle(2,0x990000);
   stage.addEventListener(MouseEvent.MOUSE_MOVE,movimiento);
   iniciox= e.target.x;
   inicioy= e.target.y
   correcto= e.target as MovieClip;
}
function detener_linea(e:MouseEvent):void {
   if (line.hitTestObject(respuesta1)) {
      trace("no desaparece la linea")
      correcto.removeEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);   
   } else {
//line.graphics.clear();
   }
   stage.removeEventListener(MouseEvent.MOUSE_MOVE,movimiento);
   
}
function movimiento(e:MouseEvent):void {
   line.graphics.clear();
   line.graphics.moveTo(iniciox,inicioy);
   line.graphics.lineStyle(2,0x990000); // this is the line I was fogetting before
   line.graphics.lineTo(mouseX,mouseY);
      if (line.hitTestObject(respuesta1)) {
      trace("respuesta1")
      stage.removeEventListener(MouseEvent.MOUSE_MOVE,movimiento);
      
}
}


aca el swf



Gracias de nuevo

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Feb 2014 12:34 pm
Estás usando una la misma instancia para dibujar en los tres casos, pero deberías usar tres instancias distintas. Una idea es usar los nombres de instancia de los botones para referenciar el puntero. Ejemplo:

Código ActionScript :

var line:Sprite;
var line1:Sprite = new Sprite();
var line2:Sprite = new Sprite();
var line3:Sprite = new Sprite();


Luego cuando se inicia la rutina cambias el puntero seg[un el botón que llama

Código ActionScript :

function comenzar_linea(e:MouseEvent):void {
   var nr:String = e.target.name.substr(2);
   linea = this["line"+nr];
   (...)


De esta forma tendrías una referencia a cada una de las líneas

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 04 Feb 2014 08:54 pm
Muchas Gracias por la idea, funciona muy bien todo, ahora lo que no entiendo es porque es como si la zona sensitiva para el hitTestObject fuera mas grande que el mc, es decir si acerco la linea fuera del mc respuesta igual lo toma como si estuviera encima de la respuesta

Código ActionScript :

import flash.display.MovieClip;
var line:Sprite = new Sprite();
var line1:Sprite = new Sprite();
var line2:Sprite = new Sprite();
var line3:Sprite = new Sprite();
var line4:Sprite = new Sprite();

addChild(line);

op1.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);
op2.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);
op3.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);
op4.addEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);

function comenzar_linea(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_UP,detener_linea);
   stage.removeEventListener(MouseEvent.MOUSE_UP,detener_linea2);
   var nr:String = e.target.name.substr(2);
    line = this["line"+nr];
   addChild(line);
   line.graphics.lineStyle(2,0xEB741F);
   stage.addEventListener(MouseEvent.MOUSE_MOVE,movimiento);
   iniciox= e.target.x;
   inicioy= e.target.y
   correcto= e.target as MovieClip;
}

function detener_linea(e:MouseEvent):void {
      correcto_ico.visible=false;
      error_ico.visible=true;
   if (line.hitTestObject(respuesta1)) {
      trace("ENCONTRADA RESPUESTA1")
      correcto.removeEventListener(MouseEvent.MOUSE_DOWN,comenzar_linea);   
      correcto_ico.visible=true;
      error_ico.visible=false;
   } 
   else {
      line.graphics.clear();

   }
   stage.removeEventListener(MouseEvent.MOUSE_MOVE,movimiento);
   
}

function movimiento(e:MouseEvent):void {
   line.graphics.clear();
   line.graphics.moveTo(iniciox,inicioy);
   line.graphics.lineStyle(2,0xEB741F); // this is the line I was fogetting before
   line.graphics.lineTo(mouseX,mouseY);
      if (line.hitTestObject(respuesta1)) {
      stage.removeEventListener(MouseEvent.MOUSE_MOVE,movimiento);
      
}
}

aca el archivo con las modificaciones



no entiendo que sucede , vi un poco leyendo que en formas irregulares el hitTestObject crea la forma cuadrada con lo cual no tendria problema , cambiaria la forma de la respuesta a cuadrada pero es como que se crea una forma mucho mas grande para los lados superior y inferior, alguen podria ayudarme con información al respecto
Gracias de antemano por toda la ayuda prestada, de verdad

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Feb 2014 09:06 pm
Traza una forma cuadrada que contiene lo que sea que haya de gráficos. Te recomendaría usar cuadraditos al lado de los textos, y que los usuarios trazen líneas entre esos cuadraditos, así el hitTest será mucho mas claro

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 04 Feb 2014 09:31 pm
ya le coloque cuadrada la forma del mc de respuesta pero igual es como que se creara una forma mas grande , de la nada, porque el mc solo tiene ese cuadrado pero la zona es mas grande

aca el ejemplo actualizado





Gracias por tu ayuda, por favor si tienen alguna idea de lo que sucede te lo agradeceria mucho, de verda, porque le he dado vueltas todo el dia al asunto

Gracias denuevo

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Feb 2014 09:34 pm
No lo tienes que meter dentro del MC que tienes ahora, tienes que hacer dos filas de cuadraditos, llamalos op1 a op4 y resp1 a resp4, luego entre ellos es la unión. onle al lado las cajas de texto de las preguntas, pero los MovieClips entre los que haces las uniones son solo cuadraditos

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 04 Feb 2014 10:02 pm
Gracias por contestar, de verdad lo aprecio

La actividad esta diseñada asi, tienes las opciones al rededor de dos respuesta centrales y hay que unir las opciones a la respuesta correcta, no son pregunta respuesta en dos filas, si te entiendo pero la actividad es asi, como la ves, crees que podria hacer algo para solucionar esto?

este es el fla, por si podria ayudar el revisarlo

archivo fla

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Feb 2014 12:18 am
El inicio de la línea es el punto de registro, haz que el punto de registro esté en el lugar donde quieres que empiece la línea (eso lo haces visualmente editando el clip)
Luego haz lo mismo para los que reciben la línea y cambia el final de la función

Código ActionScript :

     
      if (line.hitTestObject(respuesta1)) {
           line.graphics.lineTo(respuesta1.x,respuesta1.y);
          stage.removeEventListener(MouseEvent.MOUSE_MOVE,movimiento); 
   }


Así los puntos de registro de los MC de pregunta y respuesta marcan hacia donde van las flechas.

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 05 Feb 2014 03:25 pm
Gracias por toa la colaboracion y el tiempo en echarme una mano, GRACIAS

lo que sucede es que como vemos en el ejemplo que coloque, si el cursor asi no se acerque a ala respuesta lo toma como si ya lo hubiera tocado, y no entiendo porque el movie clip no es de ese tamaño y asi lo haga de 10 x 10 pixeles sucede lo mismo , el flash lo ve como algo mas grande

aca el ejemplo;



gracias nuevamente y espero que esto ayude a las personas con el mismo problema

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Feb 2014 05:06 pm
Muchas Gracias por la ayuda prestada al tema

Bueno ya he trabajado en el asunto y he encontrado la solucion , explico

lo que hacemos es hacer una verificacion no con hitTestObjet, sino con hitTestPoint, que nos permite hacer una declaracion mas exacta del destino de la colision.

Código ActionScript :

if (line.hitTestPoint(respuesta1.x,respuesta1.y,true))


asi la actividad resultante



Aca el archivo Fla para quienes lo necesiten
Descargar Archivo FLA

Por voraz2

21 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.