Question

I’m refreshing my AS3 basic knowledge. Now I’m playing with creating movieclips with dimensions specified by mouse distance.

This is my full code:

http://pastebin.com/4jpqFn7N

package  {

    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.display.Graphics;
    import flash.events.MouseEvent;
    import wck.World;

    public class Game extends World {
        private var isDragging:Boolean = false;
        private var line:Shape = new Shape();
        private var lineInfo:Array = [];
        public function Game() {
            addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
            addEventListener(MouseEvent.MOUSE_MOVE, recalcDrag);
            addEventListener(MouseEvent.MOUSE_UP, stopDragging);
        }

        private function addIt(dist:Number):void {
            var i:Rect = new Rect();
            i.x = mouseX;
            i.y = mouseY;
            i.width = dist;
            i.height = dist;

            addChild(i);
        }

        private function startDragging(e:MouseEvent):void {
            if(!(e.target is Rect)) {
                isDragging = true;
                lineInfo['bX'] = mouseX;
                lineInfo['bY'] = mouseY;
                line.graphics.moveTo(mouseX, mouseY); 
                addChild(line);
            }
        }

        private function recalcDrag(e:MouseEvent):void {
            if(isDragging) {                
                line.graphics.clear();
                line.graphics.lineStyle(10, 0x000, .65);
                line.graphics.moveTo(lineInfo['bX'], lineInfo['bY']); 
                line.graphics.lineTo(mouseX, mouseY);
            }
        }

        private function stopDragging(e:MouseEvent):void {
            if(isDragging) {
                var distance = DistanceTwoPoints(mouseX, lineInfo['bX'], mouseY, lineInfo['bY']);
                line.graphics.clear();
                isDragging = false;
                if(!(e.target is Rect) && distance != 0 ) addIt(distance);
            }
        }

        public function DistanceTwoPoints(x1:Number, x2:Number,  y1:Number, y2:Number): Number {
            var dx:Number = x1-x2;
            var dy:Number = y1-y2;
            return Math.sqrt(dx * dx + dy * dy);
        }
    }

}

However I have feeling that redrawing whole line on mouse move might be resource expensive. How can I lighten it up a bit?

Answer 1

you could employ an ENTER_FRAME event instead of a MOUSE_MOVE event. MOUSE_MOVE is quite an expensive call, especially on mobile devices, and it has no real benefits over ENTER_FRAME if you set it up correctly.

also, if you’re not using the timeline in Flash Professional, you should use Sprite objects instead of MovieClip objects.

note: the following code is untested:

package
{   
    //Imports
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.Graphics;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import wck.World;

    //Class
    public class Game extends World
    {
        //Properties
        private var line:Shape;
        private var lineInfo:Array;

        //Constructor
        public function Game()
        {
            addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventListener);
        }

        //Mouse Down Event Listener
        private function mouseDownEventListener(e:MouseEvent):void
        {
            if (!(e.target is Rect))
            {
                removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventListener);
                addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventListener);

                lineInfo = new Array();
                lineInfo['bX'] = mouseX;
                lineInfo['bY'] = mouseY;

                line = new Shape();
                line.graphics.moveTo(mouseX, mouseY);

                addChild(line);
            }
        }

        //Mouse Move Event Listener
        private function mouseMoveEventListener(e:MouseEvent):void
        {
            removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventListener); 
            addEventListener(Event.ENTER_FRAME, enterFrameEventListener);
            addEventListener(MouseEvent.MOUSE_UP, mouseUpEventListener);
        }

        //Enter Frame Event Listener
        private function enterFrameEventListener(e:Event):void
        {
            line.graphics.clear();
            line.graphics.lineStyle(10, 0x000, .65);
            line.graphics.moveTo(lineInfo['bX'], lineInfo['bY']); 
            line.graphics.lineTo(mouseX, mouseY);
        }

        //Mouse Up Event Listener
        private function mouseUpEventListener(e:MouseEvent):void 
        {
            removeEventListener(Event.ENTER_FRAME, enterFrameEventListener);
            removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventListener);
            addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventListener);

            line.graphics.clear();

            var distance:Number = distanceBetweenTwoPoints(mouseX, lineInfo['bX'], mouseY, lineInfo['bY']);

            if (!(e.target is Rect) && distance != 0)
            {
                addRectangle(distance);
            }
        }

        //Distance Between Two Points
        public function distanceBetweenTwoPoints(x1:Number, x2:Number, y1:Number, y2:Number):Number
        {
            var dx:Number = x1 - x2;
            var dy:Number = y1 - y2;

            return Math.sqrt(dx * dx + dy * dy);
        }

        //Add Rectangle
        private function addRectangle(distance:Number):void
        {
            var rect:Rect = new Rect();
            rect.x = mouseX;
            rect.y = mouseY;
            rect.width = distance;
            rect.height = distance;

            addChild(rect);
        }
    }
}