actionscript 3 stretching and rotating a movieclip arrow with drag

Question

I am quite new to actionscript, and a bit stuck now. I am trying to make an arrow that is fixed at one end, but the pointy end should be draggable with mouse drag, thus streching and rotating the arrow. It would be also great if I could keep the triangle tip of the arrow from changing size while dragging it. I thought about making a movieclip composed of the tip and of the line separately, the line doing all the "stretching" while the tip simply follows around. I am just not sure how.

Most of the docs I found about mouse drag are about moving complete element not just one part while staying attached to the rest. I did find something about rotating an arrow with mouse drag here, but it's only partially helpful to my problem as it says nothing about making the arrow bigger at the same time.

Does anyone have an idea about how to realise that?

Answer 1

Here is one way to do this (what I would deem the easiest).

1. In Adobe Animate, import or draw your arrow.
2. Convert your bitmap or shape into a MovieClip (Modify -> Convert To Symbol)
3. On the dialog box that comes up, check "Enable guides for 9 slice scaling", then hit OK.
4. Now, double click your new MovieClip to edit it. You'll see there are lines (guides). When scaling vertically, only the areas in the middle 3 rows will stretch/scale.
5. Move the guide lines until they match the screenshot (only the part of the arrow you want to stretch is in the middle), also, for convenience, line it up so the + (anchor point) is at the exact position of the arrow's base.
6. Now, since 9-slice scaling doesn't play nice with rotation, we're going to nest this arrow movie clip into a container MovieClip. Go back to the main timeline. Give your arrow movie clip an instance name of arrowInner.
7. With arrowInner selected/focused, hit F8 (or Modify -> Convert To Symbol) to wrap that object inside another MovieClip - hit OK on dialog box (do not check any of the options).
8. Give this new MovieClip an instance name of arrowOuter. Double click it to edit it, and align arrowInner so the anchor point at the base of the arrow (same as you did before inside arrowInner).

9. Now it's time code, open the code editor on the main timeline, and paste the following (see the code comments for explanations).

   //we want a function to fun every frame tick of the applicaiton
   this.addEventListener(Event.ENTER_FRAME, enterFrame);
   
   //create some helper vars that are used in the enterFrame handler
   //arrowPoint is just the point of the base of the outer arrow
   var arrowPoint:Point = new Point(arrowOuter.x,arrowOuter.y);
   
   //this will store the current mouse point
   var mousePoint:Point = new Point();
   
   //this will store the radian rotation of the arrow needed to point it at the mouse
   var radians:Number;
   
   function enterFrame(e:Event):void {
       //set the global mouse point
       mousePoint.x = stage.mouseX;
       mousePoint.y = stage.mouseY;
   
       //calculate the distance between the two points (mouse and arrow base).
       //set the height of the inner arrow to that distance
       arrowOuter.arrowInner.height = Point.distance(arrowPoint, mousePoint);
   
       //get the angle needed for the arrow to point at the mouse.
       radians = Math.atan2(stage.mouseY - arrowOuter.y, stage.mouseX - arrowOuter.x);
   
       //convert the radians to degrees,  add 90 to compensate for the starting position of the arrow
       arrowOuter.rotation = 90 + (radians * (180/ Math.PI));
   }
   

---

If 9-slice scaling isn't your thing (it's not mine), then it's only a little more work:

1. Create your arrow shaft and arrow head as separate pieces. Give them the instance names head and shaft respectively. Create the arrow so it's pointing to the right.

2. Select them both, and nest them into a MovieClip (F8). Give that new container movie clip an instance name of arrow, and make sure it's anchor point is the left most part of the shaft in middle (the opposite end from the arrow point).

3. use the following code:

   this.addEventListener(Event.ENTER_FRAME, enterFrame);
   
   var arrowPoint:Point = new Point(arrow.x, arrow.y);
   var mousePoint:Point = new Point();
   var radians:Number;
   var distance:Number;
   
   function enterFrame(e:Event):void {
       mousePoint.x = stage.mouseX;
       mousePoint.y = stage.mouseY;
   
       distance = Point.distance(arrowPoint, mousePoint);
   
       //stretch the shaft to the full distance less the size of the arrow head
       arrow.shaft.width = distance - arrow.head.width;
       //move the arrow head to the end of the shaft
       arrow.head.x = arrow.shaft.width;
   
       radians = Math.atan2(stage.mouseY - arrow.y, stage.mouseX - arrow.x);
       arrow.rotation = radians * (180/ Math.PI);
   }