| Draw a Line & a Curve |
| Return to the Tutorials page |
| |
|
Goal: Create a straight line and a curve using ActionScript 3.0.
Imported classes: flash.display.Sprite and flash.display.Shape
Methods: lineStyle(), moveTo(), lineTo(),
curveTo() 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 shapes: a straight line and a curve.
|
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 drawing code later in the next section.
Open Flash 9 and select a new Flash file (ActionScript 3.0).
Name it LineAndCurve 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 LineCurve. This is a reference to our AS file which will contain the lesson's code.
An 'ActionScript Class Warning' may pop up. Click the OK button. (This will be explained fully in Sprites tutorial).
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 LineCurve and save it inside the
Code folder.
You now have two separate files on your computer:
In the FlasherAS3_PartI folder - LineAndCurve.fla.
In the Code subfolder - LineCurve.as.
Keep both the LineAndCurve.fla and LineCurve.as files open as we will be working with both of them simultaneously.
|
|
Return to LineAndCurve.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 LineCurve.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 LineCurve.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 LineCurve extends Sprite
Line 04: {
Line 05: public function LineCurve()
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 line & curve 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 a straight line and a curve!
|
|
In this tutorial we will create a blue line and a purple curve. Let's begin by drawing a blue line.
First let's declare the variable (blueLine), set the data type to Shape and instantiate (create) a
new Shape object.
On line 10 type: var blueLine:Shape = new Shape();
Press Return/Enter. Set the line style thickness to 2 and the line color to blue (#0000FF).
On line 11 type: blueLine.graphics.lineStyle(2, 0x0000FF);
Press Return/Enter. Using the moveTo() method, establish where the line should begin on the stage.
Set the x coordinate to 150 and the y coordinate to 350.
On line 12 type: blueLine.graphics.moveTo(150, 350);
Press Return/Enter. Using the lineTo() method set the point where the line will end
(x coordinate = 350, y coordinate = 350).
On line 13 type: blueLine.graphics.lineTo(350, 350);
Press Return/Enter. Add the line to the stage by utilizing the addChild() method.
On line 14 type: addChild(blueLine);
Your code should look like this: [ view code ]
Save the changes (File > Save) and then test the movie (Command + Return / Control + Enter). On the stage is a blue line. Well done!
Now let's add a curve...
|
|
Drawing a curve is very similar to drawing a straight line. It requires a variable name, uses a line style and its starting point
on the stage is established by using the moveTo() method. To curve a line we need the
curveTo() method.
This requires two sets of information:
- The horizontal and vertical positions of the control point (beginning point relative to the registration point of the parent object).
- The horizontal and vertical positions of the anchor point (ending point relative to the registration point of the parent object).
Let's draw a curve!
Place your cursor at the end of line 14 and the press Return/Enter twice. First let's declare the variable (purpleCurve), set
the data type to Shape and instantiate (create) a new Shape object.
On line 16 type: var purpleCurve:Shape = new Shape();
Press Return/Enter. Set the line style thickness to 4 and the line color to purple (#990099).
On line 17 type: purpleCurve.graphics.lineStyle(4, 0x990099);
Press Return/Enter. Using the moveTo() method, establish where the curve should begin on the stage. Set the
x coordinate to 150 and the y coordinate to 250.
On line 18: purpleCurve.graphics.moveTo(150, 250);
Press Return/Enter. Using the curveTo() method, set the control point's x & y coordinates
(x = 200, y = 25) and the anchor point's coordinates (x = 250, y = 250).
On line 19 type: purpleCurve.graphics.curveTo(200, 25, 250, 250);
Press Return/Enter. Add the curve to the stage by utilizing the addChild() method.
On line 20 type: addChild(purpleCurve);
Your code should look like this: [ view code ]
Save the changes (File > Save), test the movie (Command + Return / Control + Enter) and note that lovely purple curve that is added to the
stage.
To change the shape or location of either a line or a curve, simply change the coordinates to suit.
|
|
You may be wondering why we kept LineAndCurve.fla open when we only typed code into LineCurve.as. The Flash file (FLA) contains
the movie itself and it must be open to test the movie. The AS file can be opened and edited independently but it can not publish the movie or test
it. That can only be done when the Flash file is open.
Next, put straight lines to good use by drawing some triangles! [ Create Triangles Tutorial ]
|
