Download: Designer Class.
download Designer Class (detailed instructions in Class file)
This tiny Class is very useful to control the Flash Drawing API without much effort. The example movie here is made of just a few lines of code, and produces random shapes, circles or squares.
download source code (fla & ActionScript)
Example: draw a coloured rectangle
Here's the complete code to draw a rectangle with black border and red fill:
Designer.setParameters({style:2,lineColor:0x000000,fillColor:0xFF0000});
Designer.drawRectangle(_root,10,10,200,200);
This will draw a red square in _root, from coordinates "10, 10" to "100, 100".
Example: a cool effect with Designer
Here is a very simple effect made with Designer and just a few lines of code...
download source code (fla & ActionScript)
This is the code:
Designer.setParameters({style:2,lineColor:0x000000,fillColor:0xFF0000});
var counter = 0;
onMouseMove = drawRect;
function drawRect() {
if(counter++ == 500){_root.clear();counter=0}
var offset = Math.abs(_xmouse - x) + Math.abs(_ymouse - y);
Designer.setParameters({fillColor:0xff0000 + offset * 20});
if (x != undefined) Designer.drawCircle(_root, x, y, offset);
y = _ymouse;
x = _xmouse;
}
Setting Designer parameters
To set parameters for drawing, we must set Designer's properties using the following method:
"paramsObj" is a Parameters Object, containing all properties to set parameters.
In order to set Designer for shapes with black border and red fill, it is enough to type:
Most relevant accepted parameters are:
style - NUMBER - Set the drawing style: 0 - border only, 1 - fill only, 2 - border & fill, 3 - gradient fill only, 4 - border + gradient fill
lineSize - NUMBER - Size of the border
lineColor - NUMBER - Color of the line (can be a hex or a number, 0x000000 or 0)
fillColor - NUMBER - Color of the fill (can be a hex or a number, 0x000000 or 0)
lineAlpha - NUMBER - Alpha of the border
fillAlpha - NUMBER - Alpha of the fill
More properties are available, pleas refer to the instructions in the Designer.as Class file.
Available methods to draw with Designer
Designer.drawRectangle(clip, x, y, x1, y1);
Draws a rectangle in the clip, starting from x-y and getting to x1-y1
Designer.drawCircle(clip, x, y, radius);
Draws a circle in clip centered in x-y, and sized with radius
Designer.drawElypse(clip, xCenter, yCenter, horizRadius, vertRadius);
draws an elypse in clip, with the obvious parameters
Designer.drawShape(clip, pointsArray);
draws a closed shape in clip, following the coordinates in pointsarray.
pointsArray is a bidimensional array, where every slot has x and y coordinates.
To draw a triangle:
3 points are enough, because drawShape ALWAYS connects the first and the last point
If only 2 points are used, it will draw a square.
Designer.drawLine(clip, pointsArray);
exactly like drawShape, but DOESN'T CONNECT first and last point
Designer.drawCurve(clip, pointsArray);
draws in clip a complex series of curves.
pointsArray is a bidimensional array, storing information for elypses
pintsArray is made of [[controlX, controlY, anchorX, ancorY], [controlX, controlY, anchorX, ancorY]]
refer to flash help on MovieClip.curveTo() for further details
Conclusion
Developing applications, I often needed to create interfaces programmatically using the drawing API. Many times I had to remember the syntax and type a vast amount of code... Then I made Designer, in order to save time, and using the drawing API became much simpler.
Designer accepts parameters objects, thus I can store defaults or user defined settings.
More functions and parameters are available (Setting gradients, advanced drawing settings, etc.). Please refer to the instructions inside the Designer.as Class file.
Namaste
Pippo