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

(section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋)

 drawPath()は描画コマンドと座標をセットにしてパスを描くメソッドですが、実際にはさらに線のスタイル、塗りのスタイルを組み合わせることで図形の描画が完成します。  drawGraphicsData()は、これらの描画に必要な値をgraphicsDataベクターにまとめ、drawGraphicsData(graphicsData)のように実行することで図形の描画を完成させることができます。
 次のHexagonクラスではdrawGraphicsData()を使って六角形の図形を描いています。スクリプトを見るとわかるように引数のgraphicsDataはstroke、fill、pathの3つの値が入っているベクターです(47〜49行目)。
var graphicsData:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
graphicsData.push(stroke, fill, path);
graphics.drawGraphicsData(graphicsData);
 stroke、fill、pathは、それぞれが線のスタイル、塗りのスタイル、描画パスを示すデータです。Hexagonクラスでは、これらの3つのデータをsetStroke()、setFill()、setPath()で作成しています。
(section09-02 図形の塗りと線の塗りから抜粋)

 線をビットマップで描く方法も基本的に同じです。線幅などのスタイルはlineStyle()で指定します。このとき、lineStyle()の設定をlineBitmapStyle()よりも先に行います。次のサンプルの線幅は40に指定しています(7行目)。円の塗りパターンに使う花柄のビットマップデータはビットマップシンボルから作っています(5行目)。
 線をビットマップデータのパターンで塗るにはlineBitmapStyle()を実行します。第2引数の変換マトリックスではビットマップデータを80%に縮小し、60度回転させています(9〜13行目)

fig09-02-09.jpg

[:script:]円をビットマップデータの線で描く
var shape1:Shape=new Shape();
var w:int=250;
var h:int=200;
//ビットマップデータを作る
var bmpdata:BitmapData=new PatternImg(0,0);
//線幅を設定する
shape1.graphics.lineStyle(40);
//変換マトリックス
var mtrx:Matrix=new Matrix();
mtrx.scale(0.8,0.8);
mtrx.rotate(Math.PI/3);
//線をビットマップデータのパターンで塗る
shape1.graphics.lineBitmapStyle(bmpdata,mtrx,true,true);
//円を描く
shape1.graphics.drawCircle(0,0,80);
//ステージに置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);
(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-02 図形の塗りと線の塗りから抜粋)

 線をグラデーションで塗りたい場合は、先にlineStyle()で線の太さや両端の形などを指定し、続いてlineGradientStyle()を実行してグラデーションを指定します。線の設定を行ったならば線や図形を描きます。
 次の例は黄色と黒の斜めのグラデーションで線を縞々に塗っています。縞々の繰り返しのグラデーションにするには、spreadオプションをSpreadMethod.REFLECTかSpreadMethod.REPEATのどちらかにします。SpreadMethod.REPEATは単純な繰り返しですが、SpreadMethod.REFLECTは色の変化が反転するように繰り返されます(14行目)。縞の幅はcreateGradientBox()の第1引数で10に設定しています(12行目)。

fig09-02-05.jpg

[:script:]]四角形の線を斜めの縞々で塗る
var shape1:Shape=new Shape();
var w:int=250;
var h:int=200;
//線幅
shape1.graphics.lineStyle(15);
//線のグラデーション
var type:String=GradientType.LINEAR;
var colors:Array=[0xFFFF00,0x000000];
var alphas:Array=[1, 1];
var ratios:Array=[0,255];
var mtrx:Matrix=new Matrix();
mtrx.createGradientBox(10,h,0,0,0)
mtrx.rotate(Math.PI/4);
var spread:String=SpreadMethod.REFLECT;
shape1.graphics.lineGradientStyle(type,colors,alphas,ratios,mtrx,spread);
//四角形を描く
shape1.graphics.beginFill(0xFFFF99);
shape1.graphics.drawRect(0,0,w,h);
shape1.graphics.endFill();
//ステージの中央に置く
shape1.x=stage.stageWidth/2-w/2;
shape1.y=stage.stageHeight/2-h/2;
addChild(shape1);
(section09-02 図形の塗りと線の塗りから抜粋)

 図形や線をグラデーションで塗ることができます。図形をグラデーションで塗るにはbeginGradientFill()、線をグラデーションで塗るにはlineGradientStyle()でそれぞれグラデーションの色やタイプを指定します。

書式:図形をグラデーションで塗る
beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

書式:線をグラデーションで塗る
lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

 typeはグラデーションのタイプをGradientType.LINEAR(線状)またはGradientType.RADIAL(放射状)のどちらかで指定します。colorsはグラデーションする色の配列です。たとえば、赤から緑のグラデーションならば[0xFF0000,0x00FF00]、赤緑青の三色のグラデーションならば[0xFF0000,0x00FF00,0x0000FF]のように指定します。alphasはそれぞれの色のアルファ値を配列で指定します。ratiosはグラデーションの各色の開始位置を比率(0〜255)で指定します。2色のグラデーションで両端が指定色になるようにするならば[0,255]になり、最初は1色で後半からグラデーションを開始するようにするには[127,255]のように指定します。
 matrixではグラデーションの幅と高さ、平行移動、回転、縮尺などを変換マトリックスを使って指定します。変換マトリックスはMatrixクラスのインスタンスを作り、createGradientBox()、translate()、scale()、rotate()といったメソッドを利用して変換の値を設定します。
 spreadMethodはグラデーションの広がりをSpreadMethod.PAD、SpreadMethod.REFLECT、SpreadMethod.REPEATから選びます。focalPointRatioはグラデーションの焦点を決める値(-1〜1)です。

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

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

タグ

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

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