70663

actionscript 3 stretching and rotating a movieclip arrow with drag

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?

Answer1:

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

<ol> <li>In Adobe Animate, import or draw your arrow.</li> <li>Convert your bitmap or shape into a MovieClip (Modify -> Convert To Symbol)</li> <li>On the dialog box that comes up, check "Enable guides for 9 slice scaling", then hit OK. <img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/c1MoC.jpg" alt="Enable guides for 9-slice scaling"></li> <li>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. </li> <li>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 <strong>+</strong> (anchor point) is at the exact position of the arrow's base. <img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/v3L0a.jpg" alt="line up the guides and anchor point"></li> <li>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.</li> <li>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).</li> <li>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).</li> <li>

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)); } </li> </ol> <hr>

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

<ol> <li>

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.

</li> <li>

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).

</li> <li>

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); } </li> </ol>

Recommend

  • error 204 in a Google App Engine API in java
  • Using NinePatch (.9.png) for making scaled Bitmaps
  • Android - FM/Radio Transmitting
  • add service reference xamarin PCL
  • Google Scripts for Sheets - onEdit and “source”
  • access parent project OTHER_SWIFT_FLAGS from pod
  • How can I pass complex expression to parametrized active pattern?
  • Installing ocropus-0.4.4
  • MongoDB query comments along with user information
  • Left and right button misbehaving when trying to add an empty span to contenteditable div
  • AngularJS : transclude ng-repeat inside directive
  • dismiss Progress Dialog in another Activity … Android
  • How to remove all of a jQuery UI dialog when it is closed
  • How do you keep a running instance for Google App Engine
  • WordPress > setting permalink option via script buggy?
  • Azure table store snapshot/backup capability
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • How to disable all widgets inside Panel or inside Composite?
  • Security issues with PHP's Readfile method
  • How to revert to previous XCode version?
  • Ajax calls do not work in IE unless you fiddle with security settings
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • Keep this build forever option - Jenkins
  • Use of this Javascript
  • dc-js disable selecting slices on click for pie chart
  • Chrome doesn't support silverlight anymore? How to solve this?
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • Alert pop up with LWUIT
  • Recording logins for password protected directories
  • formatting the colorbar ticklabels with SymLogNorm normalization in matplotlib
  • Debugging ASP.NET on a built-in web server suddenly stops
  • Linq Objects Group By & Sum
  • Splitting given String into two variables - php
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Check if a string to interpolate provides expected placeholders
  • How to show dropdown in excel using jrxml (jasper api)?
  • How to format a variable of double type
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Buffer size for converting unsigned long to string
  • Django query for large number of relationships