Page 1 of 1

AS 2.0 Basics 5 - Drawing Simple Vector Shapes [Flash 8] Rate Topic: -----

#1 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,110
  • Joined: 07-September 06

Post icon  Posted 28 August 2008 - 09:14 PM

In this tutorial we will discuss how to draw various vector shapes, which can range from a line to some sort of polygon or circle.

NOTE - While this is a "basics" tutorial it does implement the "learn by example" teaching plan and as that is true I have labeled it intermediate. Additionally we don't go very far in depth of what the functions are doing other than their obvious uses.

Starting out - The line

To begin we will look at the basics of getting Flash ready to draw with AS.
Starting out the document you will need to make sure you have a movieclip to draw in (this could be _root if you wanted). Once you have the desired movieclip created goto the layer actionscript panel and input this code:
_root.lineStyle(2, 0x000000, 100); // this goes like so: MC_INSTANCE.lineStyle(THICKNESS, COLOR, OPACITY/ALPHA)


This sets the movieclip up so you can draw somethign to it that is visible.

Now we will draw a line, for this we will create a simple function that we call line:
function line(x1:Number, x2:Number, y1:Number, y2:Number){
  _root.moveTo(x1, y1);
  _root.lineTo(x2, y2);
}
line(0, 100, 0, 150);


This creates a line that goes from (0,0) to (100,150)
We are using moveTo and lineTo in our function. moveTo basically moves the paintbrush to the x,y coordinate and lineTo paints to the x,y coordinate.

Moving to the second dimension - the Square
Now that we know how to make a line lets move onto a square.

For this we will be using a little more complex of a function, seen here:
function createRect(obj:MovieClip, x:Number, y:Number, w:Number, h:Number, border:Number, borderColor){
	obj.lineStyle(border, borderColor, 100);
	obj.moveTo(x, y);
	obj.lineTo(w, y);
	obj.lineTo(w, h);
	obj.lineTo(x, h);
	obj.lineTo(x, y);
}
createRect(_root, 10, 20, 100, 200, 1, 0x00cc00);


All this does is take a movieclip, x position, y position, width, height, border thickness, and color and places them all into a rectangle using much the same method that was used to create a line.

But what is the point of creating a square if you can't fill it in?

Beat the stuffing - filling a square
Now when filling an object you must make sure that you have taken into account various things such as if the you want to color it in a gradient, or solid, or no fill whatsoever.

Because that is the case the function is considerable longer than before hand, but it also has the ability to create a cooler outcome than before.

The only new functions added are beginGradientFill, beginFill and endFill all of which are pretty self explanatory. The most difficult of these to figure out is beginGradientFill because it offers the most options and thus is the most difficult to get fworking correctly.

Lets take a look at the code:

function createFill(obj:MovieClip, x:Number, y:Number, w:Number, h:Number, border:Number, borderColor, bgStyle:String, bgColors){
	obj.lineStyle(border, borderColor, 100);
	if(bgStyle == "Gradient"){
		alphas = [100, 100];
		ratios = [0, h*1.5];
		matrix = {matrixType:"box", x:0, y:0, w:430, h:150, r:Math.PI/2};
		obj.beginGradientFill("linear", bgColors, alphas, ratios, matrix);
	}
	else if(bgStyle == "Solid"){
		obj.beginFill(bgColors[0], 100);
	}
	obj.moveTo(x, y);
	obj.lineTo(w, y);
	obj.lineTo(w, h);
	obj.lineTo(x, h);
	obj.lineTo(x, y);
	if(bgStyle != "None"){
		obj.endFill();
	}
}
createFill(_root, 0, 0, 100, 150, 2, 0x000000, "Gradient", [0x000000, 0xffffff]);


This simple creates a square adn fills it (or not) depending on what bgStyle is set to.

Circular thinking - since we all love pi
Now it is time to look a circles. While this would seem to be a simple thing compared to what we had to do to get squares up and running it is actually yet more complex.

Starting off you have to loop through the angles between 0 and 2PI (360 degrees) and implement the curveTo function.

Take a look at the code:
function createCircle(obj:MovieClip, radius:Number, x:Number, y:Number, border:Number, borderColor, bgStyle:String, bgColors){
	obj.lineStyle(border, borderColor, 100);
	if(bgStyle == "Gradient"){
		alphas = [100, 100];
		ratios = [0, 6*radius];
		matrix = {matrixType:"box", x:radius/1.3, y:radius/4, w:2*radius, h:2*radius, r:Math.PI/2};
		obj.beginGradientFill("radial", bgColors, alphas, ratios, matrix);
	}
	else if(bgStyle == "Solid"){
		obj.beginFill(bgColors[0], 100);
	}
	obj.moveTo(x+radius, y);
	A = Math.tan(22.5 * Math.PI/180);
	for (angle = 45; angle<=360; angle += 45) {
		endx = radius*Math.cos(angle*Math.PI/180);
		endy = radius*Math.sin(angle*Math.PI/180);
		cx =endx + radius* A *Math.cos((angle-90)*Math.PI/180);
		cy =endy + radius* A *Math.sin((angle-90)*Math.PI/180);
		obj.curveTo(cx+x, cy+y, endx+x, endy+y);
	}
	if(bgStyle != "None"){
		obj.endFill();
	}
}
createCircle(_root, 40, 70, 50, 1, 0x00ff00, "Gradient", [0xffffff, 0x000000]);


As you can tell it is much like the other things we have done with filling a square, that is because we have left the functionality totally in tact, other than we have changed the gradient to fill in a radial patters with equal portions to the left and right (or at least there should be).

The end for now
Sadly that is all the time I have at the moment to write this new style of tutorial, however expect me to update it at somepoint in the future with how to create a polygon and use linear gradient fills in that.

If you are wondering how to get a line to have a gradient fill look into the lineGradientStyle() function. It takes all the same parameters that beginGradientFill takes (I believe) so it shouldn't be terribly hard to figure out.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1