Flash CS3 ドキュメンテーション

ActionScript 3.0 のプログラミング > 描画 API の使用 > グラデーションの線と塗りの作成

グラデーションの線と塗りの作成

グラフィックオブジェクトでは、線と塗りを単色ではなく、グラデーションで描画することもできます。グラデーションの境界線は lineGradientStyle() メソッドで作成し、グラデーションの塗りは beginGradientFill() メソッドで作成します。

どちらのメソッドも同じパラメータを受け取ります。最初の 4 つのパラメータ、タイプ、色、アルファ、および比率は必須です。残りの 4 つのパラメータはオプションですが、高度なカスタマイズに役立ちます。

• 最初のパラメータには、作成するグラデーションのタイプを指定します。指定できる値は、GradientFill.LINEAR または GradientFill.RADIAL です。
• 2 番目のパラメータには、使用するカラー値の配列を指定します。線状グラデーションの場合、色は左から右に配置されます。放射状グラデーションの場合、色は内側から外側に配置されます。配列での色の順序は、グラデーションで色が描画される順序を表します。
• 3 番目のパラメータには、前のパラメータの色に対応するアルファ透明度値を指定します。
• 4 番目のパラメータには、各色のグラデーションの中での強調度を示すための比率を指定します。指定できる値の範囲は 0 ～ 255 です。これらの値は幅や高さではなく、グラデーション内での位置を表します。0 がグラデーションの始まりを表し、255 がグラデーションの終わりを表します。比率の配列は、順に増やしていく必要があり、2 番目および 3 番目のパラメータで指定した色およびアルファの配列の両方とエントリの数が同じである必要があります。

5 番目のパラメータである変換マトリックスはオプションですが、グラデーションの外観を制御する簡単で強力な方法であるため、よく使用されます。このパラメータは Matrix インスタンスを受け取ります。グラデーション用の Matrix オブジェクトを最も簡単に作成するには、Matrix クラスの createGradientBox() メソッドを使用します。

グラデーションで使用する Matrix オブジェクトの定義

シェイプで使用するグラデーションを定義するには、flash.display.Graphics クラスの beginGradientFill() および lineGradientStyle() メソッドを使用します。グラデーションを定義する際、これらのメソッドのパラメータでマトリックスを指定します。

マトリックスを最も簡単に定義するには、Matrix クラスの createGradientBox() メソッドを使用してグラデーション定義用のマトリックスを作成します。createGradientBox() メソッドに指定するパラメータでは、グラデーションの拡大 / 縮小、回転、および位置を定義します。createGradientBox() メソッドは次のパラメータを受け取ります。

• グラデーションボックスの幅 : グラデーションが広がる幅 (ピクセル単位)
• グラデーションボックスの高さ : グラデーションが広がる高さ (ピクセル単位)
• グラデーションボックスの回転 : グラデーションに適用される回転角度 (ラジアン単位)
• 水平移動 : グラデーションが水平方向に移動する距離 (ピクセル単位)
• 垂直移動 : グラデーションが垂直方向に移動する距離 (ピクセル単位)

たとえば、次の性質を持つグラデーションを作成するとします。

• GradientType.LINEAR
• 緑と青の 2 色、ratios 配列を [0, 255] に設定
• SpreadMethod.PAD
• InterpolationMethod.LINEAR_RGB

次の例で示すグラデーションは、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 オブジェクトの使用を参照してください。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000180.html

コメントの追加