このwikiの更新情報RSS概要
ストライプ模様を作ってみましょう。
グラデーションを使用するので、グラデーションを使用するを先に参照してください。
グラデーションを使用するので、グラデーションを使用するを先に参照してください。
前回のグラデーション解説では最低限の使い方しか説明していませんでしたが、実はもう一つ引数を加えることでグラデーションをリピートさせる事が出来ます。
プログラム
var matrix:Matrix = new Matrix();
matrix.createGradientBox(50, 50, 0);
var pattern:Sprite = new Sprite();
pattern.graphics.beginGradientFill("linear", [0x941100, 0x0], [1.0, 1.0], [0, 255], matrix);
pattern.graphics.drawRect(0, 0, 50, 50);
pattern.graphics.endFill();
addChild(pattern);
50 * 50の範囲で、赤と黒のグラデーションを作るコードです。
pattern.graphics.beginGradientFill("linear", [0x941100, 0x0], [1.0, 1.0], [0, 255], matrix, SpreadMethod.REPEAT);
ここで、beginGradientFillの第六引数にSpreadMethod.REPEAT もしくは "repeat"を追加しましょう。
ただ、この時点では結果は何も変わりません。
ただ、この時点では結果は何も変わりません。
pattern.graphics.drawRect(0, 0, 200, 200);
drawRectで描くサイズを広げると、上のようにグラデーションのパターンがリピートされて描かれます。
Matrixで指定したサイズは50*50でしたが、実際に描かないといけない範囲が200*200になってしまったので、足らない部分を繰り返して描画しているわけです。
Matrixで指定したサイズは50*50でしたが、実際に描かないといけない範囲が200*200になってしまったので、足らない部分を繰り返して描画しているわけです。
ちなみに、SpreadMethod.REPEATを付けなければこのように表示されます。
色を[0x941100, 0x0]と指定しているので、(20, 0)～(200, 200)まで黒で埋まってしまいます。
色を[0x941100, 0x0]と指定しているので、(20, 0)～(200, 200)まで黒で埋まってしまいます。
ストライプ
この繰り返し機能を利用してストライプ模様を作ってみましょう。
pattern.graphics.beginGradientFill("linear", [0x290101, 0xC7D783], [1.0, 1.0], [128, 128], matrix);
第四引数のレシオを、[128, 128]にします。
こうすると、0～128までが1番目の色、128～255までが2番目の色となるので中間色が作られず、ただの2色模様になります。
こうすると、0～128までが1番目の色、128～255までが2番目の色となるので中間色が作られず、ただの2色模様になります。
var matrix:Matrix = new Matrix();
matrix.createGradientBox(50, 50, 0);
var pattern:Sprite = new Sprite();
pattern.graphics.beginGradientFill("linear", [0x290101, 0xC7D783], [1.0, 1.0], [128, 128], matrix, SpreadMethod.REPEAT);
pattern.graphics.drawRect(0, 0, 200, 200);
pattern.graphics.endFill();
addChild(pattern);
後はSpreadMethod.REPEATを指定して、描くサイズを広げればストライプ模様の完成です。
matrix.createGradientBox(50, 50, 45 * Math.PI / 180);
角度を変更したい場合はMatrixのラジアンを変更すればいいです。(上は45度指定)
var matrix:Matrix = new Matrix();
matrix.createGradientBox(20, 20, 45 * Math.PI / 180);
var pattern:Sprite = new Sprite();
pattern.graphics.beginGradientFill("linear", [0x0, 0xB698A2], [1.0, 1.0], [128, 128], matrix, "repeat");
pattern.graphics.lineTo(70, 0);
pattern.graphics.lineTo(60, 20);
pattern.graphics.lineTo(80, 230);
pattern.graphics.lineTo(35, 280);
pattern.graphics.lineTo(-10, 230);
pattern.graphics.lineTo(10, 20);
pattern.graphics.endFill();
addChild(pattern);
pattern.x = 10;
ネクタイ風のデザイン例です。
検証用コード
package
{
import flash.display.Sprite;
import flash.display.SpreadMethod;
import flash.geom.Matrix;
public class Main extends Sprite
{
public function Main()
{
var matrix:Matrix = new Matrix();
matrix.createGradientBox(50, 50, 45 * Math.PI / 180);
var pattern:Sprite = new Sprite();
pattern.graphics.beginGradientFill("linear", [0x290101, 0xC7D783], [1.0, 1.0], [128, 128], matrix, SpreadMethod.REPEAT);
pattern.graphics.drawRect(0, 0, 200, 200);
pattern.graphics.endFill();
addChild(pattern);
}
}
}
