| INDEX |

なんとなくちまちま。JSFLを勉強していたりします。で、Flash上で描いた線や塗りを、lineStyle(…)、beginGradientFill(…)の形式で出力するJSFLをつくってみました。特にグラデーションのパラメータはスクリプトで書くのが面倒なのがつくってみた訳です。

何かしらのシェイプを選択した状態で下記のJSFLを実行すると、こんな感じで出力されます。

lineStyle( 0, 0x000000, 1, false, "normal", "round", "round" );
beginGradientFill( "radial", [0xffffff,0x15aef7,0x000000], [1,1,0.8], [0,126,255], new Matrix(0.0251312255859375,0.0249786376953125,-0.0249176025390625,0.02508544921875,-21.049,-21.249), "reflect", "rgb", -0.49 );

一応、選択したシェイプに線があれば線の、塗りがあれば塗りのスクリプトを出力します。
留意する部分は、グラデーション塗りのMatrixで、出力されるMatrixは選択したシェイプの位置に依存するということ。Matrixにはグラデーションの位置や回転などの情報が入っていますが、基準点がシェイプが描かれているステージ、またはシンボルの基準点になります。つまり同じようなグラデーションをスクリプトで塗るには、座標的に同じ位置に塗らないといけないということです。

以下JSFLのスクリプトです。

 
/**
*
* out draw style
* author nutsu
* version 0.1
*
*/
 
//------------------------------------------------------------------------------------
 
var as2 = false;
 
startBatch();
 
//------------------------------------------------------------------------------------
function startBatch()
{
    fl.outputPanel.clear();
    
    //line stroke
    var stroke = fl.getDocumentDOM().getCustomStroke("selection"); 
    if( stroke.thickness )
        outLineStyleCode(stroke);
    
    //fill
    var fill = fl.getDocumentDOM().getCustomFill("selection");
    if( fill.style )
        outFillStyleCode(fill);
    
}
//------------------------------------------------------------------------------------LINE
/**
*    out line style
*/
function outLineStyleCode( stroke )
{
    //thickness (0.05 is thin)
    var thickness = ( stroke.thickness<0.1 ) ? 0 : stroke.thickness;
    
    //color and alpha (#RRGGBBAA)
    var colorstyle = parseColorStyle(stroke.color);
    
    //pixelHinting
    var pixelHinting = stroke.strokeHinting;
    
    //scaleMode ( "normal"|"horizontal"|"vertical"|"none" )
    var scaleMode = "\"" + stroke.scaleType + "\"";
    
    //caps ( "none"|"round"|"square" )
    var caps = "\"" + stroke.capType + "\"";
    
    //joints ( "miter"|"round"|"bevel" )
    var joints ="\"" + stroke.joinType + "\"";
    
    //miterLimit
    var miterLimit = stroke.miterLimit;
    
    //out
    var outcode = "lineStyle( ";
    outcode += thickness + ", ";
    outcode += colorstyle.color + ", ";
    outcode += colorstyle.alpha + ", ";
    outcode += pixelHinting + ", ";
    outcode += scaleMode + ", ";
    outcode += caps + ", ";
    outcode += joints;
    outcode += ( stroke.joinType=="miter" ) ? ", " + miterLimit : "";
    outcode += " );"
    fl.trace(outcode);
    
    if( stroke.shapeFill.style=="linearGradient" || stroke.shapeFill.style=="radialGradient" )
        outGradientCode( "lineGradientStyle", stroke.shapeFill );
}
 
//------------------------------------------------------------------------------------FILL
/**
*    out fill style
*/
function outFillStyleCode( fill )
{
    //style ("solid"|"linearGradient"|"radialGradient"|"noFill")
    if( fill.style=="solid" )
    {
        //beginFill(color, alpha )
        //color and alpha (#RRGGBBAA)
        var colorstyle = parseColorStyle(fill.color);
        
        //out
        var outcode = "beginFill( ";
        outcode += colorstyle.color + ", ";
        outcode += colorstyle.alpha;
        outcode += " );"
        fl.trace(outcode);
    }
    else if( fill.style!="noFill" )
    {
        outGradientCode( "beginGradientFill", fill );
    }
}
 
//------------------------------------------------------------------------------------OUT GRADIENT
/**
*    out gradient
*    funcName(type, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio)
*/
function outGradientCode( funcName, fill )
{
    //type
    var gradientType = "\"" + convertGradientType( fill.style ) + "\"";
    
    //colors and alphas
    var colorstyles = parseColorArrayStyle(fill.colorArray);
    
    //ratios
    var ratios = "[" + fill.posArray + "]";
    
    //matrix
    var matrix = convertMatrix( fill.matrix );
    
    //spreadMethod
    var spreadMethod = "\"" + convertSpreadMethod(fill.overflow) + "\"";
    
    //interpolationMethod
    var interpolationMethod = "\"" + convertInterpolationMethod(fill.linearRGB) + "\"";
    
    //out
    var outcode = funcName + "( ";
    outcode += gradientType + ", ";
    outcode += colorstyles.colors + ", ";
    outcode += colorstyles.alphas + ", ";
    outcode += ratios + ", ";
    outcode += matrix + ", ";
    outcode += spreadMethod + ", ";
    outcode += interpolationMethod;
    outcode += ( fill.style=="radialGradient" ) ? ", " + convertFocalPointRatio(fill.focalPoint) : "";
    outcode += " );"
    fl.trace(outcode);
}
 
//------------------------------------------------------------------------------------PARSE COLOR
/**
*    parse color
*    @param color string "#RRGGBBAA" or "#RRGGBB"
*    @return {color:color,alpha:alpha}
*/
function parseColorStyle( colorstr )
{
    var color = colorstr.substring(1);
    var alpha = 1.0;
    if( color.length==8 )
    {
        alpha = Math.round((Number("0x" + color.substring(6))/0xFF)*100)/100;
        color = color.substring(0,6);
    }
    color = "0x" + color;
    if( as2 )
        alpha = Math.round( alpha*100 );
    
    return {color:color,alpha:alpha};
}
/**
*    parse color array
*    @param colors
*    @return {colors:[],alphas:[]}
*/
function parseColorArrayStyle( cols )
{
    var colors = [];
    var alphas = [];
    for( var i=0; i<cols.length ; i++ )
    {
        var colorstyle = parseColorStyle(cols[i]);
        colors.push( colorstyle.color );
        alphas.push( colorstyle.alpha );
    }
    
    return {colors:"["+colors+"]",alphas:"["+alphas+"]"};
}
//------------------------------------------------------------------------------------CONVERT TYPE
/**
*    convert gradient type
*    @param     "linearGradient"|"radialGradient"
*    @return "linear" or "radial" or "none"
*/
function convertGradientType( styleName )
{
    if( styleName=="linearGradient" )
        return "linear";
    else if( styleName=="radialGradient" )
        return "radial";
    else
        return "none";
}
 
/**
*    convert spread method
*    @param     "extend","reflect","repeat"
*    @return "pad",   "reflect","repeat"
*/
function convertSpreadMethod( overflow )
{
    overflow = overflow.toLowerCase();
    if( overflow=="extend" )
        return "pad";
    else
        return overflow;
}
 
/**
*    convert interpolation method
*    @param     linearRGB:Boolean
*    @return "linearRGB", "rgb"
*/
function convertInterpolationMethod( linearRGB )
{
    return (linearRGB) ? "linearRGB" : "rgb";
}
 
/**
*    convert focal point ratio
*    @param     -255 to 255
*    @return -1 to 1
*/
function convertFocalPointRatio( focalPoint )
{
    return Math.round((focalPoint/0xFF)*100)/100;
}
 
/**
*    convert matrix
*    @param     matrix object
*    @return "new Matrix(..)"
*/
function convertMatrix( mtx )
{
    return "new Matrix(" +mtx.a+ "," +mtx.b+ "," +mtx.c+ "," +mtx.d+ "," +mtx.tx+ "," +mtx.ty+ ")" ;
}

印象として何気にあんまり使わない気がしますが、ないよりいいかなぁぐらいです。
ちなみに、Bitmap系のドローには対応しておりません…。

コメントは受け付けていません。

| INDEX |