How to Create Rectangle Shapes With AS3

Rectangle shapes are one of the first shapes that Flash novices learn how to program in AS3 (ActionScript 3). Since programming the rectangle takes only one line of code, that makes it easy to implement for beginners. Once you've learned how to write the code for a rectangle, you can use your acquired AS3 programming skill to program complete compositions based on rectangles with different sizes, colors and border types. Combined with your other AS3 programming skills, you can also animate rectangles so that they automatically change color and size as your animation plays.

Things You'll Need

  • Adobe Flash Professional (Versions CS3, CS4 and CS5)
Show More

Instructions

    • 1

      Start the Flash program. Click "New" from the "File" menu on the main Flash menu bar. Click the file type "Flash File(ActionScript 3.0) from the "New Document" dialog box that appears, and then 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 of the "Actions" editor, and click the mouse button. Type the code listed below on the first line of the "Actions" editor to declare your rectangle as a "Shape" object with an "instance name" of "squareColor."

      var squareColor:Shape= new Shape();

    • 3

      Attach the "lineStyle" graphics method to the "squareColor" shape with the "graphics.lineStyle" method to set the line style of the rectangle's border. Specify a "1" pixel wide line width in the "lineStyle" method for the border of the shape. Type the following code listed below on the next line of the "Actions" editor to add the line style.

      squareColor.graphics.lineStyle(1)

    • 4

      Add the code below on the next line of the "Actions" editor to fill in the shape "squareColor" with the color red (0xFF0000 is the hexadecimal code for red):

      squareColor.graphics.beginFill(0xFF0000)

    • 5

      Attach the "drawRect" method to the "squareColor" shape in the next line of the "Actions" editor. Specify the lower left x-coordinate of the vertex of the rectangle as "200" for the first parameter in the "drawRect" method. Specify the lower left y-coordinate of the vertex of the rectangle as "200" for the second parameter in the "drawRect" method. Specify the upper right x-coordinate of the vertex of the rectangle as "300" for the third parameter of the "drawRect" method. Specify the upper right y-coordinate of the vertex of the rectangle as "300" for the fourth parameter of the "drawRect" method. Type the code to implement the "drawRect" in the next line of the "Actions" editor as:

      squareColor.graphics.drawRect(200,200,300, 300)

    • 6

      Add the next line of code in the "Actions" editor to stop the filling of shapes that were started with the "beginFill" method, which you typed in before specifying the shape as a rectangle. Type this code into the "Actions" editor with the "endFill" method attached to the "squareColor" rectangle shape as shown below.

      squareColor.graphics.endFill()

    • 7

      Specify the "firstRect" object as the parameter in the "addChild()" method so that the rectangle you specified will be placed on the screen when you play the animation. Type the statement for this code in the next line of the "Actions" editor as shown below.

      stage.addChild(squareColor)

    • 8

      Review the completed code you typed in, as shown below, for any syntax errors. Copy and paste the code into your "Actions" editor if you did not type the individual lines above.

      var squareColor:Shape= new Shape();

      squareColor.graphics.lineStyle(1)

      squareColor.graphics.beginFill(0xFF0000)

      squareColor.graphics.drawRect(200,200,300, 300)

      squareColor.graphics.endFill()

      stage.addChild(squareColor)

    • 9

      Click the "TestMovie" option in the "Control" menu on the main Flash menu bar to play your movie and view the red rectangle you created with the AS3 code.

Learnify Hub © www.0685.com All Rights Reserved