(section09-02 図形の塗りと線の塗りから抜粋)
図形や線をグラデーションで塗ることができます。図形をグラデーションで塗るにはbeginGradientFill()、線をグラデーションで塗るにはlineGradientStyle()でそれぞれグラデーションの色やタイプを指定します。
書式:図形をグラデーションで塗る
beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void
書式:線をグラデーションで塗る
lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void
typeはグラデーションのタイプをGradientType.LINEAR(線状)またはGradientType.RADIAL(放射状)のどちらかで指定します。colorsはグラデーションする色の配列です。たとえば、赤から緑のグラデーションならば[0xFF0000,0x00FF00]、赤緑青の三色のグラデーションならば[0xFF0000,0x00FF00,0x0000FF]のように指定します。alphasはそれぞれの色のアルファ値を配列で指定します。ratiosはグラデーションの各色の開始位置を比率(0〜255)で指定します。2色のグラデーションで両端が指定色になるようにするならば[0,255]になり、最初は1色で後半からグラデーションを開始するようにするには[127,255]のように指定します。
matrixではグラデーションの幅と高さ、平行移動、回転、縮尺などを変換マトリックスを使って指定します。変換マトリックスはMatrixクラスのインスタンスを作り、createGradientBox()、translate()、scale()、rotate()といったメソッドを利用して変換の値を設定します。
spreadMethodはグラデーションの広がりをSpreadMethod.PAD、SpreadMethod.REFLECT、SpreadMethod.REPEATから選びます。focalPointRatioはグラデーションの焦点を決める値(-1〜1)です。
図形や線をグラデーションで塗ることができます。図形をグラデーションで塗るにはbeginGradientFill()、線をグラデーションで塗るにはlineGradientStyle()でそれぞれグラデーションの色やタイプを指定します。
書式:図形をグラデーションで塗る
beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void
書式:線をグラデーションで塗る
lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void
typeはグラデーションのタイプをGradientType.LINEAR(線状)またはGradientType.RADIAL(放射状)のどちらかで指定します。colorsはグラデーションする色の配列です。たとえば、赤から緑のグラデーションならば[0xFF0000,0x00FF00]、赤緑青の三色のグラデーションならば[0xFF0000,0x00FF00,0x0000FF]のように指定します。alphasはそれぞれの色のアルファ値を配列で指定します。ratiosはグラデーションの各色の開始位置を比率(0〜255)で指定します。2色のグラデーションで両端が指定色になるようにするならば[0,255]になり、最初は1色で後半からグラデーションを開始するようにするには[127,255]のように指定します。
matrixではグラデーションの幅と高さ、平行移動、回転、縮尺などを変換マトリックスを使って指定します。変換マトリックスはMatrixクラスのインスタンスを作り、createGradientBox()、translate()、scale()、rotate()といったメソッドを利用して変換の値を設定します。
spreadMethodはグラデーションの広がりをSpreadMethod.PAD、SpreadMethod.REFLECT、SpreadMethod.REPEATから選びます。focalPointRatioはグラデーションの焦点を決める値(-1〜1)です。
図形をグラデーションで塗る
次の例は四角形をグラデーションで塗っています。図形をグラデーションで塗るには、通常の塗りと同じように図形を描く前にbeginGradientFill()を実行し、塗り終わりでendFill()を実行します(19〜22行目)。グラデーションのタイプは線状で、塗り色はグレイの2色を指定しています(7〜8行目)。変形マトリックスをrotate()でMath.PI/4だけ回転するので、グラデーションは右斜めに45度傾いています(12行目)。
[:script:]四角形を線状のグラデーションで塗る
次の例は四角形をグラデーションで塗っています。図形をグラデーションで塗るには、通常の塗りと同じように図形を描く前にbeginGradientFill()を実行し、塗り終わりでendFill()を実行します(19〜22行目)。グラデーションのタイプは線状で、塗り色はグレイの2色を指定しています(7〜8行目)。変形マトリックスをrotate()でMath.PI/4だけ回転するので、グラデーションは右斜めに45度傾いています(12行目)。
[:script:]四角形を線状のグラデーションで塗る
var shape1:Shape=new Shape(); var w:int=200; var h:int=50; //線幅 shape1.graphics.lineStyle(1); //線状のグラデーション var type:String=GradientType.LINEAR; var colors:Array=[0xDDDDDD,0x333333]; var alphas:Array=[1, 1]; var ratios:Array=[0,255]; var mtrx:Matrix=new Matrix(); mtrx.createGradientBox(w,h,0,0,0); //グラデーションを45度回転する mtrx.rotate(Math.PI/4); var spread:String=SpreadMethod.PAD; var interpolation:String="rgb"; var focalPointRatio:Number=0; //グラデーションで塗る shape1.graphics.beginGradientFill(type,colors,alphas,ratios,mtrx,spread,interpolation,focalPointRatio); //四角形を描く shape1.graphics.drawRect(0,0,w,h); shape1.graphics.endFill(); //ステージの中央に置く shape1.x=stage.stageWidth/2-w/2; shape1.y=stage.stageHeight/2-h/2; addChild(shape1);