Little known fact – JSFL is awesome. Unfortunately, its also a bit buggy and is not entirely straightforward.

For those who don’t know, the JSFL API (Javascript Flash API), included with the Flash IDE, allows you to script *almost* anything you would normally do manually in Flash. Click here, change that option, change this color, select this, etc – all of it can be written up in a script that you can then run at any point in time.

I’ve been working with it on and off for the past and thought I’d share a few snags.

The API is especially incredibly useful for anything that needs to be done in bulk. For instance, say you have tons of shapes on the stage and they all need to be uniquely named movieclips? In JSFL you could loop through all of the shapes, and for each one – create a movieclip, create a class linkages, name the instance, etc.

In one project, similar to the above, I had thousands of completed strokes, each in a separate layer, and wanted to add a fill to each one. Unfortunately, this isn’t something JSFL can apparently do. I ran into two major issues.

The first few tests resulted in a crash, for instance, something like the following:

fl.getDocumentDOM().selectAll();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = "solid";
fill.color = 0x00FF33;
fl.getDocumentDOM().setCustomFill(fill);

According to some, this results in a crash because all of the fill parameters must be set before doing setCustomFill(). Not sure if that’s true or not.

The real issue here is that you can’t “add” a fill to a stroke if the stroke doesn’t already have a fill, or if you’re not creating the object with JSFL. In fact, in Flash, if you were to add a fill manually, you’d have to select the paint bucket tool and click inside the stroke.

But what I found, in Flash, is that if I first do the Union command on a stroke (which converts it to a “drawing object”) and then change the fill setting, it will “add” a fill. So I tried just that in JSFL:

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = "solid";
fill.color = 0x00FF33;
fl.getDocumentDOM().setCustomFill(fill);

This unfortunately still causes a crash in Flash.

So how about an example straight out of the Flash CS3 Help?

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = 'radialGradient';
fill.colorArray = ['#00ff00','#ff00ff'];
fill.posArray = [0, 255];
fill.focalPoint = 100;
fill.linearRGB = false;
fill.overflow = 'repeat';
fl.getDocumentDOM().setCustomFill(fill);

Shockingly, this actually works, but produces only a black fill. Broken down, I learned that this would produce the same thing, without crashing Flash:

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();
var fill = fl.getDocumentDOM().getCustomFill();
fill.style = 'radialGradient';
fl.getDocumentDOM().setCustomFill(fill);

So the key is setting fill.style to something other than solid.

So to produce a solid fill, simply do the fill twice:

fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().union();

var fillA = fl.getDocumentDOM().getCustomFill();
fillA.style = 'radialGradient';
fl.getDocumentDOM().setCustomFill(fillA);

var fillB = fl.getDocumentDOM().getCustomFill();
fillB.style = "solid";
fillB.color = 0x00FF33;
fl.getDocumentDOM().setCustomFill(fillB);

IMHO ridiculous, but it works.

The final script looked something like this, where each closed stroke was on a separate layer:

var doc = fl.getDocumentDOM()
var tl = doc.getTimeline()
var layers = tl.layers;

tl.setSelectedLayers(0);

for (var l=0; l<layers.length; l++) {
	doc.selectNone();

	doc.selection = layers[l].frames[0].elements;
	doc.union();

	if (doc.selection != null) {
		doFill();
	} else {
		fl.trace("no selection")
	}
}

function doFill() {
	var fillA = doc.getCustomFill();
	fillA.style = 'radialGradient';
	doc.setCustomFill(fillA);

	var fillB = doc.getCustomFill();
	fillB.style = "solid";
	fillB.color = 0x00FF33;
	doc.setCustomFill(fillB);
}