グラデーションの線と塗りの作成Flash Player 9 以降、Adobe AIR 1.0 以降 グラフィックオブジェクトでは、線と塗りを単色ではなく、グラデーションで描画することもできます。 グラデーションの境界線は lineGradientStyle() メソッドで作成し、グラデーションの塗りは beginGradientFill() メソッドで作成します。 どちらのメソッドも同じパラメーターを受け取ります。 最初の 4 つのパラメーター、タイプ、色、アルファ、および比率は必須です。 残りの 4 つのパラメーターはオプションですが、高度なカスタマイズに役立ちます。
5 番目のパラメーターである変換マトリックスはオプションですが、グラデーションの外観を制御する簡単で強力な方法であるため、よく使用されます。このパラメーターは Matrix インスタンスを受け取ります。 グラデーション用の Matrix オブジェクトを最も簡単に作成するには、Matrix クラスの createGradientBox() メソッドを使用します。 グラデーションで使用する Matrix オブジェクトの定義シェイプで使用するグラデーションを定義するには、flash.display.Graphics クラスの beginGradientFill() および lineGradientStyle() メソッドを使用します。グラデーションを定義する際、これらのメソッドのパラメーターでマトリックスを指定します。 マトリックスを最も簡単に定義するには、Matrix クラスの createGradientBox() メソッドを使用してグラデーション定義用のマトリックスを作成します。createGradientBox() メソッドに指定するパラメーターでは、グラデーションの拡大 / 縮小、回転、および位置を定義します。createGradientBox() メソッドは次のパラメーターを受け取ります。
例えば、次の性質を持つグラデーションを作成するとします。
次の例で示すグラデーションは、createGradientBox() メソッドの rotation パラメーターが異なりますが、その他の設定はすべて同じです。
次の例で示す緑~青の線状グラデーション効果は、createGradientBox() メソッドの rotation、tx、ty パラメーターが異なりますが、その他の設定はすべて同じです。
createGradientBox() メソッドの width、height、tx、ty パラメーターは、次の例で示すように、放射状グラデーションの塗りに関するサイズと位置にも影響します。
次のコードは、前の図の最後に示した放射状グラデーションを生成します。 import flash.display.Shape; import flash.display.GradientType; import flash.geom.Matrix; var type:String = GradientType.RADIAL; var colors:Array = [0x00FF00, 0x000088]; var alphas:Array = [1, 1]; var ratios:Array = [0, 255]; var spreadMethod:String = SpreadMethod.PAD; var interp:String = InterpolationMethod.LINEAR_RGB; var focalPtRatio:Number = 0; var matrix:Matrix = new Matrix(); var boxWidth:Number = 50; var boxHeight:Number = 100; var boxRotation:Number = Math.PI/2; // 90° var tx:Number = 25; var ty:Number = 0; matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); var square:Shape = new Shape; square.graphics.beginGradientFill(type, colors, alphas, ratios, matrix, spreadMethod, interp, focalPtRatio); square.graphics.drawRect(0, 0, 100, 100); addChild(square); グラデーションの塗りの幅と高さは、Graphics オブジェクトを使用して描画される幅と高さではなく、グラデーションマトリックスの幅と高さによって決定されます。 Graphics オブジェクトを使用して描画する場合、グラデーションマトリックスのその座標に存在するものが描画されます。 drawRect() などの Graphics オブジェクトのシェイプメソッドのいずれかを使用した場合でも、グラデーションは描画されるシェイプのサイズには伸縮されません。グラデーションのサイズはグラデーションマトリックス自体で指定する必要があります。 次のコードを使用して、グラデーションマトリックスのサイズと描画自体のサイズの視覚的な違いを説明します。 var myShape:Shape = new Shape(); var gradientBoxMatrix:Matrix = new Matrix(); gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); myShape.graphics.drawRect(0, 0, 50, 40); myShape.graphics.drawRect(0, 50, 100, 40); myShape.graphics.drawRect(0, 100, 150, 40); myShape.graphics.endFill(); this.addChild(myShape); このコードは、赤、緑、青の色配分を同ーに指定した塗りのスタイルを持つ 3 つのグラデーションを描画します。 グラデーションは、drawRect() メソッドを使用して、それぞれピクセル幅 50、100、150 で描画されます。beginGradientFill() メソッドで指定するグラデーションマトリックスは、100 ピクセルの幅で作成されます。つまり、最初のグラデーションはグラデーション領域の半分のみを占め、2 番目は領域全体を占め、3 番目は領域全体を占めて、さらに青を 50 ピクセル右に拡張します。 lineGradientStyle() メソッドは beginGradientFill() と同様に動作しますが、グラデーションを定義するだけでなく、描画の前に、lineStyle() メソッドを使用して境界線の幅を指定する必要があります。次のコードは、赤、緑、および青のグラデーションの境界線でボックスを描画します。 var myShape:Shape = new Shape(); var gradientBoxMatrix:Matrix = new Matrix(); gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); myShape.graphics.lineStyle(5, 0); myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); myShape.graphics.drawRect(0, 0, 200, 40); this.addChild(myShape); Matrix クラスについて詳しくは、Matrix オブジェクトの使用を参照してください。 |
|