CODEWITHSUNDEEP
actionscript-3
user2056564
user2056564

Reputation: 183

Stroke that has different width throughout its length in AS3

I need a stroke that has a different width on different places throughout its length. For example, I have a path that I've drawn manually (without using AS3) and I want to assign it a stroke that has 0 width at the beginning and at the end of the path's length, and 10 width in the middle of the path's length so that the stroke's width can change gradually throughout the length of the path. Thanks in advance

Upvotes: 2

Views: 457

Answers (1)

George Profenza
George Profenza

Reputation: 51847

In as3 you'd use lineStyle():

var segs:int = 32;//number of segments/'circle resolution'
var ai:Number = (Math.PI * 2) / segs;//angle increment
var offx:int = stage.stageWidth/2;//circle centre x
var offy:int = stage.stageHeight/2;//circle centre y
var rad:Number = 100;//circle radius
var maxWidth:Number = 18;

for(var i:int = 0 ; i < segs; i++){
    var a:Number = ai * i;
    var cx:Number = offx + Math.cos(a) * rad;
    var cy:Number = offy + Math.sin(a) * rad;
    graphics.lineStyle(i/segs * maxWidth);
    if(i == 0) graphics.moveTo(cx,cy);
    graphics.lineTo(cx,cy);
}

AS3 line style

but you mentioned you need that drawn in the Flash editor, therefore you need to script it. You can script the Flash editor using JSFL.

Here's a JSFL port of the above:

var doc = fl.getDocumentDOM();
var segs = 32;//number of segments/'circle resolution'
var ai = (Math.PI * 2) / segs;//angle increment
var offx = doc.width/2;//circle centre x
var offy = doc.height/2;//circle centre y
var rad = 100;//circle radius
var maxWidth = 10;

for(var i = 0 ; i < segs; i++){
    var a = ai * i;
    var an = ai * (i+1);//next angle
    var cx = offx + Math.cos(a) * rad;//current pt
    var cy = offy + Math.sin(a) * rad;
    var nx = offx + Math.cos(an) * rad;//next pt
    var ny = offy + Math.sin(an) * rad;
    //this is mainly what you're after
    var s = doc.getCustomStroke("toolbar");
    s.thickness= (i/segs)*maxWidth;
    doc.setCustomStroke(s);

    doc.addNewLine({x:cx,y:cy},{x:nx,y:ny});
}

Create a new flash document, then a new Flash JavaScript File and run the above code:

circle jsfl

Stroke's thickness property is what you're after. You can also create your custom drawing tools with JSFL. Check out [Extending Macromedia Flash MX 2004: Complete Guide and Reference to JavaScript Flash] (which sells pretty cheap now), it's the best thing you can get on the subject. There's also a free chapter on creating Tools which is exactly you need.

Another option might be to script Radomír Měch's Deco Tool procedural engine. Unfortunately it's not well documented.

If you're getting into JSFL do checkout Dave Stewart's awesome xJSFL

Although you mentioned Flash, you might also want to look into the Scriptographer free plugin for Illustrator which is also scriptable through JavaScript and Illustrator produces vector graphics you can easily import back in Flash.

Upvotes: 2

Related Questions