Animation

  1. Home
  2. Computing & Technology
  3. Animation

Deconstructing the Paint Application IV: The Oval Tool

By Adrien-Luc Sanders, About.com

3 of 4

Breaking Down curveTo

A curve starts at the anchor points defined by moveTo (anchorx, anchor y), and is drawn to two new anchor points defined by curveTo, with the curve itself belling towards a control point:
_root.ellipsetracker.moveTo(0,0) ; _root.ellipsetracker.curveTo (25,25,50,50) ;

In that example, a curve is drawn starting at point (0,0) and ending at point (50,50) on the stage, but with the curve belling towards a point defined at (25,25). That’s simple enough for a static drawing, but when it comes to something dynamic that’s constantly changing with mouse movement, that’s where the variables come in.

In order to define a full circle, you should have at least four control points and four anchor points, all connecting to close the circle – but the more points you have, the smoother and more perfectly round your circle will be. I’ve used four for the paint app for ease in calculating anchor points, as if you’ll look at the example above, a circle has been divided into quadrants clearly marking the starting and ending points of each curve relative to the starting and ending positions of the mouse cursor (_root.linex,_root.liney and _root._xmouse, _root._ymouse).

The anchor points themselves (shown in blue) are calculated by defining points midway between various control points (and each control point covers the four quadrants). Each curveTo draws a curve from point A to point B, then point B to point C, point C to point D, and then from D back to A.

3 of 4

Explore Animation

More from About.com

Animation

  1. Home
  2. Computing & Technology
  3. Animation
  4. Flash Animation Tutorials
  5. Deconstructing the Paint Application IV: The Oval Tool

©2008 About.com, a part of The New York Times Company.

All rights reserved.