February 22, 2004 (271 Words)
Flash MX onward now has the ability to draw vectors on screen in real time. This is what my project will hopefully rely heavily on. The way I plot the points is to load the XML file into flash and convert it to an object° array°. This was I can cycle through the array with a loop and draw a point at the value of the current key in the array.
Here are some of the errors that occurred while trying to plot letters in Flash MX 2004...
Again, I had problems with plotting the beziers in flash. Flash can only handle 1 control point° per curve, and my data had 2 control points. Luckily Robert Penner, an actionscript developer, had already written a prototype function for allowing 2 control points per curve. With the help of the Cubic Bezier Equations I was able to successfully plot the letters, even with an adjustable quality level.
So here we have the first successful plot of a letter into the flash environment, (that is without embedding a font in flash at all)
The code I have written to plot the letter "g" looks like this. It uses Penner's functions and the TTX generated, then modified, XML file: Georgia_lowerG.xml
// Code written by Nic Mulvaney 2004
charXml = new XML();
charXml.ignoreWhite = true;
charXml.onLoad = onCharLoad;
function onCharLoad (success) {
for(var i = 0 ; i < (this.firstChild.childNodes.length-1) ; i++){
plotChar( i, parseChar(this.firstChild.childNodes[i]) );
}
}
charXml.load("Georgia_lowerG.xml");
baseline = 400;
scale = 3; // Size of typeface
accuracy = 20; // accuracy of curves
function parseChar(xml){
var plot_obj = new Array();
for (var i = 0; i < xml.childNodes.length; i++)
{
plot_obj[i] = new Object()
plot_obj[i].x = xml.childNodes[i].attributes.x;
plot_obj[i].y = xml.childNodes[i].attributes.y;
plot_obj[i].method = xml.childNodes[i].attributes.method; // FIX "on" LABEL IN XML
}
return plot_obj;
}
function plotChar(contour, plot){
var mc = _root.createEmptyMovieClip ("outline"+contour, contour);
with (mc){
lineStyle (1, 0x000000, 100);
beginFill(0x000000, 10);
moveTo ((plot[plot.length-1].x/scale), (baseline-(plot[plot.length-1].y/scale)) );
}
for (var i = 0; i < plot.length; i++)
{
with (mc){
if(plot[i+1].method==0){
if((i+3)>=plot.length){
drawBezier( plot[i].x/scale,
baseline-(plot[i].y/scale),
plot[i+1].x/scale,
baseline-(plot[i+1].y/scale),
plot[i+2].x/scale,
baseline-(plot[i+2].y/scale),
plot[0].x/scale,
baseline-(plot[0].y/scale),accuracy
);
}else{
drawBezier( plot[i].x/scale,
baseline-(plot[i].y/scale),
plot[i+1].x/scale,
baseline-(plot[i+1].y/scale),
plot[i+2].x/scale,
baseline-(plot[i+2].y/scale),
plot[i+3].x/scale,
baseline-(plot[i+3].y/scale),accuracy
);
}
i+=2;
}else{
if((i+1)==plot.length){
lineTo(plot[0].x/scale,baseline-plot[0].y/scale);
}else{
lineTo(plot[i+1].x/scale,baseline-plot[i+1].y/scale);
}
}
}
}
outline.endFill();
}