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

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

 次のサンプルは図形を8個の三角形に分割した場合です。頂点は9個になり、それぞれの座標は6〜9行目でverticesに登録しています。8個の三角形は頂点を0-1-3、1-3-4、1-2-4のよう結んで作ります。この頂点の並びを11〜19行目でindicesに登録します。0〜8の各頂点のUV座標は21〜24行目でuvtDataに登録します。たとえば、7番の頂点のUV座標は(0.5, 1)になります。

fig09-03-16_shiji.jpg

[:script:]]図形を8個の三角形に分割してテクスチャを貼る
var shape:Shape=new Shape();
//ビットマップデータで塗る
var bmpdata:BitmapData=new IMG_8268(0,0);
shape.graphics.beginBitmapFill(bmpdata);
//頂点の座標
var vertices:Vector.<Number>=new Vector.<Number>();
vertices.push(0,0, 160,0, 320,0);//頂点0-1-2
vertices.push(0,120, 160,120, 320,120);//頂点3-4-5
vertices.push(0,240, 160,240, 320,240);//頂点6-7-8
//三角形を描く頂点
var indices:Vector.<int>=new Vector.<int>();
indices.push(0,1,3);//三角形A
indices.push(1,3,4);//三角形B
indices.push(1,2,4);//三角形C
indices.push(2,4,5);//三角形D
indices.push(3,4,6);//三角形E
indices.push(4,6,7);//三角形F
indices.push(4,5,7);//三角形G
indices.push(5,7,8);//三角形H
//頂点のUV座標(0〜1)
var uvtData:Vector.<Number>=new Vector.<Number>();
uvtData.push(0,0, 0.5,0, 1,0);//頂点0-1-2
uvtData.push(0,0.5, 0.5,0.5, 1,0.5);//頂点3-4-5
uvtData.push(0,1, 0.5,1, 1,1);//頂点6-7-8
//三角形を描く
shape.graphics.drawTriangles(vertices,indices,uvtData);
shape.graphics.endFill();
shape.x=100;
shape.y=50;
addChild(shape);

 さきほどと同じように頂点の座標を変更すると、頂点の移動に合わせてテクスチャとして貼ったビットマップデータも変形します。
vertices.push(0,30, 160,0, 320,30);//頂点0-1-2
vertices.push(30,120, 190,120, 290,120);//頂点3-4-5
vertices.push(0,210, 160,240, 320,220);//頂点6-7-8

fig09-03-17.jpg
(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);

次の写真は店名の部分にだけブラーフィルタをかけてぼかしています。

fig12-01-05.jpg

軌跡とステージリサイズ

|

ステージに軌跡を描きます。ステージのリサイズにも対応しています。
fig11-02-03.jpg

fig11-02-04.jpg

ビットマップデータに水彩効果

|

ムービークリップのビットマップデータに水彩効果を付けます。

結果だけの画像です。
fig11-01-04.jpg


fig11-01-05a.jpg
→swfを見る

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

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

タグ

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

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