As we have seen in [Drawing
Shapes With Actionscript] simple shapes are relatively
easy to create using actionactionscript.
We can set the size of the shape, the thcikness,
color and transparency of the perimeter
line. The one thing we didn't do was fill
the shape will a color. In flash therare
a simple set of methiods th are designed
to fill shapes.
beginFill()
beginGradientFill()
endFill()
Creating A Simple Color Fill Using The
Drawing API
We can use the beginFill function to color
the inside of shape. The beginFill function
operates by filling the inside of the shape
with color so it must be put before the
first lineTo or curveTo commands in your
actions sequence. If the beginFill is put
in the middle of a lineTo or curveTo sequence
the fill will spill over the bounds of
the shape or not be visible at all.
beginFill(color,alpha);
Then we must call the endFill() function
to tell flash to stop filling the shape.
The endFill() method requires no arguments
and is just put at the end of the LineTo
or (CurveTo) sequence. If for some reason
it is left out flash will still display
the fill but and flash will most liekly
stop the fill automatically however this
reslts in an unnesary use of resources
and will noticeably hinder the performance
of your code.
endFill();
As we have seen
when drawing in flash it is considered
best practice to put draw objects inside
a movie clip "holder".
This is done by creating an empty movie
clip on stage and then drawing your objects
inside the movie clip. To learn more
about creating movie clips with actionscript
see [Working With Movie Clips Knowledgebase].
Flash carefully fills the square with
the color usig the perimeter of the shape
to guide the fill. If for some reason you
so not complete the perimeter of the shape
when you create the actions sequence flash
will automatically create a new line (with
the last used style) from the final point
to the initial moveTo position.
Flash automatically creates a line form
the point (200,200) to (50,50) to complete
the perimeter creating a triangle.
Manipulating The Transparency of The
Fill
The beginFill() method also accepts a
value for the alpha channel of the fill.
This sets the transparency of the fill
itslef determining how much of the image
behind the movie clip you can see. An alpha
value of 50 sets the pixel transparency
to 50% which means that it takes on
50% of the light intensity from behind
the movie clip. If the color behind the
fill is white the fill appears lighter
if its the same color it remains unchanged
and if its a different color 50% "shines"
through.
Flash can create gradient fills. Using
the fill matrix gradients can be tuned
to multiple different types of gradient
fill. The two basic types of fill are linear
and radial patterns which can be
tweaked to produce diagonal gradient, multi
color gradients, radial gradients or even
elliptical gradient patterns each pattern
is determined by how you set up the beginGradientFill()
method.
Creating Linear Gradient Fills
For the sake of clarity the input valueas
of the beginGradiernt Fill() method have
been represented by variables and thier
values shown at the top of the actions
sequnce. The value themselves can be put
directly into the beginGradientFill method
bu that would mke the code difficualt to
read/manage.
To create a simple linear gradient fill
set the "fillType" to linear, Then set
the starting and ending colors. Set the
alpha channel values of each of the fill
colors. Set the "ratio" to [0,255] to ..
Then set the "matrix" values to "box,
x:50, y:50, w:150, h:100, and r:90/180*Math.PI".
The above example is a simple linear gradient
from left to right however we can also
create linear gradient flowing diagonally
from one corner of the rectangle to another
By changing the "r" value of the matrix
we can set the orientation of the linear
gradient. Since "r" only accepts an angle
value in radians any angle written in degrees
must be converted into radians. As 1 degree
equals PI/180 radians a diagonal gradient
at 45 degrees becomes 45/180 *(3.14116..)
or written using the correct actionscript
syntax 45/180*Math.PI where PI is the value
of the constant pi
Additionaly we can make changes the
matirx box dimernsions and alter
the boundrays of the gradient. By making
the width equal to 25 we can shrink the
fill area in the rectangle that has the
gradient applied to it creating sections
on each end with solid color.
In addition to linear gradient fills you
can also create a radial graident fill
pattern by setting the "fillType" in
the gradient fill matrix to "radial".
With the gradient area inside the rectangle
shrunk it is easyer see the effect of chaning
the x and y values in the gradient matrix.
These values set the effective starting
position of the gradient fill. By changing
the value of x to "25" and y
to "" we
can move the starting position of the gradient
fill to the left.
You can clearly see the radial
gradient pattern int he top left corner
of the rectangle. The value for x has been
changes to move the center of the gradient
toward the x axis and the gradient box
has been squashed into an oval gradient
pattern as the width "w"
is greater thant the height "h"
of the box.
