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.
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.
Search WWH ::

Custom Search