Electrically carved neon lettering, all in AS

[Jerryscript]

Everyone has seen some form or another of displaying letters being drawn, mostly by the use of frame by frame animation with masks.

In the experiment, I use the font glyph coordinates (which I get via Ming), and carve out the letters with a bit of lightening.

http://www.geocities.com/webwizardsways/flash/electricNeon.html

I'm concerned with performance. So many lines can bog down the player, but it seems to do okay even on my old 500mhz testing computer. Does it perfrom ok for you?

I'm sorry I don't have an fla to post, I use Ming not Flash. I can post the AS1 code if anyone is interested.

BTW-I am more than happy to help anyone who needs font glyph outlines, I have over a thousand fonts converted to fdb for just such purposes, and can convert most any font in TTF, SWT, or FDB format. (webdings can be difficult though)

[ajcates]

You don't have a link, for the lazy people that don't like to copy and paste
http://www.geocities.com/webwizardsways/flash/electricNeon.swf

Really cool effect, its kinda slow tho

[Jerryscript]

Thanks! I edited my post above, I thought you could embed swf with bbcode?

As for the speed, if you view the SWF by itself due to my poor attempt at using bbcode (not my language LOL), you are probably viewing it larger than 500X250. Try viewing it on a webpage at it's normal size and it I think you'll find it's alot faster. It uses a ton of lines, one for each segment of the font glyphs and lots for the lightning, so scaling up can have issues.

[eilsoe]

Runs fine here, and my powerbook slows down a lot in flash... normally...

[shlauncha]

Thanks! I edited my post above, I thought you could embed swf with bbcode?

As for the speed, if you view the SWF by itself due to my poor attempt at using bbcode (not my language LOL), you are probably viewing it larger than 500X250. Try viewing it on a webpage at it's normal size and it I think you'll find it's alot faster. It uses a ton of lines, one for each segment of the font glyphs and lots for the lightning, so scaling up can have issues.

I think he means the whole animation take a while to finish. Good work otherwise! :crazy:

[glosrfc]

It works nicely here and no performance issues that I'm aware of. I'd certainly be interested in the source although I'm baffled about Ming and glyph outlines etc so might have to read up on that a bit. I'm assuming that you've used outlines to facilitate the effect of the letters being drawn, rather than any neon effect?

[Jerryscript]

Ming (http://ming.sourceforge.net) is an open source library used to create SWF movies via C, PHP, Python and other languages. Ming uses FDB font files, which are basically font glyph info converted to a basic vector format. You can use Ming to grab this glyph data and convert it to the AS drawing API.

So, I create a PHP file that grabs the font glyphs of the letters I need, and convert the glyph data into a txt file. I then load that txt file in the SWF movie, create an array of lines/curves/movetos, then use onEnterFrame to loop through the array drawing the letters and moving the end of the lightening bolt to the same coords. Here's the source in AS1, I'm sure it would be faster in 2 or 3, but my local Ming setup only supports AS1 right now.
ffg=flash.filters.GlowFilter;

var theword='JerryScript';
var word=theword.split('');
var letters=new Array();
var drawing=true;

createTextField('stuff',getNextHighestDepth(),700, 200,200,200);
with(stuff){wordWrap=multiline=border=background=t rue;}

// font glyph outlines are stored such as:
// &J= m,-10,0, l,-10,100, c,0,105,10,105 etc
loader=new LoadVars();
loader.load('jerryscript_Arioso.txt?'+Math.random( ));
var letters=new Array();
loader.onData=function(src){
letterData=src.split('&');
for(l in letterData){
thisLetter=letterData[l].split('=');
letters[thisLetter[0]]=thisLetter[1].split(' ');
}
holder.drawLetters();
};

MovieClip.prototype.drawLetters=function(){
this.clear();
this.lineStyle(2,0xaaaaFF);
letterCounter=0;
lineCounter=0;
sparkcounter=0;
offset=0;
this.onEnterFrame=function(){
if(letterCounter<word.length){
if(lineCounter<letters[word[letterCounter]].length){
sparkcounter++;
if(pen._y>0 && sparkcounter%2==0){
_root.createEmptyMovieClip('spark'+(sparkcounter), _root.getNextHighestDepth());
with(_root['spark'+sparkcounter]){
lineStyle(Math.ceil(Math.random()*2+1),0xFFFFFF);
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
lineTo(0,1*twitcher);
_x=pen._x;
_y=pen._y;
}
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
_root['spark'+sparkcounter].vx=Math.round(Math.random()*3)*twitcher;
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
_root['spark'+sparkcounter].vy=Math.round(Math.random()*3)*twitcher;
_root['spark'+sparkcounter].vr=Math.round(Math.random()*5+5);
sfilter = new ffg(0x6666FF, 0.8, 10, 10, 20, 2, false, false);
sfilterArray =[];
sfilterArray.push(sfilter);
_root['spark'+sparkcounter].filters = sfilterArray;
_root['spark'+sparkcounter].onEnterFrame=function(){
if(this._y<Stage.height && this._alpha>0){
if(this.vx>0){this.vx-=Math.random()/3;}else{this.vx+=Math.random()/3;}
this.vy+=0.3;
this._x+=this.vx;
this._y+=this.vy;
this._rotation+=this.vr;
this._alpha-=Math.ceil(Math.random()*1);
}else{
removeMovieClip(this);
}
};
}
thisLine=letters[word[letterCounter]][lineCounter].split(',');
switch(thisLine[0]){
case 'm':pen._x=this._x+thisLine[1]/10+offset;pen._y=this._y+thisLine[2]/10;this.moveTo(thisLine[1]/10+offset,thisLine[2]/10);break;
case 'c':pen._x=this._x+thisLine[3]/10+offset;pen._y=this._y+thisLine[4]/10;this.curveTo(thisLine[1]/10+offset,thisLine[2]/10,thisLine[3]/10+offset,thisLine[4]/10);break;
case 'l':pen._x=this._x+thisLine[1]/10+offset;pen._y=this._y+thisLine[2]/10;this.lineTo(thisLine[1]/10+offset,thisLine[2]/10);break;
}
lineCounter++;
}else{
lineCounter=0;
letterCounter++;
offset=this._width;
}
}else{
drawing=false;
this.onEnterFrame=function(){
wfilter = new ffg(0x6666FF, (Math.random()*0.1+0.5), 6, 6, Math.ceil(Math.random()*1+10), 3, false, false);
wfilterArray =[];
wfilterArray.push(wfilter);
holder.filters = wfilterArray;
};
}
this.cachAsBitmap=true;
};
};

MovieClip.prototype.lightSeg = function(x1,y1,x2,y2,dev){
if (dev < 1) {
this.moveTo(x1,y1);
this.lineTo(x2,y2);
}else {
var midx = (x2+x1)/2;
var midy = (y2+y1)/2;
midx += (Math.random()-0.5)*dev;
midy += (Math.random()-0.5)*dev;
this.lightSeg(x1,y1,midx,midy,dev/2);
this.lightSeg(x2,y2,midx,midy,dev/2);
}
};

MovieClip.prototype.drawLightning = function(x1,y1,x2,y2){
this.clear();
this.lineStyle(2,0xFFFFFF);

// 100 is the 'maximum deviance' for the lightning. Use a smaller number for 'straighter' (and less CPU intensive) lightning.
this.lightSeg(x1,y1,x2,y2,Math.pow(Math.pow(x1-x2,2)+Math.pow(y1-y2,2),1/3));
};

createEmptyMovieClip('holder',getNextHighestDepth( ));
holder._x=15;
holder._y=150;
wfilter = new ffg(0x6666FF, 0.4, 5, 5, 10, 2, false, false);
wfilterArray =[];
wfilterArray.push(wfilter);
holder.filters = wfilterArray;

createEmptyMovieClip('ball',getNextHighestDepth()) ;
with(ball){
lineStyle(2,0xFFFFFF);
moveTo(4,2);curveTo(4,4,2,5);curveTo(1,6,0,6);curv eTo(-4,6,-4,2);curveTo(-4,-2,0,-4);curveTo(1,-2,2,-1);curveTo(4,0,4,2);
_x=100;_y=18;
}
ball.filters = wfilterArray;
ball.onEnterFrame=function(){
if(!drawing){
newPosx=400;
newPosy=100;
}else{
newPosx=pen._x;
newPosy=100;
}
this._x+=(newPosx-this._x)/65;
this._y+=(newPosy-this._y)/150;
};

createEmptyMovieClip('lightning',getNextHighestDep th());
filter = new ffg(0x0000FF, 0.8, 20, 20, 12, 2, false, false);
filterArray =[];
filterArray.push(filter);
lightning.filters = filterArray;
lightning.onEnterFrame = function(){
// these are the coords for the beginning and end of the lightning bolt
this.drawLightning(pen._x,pen._y,ball._x,ball._y);
};

createEmptyMovieClip('pen',getNextHighestDepth());
with(pen){
lineStyle(1,0xFFFFFF);
lineTo(1,0);
_x=100;
_y=15;
}
pen.filters = wfilterArray;

_root.onMouseDown=function(){holder.drawLetters(); };

If anyone is interested in the PHP code to grab the glyph data, I can post that as well.

[prg9]

I use the font glyph coordinates

Interesting! Has good performace for me also.

Could this be utilized with other coordinate inputs, not just font glyphs or is it coded specifically for that? Or can it be used with any array of drawing commands with out anything special (formating, spaces, delimiters etc..), just straight up coordinates??

Looks interesting I would like to know more.

Nice work :hugegrin:

[Jerryscript]

This specific example uses font glyph coordinates, but any set of coordinates would work. Formatting the coordinates for this example is:

&J= m,-10,0, l,-10,100, c,0,105,10,105

where "J" is the letter, "m","c", & "l" represent moveTo curveTo & lineTo and the following coordinates are for the drawing API.

You of course could adjust the code for other coordinate formatting, such as SVG ect.

[tobijas20]

It looks great! Can you post PHP too?

[FlawlessDog]

Looks very cool.
I use SwishMax, so know about working in other programs, besides macromedia/adobe flash
I would love to see the php as well.

[Jerryscript]

Here's the batch coversion script I use on a directory containing FDB font files. FDB font files can be created with various progs, I can post more on those as well if needed.

<?
ming_useswfversion(6);
$movie=new SWFMovie();
$movie->setRate(16);
$movie->setDimension(550,400);
$movie->setBackground(0xc6,0xc6,0xc6);

echo "<html>";
$dir = opendir("FDB_FONT_DIRECTORY");
while(($files = readdir($dir))!=false) {
if(stristr($files,".fdb")!=(-1)){
$num=78;
$fontpath="FDB_FONT_DIRECTORY/".$files;
$f=new SWFFont($fontpath);
$filename="FDB_FONT_DIRECTORY/".strrev(strstr(strrev($files),"."))."txt";
echo $filename."<br>";
$fo=array();
$orig=array("moveto ","lineto ","curveto ","\n"," ",",_");
$new=array("_m,","_l,","_c,",",",",","_");

$newfile=fopen($filename,"w");
$actions="&stuff=";
for($n=0;$n<$num;$n++){
$str=$f->getShape(65+$n);
$newstr=str_replace($orig,$new,$str);
$actions.=$newstr."~";
}
$actions=str_replace("\n","",$actions);
fwrite($newfile,$actions);
fclose($newfile);
}else{
echo "bad $files<br>";
}
}
closedir($dir);

?>

Note- this works with PHP4/5 and Ming0.3+

Now the PHP code to create the actual movie (sorry, it's ugly, but I just wrote it two days ago):
<?

ming_useswfversion(7);
$movie=new SWFMovie(7);
$movie->setDimension(500,250);
$movie->setBackground(0,0,0);
$movie->setRate(32);

$actions="
ffg=flash.filters.GlowFilter;

var theword='JerryScript';
var word=theword.split('');
var letters=new Array();
var drawing=true;

createTextField('stuff',getNextHighestDepth(),700, 200,200,200);
with(stuff){wordWrap=multiline=border=background=t rue;}

loader=new LoadVars();
loader.load('jerryscript_Arioso.txt?'+Math.random( ));
var letters=new Array();
loader.onData=function(src){
letterData=src.split('&');
for(l in letterData){
thisLetter=letterData[l].split('=');
letters[thisLetter[0]]=thisLetter[1].split(' ');
}
holder.drawLetters();
};

MovieClip.prototype.drawLetters=function(){
this.clear();
this.lineStyle(2,0xaaaaFF);
letterCounter=0;
lineCounter=0;
sparkcounter=0;
offset=0;
this.onEnterFrame=function(){
if(letterCounter<word.length){
if(lineCounter<letters[word[letterCounter]].length){
sparkcounter++;
if(pen._y>0 && sparkcounter%2==0){
_root.createEmptyMovieClip('spark'+(sparkcounter), _root.getNextHighestDepth());
with(_root['spark'+sparkcounter]){
lineStyle(Math.ceil(Math.random()*2+1),0xFFFFFF);
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
lineTo(0,1*twitcher);
_x=pen._x;
_y=pen._y;
}
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
_root['spark'+sparkcounter].vx=Math.round(Math.random()*3)*twitcher;
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
_root['spark'+sparkcounter].vy=Math.round(Math.random()*3)*twitcher;
_root['spark'+sparkcounter].vr=Math.round(Math.random()*5+5);
sfilter = new ffg(0x6666FF, 0.8, 10, 10, 20, 2, false, false);
sfilterArray =[];
sfilterArray.push(sfilter);
_root['spark'+sparkcounter].filters = sfilterArray;
_root['spark'+sparkcounter].onEnterFrame=function(){
if(this._y<Stage.height && this._alpha>0){
if(this.vx>0){this.vx-=Math.random()/3;}else{this.vx+=Math.random()/3;}
this.vy+=0.3;
this._x+=this.vx;
this._y+=this.vy;
this._rotation+=this.vr;
this._alpha-=Math.ceil(Math.random()*1);
}else{
removeMovieClip(this);
}
};
}
thisLine=letters[word[letterCounter]][lineCounter].split(',');
switch(thisLine[0]){
case 'm':pen._x=this._x+thisLine[1]/10+offset;pen._y=this._y+thisLine[2]/10;this.moveTo(thisLine[1]/10+offset,thisLine[2]/10);break;
case 'c':pen._x=this._x+thisLine[3]/10+offset;pen._y=this._y+thisLine[4]/10;this.curveTo(thisLine[1]/10+offset,thisLine[2]/10,thisLine[3]/10+offset,thisLine[4]/10);break;
case 'l':pen._x=this._x+thisLine[1]/10+offset;pen._y=this._y+thisLine[2]/10;this.lineTo(thisLine[1]/10+offset,thisLine[2]/10);break;
}
lineCounter++;
}else{
lineCounter=0;
letterCounter++;
offset=this._width;
}
}else{
drawing=false;
this.onEnterFrame=function(){
wfilter = new ffg(0x6666FF, (Math.random()*0.1+0.5), 6, 6, Math.ceil(Math.random()*1+10), 3, false, false);
wfilterArray =[];
wfilterArray.push(wfilter);
holder.filters = wfilterArray;
};
}
this.cachAsBitmap=true;
};
};

MovieClip.prototype.lightSeg = function(x1,y1,x2,y2,dev){
if (dev < 1) {
this.moveTo(x1,y1);
this.lineTo(x2,y2);
}else {
var midx = (x2+x1)/2;
var midy = (y2+y1)/2;
midx += (Math.random()-0.5)*dev;
midy += (Math.random()-0.5)*dev;
this.lightSeg(x1,y1,midx,midy,dev/2);
this.lightSeg(x2,y2,midx,midy,dev/2);
}
};

MovieClip.prototype.drawLightning = function(x1,y1,x2,y2){
this.clear();
this.lineStyle(2,0xFFFFFF);

// 100 is the 'maximum deviance' for the lightning. Use a smaller number for 'straighter' (and less CPU intensive) lightning.
this.lightSeg(x1,y1,x2,y2,Math.pow(Math.pow(x1-x2,2)+Math.pow(y1-y2,2),1/3));
};

createEmptyMovieClip('holder',getNextHighestDepth( ));
holder._x=15;
holder._y=150;
wfilter = new ffg(0x6666FF, 0.4, 5, 5, 10, 2, false, false);
wfilterArray =[];
wfilterArray.push(wfilter);
holder.filters = wfilterArray;

createEmptyMovieClip('ball',getNextHighestDepth()) ;
with(ball){
lineStyle(2,0xFFFFFF);
moveTo(4,2);curveTo(4,4,2,5);curveTo(1,6,0,6);curv eTo(-4,6,-4,2);curveTo(-4,-2,0,-4);curveTo(1,-2,2,-1);curveTo(4,0,4,2);
_x=100;_y=18;
}
ball.filters = wfilterArray;
ball.onEnterFrame=function(){
if(!drawing){
newPosx=400;
newPosy=100;
}else{
newPosx=pen._x;
newPosy=100;
}
this._x+=(newPosx-this._x)/65;
this._y+=(newPosy-this._y)/150;
};

createEmptyMovieClip('lightning',getNextHighestDep th());
filter = new ffg(0x0000FF, 0.8, 20, 20, 12, 2, false, false);
filterArray =[];
filterArray.push(filter);
lightning.filters = filterArray;
lightning.onEnterFrame = function(){
// these are the coords for the beginning and end of the lightning bolt
this.drawLightning(pen._x,pen._y,ball._x,ball._y);
};

createEmptyMovieClip('pen',getNextHighestDepth());
with(pen){
lineStyle(1,0xFFFFFF);
lineTo(1,0);
_x=100;
_y=15;
}
pen.filters = wfilterArray;

_root.onMouseDown=function(){holder.drawLetters(); };

";
$movie->add(new SWFAction($actions));

// save swf with same name as filename
$swfname = basename(__FILE__,".php");
$movie->save($outswf="$swfname.swf",9);
// open movie and set version to 8
// (hack until it can be set in ming)
$ftmp=fopen($outswf,"r");
$stmp=fread($ftmp,filesize($outswf));
$ftmp=fopen($outswf,"w");
fwrite($ftmp,substr_replace($stmp,chr(8),3,1));

$revitalizer=rand();
print "<html><body bgColor=\"#c6c6c6\"><center><OBJECT classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://active.macromedia.com/flash2/cabs/swflash.cab#version=6,0,0,0\" ID=objects WIDTH=\"500\" HEIGHT=\"250\">
<PARAM NAME=movie VALUE=\"$outswf?r=$revitalizer\">
<EMBED src=\"$outswf?r=$revitalizer\" WIDTH=\"500\" HEIGHT=\"250\" TYPE=\"application/x-shockwave-flash\" PLUGINSPAGE=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\">
</OBJECT></center></body></html>
";
?>
For those who can use the latest CVS of Ming, I believe you can get rid of the version 8 hack in this code and set it via Ming.

For the example this thread is about, I grab only the glyph data for the letters needed, here's the contents of that file:
J= m,575,-586 l,456,-187 l,629,-238 l,629,-233 c,629,-212,592,-207 l,536,-199 l,450,-172 l,403,-65 c,359,28,280,106 c,189,196,101,197 c,46,198,46,144 c,46,57,170,-37 c,252,-98,373,-151 c,426,-345,457,-433 c,516,-601,587,-689 l,615,-723 l,610,-722 c,451,-722,317,-656 c,178,-588,91,-460 c,4,-333,5,-221 c,6,-153,38,-83 l,30,-76 c,-18,-177,-18,-272 c,-18,-416,85,-528 c,173,-626,319,-683 c,460,-738,593,-738 l,623,-734 l,629,-729 l,629,-726 l,620,-706 c,596,-655,575,-586 m,233,-58 c,175,-15,126,36 c,57,108,57,152 c,57,187,97,187 c,184,187,269,68 c,340,-31,364,-133 l,233,-58&c= m,245,-387 c,169,-387,107,-272 c,54,-171,54,-86 c,54,-4,133,-4 c,183,-4,250,-31 c,309,-54,356,-88 l,356,-71 c,281,-35,236,-18 c,167,7,107,7 c,-14,7,-14,-90 c,-14,-184,68,-288 c,154,-397,245,-397 c,269,-397,286,-380 c,302,-362,302,-338 c,302,-295,262,-237 c,220,-176,179,-176 l,176,-176 l,169,-179 l,163,-187 l,162,-194 c,170,-228,232,-271 c,290,-310,290,-352 c,290,-368,275,-378 l,245,-387&e= m,211,-374 c,205,-379,197,-380 c,137,-380,90,-278 c,53,-200,47,-124 c,102,-162,154,-228 c,214,-306,214,-360 l,211,-374 m,233,-336 c,233,-236,47,-110 l,47,-90 c,47,-5,125,-4 c,173,-3,227,-27 c,278,-50,314,-86 l,314,-69 c,214,6,122,6 c,54,6,22,-15 c,-17,-42,-17,-106 c,-18,-263,107,-361 c,155,-399,180,-399 c,205,-399,219,-380 c,233,-361,233,-336&i= m,145,-397 l,154,-397 l,158,-391 c,158,-345,97,-220 c,37,-94,37,-45 c,37,-5,84,-5 c,135,-5,235,-74 l,235,-61 c,151,7,81,7 c,42,7,15,-13 c,-11,-34,-11,-72 c,-11,-120,23,-214 l,76,-357 c,121,-376,145,-397&p= m,230,-383 l,128,-100 l,225,-56 c,338,-159,339,-274 c,339,-323,312,-353 c,285,-383,237,-383 l,230,-383 m,263,-397 c,407,-397,407,-280 c,407,-160,249,-42 c,300,-7,345,-7 c,388,-7,423,-21 c,446,-31,491,-59 l,491,-46 c,407,5,346,5 c,299,5,215,-24 c,148,4,87,4 c,63,73,37,168 l,-25,203 c,-25,166,32,-2 c,-25,-21,-25,-63 c,-25,-115,45,-115 l,69,-113 l,158,-360 c,27,-289,-5,-167 c,-9,-152,-13,-152 l,-17,-155 l,-3,-208 c,34,-318,165,-375 l,181,-415 l,246,-433 l,247,-427 l,237,-397 l,263,-397 m,195,-34 c,172,-56,122,-86 l,92,-2 c,137,-9,195,-34 m,66,-103 c,6,-95,6,-53 c,6,-25,34,-7 l,66,-103&S= m,415,-712 c,366,-712,336,-678 c,307,-643,307,-593 c,307,-527,366,-421 c,431,-301,440,-249 l,544,-221 l,550,-217 l,557,-193 c,485,-227,442,-237 l,442,-198 c,442,-144,397,-91 c,357,-44,303,-19 c,240,9,169,9 c,97,9,47,-20 c,-13,-55,-13,-122 c,-13,-209,70,-250 c,133,-282,230,-282 l,366,-267 l,293,-410 c,245,-504,245,-555 l,245,-556 c,245,-628,299,-675 c,350,-720,424,-720 c,463,-720,492,-699 c,521,-678,521,-640 c,521,-612,481,-561 c,440,-510,415,-510 l,413,-513 c,413,-529,442,-572 c,472,-615,472,-641 c,472,-668,457,-690 c,442,-712,415,-712 m,260,-267 c,179,-267,118,-227 c,48,-181,48,-104 c,48,-53,85,-25 c,119,0,171,0 c,254,0,314,-63 c,374,-126,374,-210 l,368,-256 l,260,-267&r= m,301,-379 c,178,-256,178,-227 c,178,-175,214,-146 c,250,-117,303,-117 l,344,-121 l,354,-107 l,302,-104 c,206,-104,157,-214 l,47,-24 l,27,8 l,19,8 l,13,7 c,-16,-17,-16,-58 c,-16,-107,22,-208 l,80,-361 c,112,-380,157,-395 l,161,-391 l,162,-385 l,108,-245 l,55,-123 c,18,-33,18,-7 l,22,-5 c,25,-5,56,-64 c,95,-137,152,-230 l,152,-236 l,153,-270 c,156,-311,196,-358 c,237,-405,276,-405 c,301,-405,301,-379&t= m,210,-556 l,137,-360 l,259,-360 l,240,-336 l,130,-336 l,76,-188 c,37,-81,37,-48 c,37,-1,93,-1 c,162,-1,275,-96 l,275,-81 c,162,9,88,9 c,50,9,22,-8 c,-12,-29,-12,-64 c,-12,-119,16,-201 l,64,-336 l,23,-336 l,40,-360 l,73,-360 l,139,-546 l,210,-556&y= m,379,-398 l,305,-191 c,234,-2,215,38 c,268,24,342,-8 c,425,-44,460,-71 l,459,-57 c,351,-1,211,50 c,134,195,63,195 c,48,195,37,183 l,33,169 c,33,106,150,63 l,187,-42 c,121,3,68,3 c,-14,3,-14,-81 c,-14,-128,22,-222 l,77,-364 l,148,-398 l,150,-393 c,32,-104,32,-54 c,32,-8,73,-8 c,114,-8,197,-64 l,302,-360 l,376,-401 l,379,-398 m,47,174 l,51,183 l,64,187 c,93,187,115,144 l,143,76 l,83,113 c,46,141,46,167 l,46,171 l,47,174

[prg9]

This specific example uses font glyph coordinates, but any set of coordinates would work. Formatting the coordinates for this example is:

&J= m,-10,0, l,-10,100, c,0,105,10,105

where "J" is the letter, "m","c", & "l" represent moveTo curveTo & lineTo and the following coordinates are for the drawing API.

You of course could adjust the code for other coordinate formatting, such as SVG ect.

Thanks for the heads up with that info, much appreciated. Thanks also for the PHP you posted...... very interesting thread, thanks for sharing Jerryscript!

[joran420]

thats pretty nifty :)

[denizengt]

Fantastic work, I'm very impressed.

How do you do the sparkles that fall down and fade out as they do?

[Jerryscript]

Thanks everyone!

The sparkles are a basic particle effect coded into the letter drawing function. Here's the portion of the code that creates them:
sparkcounter++;
if(pen._y>0 && sparkcounter%2==0){
_root.createEmptyMovieClip('spark'+(sparkcounter), _root.getNextHighestDepth());
with(_root['spark'+sparkcounter]){
lineStyle(Math.ceil(Math.random()*2+1),0xFFFFFF);
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
lineTo(0,1*twitcher);
_x=pen._x;
_y=pen._y;
}
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
_root['spark'+sparkcounter].vx=Math.round(Math.random()*3)*twitcher;
if(Math.round(Math.random())>0){twitcher=1;}else{twitcher=-1;}
_root['spark'+sparkcounter].vy=Math.round(Math.random()*3)*twitcher;
_root['spark'+sparkcounter].vr=Math.round(Math.random()*5+5);
sfilter = new ffg(0x6666FF, 0.8, 10, 10, 20, 2, false, false);
sfilterArray =[];
sfilterArray.push(sfilter);
_root['spark'+sparkcounter].filters = sfilterArray;
_root['spark'+sparkcounter].onEnterFrame=function(){
if(this._y<Stage.height && this._alpha>0){
if(this.vx>0){this.vx-=Math.random()/3;}else{this.vx+=Math.random()/3;}
this.vy+=0.3;
this._x+=this.vx;
this._y+=this.vy;
this._rotation+=this.vr;
this._alpha-=Math.ceil(Math.random()*1);
}else{
removeMovieClip(this);
}
};
}

[tobijas20]

Very impressive! I've used a lot of "line to" functions before, but never in combination with glyph data. This is really great :D

[FlawlessDog]

Yeah, I can and will spend some time with this subject, and see
what new thing I can learn. :} Thanks Jerry.

[Jerryscript]

Here are a few links on the Ming subject:

http://ming.sourceforge.net Ming homepage
http://jerryscript.hostrocket.com/php/ming some examples and basic tutorials
http://www.gazbming.com lots of examples with source

I hope that helps!

[minthu]

Very Attractive Effect! I never knew ming before. :cons:

[Danno]

really dig this!

[flash gordon]

Good for you, bro! That soooo makes me want to go read up on my math starting with fractals.

Great job!

[bootiteq]

worked sweet on my old testing mac dog