 |
| Drawing Triangles |
| Return to the Tutorials page |
| |
|
Goal: Create three triangles facing different directions using ActionScript 3.0.
Imported classes: flash.display.Sprite and flash.display.Shape
Methods: lineStyle(), moveTo(), lineTo(),
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 triangles facing different directions and a third skewed shape triangle.
|
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 Triangles 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 Clas box, type Triangles. This is a reference to our AS file which will contain the lesson's code.
Save the changes (File > Save).
Now let's create the AS file. Open a new ActionScript file (File > New > ActionScript file). Inside the FlasherAS3_PartI folder
there is a subfolder named Code. Name the ActionScript file Triangles and save it inside the Code folder.
You now have four separate files on your computer:
In the FlasherAS3_PartI folder - LineAndCurve.fla and Triangles.fla.
In the Code subfolder - LineCurve.as and Triangles.as.
Keep both Triangles files open as we will be working with both of them simultaneously.
|
|
Return to Triangles.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 Triangles.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 (third from the left).
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. (This will be explained fully in Sprites tutorial.)
Click the OK button to apply the changes within the Publish Settings.
Save your changes (File > Save).
|
|
Return to Triangles.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 Triangles extends Sprite
Line 04: {
Line 05: public function Triangles()
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 triangle code will be placed between the constructor function's opening & closing curly braces.
Save the changes. Okay, the set up is done. Let's create some triangles!
|
|
A triangle is made up of intersecting straight lines. To create one we need to declare a variable name, set the data type, initiate a
new shape, set the line style and fill color, establish the starting point on the stage, set the three lines and
finally place the finished triangle on the stage. Okay, let's start at the beginning...
Declare the variable (triangle1), set the data type to Shape and then instantiate (create) a new Shape object.
On line 10 type: var triangle1:Shape = new Shape();
Press Return/Enter. Next let's set the line style thickness to 2 and set the stroke (line) color to black (#000000).
On line 11 type: triangle1.graphics.lineStyle(2, 0x000000);
Press Return/Enter. Using the beginFill() method, set the fill color to red (#FF0000), the
alpha (transparency) to 1 (fully visible).
On line 12 type: triangle1.graphics.beginFill(0xFF0000, 1);
Press Return/Enter. Utilize the moveTo() method to set the starting point on the stage
(where the lines should be drawn from). Set the x to 200 and the y to 100.
On line 13 type: triangle1.graphics.moveTo(200, 100);
Press Return/Enter. Using the lineTo() method, draw the first line by setting the x to 200 and
the y to 100.
On line 14 type: triangle1.graphics.lineTo(200, 100);
Press Return/Enter. Using the lineTo() method, draw the second line by setting the x to
275 and the y to 225.
On line 15 type: triangle1.graphics.lineTo(275, 225);
Press Return/Enter. Draw the third and final line (x = 125, y = 225).
On line 16 type: triangle1.graphics.lineTo(125, 225);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 17 type: triangle1.graphics.endFill();
Press Return/Enter. Using the addChild() method, place the triangle on the stage.
On line 18 type: addChild(triangle1);
Your code should look like this: [ view code ]
Save the changes and then test the movie. On the stage you will see a red triangle pointing upwards. Well done!
Hmmmm...So how do you draw a triangle pointing down? Let's try another example and find out!
|
|
The steps are identical; the only difference is where we place the line coordinates on the stage. Let's go through the steps...
Place your cursor at the end of line 18 and press Return/Enter twice.
Declare the variable (triangle2), set the data type to Shape and then instantiate (create) a new Shape object.
On line 20 type: var triangle2:Shape = new Shape();
Press Return/Enter. Next let's set the line style thickness to 2 and set the stroke (line) color to black (#000000).
On line 21 type: triangle2.graphics.lineStyle(2, 0x000000);
Press Return/Enter. Using the beginFill() method, set the fill color to green (#00FF00), the
alpha (transparency) to 1 (fully visible).
On line 22 type: triangle2.graphics.beginFill(0x00FF00, 1);
Press Return/Enter. Utilize the moveTo() method to set the starting point on the stage
(where the lines should be drawn from). Set the x to 375 and the y to 50.
On line 23 type: triangle2.graphics.moveTo(375, 50);
Press Return/Enter. Using the lineTo() method, draw the first line by setting the x to
375 and the y to 50.
On line 24 type: triangle2.graphics.lineTo(375, 50);
Press Return/Enter. Using the lineTo() method, draw the second line by setting the x to
525 and the y to 50.
On line 25 type: triangle2.graphics.lineTo(525, 50);
Press Return/Enter. Draw the third and final line (x = 450, y = 175).
On line 26 type: triangle2.graphics.lineTo(450, 175);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 27 type: triangle2.graphics.endFill();
Press Return/Enter. Using the addChild() method, place triangle2 on the stage.
On line 28 type: addChild(triangle2);
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see a green triangle on the stage pointing downward.
Does a triangle have to be symmetrical? No way! Let's create a slightly "wonky" triangle that is a bit skewed...
|
|
Again, the steps are identical; the only difference is where we place the line coordinates on the stage. On last time let's go through the steps...
Place your cursor at the end of line 28 and press Return/Enter twice.
Declare the variable (triangle3), set the data type to Shape and then instantiate (create) a new Shape object.
On line 30 type: var triangle3:Shape = new Shape();
Press Return/Enter. Next let's set the line style thickness to 2 and set the stroke (line) color to black (#000000).
On line 31 type: triangle3.graphics.lineStyle(2, 0x000000);
Press Return/Enter. Using the beginFill() method, set the fill color to blue (#0000FF), the
alpha (transparency) to 1 (fully visible).
On line 32 type: triangle3.graphics.beginFill(0x0000FF, 1);
Press Return/Enter. Utilize the moveTo() method to set the starting point on the stage
(where the lines should be drawn from). Set the x to 275 and the y to 375.
On line 33 type: triangle3.graphics.moveTo(275, 375);
Press Return/Enter. Using the lineTo() method, draw the first line by setting the x to
275 and the y to 375.
On line 34 type: triangle3.graphics.lineTo(275, 375);
Press Return/Enter. Using the lineTo() method, draw the second line by setting the x to
400 and the y to 250.
On line 35 type: triangle3.graphics.lineTo(400, 250);
Press Return/Enter. Draw the third and final line (x = 100, y = 350).
On line 36 type: triangle3.graphics.lineTo(100, 350);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 37 type: triangle3.graphics.endFill();
Press Return/Enter. Using the addChild() method, place triangle3 on the stage.
On line 38 type: addChild(triangle3);
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see a bright blue triangle on the stage looking just a bit different...
|
|
This shape is easy to manipulate. Want a larger triangle? Set the coordinates further apart.
Want your triangle to point in a different direction? Simply pick three new coordinate points on the stage to fit your vision.
Well done! Triangles are all well and good but what's this about pre-made shapes? No more connecting the dots! Check out the next tutorial...
[ Creating Squares and Rounded Rectangles ]
|
|
| |
|
 |
 |
