Comunidad de diseño web y desarrollo en internet online

Area de selección

Citar            
MensajeEscrito el 15 Jul 2011 12:09 am
¿Existe en AS3 algún tipo de recurso, componente, clase que facilite hacer un rectangulo de selección estilo al de la imagen?



Si no lo hay, la unica manera que se me ocurre seria con la clase flash.geom.Rectangle y no estoy muy seguro de que pueda sacarlo...

Saludos y gracias!

Por Zeneke

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Jul 2011 01:41 pm
Desconozco si existe, pero estás en lo cierto, tendrías que usar un rectangle e hitTestObject para ver que pilla por debajo

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 26 Jul 2011 09:38 pm
Bueno Jorge, despues de comerme un rato la quijotera al final lo he conseguido. Pero no se realmente si esta optimizado, no se si podrias ayudarme en este aspecto.
Aparte, el comportamiento del área de selección esta programado dentro de una clase que actúa como recinto para el área, para que fuera de él no puedas seleccionar nada. No se si es la mejor manera, ya que quisiera que estuviera mas modulado, en una clase aparte, pero depende de los detectores de eventos de ratón del recinto para dibujar el área asi que no se si dejarlo así.

En vez de un rectangle he usado el API de dibujo para dibujar un rectangulo.

Clase Cuadro (actúa como recinto para el área). Esta instanciado en el escenario y su padre es el escenario o Stage. Los elementos a seleccionar tambien estan instanciados en el escenario y tambien su padre es el escenario.

Código ActionScript :

package
   {
   import flash.display.MovieClip;
   import flash.display.Sprite;
   import flash.display.Stage;
   import flash.events.*;
   import flash.display.Shape;
   import flash.display.Graphics;
   
   public class Cuadro extends MovieClip
      {
      
      public var estado:Boolean=false;
      public var rectangulo:Shape=new Shape();

      //PROPIEDADES PARA EL RECTANGULO
      public var inix_rect:Number=0;
      public var iniy_rect:Number=0;
      public var base_rect:Number=0;
      public var alt_rect:Number=0;
      
      //CONSTRUCTOR
      public function Cuadro()
         {
         //INICIO RECTANGULO
         rectangulo.graphics.lineStyle(1);
         rectangulo.graphics.beginFill(0xAF0000,.1);
         rectangulo.graphics.drawRect(0,0,0,0);
         addChild(rectangulo);
         
         //EVENTOS
         addEventListener(MouseEvent.MOUSE_DOWN,emp);
         addEventListener(MouseEvent.MOUSE_UP,emp);
         addEventListener(MouseEvent.MOUSE_MOVE,emp);
         }
         
      public function emp(e:MouseEvent):void
         {   
         if (e.type=="mouseDown")
            {
            hit();
            limpio();
            inix_rect=mouseX;
            iniy_rect=mouseY;
            estado=true;
            }
            
         else if (e.type=="mouseUp")
            {
            estado=false;
            limpio();
            removeEventListener(Event.ENTER_FRAME, dibujo);
            }
            
         else if (e.type=="mouseMove")
            {
            if (estado==true)
               {
               addEventListener(Event.ENTER_FRAME,dibujo);
               base_rect=(inix_rect-mouseX)*(-1);
               alt_rect=(iniy_rect-mouseY)*(-1);
               }
            else
               removeEventListener(Event.ENTER_FRAME, dibujo);
            }
         }

      public function dibujo(e:Event):void
         {
         limpio();
                        //Dibujamos el rectangulo
         rectangulo.graphics.drawRect(inix_rect,iniy_rect,base_rect,alt_rect);
         }

                //Inicializamos el Shape y sus caracteristicas
      public function limpio():void
         {
         rectangulo.graphics.clear();
         rectangulo.graphics.lineStyle(1);
         rectangulo.graphics.beginFill(0x009922,.3);
         }

      //Funcion para comprobar que elementos se tocan cuando soltamos el ratón
      public function hit():void
         {
            for(var i:uint=1;i<parent.numChildren;i++)
               {
               if (rectangulo.hitTestObject(parent.getChildAt(i))==true)
                  {
                  trace(parent.getChildAt(i).name + " tocado");
                                                 //Aqui podemos llamar a un metodo del elemento tocado 
                  //para aplicarle un filtro de iluminación o algo asi.
                  MovieClip(parent.getChildAt(i)).metodo_del_tocado();
                  }
               }

         }
      }
   }


Algún tipo de feedback estaría bien, hace pocas semanas que empezé con AS3 y de manera no continuada, asi que cualquier corrección y ayuda es bienvenida.

Saludos gente!

Por Zeneke

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Jul 2011 10:26 pm
Perdón por el doble-post!

Corrección: LLamamos al método hit cuando soltamos el ratón, no cuando cliqueamos en la instancia de Cuadro. Sería asi:


Código ActionScript :

[...]  
 if (e.type=="mouseDown")   
            {   
            // hit();    aqui no va 
            limpio();   
            inix_rect=mouseX;   
            iniy_rect=mouseY;   
            estado=true;   
            }   
               
         else if (e.type=="mouseUp")   
            {   
            //aqui si 
             hit();  
            estado=false;   
            limpio();   
            removeEventListener(Event.ENTER_FRAME, dibujo);   
            }   
[...]  



Perdón por el coñazo...


El resultado sería algo así

Por Zeneke

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Jul 2011 11:23 pm
Si tengo un rato lo miro, por ahora celebro que funcione

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox

 

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