1.7 Drawing Vector Graphics

This exercise aims to introduce how to create vector graphics with AS3. This topic will be further developed in the future, but some basic examples will be useful to supply us with visual building blocks for future exercises. It will also introduce the topic of display objects.

1. First, an introduction to DisplayObject classes, an essential part of Flash, since they allow for generating visual assets and interactivity. We have already used the TextEdit class, a specific type of DisplayObject suitable for text. Now let us get aquainted with more classes.

Until AS3, the most important and powerful DisplayObject class was the MovieClip – allowing for the creation of objects that contain independent timelines and advanced interactive capabilities. AS3 introduced a number of new DisplayObject classes, including Sprite and Shape. Unlike MovieClip, they do not have timelines of their own, and are more lightweight in terms of computational usage. Shape is an even more lightweight type of object, which has limited support for interactivity, and cannot have child objects.

Whenever we need to draw simple, non-interactive graphics, we will use Shape, as in this exercise.

2. Now let’s draw 3 shapes. For the first one, we will simply draw a line. Let’s begin by creating a shape, putting it on the stage, and position it in coordinate (100,100):

var myShape1:Shape = new Shape();
stage.addChild(myShape1);
myShape1.x=100;
myShape1.y=100;

We can now start drawing inside the shape. To do that, we will use the Graphics class, and its methods. Display objects possess a graphics property, which allow us to invoke Graphics methods. First, we will define the properties of the line we will draw: thickness (in pixels) and color (using AS3’s RGB values as seen before). For this, we will use the lineStyle method:

myShape1.graphics.lineStyle(3,0xFF0000)

The first parameter is thickness (3 pixels), the second is color (red).

Now let’s draw a line. By default, the starting point will the coordinate (0,0) of the shape (there is a method to change the starting point: moveTo). All values are relative to this coordinate. To draw a line, we will use the method lineTo(), and indicate inside the parentheses the ending coordinate of the line:

myShape1.graphics.lineTo(200,0);

In this case, the line ended 200 pixels to the right of its starting point.

Let’s continue from the same point, and continue the line 100 pixels down, and 10 pixels to the left:

myShape1.graphics.lineTo(190,100);

3. Now let’s create a second shape, and draw a triangle. First, let’s create a shape and place it on the stage:

var myShape2:Shape = new Shape();
stage.addChild(myShape2);
myShape2.x=100;
myShape2.y=150;

I would like to draw a triangle without stroke, but with a green fill. Therefore, instead of lineStyle, I will use the beginFill method to define the color of fill (both lineStyle and beginFill could have been used together):

myShape2.graphics.beginFill(0x00FF00);

Now I will create a line that moves 100 pixels to the right, and then 100 pixels down:

myShape2.graphics.lineTo(100,0);
myShape2.graphics.lineTo(100,100);

Even if the shape is not a closed one, because we have used beginFill Flash will close it and generate a fill, connecting the ending point with the starting one.

4. To conclude, I will draw a red ellipse. For that, we need another shape on the stage:

var myShape3:Shape = new Shape();
stage.addChild(myShape3);
myShape3.x=400;
myShape3.y=100;

Now I will create an ellipse with blue stroke and no fill, using the drawEllipse method. But first, let’s define the stroke – blue, with 1 pixel of thickness:

myShape3.graphics.lineStyle(1,0x0000FF);

We can now draw the ellipse. the drawEllipse method requires 4 paremeters: x coordinate, y coordinate, width, height:

myShape3.graphics.drawEllipse(0,0,100,20);

There are other extremely useful methods that we will use, such as drawRect, drawRoundRect and drawCircle.

5. This is the complete code for the exercise:

var myShape1:Shape = new Shape();
stage.addChild(myShape1);
myShape1.x=100;
myShape1.y=100;
myShape1.graphics.lineStyle(3,0xFF0000)
myShape1.graphics.lineTo(200,0);
myShape1.graphics.lineTo(190,100);

var myShape2:Shape = new Shape();
stage.addChild(myShape2);
myShape2.x=100;
myShape2.y=150;
myShape2.graphics.beginFill(0x00FF00);
myShape2.graphics.lineTo(100,0);
myShape2.graphics.lineTo(100,100);

var myShape3:Shape = new Shape();
stage.addChild(myShape3);
myShape3.x=400;
myShape3.y=100;
myShape3.graphics.lineStyle(1,0x0000FF);
myShape3.graphics.drawEllipse(0,0,100,20);

And this is the visual end result:

Download files: ex5-vector_graphics.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 1. User Interface Design and tagged , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s