Drawing Cruves With The Flash API ?

The flash drawing API is essentially a collection of movie clip methods that are used to draw objects using actionscript. In this article we are going to examine how to use the most basic drawing functions in actionscript:

• lineStyle()
• moveTo()
• CruveTo()
  

Creating A Simple Curved Line Using The Drawing API

Before you call the drawing api you must first define the style of the line you want to draw. To do this we use the linestyle() function. Line style allows us to set the thickness, color and transparency of the line we are going to draw. If the line style is not set nothing will be drawn on the screen.

curveTo(x,y,x,y);

As we have seen when drawing in flash it is considered best practice to put darwn objects inside a movie clip "holder". This is done.... To learn more about creating movie clips with actionscript see [Working With Movie Clips Knowledgebase].

For example:

this.createEmptyMovieClip("holder",1); holder.lineStyle(3,0xFF0000,100); holder.moveTo(0,200); holder.curveTo(0,0,200,0);

The starting position for the "pen" is at (0,200) and the end coordinate is at (200,0). These anchor points are both an equal distance away from the "control" point (0,0) creating a symmetrical curve between the two anchor points.

If the distance of the "control" point from point is not the same as the distnce to point b the curveTo function will create a skewed curve in the direction of the greatest distnace from the anchor.

For example:

this.createEmptyMovieClip("holder",1); holder.lineStyle(3,0xFF00FF,100); holder.moveTo(50,200); holder.curveTo(0,100,200,50);

So as we can see the greater the distance between the two anchor points of the curve and the "control" point the greater the curvature of the line.

For example:

this.createEmptyMovieClip("holder",1); holder.lineStyle(3,0xFF00FF,100); holder.moveTo(80,30); holder.curveTo(140,450,200,30);

In this example the control point is actuasly off the stage. Sice the movie clip is only 300x250 the control point actually lies 200 pixels below the movie clip in virtual space.This is OK since no point is actually drawn but rather the number is used to calculate the curvature of the line.

Creating Multiple Curves

Just as with straight lines we can create multiple curved lines in flash by moving the starting point of the pen

For example:

this.createEmptyMovieClip("holder",1); holder.lineStyle(3,0xFF00FF,100); holder.moveTo(50,50); holder.curveTo(0,100,100,80); holder.lineStyle(3,0xCC00FF,100); holder.moveTo(100,150); holder.curveTo(200,50,250,200);

 

Creating A Simple Wave

If the end point of the "pen" is no changes flash simply continues to draw wehere it left off. Creating a continuos line.

Thiu can be usefull when creating

For example:

this.createEmptyMovieClip("holder",1); holder.lineStyle(2,0xFF9900,100); holder.moveTo(50,80); holder.curveTo(100,0,150,80); holder.curveTo(200,150,250,80);

 

Aproximation Problems

Curves in flash are built using a quadratic bezier approximation that means flash uses relatively simple quadratic equations to create curves between two points. this is not immediately obvious but can be clearly seen when a simple set of four curves are used to create a circle.

For example:

this.createEmptyMovieClip("holder",1); holder.lineStyle(2,0x0000FF,100); holder.moveTo(150,25); holder.curveTo(250,25,250,125); holder.curveTo(250,225,150,225); holder.curveTo(50,225,50,125); holder.curveTo(50,25,150,25);

One solution is to use more than four points but this can be time consuming to do for each shape as the corrdinates must be calculated for each point. The best soultion for creating circles using actionscript is to build a function that creates it automatically when given a value for radius.

NEXT

[Creating Shape Fills Knowledgebase]
[Building Shape Creating Functions Knowledgebase]