 |
| Drawing Squares & Rounded Rectangles |
| Return to the Tutorials page |
| |
|
Goal: Create four shapes: a rectangle, a rounded rectange, a square and a square with rounded edges using ActionScript 3.0.
Imported classes: flash.display.Sprite and flash.display.Shape
Methods: drawRect(), drawRoundRect(), beginFill(),
endFill() and addChild()
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In this tutorial we will create two squares (one with rounded corners) and two rectangles (one with rounded corners).
|
First we need to create a Flash file (ActionScript 3.0) and an ActionScript file (AS file) and then save them both in their appropriate
folders. Next, we will reference the AS file and set the Classpath in the Flash file. Finally we will type the appropriate
foundation code in the AS file to ensure it is ready to receive the code in the next section.
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it RectanglesSquare and save it inside the FlasherAS3_PartI
folder.
By default the Properties panel (Command/Ctrl + F3) should be open which gives us access to the document properties.
In the Document Class box, type RectanglesSquare. This is a reference to our AS file which will contain the lesson's code.
Save the changes.
Open a new ActionScript file. Inside the FlasherAS3_PartI folder there is a subfolder named Code. Name the ActionScript file
RectanglesSquare and save it inside the Code folder.
You now have six separate files on your computer:
In the FlasherAS3_PartI folder - LineAndCurve.fla, Triangles.fla and RectanglesSquare.fla.
In the Code subfolder - LineCurve.as, Triangles.as and RectanglesSquare.as.
Keep both RectangleSquare files open as we will be working with both of them simultaneously.
|
|
Return to RectanglesSquare.fla. We need to inform Flash where the code can be found, by setting the Classpath. This establishes where Flash
should look when retrieving the code from the RectanglesSquare.as file.
Open the Publish Settings panel (File > Publish Settings) and then click on the Flash tab. Click on the Settings button. Under the
Classpath section press the Browse to Path button. Navigate to the Code subfolder inside the FlasherAS3_PartI folder. Click
the OK button to set the path. Click the OK button to apply the Classpath to the ActionScript 3.0 settings. An
'ActionScript Class warning' box appears. Click the OK button. Finally, click the OK button to apply the changes within the Publish Settings.
Save your changes.
|
|
Return to RectanglesSquare.as. All the AS files in this tutorial series follow the same template.
Begin by typing the following code:
Line 01: package
Line 02: {
Line 03: public class RectanglesSquare extends Sprite
Line 04: {
Line 05: public function RectanglesSquare()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save your changes.
|
|
This tutorial will require the Sprite and Shape classes so let's import them now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.Sprite;
Press Return/Enter.
On line 4 type: import flash.display.Shape;
Press Return/Enter to add a blank line on line 5.
Place your cursor at the end of line 9 and press Return/Enter.
All of our rectangle & square code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's create some rectangles and squares!
|
|
To draw a rectangle we could draw it line by line but that can become repetitious and BORING! So now is the time to introduce the
drawRect() method. This is a built-in method that tells Flash to draw a rectangle based on two sets of
information:
- The horizontal & vertical coordinates (relative to the registration point of the parent object).
- The width and the height of the rectangle.
Declare the variable (rectangle), set the data type to Shape and then instantiate (create) a new Shape object.
On line 10 type: var rectangle:Shape = new Shape();
Press Return/Enter. Next let's set the line style thickness to 2 and set the stroke (line) color to orange (#FF6600).
On line 11 type: rectangle.graphics.lineStyle(2, 0xFF6600);
Press Return/Enter. Using the beginFill() method, set the fill color to a warm
yellow-orange (#FFCC00) and set the alpha (transparency) to 1.
On line 12 type: rectangle.graphics.beginFill(0xFFCC00, 1);
Press Return/Enter. Utilize the drawRect() method to set the rectangle's x to 25,
y to 75, width to 175 and height to 75.
On line 13 type: rectangle.graphics.drawRect(25, 75, 175, 75);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 14 type: rectangle.graphics.endFill();
Press Return/Enter. Using the addChild() method, place the rectangle on the stage.
On line 15 type: addChild(rectangle);
Your code should look like this: [ view code ]
Save the changes and then test the movie to see a yellow-orange rectange with an orange stroke sitting on the stage. Wow! How many steps did
we just save?
Next, let's make a square instead...
|
|
To draw a square, follow the same steps as above with one exception: set the rectangle's width and height to the same value and you will
create a perfectly symetrical square!
Place your cursor at the end of line 15 and press Return/Enter twice. Begin typing on line 17.
Try this one on your own. Here are the steps...
- Declare a variable (square), set the data type to Shape and instantiate a new Shape object. (Line 17)
- Set the line style thickness to 4 and the stroke color to neon pink (#FF66CC). (Line 18)
- Set the fill color to purple (#990066). (Line 19)
- Using the drawRect() method set the x to 250, y to 35, width to 75,
height to 75. (Line 20)
- Use the endFill() method to close the fill color. (Line 21)
- Place the square on the stage using the addChild method. (Line 22)
Your code should look like this: [ view code ]
Save the changes and test the movie. There is our purple square with the hot pink border!
|
|
There is another method that is very useful when creating rectangle shapes and that is the drawRoundRect() method.
Rounded corners give a sleeker, more modern edge to the traditional square/rectangle. First we'll create a rounded rectangle and then you will
create a rounded square on your own.
Place your cursor at the end of line 22 and press Return/Enter twice.
Declare the variable (roundRect), set the data type to Shape and then instantiate a new Shape object.
On line 24 type: var roundRect:Shape = new Shape();
Press Return/Enter. Next let's set the line style thickness to 3 and set the stroke (line) color to neon green (#CCFF00).
On line 25 type: roundRect.graphics.lineStyle(3, 0xCCFF00);
Press Return/Enter. Using the beginFill() method, set the fill color to dark green (#006600) and
set the alpha to 1.
On line 26 type: roundRect.graphics.beginFill(0x006600, 1);
Press Return/Enter. Utilize the drawRoundRect() method to set the rectangle's x to 25,
y to 255, width to 175 and height to 75. The final two values needed are the ellipse width and the
ellipse height. These determine how much curve to apply on the corners. Set the ellipse width to 25 and the ellipse height to
25.
On line 27 type: roundRect.graphics.drawRoundRect(25, 255, 175, 75, 25, 25);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 28 type: roundRect.graphics.endFill();
Return/Enter. Using the addChild() method, place the rounded rectangle on the stage.
On line 29 type: addChild(roundRect);
Your code should look like this: [ view code ]
Save the changes and test the movie. Now there is a green rectangle with rounded edges on the stage too. Well done!
|
|
How do we draw a square with rounded corners? You guessed it! To draw the square, follow the same steps as above with one exception: set the
rounded rectangle's width and height to the same value and you will create a perfectly symetrical square with rounded corners!
Place your cursor at the end of line 29 and press Return/Enter twice. Try drawing this shape on your own. Here are the steps...
- Declare a variable (roundSquare), set the data type to Shape and instantiate a new Shape object. (Line 31)
- Set the line style thickness to 4 and the stroke color to dark blue (#000099), the alpha TO 1
and the pixelHinting to true. (Line 32)
- Set the fill color to light blue (#0099CC). (Line 33)
- Using the drawRoundRect() method set the x to 250, y to 280,
width to 75, height to 75. Then set the ellipse width and ellipse height both to 15. (Line 34)
- Use the endFill() method to close the fill color. (Line 35)
- Place the rounded square on the stage using the addChild method. (Line 36)
Your code should look like this: [ view code ]
Save the changes and test the movie to see the blue rounded square on the stage.
|
|
And there you have it! You've create a rectangle, a square, a rounded rectangle and a rounded square and even added in bit of
pixelHinting for good measure. See how easy this is once you know how?
Want to learn how to make circles and ellipses the easy way? Well what are you waiting for....check out the next tutorial!
[ Creating Circles & Ellipses tutorial ]
|
|
| |
|
 |
 |
