Fills a drawing area with a bitmap image. The bitmap can be repeated or tiled to fill the area. The fill remains in effect until you call the beginFill(), beginBitmapFill(), beginGradientFill(), or beginShaderFill() method. Calling the clear() method clears the fill.

The application renders the fill whenever three or more points are drawn, or when the endFill() method is called.

Parameters

     matrix = new flash.geom.Matrix(); 
     matrix.rotate(Math.PI / 4);
     

See also

package {
    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.geom.Matrix;

    public class Graphics_beginBitmapFillExample extends Sprite {
 
        private var url:String = "image1.jpg";
        private var loader:Loader = new Loader();

        public function Graphics_beginBitmapFillExample() {

            var request:URLRequest = new URLRequest(url);
            
            loader.load(request);
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawImage);
            loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
        }

        private function drawImage(event:Event):void {

            var mySprite:Sprite = new Sprite();
            var myBitmap:BitmapData = new BitmapData(loader.width, loader.height, false);
  
            myBitmap.draw(loader, new Matrix());
            
            var matrix:Matrix = new Matrix();
            matrix.rotate(Math.PI/4);
            
            mySprite.graphics.beginBitmapFill(myBitmap, matrix, true);
            mySprite.graphics.drawRect(100, 50, 200, 90);
            mySprite.graphics.endFill();
            
            addChild(mySprite);
        }
 
         private function ioErrorHandler(event:IOErrorEvent):void {
            trace("Unable to load image: " + url);
        }
    }   
}

Specifies a simple one-color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing. The fill remains in effect until you call the beginFill(), beginBitmapFill(), beginGradientFill(), or beginShaderFill() method. Calling the clear() method clears the fill.

The application renders the fill whenever three or more points are drawn, or when the endFill() method is called.

Parameters

See also

Specifies a gradient fill used by subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) for the object. The fill remains in effect until you call the beginFill(), beginBitmapFill(), beginGradientFill(), or beginShaderFill() method. Calling the clear() method clears the fill.

The application renders the fill whenever three or more points are drawn, or when the endFill() method is called.

Parameters

	type:String — A value from the GradientType class that specifies which gradient type to use: GradientType.LINEAR or GradientType.RADIAL.
	colors:Array — An array of RGB hexadecimal color values used in the gradient; for example, red is 0xFF0000, blue is 0x0000FF, and so on. You can specify up to 15 colors. For each color, specify a corresponding value in the alphas and ratios parameters.
	alphas:Array — An array of alpha values for the corresponding colors in the colors array; valid values are 0 to 1. If the value is less than 0, the default is 0. If the value is greater than 1, the default is 1.
	ratios:Array — An array of color distribution ratios; valid values are 0-255. This value defines the percentage of the width where the color is sampled at 100%. The value 0 represents the left position in the gradient box, and 255 represents the right position in the gradient box. Note: This value represents positions in the gradient box, not the coordinate space of the final gradient, which can be wider or thinner than the gradient box. Specify a value for each value in the colors parameter. For example, for a linear gradient that includes two colors, blue and green, the following example illustrates the placement of the colors in the gradient based on different values in the ratios array: ratios Gradient [0, 127] [0, 255] [127, 255] The values in the array must increase sequentially; for example, [0, 63, 127, 190, 255].
	matrix:Matrix (default = null) — A transformation matrix as defined by the flash.geom.Matrix class. The flash.geom.Matrix class includes a createGradientBox() method, which lets you conveniently set up the matrix for use with the beginGradientFill() method.
	spreadMethod:String (default = "pad") — A value from the SpreadMethod class that specifies which spread method to use, either: SpreadMethod.PAD, SpreadMethod.REFLECT, or SpreadMethod.REPEAT. For example, consider a simple linear gradient between two colors: import flash.geom.* import flash.display.* var fillType:String = GradientType.LINEAR; var colors:Array = [0xFF0000, 0x0000FF]; var alphas:Array = [1, 1]; var ratios:Array = [0x00, 0xFF]; var matr:Matrix = new Matrix(); matr.createGradientBox(20, 20, 0, 0, 0); var spreadMethod:String = SpreadMethod.PAD; this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod); this.graphics.drawRect(0,0,100,100); This example uses SpreadMethod.PAD for the spread method, and the gradient fill looks like the following: If you use SpreadMethod.REFLECT for the spread method, the gradient fill looks like the following: If you use SpreadMethod.REPEAT for the spread method, the gradient fill looks like the following:
	interpolationMethod:String (default = "rgb") — A value from the InterpolationMethod class that specifies which value to use: InterpolationMethod.LINEAR_RGB or InterpolationMethod.RGB For example, consider a simple linear gradient between two colors (with the spreadMethod parameter set to SpreadMethod.REFLECT). The different interpolation methods affect the appearance as follows: InterpolationMethod.LINEAR_RGB InterpolationMethod.RGB
	focalPointRatio:Number (default = 0) — A number that controls the location of the focal point of the gradient. 0 means that the focal point is in the center. 1 means that the focal point is at one border of the gradient circle. -1 means that the focal point is at the other border of the gradient circle. A value less than -1 or greater than 1 is rounded to -1 or 1. For example, the following example shows a focalPointRatio set to 0.75:

See also

Specifies a shader fill used by subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) for the object. The fill remains in effect until you call the beginFill(), beginBitmapFill(), beginGradientFill(), or beginShaderFill() method. Calling the clear() method clears the fill.

The application renders the fill whenever three or more points are drawn, or when the endFill() method is called.

Parameters

     matrix = new flash.geom.Matrix(); 
     matrix.rotate(Math.PI / 4);
     

See also

Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.

Copies all of drawing commands from the source Graphics object into the calling Graphics object.

Parameters

Draws a curve using the current line style from the current drawing position to (anchorX, anchorY) and using the control point that (controlX, controlY) specifies. The current drawing position is then set to (anchorX, anchorY). If the movie clip in which you are drawing contains content created with the Flash drawing tools, calls to the curveTo() method are drawn underneath this content. If you call the curveTo() method before any calls to the moveTo() method, the default of the current drawing position is (0, 0). If any of the parameters are missing, this method fails and the current drawing position is not changed.

The curve drawn is a quadratic Bezier curve. Quadratic Bezier curves consist of two anchor points and one control point. The curve interpolates the two anchor points and curves toward the control point.

Parameters

package {
    import flash.display.Sprite;
    import flash.display.Shape;
    
    public class Graphics_curveToExample1 extends Sprite
    {
        public function Graphics_curveToExample1():void
        {
            var roundObject:Shape = new Shape();

            roundObject.graphics.beginFill(0x00FF00);
            roundObject.graphics.moveTo(250, 0);
            roundObject.graphics.curveTo(300, 0, 300, 50);
            roundObject.graphics.curveTo(300, 100, 250, 100);
            roundObject.graphics.curveTo(200, 100, 200, 50);
            roundObject.graphics.curveTo(200, 0, 250, 0);
            roundObject.graphics.endFill();
            
            this.addChild(roundObject);
        }
    }
}

package {
    import flash.display.Sprite;
    import flash.display.Shape;

    public class Graphics_curveToExample2 extends Sprite
    {
        public function Graphics_curveToExample2() {
            var newMoon:Shape = new Shape();
            
            newMoon.graphics.lineStyle(1, 0);
            newMoon.graphics.beginFill(0xFFFFFF);
            newMoon.graphics.moveTo(100, 100); 
            newMoon.graphics.curveTo(30, 150, 100, 200);    
            newMoon.graphics.curveTo(50, 150, 100, 100);
            graphics.endFill();
            
            this.addChild(newMoon);
        }
    }
}

Draws a circle. Set the line style, fill, or both before you call the drawCircle() method, by calling the linestyle(), lineGradientStyle(), beginFill(), beginGradientFill(), or beginBitmapFill() method.

Parameters

See also

Draws an ellipse. Set the line style, fill, or both before you call the drawEllipse() method, by calling the linestyle(), lineGradientStyle(), beginFill(), beginGradientFill(), or beginBitmapFill() method.

Parameters

See also

package {
    import flash.display.Sprite;
    import flash.display.Shape;

    public class Graphics_drawEllipseExample extends Sprite
    {
        public static const SMALL:uint = 0;
        public static const MEDIUM:uint = 1;
        public static const LARGE:uint = 2;

        public function Graphics_drawEllipseExample()
        {
            drawEgg(SMALL, 0, 100);
            drawEgg(MEDIUM, 100, 60);
            drawEgg(LARGE, 250, 35);    
        }

        public function drawEgg(eggSize:uint, x:Number, y:Number):void  {
            
            var myEgg:Shape = new Shape();
            
            myEgg.graphics.beginFill(0xFFFFFF);
            myEgg.graphics.lineStyle(1);

            switch(eggSize) {
                case SMALL:
                    myEgg.graphics.drawEllipse(x, y, 60, 70);
                    break;
                case MEDIUM:
                    myEgg.graphics.drawEllipse(x, y, 120, 150);    
                    break;
                case LARGE:
                    myEgg.graphics.drawEllipse(x, y, 150, 200);
                    break;
                default:
                    trace ("Wrong size! There is no egg.");
                break;            
            }
            
            myEgg.graphics.endFill();
    
            this.addChild(myEgg);
        }
    }
}

Submits a series of IGraphicsData instances for drawing. This method accepts a Vector containing objects including paths, fills, and strokes that implement the IGraphicsData interface. A Vector of IGraphicsData instances can refer to a part of a shape, or a complex fully defined set of data for rendering a complete shape.

Graphics paths can contain other graphics paths. If the graphicsData Vector includes a path, that path and all its sub-paths are rendered during this operation.

Parameters

See also

package{
    import flash.display.*;
    import flash.geom.*;
    
    public class DrawGraphicsDataExample extends Sprite {

    public function DrawGraphicsDataExample(){    

    // establish the fill properties
    var myFill:GraphicsGradientFill = new GraphicsGradientFill();
    myFill.colors = [0xEEFFEE, 0x0000FF];
    myFill.matrix = new Matrix();
    myFill.matrix.createGradientBox(100, 100, 0);
 
    // establish the stroke properties
    var myStroke:GraphicsStroke = new GraphicsStroke(2);
    myStroke.fill = new GraphicsSolidFill(0x000000);
 
    // establish the path properties
    var myPath:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());
    myPath.commands.push(1,2,2,2,2);
    myPath.data.push(10,10, 10,100, 100,100, 100,10, 10,10);
 
    // populate the IGraphicsData Vector array
    var myDrawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
    myDrawing.push(myFill, myStroke, myPath);
 
    // render the drawing 
    graphics.drawGraphicsData(myDrawing);
    }
    }
}

Submits a series of commands for drawing. The drawPath() method uses vector arrays to consolidate individual moveTo(), lineTo(), and curveTo() drawing commands into a single call. The drawPath() method parameters combine drawing commands with x- and y-coordinate value pairs and a drawing direction. The drawing commands are values from the GraphicsPathCommand class. The x- and y-coordinate value pairs are Numbers in an array where each pair defines a coordinate location. The drawing direction is a value from the GraphicsPathWinding class.

Generally, drawings render faster with drawPath() than with a series of individual lineTo() and curveTo() methods.

The drawPath() method uses a uses a floating computation so rotation and scaling of shapes is more accurate and gives better results. However, curves submitted using the drawPath() method can have small sub-pixel alignment errors when used in conjunction with the lineTo() and curveTo() methods.

The drawPath() method also uses slightly different rules for filling and drawing lines. They are:

• When a fill is applied to rendering a path:
  • A sub-path of less than 3 points is not rendered. (But note that the stroke rendering will still occur, consistent with the rules for strokes below.)
  • A sub-path that isn't closed (the end point is not equal to the begin point) is implicitly closed.
• When a stroke is applied to rendering a path:
  • The sub-paths can be composed of any number of points.
  • The sub-path is never implicitly closed.

Parameters

See also

package{
    import flash.display.*;
    
    public class DrawPathExample extends Sprite {

    public function DrawPathExample(){

    var star_commands:Vector.<int> = new Vector.<int>(5, true);
    
    star_commands[0] = 1;
    star_commands[1] = 2;
    star_commands[2] = 2;
    star_commands[3] = 2;
    star_commands[4] = 2;

    var star_coord:Vector.<Number> = new Vector.<Number>(10, true);
    star_coord[0] = 66; //x
    star_coord[1] = 10; //y 
    star_coord[2] = 23; 
    star_coord[3] = 127; 
    star_coord[4] = 122; 
    star_coord[5] = 50; 
    star_coord[6] = 10; 
    star_coord[7] = 49; 
    star_coord[8] = 109; 
    star_coord[9] = 127;


    graphics.beginFill(0x003366);
    graphics.drawPath(star_commands, star_coord);

    }

    }
}

package{
    import flash.display.*;
    
    public class DrawPathExample extends Sprite {
    public function DrawPathExample(){
        var star_commands:Vector.<int> = new Vector.<int>();
        star_commands.push(1, 2, 2, 2, 2);

           var star_coord:Vector.<Number> = new Vector.<Number>();
           star_coord.push(66,10, 23,127, 122,50, 10,49, 109,127);

        graphics.beginFill(0x003366);
        graphics.drawPath(star_commands, star_coord);
    }
    }
}

 graphics.drawPath(star_commands, star_coord, GraphicsPathWinding.NON_ZERO);
 

Draws a rectangle. Set the line style, fill, or both before you call the drawRect() method, by calling the linestyle(), lineGradientStyle(), beginFill(), beginGradientFill(), or beginBitmapFill() method.

Parameters

See also

Draws a rounded rectangle. Set the line style, fill, or both before you call the drawRoundRect() method, by calling the linestyle(), lineGradientStyle(), beginFill(), beginGradientFill(), or beginBitmapFill() method.

Parameters

See also

Renders a set of triangles, typically to distort bitmaps and give them a three-dimensional appearance. The drawTriangles() method maps either the current fill, or a bitmap fill, to the triangle faces using a set of (u,v) coordinates.

Any type of fill can be used, but if the fill has a transform matrix that transform matrix is ignored.

A uvtData parameter improves texture mapping when a bitmap fill is used.

Parameters

See also

Applies a fill to the lines and curves that were added since the last call to the beginFill(), beginGradientFill(), or beginBitmapFill() method. Flash uses the fill that was specified in the previous call to the beginFill(), beginGradientFill(), or beginBitmapFill() method. If the current drawing position does not equal the previous position specified in a moveTo() method and a fill is defined, the path is closed with a line and then filled.

See also

Specifies a bitmap to use for the line stroke when drawing lines.

The bitmap line style is used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. The line style remains in effect until you call the lineStyle() or lineGradientStyle() methods, or the lineBitmapStyle() method again with different parameters.

You can call the lineBitmapStyle() method in the middle of drawing a path to specify different styles for different line segments within a path.

Call the lineStyle() method before you call the lineBitmapStyle() method to enable a stroke, or else the value of the line style is undefined.

Calls to the clear() method set the line style back to undefined.

Parameters

See also

Specifies a gradient to use for the stroke when drawing lines.

The gradient line style is used for subsequent calls to Graphics methods such as the lineTo() methods or the drawCircle() method. The line style remains in effect until you call the lineStyle() or lineBitmapStyle() methods, or the lineGradientStyle() method again with different parameters.

You can call the lineGradientStyle() method in the middle of drawing a path to specify different styles for different line segments within a path.

Call the lineStyle() method before you call the lineGradientStyle() method to enable a stroke, or else the value of the line style is undefined.

Calls to the clear() method set the line style back to undefined.

Parameters

	type:String — A value from the GradientType class that specifies which gradient type to use, either GradientType.LINEAR or GradientType.RADIAL.
	colors:Array — An array of RGB hex color values to be used in the gradient (for example, red is 0xFF0000, blue is 0x0000FF, and so on).
	alphas:Array — An array of alpha values for the corresponding colors in the colors array; valid values are 0 to 1. If the value is less than 0, the default is 0. If the value is greater than 1, the default is 1.
	ratios:Array — An array of color distribution ratios; valid values are from 0 to 255. This value defines the percentage of the width where the color is sampled at 100%. The value 0 represents the left position in the gradient box, and 255 represents the right position in the gradient box. This value represents positions in the gradient box, not the coordinate space of the final gradient, which can be wider or thinner than the gradient box. Specify a value for each value in the colors parameter. For example, for a linear gradient that includes two colors, blue and green, the following figure illustrates the placement of the colors in the gradient based on different values in the ratios array: ratios Gradient [0, 127] [0, 255] [127, 255] The values in the array must increase, sequentially; for example, [0, 63, 127, 190, 255].
	matrix:Matrix (default = null) — A transformation matrix as defined by the flash.geom.Matrix class. The flash.geom.Matrix class includes a createGradientBox() method, which lets you conveniently set up the matrix for use with the lineGradientStyle() method.
	spreadMethod:String (default = "pad") — A value from the SpreadMethod class that specifies which spread method to use: SpreadMethod.PAD SpreadMethod.REFLECT SpreadMethod.REPEAT
	interpolationMethod:String (default = "rgb") — A value from the InterpolationMethod class that specifies which value to use. For example, consider a simple linear gradient between two colors (with the spreadMethod parameter set to SpreadMethod.REFLECT). The different interpolation methods affect the appearance as follows: InterpolationMethod.LINEAR_RGB InterpolationMethod.RGB
	focalPointRatio:Number (default = 0) — A number that controls the location of the focal point of the gradient. The value 0 means the focal point is in the center. The value 1 means the focal point is at one border of the gradient circle. The value -1 means that the focal point is at the other border of the gradient circle. Values less than -1 or greater than 1 are rounded to -1 or 1. The following image shows a gradient with a focalPointRatio of -0.75:

See also

package {
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.geom.Matrix; 
    import flash.display.GradientType;
    
    public class Graphics_lineGradientStyleExample extends Sprite
    {
        public function Graphics_lineGradientStyleExample()
        {
            var myShape:Shape = new Shape();
            var gradientBoxMatrix:Matrix = new Matrix();
  
            gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0);  
            
            myShape.graphics.lineStyle(5);
  
            myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000,
            0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix);
            
            myShape.graphics.drawRect(0, 0, 200, 40);
            myShape.graphics.drawCircle(100, 120, 50);  
             
            this.addChild(myShape);
    
        }
    }
}

Specifies a shader to use for the line stroke when drawing lines.

The shader line style is used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. The line style remains in effect until you call the lineStyle() or lineGradientStyle() methods, or the lineBitmapStyle() method again with different parameters.

You can call the lineShaderStyle() method in the middle of drawing a path to specify different styles for different line segments within a path.

Call the lineStyle() method before you call the lineShaderStyle() method to enable a stroke, or else the value of the line style is undefined.

Calls to the clear() method set the line style back to undefined.

Parameters

See also

Specifies a line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. The line style remains in effect until you call the lineGradientStyle() method, the lineBitmapStyle() method, or the lineStyle() method with different parameters.

You can call the lineStyle() method in the middle of drawing a path to specify different styles for different line segments within the path.

Note: Calls to the clear() method set the line style back to undefined.

Parameters

See also

Draws a line using the current line style from the current drawing position to (x, y); the current drawing position is then set to (x, y). If the display object in which you are drawing contains content that was created with the Flash drawing tools, calls to the lineTo() method are drawn underneath the content. If you call lineTo() before any calls to the moveTo() method, the default position for the current drawing is (0, 0). If any of the parameters are missing, this method fails and the current drawing position is not changed.

Parameters

package {
    import flash.display.Sprite;
    import flash.display.LineScaleMode;
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.Shape;


    public class Graphics_lineToExample extends Sprite {

        public function Graphics_lineToExample() {

            var trapezoid:Shape = new Shape();    

            trapezoid.graphics.lineStyle(10, 0xFFD700, 1, false, LineScaleMode.VERTICAL,
                               CapsStyle.NONE, JointStyle.MITER, 10);

            trapezoid.graphics.moveTo(100, 100);
 
            trapezoid.graphics.lineTo(120, 50);
            trapezoid.graphics.lineTo(200, 50);
            trapezoid.graphics.lineTo(220, 100);
            trapezoid.graphics.lineTo(100, 100); 

            this.addChild(trapezoid);
        }
    }
}

Moves the current drawing position to (x, y). If any of the parameters are missing, this method fails and the current drawing position is not changed.

Parameters

package {
    import flash.display.Sprite;
    import flash.display.CapsStyle;
    import flash.display.LineScaleMode;

    public class Graphics_moveToExample extends Sprite
    {
        public function Graphics_moveToExample() {
            
            graphics.lineStyle(3, 0x990000, 0.25, false, 
                            LineScaleMode.NONE, CapsStyle.SQUARE);

            graphics.moveTo(10, 20);
            graphics.lineTo(20, 20);
            graphics.moveTo(30, 20);
            graphics.lineTo(50, 20);
            graphics.moveTo(60, 20);
            graphics.lineTo(80, 20);
            graphics.moveTo(90, 20);
            graphics.lineTo(110, 20);            
            graphics.moveTo(120, 20);
            graphics.lineTo(130, 20);           
        }
    }
}

1. Declare a size property for later use in determining the size of each shape.
2. Declare properties that set the background color to orange, the border color to dark gray, the border size to 0 pixels, the corner radius to 9 pixels, and set the space between the stage edge and the other objects to be 5 pixels.
3. Use the properties declared in the preceding steps along with the built in methods of the Graphics class to draw the circle, rounded rectangle, and square at coordinates x = 0, y = 0.
4. Redraw each of the shapes along the top of the stage, starting at x = 5, y = 5, with a 5-pixel spacing between shapes.

package {
    import flash.display.DisplayObject;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;

    public class GraphicsExample extends Sprite {
        private var size:uint         = 80;
        private var bgColor:uint      = 0xFFCC00;
        private var borderColor:uint  = 0x666666;
        private var borderSize:uint   = 0;
        private var cornerRadius:uint = 9;
        private var gutter:uint       = 5;

        public function GraphicsExample() {
            doDrawCircle();
            doDrawRoundRect();
            doDrawRect();
            refreshLayout();
        }

        private function refreshLayout():void {
            var ln:uint = numChildren;
            var child:DisplayObject;
            var lastChild:DisplayObject = getChildAt(0);
            lastChild.x = gutter;
            lastChild.y = gutter;
            for (var i:uint = 1; i < ln; i++) {
                child = getChildAt(i);
                child.x = gutter + lastChild.x + lastChild.width;
                child.y = gutter;
                lastChild = child;
            }
        }

        private function doDrawCircle():void {
            var child:Shape = new Shape();
            var halfSize:uint = Math.round(size / 2);
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawCircle(halfSize, halfSize, halfSize);
            child.graphics.endFill();
            addChild(child);
        }

        private function doDrawRoundRect():void {
            var child:Shape = new Shape();
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRoundRect(0, 0, size, size, cornerRadius);
            child.graphics.endFill();
            addChild(child);
        }

        private function doDrawRect():void {
            var child:Shape = new Shape();
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRect(0, 0, size, size);
            child.graphics.endFill();
            addChild(child);
        }
    }
}