Graphic Primitives with Flash

[chili5]

Drawing Graphic Primitives with Flash

ActionScript contains a lot of methods for drawing all sorts of graphic primitives. With these graphic primitives, we can draw anything complicated that we want. We could make a drawing application very similar to MS paint. It wouldn't be hard to make something even better than paint.

I'm just going to use the basic drawing commands in this tutorial. There are some graphic commands that are more advanced and more flexible.

We are going to focus on drawing lines, drawing circles, and drawing rectangles.

You can use code on different layers and frames but I am going to keep all of my code on layer1 and in frame1.


Getting Started

In Flash, you want to create a new Flash File using Action Script 3.0. It doesn't matter what you call it. Call it whatever you want.


On the time line, open up the first frame and open the actions window (F9). All the drawing methods are located in this.graphics. Notice, that I include this. This is optional, you do not need to. You can draw to other sprites (more on that later). I always indicate what I am drawing to, and what I am adding stuff to.

Drawing Lines

The two methods we need are moveTo and lineTo. The moveTo method moves a cursor to the start point of the line and then we use lineTo to draw a line to the end point.

Before doing any drawing, we must specify a line color or we will not see anything. Colors in Flash are specified in hexadecimal much like HTML. This makes sense because Flash is often used in an HTML environment. In fact, you can use CSS in ActionScript and HTML in ActionScript.

Now let us set a lineColor. I am going to color the line a bright green color. The line will also have a thickness of 2. We want to draw a line from (50,50) to (300,200). So we use the moveTo method to move the cursor or pencil to (50,50);

this.graphics.lineStyle(2,0x33FF00); 
this.graphics.moveTo(50,50);
this.graphics.lineTo(300,200);

The result will be a line like this:



Drawing Circles

Drawing a circle is as simple as providing the points of the center point and the radius of the circle.

Example:

this.graphics.drawCircle(50,50,40);

This circle has a center at (50,50) and a radius of 40.

This will look like:



A little bit of math allows us to understand why this even works.

The distance from the center to any point on the outside of the circle is the radius. Thus this all we really need to draw a circle.

The reality is drawing graphics has a lot to do with geometry.

Rectangles

The drawRect method takes 4 parameters. The x and y coordinates of the top left and the width and the height. The width and the height give us enough information to stretch the rectangle to give us the rectangle. Really though the width and height allow us to have four corners and we really are just drawing points between these two lines.

The method prototype is:

this.graphics.drawRect(x,y,width,height);

This gives us four major coordinates

(x,y)
(x,width)
(height,y)
(width,height)

Then we just draw a line between the four points.

Example:

this.graphics.drawRect(5,5,50,30);

This draws a rectangle with a width of 50 and a height of 30. The upper left is (5,5). This looks like:



Fills

What if you want to fill the inside of the shape? This is simple before you use the draw commands issue a beginFill and pass it a color in hexadecimal notation.

Example:

this.graphics.beginFill(0x336666);
this.graphics.drawCircle(5,5,300);

This will look like:




These are the basic primitives that you can use to do a lot of really cool things. Try this: Moving animation. Use the keyboard to move the circle around and it will change colors.

Challenges

1. Using 4 text fields and a button, have the user input the start coordinates and the end coordinates of the line. If the line is negative, you will color the line blue. Otherwise, you will color it red.
Display the slope in the output window.

2. Draw a smiley similar to my avatar.

3. Have the user input the coordinates of the center point and the coordinates of a point on the outside of the circle. Then you are to draw that circle. You will have to calculate the radius.

4. The user will input the radius and the coordinates of a point on the outside of the circle. Draw the circle.

5. Draw the above rectangle without using drawRect.

[Jordan]

Wow, you are a tutorial factory. +rep

[WingedPanther]

So, what prompted you to learn Flash? +rep

[chili5]

I was looking for something that I could make some cool things with really easily. Plus we are starting a few courses in ActionScript in the new year, and I wanted to see what it was like.

And your right, Sprites is next.