Progressive curved line drawing between points in Flash
I needed a way to draw a Bézier curve between sets of points. It was necessary for the line to curve the same amount regardless of how far apart the points were. I also needed a way to animate the line as it was drawn. Using some geometry and adjusting for the orientation of the Flash Cartesian coordinate system, I devised a way to determine the Bézier point. Then I used Tweener to animate an invisible movieclip between the start and end point while curving to the Bézier point along the way. As Tweener updated, I used the drawing API to draw between the start point and the current position of the Tween.
I needed a way to draw a Bézier curve between sets of points. It was necessary for the line to curve the same amount regardless of how far apart the points were. I also needed a way to animate the line as it was drawn. Using some geometry and adjusting for the orientation of the Flash Cartesian coordinate system, I devised a way to determine the Bézier point. Then I used Tweener to animate an invisible movieclip between the start and end point while curving to the Bézier point along the way. As Tweener updated, I used the drawing API to draw between the start point and the current position of the Tween.
Click here to view Dynamic Bézier Point »
About Brian
Brian Hadaway is a Senior Interactive Developer at Roundarch in Chicago where he specializes in front-end technologies including HTML/CSS/JS, Flash and Flex. Find him on GitHub, StackOverflow, LinkedIn, Twitter, Google, Facebook and Foursquare.