How to Create a Shape in AS3

The shape object is an essential object used to program ActionScript graphics. Once a shape object is declared, you can program ActionScript to create and display any type of geometric shape you want. With the Shape object properties and methods, you can not only automatically construct the shape type, but also specify the shape's color, line width and transparency. More importantly though, once you can program the type and properties of a shape you will also be able to quickly create all types of shapes with pinpoint drawing accuracy.

Things You'll Need

  • Adobe Flash Professional (CS3, CS4 or CS5 versions)
Show More

Instructions

    • 1

      Start the Flash program. Click "New" from the File menu on the main Flash menu bar. Click the ActionScript 3.0 file type from the New Document dialog box that appears. Click the "OK" button to close this dialog box.

    • 2

      Select the "Actions" option from the "Window" menu on the main Flash menu bar to open the Actions editor. Position your mouse cursor on the first line in the Actions editor.

    • 3

      Type the code below in the first line of the Actions editor to declare a shape object named firstShape.

      var firstShape:Shape = new Shape();

    • 4

      Type the code below in the next line of the Actions editor to set the line width to draw the graphic to be added to the firstShape. The 1 indicates a 1-pixel line width).

      firstShape.graphics.lineStyle(1);

    • 5

      Type the code below in the next line of the Actions editor so that the graphic added to the "firstShape" object will be filled with the color defined by the hexadecimal code 0000FF (blue).

      firstShape.graphics.beginFill(0x0000FF);

    • 6

      Type the code below in the next line of the Actions editor to set the position and dimensions (x, y, width and height) of an ellipse (an oval) that will be added to the firstShape (x, y of 100, 100, width of 50 pixels, height of 100 pixels).

      firstShape.graphics.drawEllipse(100, 100, 50, 100);

    • 7

      Type in the code below in the next line of the Actions editor to stop coloring the ellipse.

      firstShape.graphics.endFill();

    • 8

      Type in the code below in the next line of the Actions editor to place the ellipse on the stage

      addChild(firstShape);

    • 9

      Click the "TestMovie" option in the Control menu on the main Flash menu bar to play the animation. Observe that a blue ellipse is on the screen at the position you specified in the drawEllipse method with the color you specified with the beginFill method.

Learnify Hub © www.0685.com All Rights Reserved