コンピュータ基礎II 通信授業課題2C 参考ページ



2. 基本的な線や図形の描画

新規に作成したムービーの「フレーム1」に「フレームアクション」としてサンプルを記述します。ムービーをプレビューさせると描画されたグラフィックを確認することができます。このサンプルでは新規に作成したムービーのメソッドを使用してグラフィックを描画しますので、インスタンス名に「this」を指定していますが、他のインスタンスを作成しそのインスタンス名を指定すれば、任意のムービークリップにグラフィックを描画することができます。

○サンプル1 線を描く

this.lineStyle( 1, 0x000000, 100 );
this.moveTo( 100, 200 );
this.lineTo( 200, 200);
ActionScriptサンプル1

ActionScriptで線を描く手順は、
1.線のスタイル(太さ、色、透明度)を決める。
2.線の描画開始位置に移動する。
3.線を描く
という3ステップになります。

this.lineStyle( a, b, c );
太さa(ピクセル数で指定)、色b(0xをつけてRGBの順に16進数で指定)、透明度c(0〜100までの%で指定)に線のスタイルを設定します。

this.moveTo( a, b );
点 ( a, b ) の地点に描画開始位置を移動させます。
Flashの座標はウィンドウの左上を原点として右方向にxの値が増加し、下方向にyの値が増加するような座標系です。
従って、this.moveTo( 100, 200 );とは、ウィンドウの左上から右に100pixel、下に200pixelの地点に描画開始位置を移動させます。

this.lineTo( a, b );
現在の位置から点 ( a, b ) の位置へ線を引きます。

○サンプル2 線をつなげて描く

this.lineStyle( 1, 0x000000, 100 );
this.moveTo( 100, 200 );
this.lineTo( 200, 200);
this.lineTo( 100, 100 );
this.lineTo( 200, 100 );
ActionScriptサンプル2

使用しているメソッドはサンプル1と同じですが、点(100,200)→(200, 200)→(100, 100)→(200, 100)と繋げて線を描いています。

○サンプル3 四角形を描く

this.lineStyle( 1, 0x000000, 100 );
this.moveTo( 100, 200 );
this.lineTo( 200, 200);
this.lineTo( 200, 100 );
this.lineTo( 100, 100 );
this.lineTo( 100, 200 );
ActionScriptサンプル3

lineToメソッドを使用し、線をつなげていくことで四角形を描くことができます。

○サンプル4 線の太さと色を指定する1

this.lineStyle( 10, 0x999999, 100 );
this.moveTo( 100, 200 );
this.lineTo( 200, 200);
this.lineTo( 200, 100 );
this.lineTo( 100, 100 );
this.lineTo( 100, 200 );
ActionScriptサンプル4

lineStyleの () 内の1番目の数値で線の太さ、2番目の数値で線の色を指定できます。線の色は数値の前に0xをつけて16進数で指定します。先頭から2桁ずつRGB各色の値になるので、HTMLと同じ方法で色を指定できます。

○サンプル5 線の太さと色を指定する2

this.lineStyle( 10, 0x000000, 50 );
this.moveTo( 100, 200 );
this.lineTo( 200, 200);
this.lineTo( 200, 100 );
this.lineTo( 100, 100 );
this.lineTo( 100, 200 );
ActionScriptサンプル5

lineStyleの () 内の3番目の数値で線の透明度を指定できます。サンプルでは透明度を50%に設定しています。

○サンプル6 図形の塗りを指定する

this.lineStyle( 10, 0x999999, 100 );
this.moveTo( 100, 200 );
this.beginFill( 0x666666, 100 );
this.lineTo( 200, 200);
this.lineTo( 200, 100 );
this.lineTo( 100, 100 );
this.lineTo( 100, 200 );
this.endFill();
ActionScriptサンプル6

線の描画と併せて囲まれた図形の塗りを指定することができます。

this.beginFill( a, b );
塗りつぶしたい図形の線の描画の前に記述します。図形の塗りの色をa(0xをつけてRGBの順に16進数で指定)、塗りの透明度をb(0〜100までの%で指定)に設定します。

this.endFill();
塗りつぶしの終わりに記述します。

○サンプル7 色を使用する

this.lineStyle( 10, 0x9999ff, 100 );
this.moveTo( 100, 200 );
this.beginFill( 0xff99ff, 100 );
this.lineTo( 200, 200);
this.lineTo( 200, 100 );
this.lineTo( 100, 100 );
this.lineTo( 100, 200 );
this.endFill();
ActionScriptサンプル7

色をRGBカラーで指定することができます。

○サンプル8 曲線を描く

this.lineStyle( 2, 0xff3333, 100 );
this.moveTo( 30, 150 );
this.curveTo( 150, 100, 270, 150 );
ActionScriptサンプル8

曲線は座標を3点指定することで描くことができます。

this.curveTo( a, b, c, d );
現在の描画位置から点 ( a, b ) に向かいつつ、最終的に点 ( c, d ) に到着する曲線が描かれます。
サンプルでは、点 ( 30, 150 ) から点 ( 150, 100 ) に向かいつつ線が描かれ、最後に点 ( 270, 150 ) に行き着く曲線が描かれます。

○サンプル9 曲線を描く2

this.lineStyle( 2, 0xff3333, 100 );
this.moveTo( 30, 270 );
this.curveTo( 150, 220, 270, 270 );
this.curveTo( 220, 150, 270, 30 );
this.curveTo( 150, 80, 30, 30 );
this.curveTo( 80, 150, 30, 270 );
ActionScriptサンプル9

曲線はつなげて描くことができます。

○サンプル10 曲線を描く3

this.lineStyle( 5, 0xff3333, 100 );
this.moveTo( 30, 270 );
this.beginFill( 0x6666cc, 100 );
this.curveTo( 150, 220, 270, 270 );
this.curveTo( 220, 150, 270, 30 );
this.curveTo( 150, 80, 30, 30 );
this.curveTo( 80, 150, 30, 270 );
this.endFill();
ActionScriptサンプル10

曲線もつなげて描いた閉じた図形にも塗りを指定することができます。