Drawing Arrows in Actionscript 3 (Flex 4) Using Simple Trigonometry

Arrows

Continuing the work on the last post – Drawing Stars and Bursts in Actionscript 3 (Flex 4) Using Simple Trigonometry, today I am showing how that little application can be extended to draw arrows of different types, such as the ones on the image below.

In order to create the arrows, we can take the half right side of a burst with 4 sides and render the arrow head with it. That means drawing a quadratic Bezier curve from Po to P1 and another from P1 to P2, using the controls points according to the inner circle (as described on the previous article). See figure above. The rest of the arrow is created by drawing lines from P2 to P3, P3 to P4, P4 to P5, P5 to P6 and then closing the shape with a line from P6 to P0.

Points P3, P4, P5, and P6 can be defined setting the parameters for “Arrow Length”, “Shaft Base Offset”, and Arrow Shaft Thickness”.

Changing the inner radius affect how the head of the arrow will be rendered. Experiment with the tool to produce concave, convex or straight shaped heads.

As usual, below is the application, in case you would like to try it out. Open it in a new tab by clicking HERE.

Get Adobe Flash player

 

Play around and let me know what do you think. Also, please give me any suggestions you may have to improve it or to extend it.

I have some ideas of where I would like to take it next, but getting yours would be great too.


UA-4365634-1