Video Training – Tutorials

Flash Tutorial – Drawing Shapes with ActionScript

November 5, 2008 at 12:38 am 2 comments

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Flash CS3 Tutorial Videos .

Flash Tutorial – Drawing Shapes with ActionScript

This Flash Tutorial follows on from the “Drawing Lines and Shapes in Flash Tutorial”

Now we have managed to draw a straight line and a curve lets move on to making shapes. After reading this Flash Tutorial you should be able to dissect the code and use it in your own Flash content

Download Files Used in this tutorial

Drawing a Rectangle
We’ll first create a new Sprite object called container, this will hold all our shapes graphical information. This was covered in our last tutorial, but just as a reminder we shall briefly cover the steps again.

var container:Sprite = new Sprite();

We add the new Sprite object to the stage by using the addChild() method, using the addChild() method makes adds it to the display list essentially making it visible when you preview or publish the file.

addChild(container);

This next line is optional when drawing shapes and only has a use when you want to give your shape a specific outline colour. The lineStyle() method lets us style the outline of the shape. It has 3 parameters available to it thickness, colour and alpha scale. Thickness is measured in pixels, colour in decimal format and alpha, which is an optional parameter, is measure in percent (1 = 100%, .25 = 25%). We assign the method to the graphics property and then assign the graphics property to our Sprite object so that all the graphic information resides inside the Sprite object.

container.graphics.lineStyle(2,0x000ff0,.4);

We want to fill the rectangle with a colour. We use the beginFill() method to fill it with a colour of our choice. The beginFill() method has 2 parameters avalible to it colour and alpha scale, again the alpha scale is optional. In the code below we’ve given it the colour red and set the alpha scale to 80%.

container.graphics.beginFill(0xff0000, .8);

Now that we have the colour and outline properties it’s time to draw out the rectangle. Drawing the rectangle itself is pretty straight forward, using the drawRect() method we set the properties we require for the rectangle. The drawRect() method requires 4 parameters, X and Y values, and width and height. The X and Y values indicate the position of where you want to draw out the rectangle, and the width and height determine the size of the rectangle. In our code we’ve positioned the rectangle to a position of 20px by 20px and set the size to 100px by 100px.

container.graphics.drawRect(20,20,100,100);

To finish off the rectangle we use one final method called the endFill(). The endFill() method closes off the beginFill() method, basically telling it we no longer require the colour fill as we’ve finished the rectangle.

container.graphics.endFill();

Drawing a Round Rectangle

Drawing a round rectangle requires a little more thought, first we give it some line styles and colour fill properties using the lineStyle() and beginFill() methods just like we did previously. To draw a round rectangle we use the drawRoundRect() method, this method requires 6 parameters. The first 4 parameters are the same as the drawRect() method as they declare the position and size of the rectangle. It’s the last 2 parameters ellipseWidth and ellipseHeight that create the round corners of the rectangle, ellipseWidth measured in pixels declares the width of the ellipse and ellipseHeight measures the height of the ellipse. In our code the round rectangle has the ellipse width and height of 20px respectively.

Tip; An ellipse is a curve for which the sum of the distances from each point on the curve to two fixed points is equal.

container.graphics.lineStyle(4,0×000044);
container.graphics.beginFill(0×333333);
container.graphics.drawRoundRect(300,50,200,75,20,20);
container.graphics.endFill();

Drawing a Circle

Drawing a circle is straight forward, again we create the style and colour fill using the lineStyle() and beginFill() methods. To draw the circle itself we use the drawCircle() method, the drawCircle() method requires 3 parameters, X and Y values and a radius value. The X and Y values indicate where you want the circle positioned and the radius measured in pixels declares the size of the circle itself. Our circle below is positioned at 200px by 80px and has a radius of the 50px.

container.graphics.lineStyle(2,0xff0000,.4);
container.graphics.beginFill(0x00ff00, .8);
container.graphics.drawCircle(200,80,50);
container.graphics.endFill();

Entry filed under: ActionScript. Tags: ActionScript 3, Drawing with ActionScript, Flash CS3 Tutorial.