I have a few samples I am working on to demonstrate how to do some “drag selection” and I thought some of the base code I use in these samples would be good to post on its own.

So here it is. Pretty basic, but it will serve as the basis for a few samples that I should have out next week (hopefully).

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:

Here is the app code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
    <MyCanvas borderStyle="solid" backgroundColor="white" backgroundAlpha=".5"
        width="400" height="300"/>

</mx:Application>
 

Here is the custom component code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    mouseMove="onMouseMove(event)" mouseDown="onMouseDown(event)"
    mouseOut="onMouseOut(event)" mouseUp="onMouseUp(event)">
    <mx:Script>
        <![CDATA[
           
            import flash.events.MouseEvent;
            import mx.core.UIComponent;
           
            private var startMouseX:int;
            private var startMouseY:int;
            private var isMouseDown:Boolean=false;
           
           
            private function onMouseDown(event:MouseEvent):void{
                isMouseDown=true;
                startMouseX=mouseX; 
                startMouseY=mouseY;    

            }

            private function onMouseUp(event:MouseEvent):void{
                isMouseDown=false;
                graphics.clear();              
            }
           
            private function onMouseMove(event:MouseEvent):void{
                if (isMouseDown){
                    graphics.clear();
           
                    graphics.beginFill( 0xCCCCCC );
                    graphics.drawRect( startMouseX, startMouseY, event.localX – startMouseX, event.localY – startMouseY );                 
     
                }   
            }
               
            private function onMouseOut(event:MouseEvent):void{
                isMouseDown=false;     
                dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));
            }          
           
           
        ]]>
    </mx:Script>
</mx:Canvas>
 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis


2 Comments »