Java Reference
In-Depth Information
In this case, the
fill
of
rect
is set using a new version
createLinearGradient
that can be found in
Listing 8-15. This new version will be discussed shortly, but first let's look at the
Stops
used. There are
four
Stops
. The first and last
Stops
are fixed at the offset 0.0 and 1.0, but their
color
is animated. Let's call
the first and last
Stops
the end
Stops
, since they are at either end of the gradient. The two middle
Stops
have fixed colors—one is fixed to white and the other fixed to black—so let's call these the middle
Stops
.
The
Timeline
named
anim
moves the middle stops to the right by increasing the value of
t
. The
Timeline
also animates the value of
w
. The variable
w
controls how much red and green are applied to the
color
of the end stops. I named the variable
w
because it affects how white the end stops are. So the idea
here is that the white and blue bands created by the middle stops move to the right and then wrap
around and start back at the beginning. And while the middle bands move, the end stops change color to
create a seamless gradient from the middle stops to the end of the gradient.
In Figure 8-8 it looks as if there are more than just four
Stops
. Listing 8-15 explains the new version
of
createLinearGradient
and how it creates the impression that there are many more
Stops
.
Listing 8-15.
createLinearGradient(new)
public function createLinearGradient(length:Number,stops:Stop[]):LinearGradient{
return LinearGradient{
startX: 0
endX: length
startY: 0
endY: 0
cycleMethod: CycleMethod.REPEAT
proportional: false
stops: sortStops(stops);
}
}
Listing 8-15 shows a function very similar to the one found in Listing 8-7. However, this version
takes a new parameter called
length
, which is used to set the parameters
startX
and
endX
. It says, Draw
this complete gradient from the x value
0
to the x value
length
. The parameters
startY
and
endX
are set to
zero, which means there is no vertical component to the gradient and it goes from left to right. The
property
cycleMethod
is being set to
CycleMethod.REPEAT
, which causes the gradient to be copied over the
entire shape to which it is applied. By setting these additional properties on the
LinearGradient
it makes
it appear that there are many more
Stops
on the rectangle from Figure 8-8.
Summary
This chapter showed you the basics of creating colors and both linear and radial gradients. This included
understanding the two modes in which gradients operate—proportional and non-proportional. Several
functions were defined to animate the colors and gradients. Examples of using these functions showed
you how to dynamically change the
color
and
offset
of the
Stops
found in the gradients, to produce a
number of interesting results with very little code.
