Flash Exercise Notes 2
syllabus | schedule | assignments | class notes | web resources | ARTC courses
Drawing in Flash using the Drawing API
Flash Drawing Tools

Flash is limited in what it provides you so you need to create more complex shapes from simple elements such as lines and curves.

The Flash Drawing Tools:
lineStyle()
moveTo()
lineTo()
curveTo()
clear()

beginFill()
endFill()
beginGradientFill()
General Rules for lines:
  • You must set the lineStyle() prior to drawing a line.
  • Lines always start drawing from where the last one left off unless you use a moveTo() before drawing your line.
  • First time drawing a line, it will start at 0,0 unless you use a moveTo()
lineStyle(lineWidth, color, alpha)
lineWidth is a Number
color is defined using hexidecimal like so: 0xFFDD66
alpha is a Number 0 to 100
moveTo(x, y)
x is a Number - horizontal
y is a Number - vertical
lineTo(x, y)
x is a Number - horizontal
y is a Number - vertical
Typically you would use the following order when writing code:
lineStyle(2, 0x66AAFF, 75);
moveTo(200, 150);
lineTo(400, 350);
Drawing your lines in a newly created movieClip so you can move them around:
this.createEmptyMovieClip("line_mc", 10);
line_mc.lineStyle(1, 0x000000, 100);
line_mc.moveTo(0, 0);
line_mc.lineTo(200, 100);
line_mc._x = 100;
line_mc._y = 100;

CurveTo(controlPointX, ControlPointY, x, y)

Parameters

controlPointX:Number - specifies the horizontal position of the control point that determines the curvature of the line.
controlPointY:Number - specifies the vertical position of the control point that determines the curvature of the line.
x:Number - An number that specifies the end point X.
y:Number - An number that specifies the end point Y.

Example:
curveTo(0,200,100,200);
curveTo(200,200,200,100);

beginFill(color, alpha) and endFill()
lineStyle(0, 0x0000FF, 100);
beginFill(0xFF0000, 50);
moveTo(0, 100);
lineTo(0,200,100,200);
curveTo(200,200,200,100);
lineTo(200,0,100,0);
curveTo(0,0,0,100);
endFill();

Randomness

random is a method of the Math class. A class is a definition of methods and properties and variables that are grouped together.

Math.random() returns a number between 0 and 1 (not including 1), so it could return .99999. We have to multiply it to get usuable numbers typically.

Math.random() * 50; will give you a number from 0 to 49.99999999.

If you want to get rid of the excess numbers after the decimal point, you need to use Math.Floor. This eliminates the excess numbers to the right or the decimal point. The floor is the closest integer to the decimal number. 1.5 will be 1 and 1.6 will be 2.

A useful function to write is a random range function that takes two numbers and returns a random number between those two numbers. You can use the following code:
function randRange(min:Number, max:Number):Number {
          var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
          return randomNum;
}

Using the Random Range function:

for (var i = 0; i < 100; i++) {
          var n:Number = randRange(4, 11)
          trace(n);
}

Loops - For and While

For loops are used when you know how many times you have to go through the loop
var i:Number;
for (i = 0; i < 5; i++) {
          trace(i);
}
While loops can go through the loop a variety of times but DO NOT forget to alter the loop variable inside the loop or you will have an infinite loop. Hit ESC if this happens.
var i:Number = 0;
while (i < 5) {
          trace(i);
          i++;
}