The following example shows how you can draw shapes in ActionScript 3.0 and ActionScript 2.0 using the drawRect() method (ActionScript 3.0) and the moveTo() and lineTo() methods (ActionScript 2.0).

Full code after the jump.

// ActionScript 3.0
var movieClip:MovieClip = new MovieClip();
movieClip.graphics.beginFill(0xFF0000);
movieClip.graphics.drawRect(0, 0, 100, 80);
movieClip.graphics.endFill();
movieClip.x = 10;
movieClip.y = 10;
addChild(movieClip);

To draw the same rectangle in ActionScript 2.0, you would call the graphic functions directly on the MovieClip instance rather than the Graphic object, as seen in the following example:

// ActionScript 2.0
createEmptyMovieClip("movieClip", 0);
movieClip.beginFill(0xFF0000);
movieClip.moveTo(0, 0);
movieClip.lineTo(100, 0);
movieClip.lineTo(100, 80);
movieClip.lineTo(0, 80);
movieClip.endFill();
movieClip._x = 10;
movieClip._y = 10;
Tagged with:
 

4 Responses to Drawing shapes using the drawing API in ActionScript 3.0 and ActionScript 2.0

  1. angel says:

    Thanks !! im still a noobie when it comes to creating stuff using pure actionscript in flash, this really helped ^^

  2. Ronnie says:

    Hi Peter,
    Im trying to build a network topology diagram in Flex 2.0, using action script 3.0. I am just running out of ideas to make it work. Your suggestions and tips would be very much appreciated. Here is an outline of my application:

    1. Drag images from a list onto a canvas.
    2. Each image should have a set of properties, which, the image retains even when dropped onto the canvas.
    3. When clicked on the image in the canvas, the properties of that image should be displayed in a property panel(like form).
    4. Should be able to connect images.
    5. Connectors should not be drawn on the images.
    6. Each connector should have its own properties, like, which images are connected, ‘from’ which image ‘to’ which image.
    7. Should be able to draw arrow heads towards the ‘to’ image of the connector.

    Thanks in advance :)

  3. Ronnie says:

    One more question i had in my mind:
    Suppose i just drag an image from a list onto a canvas(anywhere on the canvas), i want a rectangle to appear when my mouse goes over the image(MouseOver event) on the canvas. The rectangle should bound the the image, i.e, it shud look like a fence around the image. Which function should i use. Because, i tried to use event.relatedObject.getBounds and getRect() functions. But i got error saying: Cannot access a property or a function of a null object. What am i supposed to do?

  4. kavita says:

    i want dat what ever graphics i draw on the canvas they dont get clear is dere any sort of method by which i can do yhis becoz i m using a line whom i hav too move like cursor so, whenever i use graphics.clear() method my all drawing disappers …………….???

    if anybody or u hav any suggestions please give mee

    Thanks in advance……………..

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Spam Protection by WP-SpamFree