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()
lineTo()
Creating A Simple 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.
lineStyle(1,0x000000,100)
In the simplest
of examples the next step is to tell
flash where to draw the line. This is
done using the lineTo() function. Since
flash is vector based it used coordinates
to determine the length and position
of the line.
The lineTo function(x,y) accepts two values,
the x coordinate and y coordinate describing
the point where you want to draw the line
to.
For example:
lineStyle(1,0xFF0000,100);
lineTo(150,50);
By default the flash starts drawing
at the point (0,0) which is in the top
left corner of the stage it then creates
a line to the point (150,50) as defined
in the lineTo function which is 150 pixels
to the right and 50 pixels down.
To make flash draw from a chosen point
to another chosen point we must move the
starting point of the line. To do this
we use the MoveTo() function. The MoveTo()
function also uses x and y coordinates
writing moveTo(50,200) moves the starting
point to 50 pixels to the right and 200
pixels down form the top left corner of
the stage.
In this example the line style is set
to a thickness of 3 pixels and the color
red using style (3, 0xFF0000,100). Then
the start of the line line is moved from
the origin to the point (50,200) using
moveTo(50,200). The
line is then drawn from the new starting
point to the coordinates (50,200) using
lineTo(150,50).
Creating Multiple Lines
Before we go on it should be noted that
the best way to draw objects in flash is
with the use of a movie clip. instead of
simply calling the api drawing functions
and creating line on stage. The best way
to draw objects is inside a container movie
clip doing this allows greater freedom
in the future when we may want to have
greater control of our drawn object as
movie clips can be easily controlled by
actionscript.
The first thing we must do is create an
empty container that we can put out drawn
objects inside. to do this we use the createEmptyMovieClip()
class. As we want to create an empty movie
clip on the stage we can write:
this.createEmptyMovieClip("holder",1);
In this case the prefix "this" creates
the movie clip on the stage as we have
no other movie clips in our timeline. With
our movie clip created we can then create
our line inside it.
This creates a single 1 pixel black line
from the point (10,20) to the point (40,60).
When drawing it is rare to finish with
just one line so the next step is to create
another line in our holder mc. Since the
last thing we told flash to do was draw
a line to the point (40,60) the "pen" is
left in this location. So unless we want
flash to continue drawing from the location
we need to move the position again. This
is simply a matter of using the moveTo
function again and then creating a new
location for flash to draw to.
This draws two separate lines both inside
the movie clip "holder". one
starting at the point (50, 60) and going
to (100,120) and the other line starting
at point (80,60) and going to (180,100).
In the example above both lines are the
same color. If we want to make them appear
different as well as being in different
locations we have to call the lineStyle()
function again. Following the same order
of operations (setting style, then moving
the starting post ion then drawing out
line) we can insert a new line style into
our code and change the properties of the
second line before it is drawn.
This restyles the second line creating
one red line and one blue line making them
more visually distinctive.
Creating Simple Shapes
There may be occasions when we want to
create a continuous series of lines to
build a shape. To do this you can simply
leave out the second moveTo function and
linestyle function and list the points
that you want flash to draw lines to. That
way the ends of each line are connected
to each other creating a perimeter.
First
line style is set then pen is moved to
into the starting position. Flash then
draws a line from the point (10,20) to
the point (90,20). Then from the point
(90,20) to the Point (90,100). Then another
line is drawn from the point (90, 100)
to the next point (10,100) and then from
(10,100) back to the point (10,20). This
creates a simple green square.
Rectangles are geometrically similar to
squares the main difference between the
two is that a rectangle does not have four
equal sides instead a rectangle has only
opposite sides that are equal in length
(and parallel). To draw a rectangle we
simple adjust the coordinates of the four
points so that the length and width are
different values. The actionscript above
creates a simple blue rectangle with a
width of 150 pixels and a height of 100
pixels.
This creates a simple red triangle which
is approximately equilateral (equal side
and equal angles). You can create many
different types of triangles using this
simple three coordinate method however
you must know calculate the required coordinates
in order to create the exact type of triangle
you want.
