ActionScript 3.0入門ノート CS4でタグ「drawCircle()」が付けられているもの

(section09-02 図形の塗りと線の塗りから抜粋)

 図形や線をビットマップデータで塗ることができます。図形をビットマップデータで塗るにはbeginBitmapFill()、線をビットマップデータで塗るにはlineBitmapStyle()でそれぞれ塗りに使うビットマップデータや塗り方を指定します。

書式:図形をビットマップで塗る
beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

書式:線をビットマップで塗る
lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

 bitmapdataはビットマップデータです。ビットマップデータはBitmapDataクラスで作りますが、ビットマップシンボルや外部イメージファイルから読み込んで作るといったこともできます。matrixはグラデーションの塗りでも使用した変形マトリックスです。ビットマップの拡大縮小や回転などを設定できます。
 repeatはビットマップのサイズより大きな領域を塗ったときにビットマップのパターンを繰り返すかどうかをtrue、falseで指定します。falseを指定した場合はパターンの繰り返しを行わずにビットマップの境界の色がそのまま連続します。smoothは伸縮したビットマップにスムージング処理のアルゴリズムを適用するかどうかを指定します。trueに設定するとスムーズになりますが、表示の処理はfaleのほうが高速です。


図形をビットマップで塗る
 次のサンプルはスクリプトで描いた四角形をビットマップシンボルのビットマップデータで塗っています。ビットシンボルからビットマップデータを取り出すには、ビットマップシンボルのリンケージ書き出し設定を行い、new演算子でインスタンス化します(4行目)。このとき、EZ_logo(0,0)のように2個の数値の引数が必要です。数値の大きさには意味がありません。
 ビットマップデータが作れたならば、図形を描く前にbeginBitmapFill()を実行し、図形を描いたらendFill()を実行します。beginBitmapFill()の第2引数の変換マトリックスは45度回転させています。第4引数のsmoothもtrueにしているので、パターンを回転させていてもイメージのジャギーが目立たずにスムーズです(9行目)。

fig09-02-07.jpg  fig09-02-08.jpg

[:script:]ビットマップデータのパターンで塗った円形を描く
var shape1:Shape=new Shape();
var r:int=150;
//ビットマップデータを作る
var bmpdata:BitmapData=new EZ_logo(0,0);
//変換マトリックス
var mtrx:Matrix=new Matrix();
mtrx.rotate(Math.PI/4);
//図形をビットマップデータのパターンで塗る
shape1.graphics.beginBitmapFill(bmpdata,mtrx,true,true);
//円を描く
shape1.graphics.drawCircle(0,0,r);
//塗り終わり
shape1.graphics.endFill();
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);

マスクの利用

|
(section09-01 基本的な図形を描くから抜粋)

 シェイプやスプライトで描く図形の活用としてマスクをあげることができます。次の例では写真のムービークリップインスタンスに円を描いたシェイプをマスクとして設定し、写真を円形に切り抜いて表示しています。

fig09-01-17.jpg  fig09-01-18.jpg

[:script:]写真にシェイプマスクをかける
//コンテナを作る
var container:Sprite=new Sprite();
container.x=100;
container.y=50;
addChild(container);
//写真のmcを作る
var photo_mc:MovieClip=new Photo();
//マスクに使うシェイプを作る
var shape1:Shape=new Shape();
shape1.graphics.beginFill(0xFF0000);
shape1.graphics.drawCircle(0,0,100);
shape1.graphics.endFill();
shape1.x=photo_mc.width/2;
shape1.y=photo_mc.height/2;
//コンテナに追加する
container.addChild(photo_mc);
container.addChild(shape1);
//shape1をphoto_mcのマスクに設定する
photo_mc.mask=shape1;

塗りの閉じ

|
(section09-01 基本的な図形を描くから抜粋)

 endFill()を実行しなくても図形の塗りは実行されます。たとえば、次のように円を描いた場合、endFill()を実行しなくても図形が塗られます。

[:script:]endFill()を実行していない
var sp:Sprite=new Sprite();
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(0,0,100);
sp.x=200;
sp.y=150;
addChild(sp);

fig09-01-13.jpg
 では、endFill()は必要ないかと言えばそうではありません。次のように重なるように円を描いた場合、塗りが重なっている部分は塗られません。

[:script:]円を重ねて描くと、塗りが重なった部分が塗られません。
var sp:Sprite=new Sprite();
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(0,0,100);
sp.graphics.drawCircle(-80,0,50);
sp.x=200;
sp.y=150;
addChild(sp);

fig09-01-14.jpg
 2つの円がどちらも塗られるようにするには、図形の塗りの終了ごとにendFill()を実行することで円を1個ずつ塗ります。

[:script:]重なっている円を塗る
var sp:Sprite=new Sprite();
//塗りの開始
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(0,0,100);
sp.graphics.endFill();
//塗り終了
//塗りの開始
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(-80,0,50);
sp.graphics.endFill();
//塗り終了
sp.x=200;
sp.y=150;
addChild(sp);

fig09-01-15.jpg

直線を引く

|
(section09-01 基本的な図形を描くから抜粋)

 直線を描くにはmoveTo()とlineTo()を使います。moveTo()は線を引き始める座標にペン先を移動します。lineTo()は現在のペン先位置から指定の座標まで直線を引きます。次の例では円を描いた後に円の中心を水平に横切る直線を引いています。横線を引く前にlineStyle()を設定し直しているので、横線は円の線とは違うスタイルで引かれます。
fig09-01-06.jpgswfを試す


[:script:]円に横線を引く
var shape1:Shape=new Shape();
shape1.graphics.lineStyle(5,0x666666);
//円を描く
var r:int=40;
shape1.graphics.drawCircle(0,0,r);
//横線を引く
shape1.graphics.lineStyle(10,0xFF0000,1,false,"normal","round");
var len:int=2*(r+10);
shape1.graphics.moveTo(len/2,0);
shape1.graphics.lineTo(-len/2,0);
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);
(section09-01 基本的な図形を描くから抜粋)

 図形の描画はGraphicsクラスの描画メソッドを使いますが、Graphicsクラスのインスタンスを作って直接利用することはできません。また、Graphicsクラスを継承して描画可能なクラスを再定義することもできません。
 Graphicsクラスの描画メソッドを利用するには、Shapeクラス、Spriteクラス、そしてSpriteクラスのサブクラスであるMovieClipクラスのgraphicsプロパティを介してGraphicsクラスのオブジェクトにアクセスします。

図形を描く
 Graphicsクラスの描画メソッドを使うと、円、楕円、四角形、角丸四角形の図形を描くことができます。次のスクリプトはGraphicsクラスのdrawCircle()を使って、Shapeクラスのインスタンスに円を描いています。
 なお、Shapeクラスは単純なシェイプを作成するときに利用されます。ShapeクラスはSpriteクラスと違ってDisplayObjectContainerとInteractiveObjectを継承していません。つまり、ほかの表示オブジェクトを入れ子にもつことができず、クリックイベントなどのイベントを受け取りません。その分だけSpriteクラスよりもメモリを消費しません。

[:script:]円を描く
var shape1:Shape=new Shape();
//線幅3、赤色の線
shape1.graphics.lineStyle(3,0xFF0000);
//円を描く
shape1.graphics.drawCircle(0,0,80);
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);
 drawCircle(0,0,80)は、中心点の座標(0,0)と半径80の円を描きます。座標の(0,0)はステージの座標ではなく、addChild()する親オブジェクトの中心点を基準とするローカル座標です。図形を描く線はlineStyle()で指定します。lineStyle()のオプションはたくさんありますが、ここでは線幅3と線色0xFF0000(赤)を指定しています。

fig09-01-01.jpgswfを試す

まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ