■図形を描く
flash.display.Graphicsクラスのメソッドを使ってスプライトに図形を描くことができます。描くことができる図形は、線、曲線、円、楕円、四角形、角丸四角形といった図形で、それぞれlineTo()、curveTo()、drawCircle()、drawEllipse()、drawRect()、drawRoundRect()のメソッドで描きます。図形の線はlineStyle()またはlineGradientStyle()で設定でき、図形を描く前にbeginBitMapFill()、beginFill()、beginGradientFill()を実行しておけば、図形の中を塗りつぶすことができます。
次のTileクラスはdrawRoundRect()メソッドを使って、角丸四角形をステージにタイル状に並べるサンプルです。タイルは中央に近いほど縦横サイズが大きくなるように並べてあります。drawRoundRect()は、図形の左上角の座標、図形の幅と高さ、そして角丸の幅と高さを引数で指定します。
flash.display.Graphicsクラスのメソッドを使ってスプライトに図形を描くことができます。描くことができる図形は、線、曲線、円、楕円、四角形、角丸四角形といった図形で、それぞれlineTo()、curveTo()、drawCircle()、drawEllipse()、drawRect()、drawRoundRect()のメソッドで描きます。図形の線はlineStyle()またはlineGradientStyle()で設定でき、図形を描く前にbeginBitMapFill()、beginFill()、beginGradientFill()を実行しておけば、図形の中を塗りつぶすことができます。
次のTileクラスはdrawRoundRect()メソッドを使って、角丸四角形をステージにタイル状に並べるサンプルです。タイルは中央に近いほど縦横サイズが大きくなるように並べてあります。drawRoundRect()は、図形の左上角の座標、図形の幅と高さ、そして角丸の幅と高さを引数で指定します。
Tileクラスのコンストラクタの引数で渡したコンテナに直接図を描くことはできますが、新規にスプライトを作り、その中に図を描いています。作ったスプライトをコンテナにaddChild()しておけば描いた図が実際に表示されます。lineStyle()を実行してラインスタイルを指定しなければ図形の囲みの線が引かれず、塗りだけの図形になります。線を引いた場合、線は塗りの中に半分だけ重なるので、線幅が太い場合にはそのサイズを考慮する必要があります。
fig06-01-01 中央に近いほど縦横サイズが大きくなるように角丸四角形が並べてあります。
[:sample:] Tile.as
例：ステージを角丸四角形の図形で埋めるTileクラス
このTileクラスを試すには、ムービーのメインのタイムラインのフレームアクションに次のスクリプトを書きます。この例では、縦横ともに10個ずつ、合計100個のタイルを並べます。
[:sample:] tile_test.fla
例：メインのタイムラインのフレームアクション
fig06-01-01 中央に近いほど縦横サイズが大きくなるように角丸四角形が並べてあります。
[:sample:] Tile.as
例：ステージを角丸四角形の図形で埋めるTileクラス
package{
import flash.display.DisplayObjectContainer;
import flash.display.Sprite;
public class Tile{
var my_sprite:Sprite;
var yokoCnt:uint;
var tateCnt:uint;
var stageW:int;
var stageH:int;
//コンストラクタ
function Tile(container:DisplayObjectContainer, yokoCnt:uint, tateCnt:uint):void {
my_sprite = new Sprite();
container.addChild(my_sprite);
this.yokoCnt = yokoCnt;
this.tateCnt = tateCnt;
stageW = container.stage.stageWidth;
stageH = container.stage.stageHeight;
fillTile();
}
//タイルで埋める
function fillTile():void{
var lineSize:Number = 8;
for (var tate:uint=0; tate<tateCnt; tate++) {
var posY1:Number = lineSize + getPos(stageH, tateCnt, tate);
var posY2:Number = lineSize + getPos(stageH, tateCnt, tate+1);
var h:Number = posY2-posY1-lineSize*2;
for (var yoko:uint=0; yoko<yokoCnt; yoko++) {
var posX1:Number = lineSize + getPos(stageW, yokoCnt, yoko);
var posX2:Number = lineSize + getPos(stageW, yokoCnt, yoko+1);
var w:Number = posX2-posX1-lineSize*2;
//ラインスタイル
var lineColor:uint = 0xFFFFFF*Math.random();
my_sprite.graphics.lineStyle(lineSize,lineColor);
//角丸四角形を描く
var fillColor:uint = 0xFFFFFF*Math.random();
my_sprite.graphics.beginFill(fillColor);
my_sprite.graphics.drawRoundRect(posX1,posY1,w,h,4,4);
my_sprite.graphics.endFill();
}
}
}
//座標計算
function getPos(fullLength:uint, fullCnt:uint, tmpCnt:uint):Number{
var ratio:Number = Math.abs(1 - Math.cos(Math.PI*(tmpCnt/fullCnt)))*0.5;
var pos:Number = fullLength*ratio;
return pos;
}
}
}
このTileクラスを試すには、ムービーのメインのタイムラインのフレームアクションに次のスクリプトを書きます。この例では、縦横ともに10個ずつ、合計100個のタイルを並べます。
[:sample:] tile_test.fla
例：メインのタイムラインのフレームアクション
var tileObj:Tile = new Tile(this, 10, 10);