Stretch and rotate a Movieclip without distortion

Question

i'm building a flash desktop app, where the user needs to link two Movieclips on stage (a computer and a router) using a line (or whatever can do the job), i want to achieve this same exact effect: image1. I searched and found this solution, i tried the code and did some modifications:

link.addEventListener(MouseEvent.CLICK, linkOnClick);
function linkOnClick(e:MouseEvent){

this.addEventListener(Event.ENTER_FRAME, enterFrame);

var linkPoint:Point = new Point(link.x, link.y);
var mousePoint:Point = new Point();
var distance:Number;
var radians:Number;

function enterFrame(e:Event):void { 

    //Distance
    mousePoint.x = stage.mouseX;
    mousePoint.y = stage.mouseY;
    distance = Point.distance(linkPoint, mousePoint);
    link.width = distance;

    //Rotation
    radians = Math.atan2(stage.mouseY - link.y, stage.mouseX - link.x);
    link.rotation = radians * (180/ Math.PI);

    if(link.hitTestObject(router)){trace("Success");}
}

When i compiled the code i got this: image2, so as you may remark, the problems i found are:

1-the edge of the line follows the direction of the mouse, but sometimes it goes beyond the cursor, i want the cursor to drag the edge of the line.

2-the line changes it's width, if it's 90° degrees the line width is so remarkable, i want the line to have a constant width.

how can i acheive the same exact effect shown in image1 ?

I advise to achieve it by redrawing a line each frame rather than via transforming a predefined graphics. — Organis, Mar 30 '18 at 18:03
https://stackoverflow.com/questions/15035665/draw-line-from-object-to-mouse-as3 but instead of continuously drawing you need to clear and redraw from the start position to the mouse pointer. — Organis, Mar 30 '18 at 19:31
Thank you, i tried the code, but this solution doesn't seem to draw a straight line, because i want a straight line that follows the cursor to the target, any idea how can i use this to achieve my goal? — nabster023, Mar 31 '18 at 14:51

Organis · Accepted Answer · 2018-03-31T18:30:47.933

// First, lets create mouse-transparent container for drawing.
var DrawingLayer:Shape = new Shape;
addChild(DrawingLayer);

// Hook the event for starting.
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

// Define a storage for keeping the initial coordinates.
var mouseOrigin:Point = new Point;

function onDown(e:MouseEvent):void
{
    // Save the initial coordinates.
    mouseOrigin.x = DrawingLayer.mouseX;
    mouseOrigin.y = DrawingLayer.mouseY;

    // Hook the events for drawing and finishing.
    stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}

function onDraw(e:MouseEvent):void
{
    // Remove the previous line.
    DrawingLayer.graphics.clear();

    // Draw a new line.
    DrawingLayer.graphics.lineStyle(5, 0xFF6600);
    DrawingLayer.graphics.moveTo(mouseOrigin.x, mouseOrigin.y);
    DrawingLayer.graphics.lineTo(DrawingLayer.mouseX, DrawingLayer.mouseY);
}

function onUp(e:MouseEvent):void
{
    // Unhook the events for drawing and finishing.
    stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}

Thanks a lot this is exactly what i wanted, it worked perfectly. — nabster023, Apr 03 '18 at 14:18

MESepehr · Answer 2 · 2018-03-31T17:32:26.233

2

It's because of that the actionscript is trying to stretch the line thickness by changing its container MovieClip's scale. But you can prevent this by setting the line Scale option to None.

To do that, select your line and open the properties menu and then select None from the drop down menu of the Scale option.

But, I recommend you to draw a line by a code: Draw line from object to Mouse (AS3)

Write below code:

this.graphic.clear ();
this.graphic.lineStyle(0x000000);
this.moveTo(startPoint.x,startPoint.y);
this.lineTo(endpoint.X,endpoint.y);

edited Mar 31 '18 at 17:32

answered Mar 31 '18 at 02:56

MESepehr

758
6
19

Thank you very much it worked, now the line has a constant width and doesn't scale, but the first problem is still there, the edge of the line doesn't follow the mouse cursor all the time, sometimes it goes before the cursor, and sometimes it goes after it: [as you can see here](https://i.imgur.com/DDmm1DA.gifv). i also tried drawing the line using code, but it doesn't seem to draw a straight line, because i want a straight line. – nabster023 Mar 31 '18 at 15:07
I updated my post for the graphic.lineTo sample to draw a line dynamically. – MESepehr Mar 31 '18 at 17:33

Stretch and rotate a Movieclip without distortion

2 Answers2