DYNAMICALLY DRAWING SHAPES, lines, and even graphs with the Drawing API is one of the benefits of using ActionScript. Add color and gradients to the list and there are no limits.
This chapter covers the major renovations that have occurred in the ActionScript Drawing API and new ways to apply color transformations.
Borders, graphs, and outlines are just a few of the graphics that can be drawn using lines. Lines are essentially the same in ActionScript 2 and 3, including joint and caps styles, a line scale mode, color, and size. However, while the lines are the same, the way they are created has been updated to a more object-oriented approach.
ActionScript 2 includes drawing in the MovieClip class. The MovieClip class controls fills, shapes, lines, and any other drawing functionality. The main functions for drawing lines are lineStyle, moveTo, and lineTo. The lineStyle function defines how the finished line will appear, defining size, color, alpha, and so on. The moveTo function moves the drawing tool to point-locations on the x-axis and y-axis without actually drawing anything. The actual drawing begins with the lineTo function, which defines what point-locations on the x- and y-axis to use for drawing each piece of a graphic. The LineExample class shows how to draw a simple triangle with lines.
In ActionScript 3, drawing no longer depends on the MovieClip class. Instead, the Graphics class is used to create all vector shapes. However, the Sprite or Shape class must be used to create a graphic, as the Graphic class cannot be instantiated independently.
In order to draw using the Sprite or Shape class, you use the graphics property. The graphics property references a Graphics object that includes all the methods and properties necessary to draw shapes, lines, and so on.
Other improvements include the LineScaleMode, JointStyle, and CapsStyle classes. Each of these classes contains static properties that provide the values for their specific function. For example, JointStyle provides static BEVEL, MITER, and ROUND properties used to define a line’s joint style. The benefit of this object-oriented approach is you can rely on static properties rather than string values. For example, instead of using the string "miter" as a parameter value in the lineStyle function, JointStyle.MITER is used.
Circles, squares, and rectangles are the most common shapes created with the Drawing API. Fortunately, ActionScript 3 makes creating shapes far easier than AS2 does.
Circles are more complicated than most of the common shapes that can be created with ActionScript 2. Creating a circle requires custom code and math skills. The following example includes a custom class method called drawCircle to draw a circle base on y, x, radius, and sides values.
ActionScript 3 makes creating shapes so much easier than AS2 does. The AS3 way to create a circle, for example, requires much less code and is extremely easy to implement. In AS3 the Graphics object provides methods for drawing common shapes, such as drawRect, drawRoundRect, drawCircle, and drawEllipse.
The following code is an example of the AS3 CircleExample class using the Graphic classes drawCircle method.
Fills can be represented by solid colors and gradients with ActionScript. Solid-color fills are pretty straightforward, but gradients, as cool as they are, require a little more thought.
This section shows the differences between AS2 and AS3 in how gradient fills are created, and the improvements that have been made to the functionality in AS3.
Depending on the complexity of the design, gradients can require some planning. This is because of the parameters that a gradient requires. In the GradientExample class, for example, eight variables make up the parameter values for the beginGradientFill method. The variables used are arrays, strings, numbers, and a matrix.
You’ve probably noticed that there is no movie clip created in order to use the drawing functionality. A movie clip isn’t needed in this example because the MovieClip class was inherited; therefore, the GradientExample itself is a movie clip and can utilize the drawing features.
In the ActionScript 3 version of the GradientExample, the code is much more compact and easier to read. First of all, as was mentioned above, the MovieClip class is no longer needed to create graphics. Since the GradientExample inherits the Sprite class, the graphics property is available for drawing. In addition, there are new static classes that define the values used for GradientType and SpreadMethod. These classes eliminate the need to rely on string values that were used in AS2.
As far back as ActionScript 1, you could change the color of an item in a Flash movie. The level of control you have in newer versions of ActionScript is much more robust than with the old Color object. The ColorTransform class lets you multiply and offset specific colors rather than simply changing an object from one color to another. The ColorTransform class has been available since AS2, but AS3 has integrated the class into the display architecture, making it much more accessible and easy to implement.
Color transforming in ActionScript 2 is not difficult, but it requires a few steps to work. Transforming color starts with the instantiation of the ColorTransform class. Once the class has been instantiated, it needs to be applied with an object called Transform. When instantiated, the Transform class takes the object that you want to apply the color to as a parameter. Then, the instantiated Transform object uses the colorTransform property to apply the new ColorTransform.
The functionality works fine, but it’s a little convoluted. ActionScript 3 simplifies the process of drawing a circle into one line of code!
Every DisplayObject has a property named transform. The transform property is a Transform object that pertains to the display object’s matrix, color transform, and pixel bounds. In ActionScript 3, the transform property and the ColorTransform class must be used together to transform the color of a display object. The ColorTransformExample is a clear case of how much cleaner your ActionScript code can be after utilizing all the techniques learned in this chapter. For example, you no longer need to create a movie clip to draw, you don’t need a custom method to create a circle, all string values have been replaced by static classes, and all display objects include graphics and transform properties that provide complete drawing and color transforming capabilities.
