In case Flash no longer exists; a copy of this site is included in the Flashpoint archive's "ultimate" collection.

Dead Code Preservation :: Archived AS3 works from wonderfl.net

Tutorial 9 - Drawing Lines and Mouse Following Motion

Draw lines with line style, calculate distances and gradually move objects at varying speeds
Get Adobe Flash player
by AceDecade 21 Aug 2012
// forked from AceDecade's Tutorial 8 - Mouse Position and Events
// forked from AceDecade's Tutorial 7 - Events, Listeners, and Frames
// forked from AceDecade's Tutorial 6 - Optional Parameters and Functionception
// forked from AceDecade's Tutorial 5 - Function Parameters
// forked from AceDecade's Tutorial 4 - Basic Functions
// forked from AceDecade's Tutorial 3 - Basic Number Variables
// forked from AceDecade's Tutorial 2 - Intro to Coordinates and Graphics
// forked from AceDecade's Tutorial 1 - Basics
package {
    
    import flash.display.Sprite;
    
    import flash.events.Event;
    import flash.events.MouseEvent;
    
    import flash.display.Stage;
    
    public class FlashTest extends Sprite {
        
        var X:Number = 40;
        var Y:Number = 50;
        var size:Number = 20;
        var color:Number = 0xff0000;
            
        public function FlashTest() {
            stage.addEventListener(Event.ENTER_FRAME,someFunction);
            
            stage.addEventListener(MouseEvent.MOUSE_DOWN,mousedown);
        }
        
        public function someFunction(e:Event) {
            graphics.clear();
            
            //figure out how far away from the mouse the square is
            var distX:Number = mouseX-X;
            var distY:Number = mouseY-Y;
            
            //add a fraction of this distance to X and Y so that they get closer every frame
            X += distX/10;
            Y += distY/10;
            
            //for effect, we'll draw a blue line between the mouse and the square
            //we set the line style to our thickness, blue color, 1 for 100% alpha/transparency
            
            //we calculate the real distance between the two, by using Pythagorean Theorem
            var realDist:Number = Math.sqrt(distX*distX+distY*distY);
            
            //then we figure out a good line thickness, 3% of the distance
            var lineThickness = 0.03*realDist;
            graphics.lineStyle(lineThickness,0x0000ff,1);
            
            //we move the pen to the square's position
            graphics.moveTo(X,Y);
            
            //then we draw a straight line to the mouse's position
            graphics.lineTo(mouseX,mouseY);
            
            //now that we're done drawing lines, we set the pen's style back to 0,0,0
            //that way, it wont get used when flash draws other stuff, like rectangles
            graphics.lineStyle(0,0,0);
            
            //the farther away the square is, the bigger distX and distY will be
            //and the faster the square will appear to move
            
            
            //basically, we take the absolute value of the distances
            //if the distance away in the X direction is less than half the size
            //and the distance away in the Y direction is less than half the size
            //then that means that the mouse is currently touching the square
            //and we turn the color green
            if(Math.abs(distX) < size/2 && Math.abs(distY) < size/2) {
                color = 0x00ff00;
            } else {
                //this code only gets run if the condition wasn't met, so if the code above it didn't run
                //if its not the case that the mouse is touching, we set the color to red
                color = 0xff0000;
            }
            
            drawSquare(X-size/2,Y-size/2,color,size);
        }
        
        public function mousedown(e:MouseEvent) {
            //doesnt do anything at the moment
            
        }
        
        //draws a square of color col, at xPos,yPos, with side length sSize
        public function drawSquare(xPos:Number, yPos:Number, col:Number, sSize:Number) {
            graphics.beginFill(col);
            graphics.drawRect(xPos,yPos,sSize,sSize);
            graphics.endFill();
        }
    }
}