ACTIONSCRIPT 3 Developer’s Guide en

ACTIONSCRIPT 3.0 DEVELOPER’S GUIDE
Display programming
The DrawingCanvas class
In Flex, all child display objects added to a Container object must be of a class that descends from the
mx.core.UIComponent class. This application adds an instance of the DrawingCanvas class as a child of an
mx.containers.VBox object, as defined in MXML code in the SpriteArranger.mxml file. This inheritance is defined in
the DrawingCanvas class declaration, as follows:
public class DrawingCanvas extends UIComponent
The UIComponent class inherits from the DisplayObject, DisplayObjectContainer, and Sprite classes, and the code in
the DrawingCanvas class uses methods and properties of those classes.
The DrawingCanvas class extends the Sprite class, and this inheritance is defined in the DrawingCanvas class
declaration, as follows:
public class DrawingCanvas extends Sprite
The Sprite class is a subclass of the DisplayObjectContainer and DisplayObject classes, and the DrawingCanvas class
uses methods and properties of those classes.
The DrawingCanvas() constructor method sets up a Rectangle object, bounds, which is property that is later used in
drawing the outline of the canvas. It then calls the initCanvas() method, as follows:
this.bounds = new Rectangle(0, 0, w, h);
initCanvas(fillColor, lineColor);
AS the following example shows, the initCanvas() method defines various properties of the DrawingCanvas object,
which were passed as arguments to the constructor function:
this.lineColor = lineColor;
this.fillColor = fillColor;
this.width = 500;
this.height = 200;
The initCanvas() method then calls the drawBounds() method, which draws the canvas using the DrawingCanvas
class’s graphics property. The graphics property is inherited from the Shape class.
this.graphics.clear();
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
this.graphics.drawRect(bounds.left - 1,
bounds.top - 1,
bounds.width + 2,
bounds.height + 2);
this.graphics.endFill();
The following additional methods of the DrawingCanvas class are invoked based on user interactions with the
application:
The addShape() and describeChildren() methods, which are described in “Adding display objects to the
canvas” on page 205
The moveToBack(), moveDown(), moveToFront(), and moveUp() methods, which are described in “Rearranging
display object layering” on page 208
The onMouseUp() method, which is described in “Clicking and dragging display objects” on page 207
Last updated 6/6/2012
204