<復習>第3講をもう一度見ておく
<自主休講>教室トップに戻る

第4講:中に色を塗る


4−1.講義目的
ActionScriptの線で囲った部分に色を塗ります。その際、脳味噌に直接彫刻してもいいくらいの重要なポイントをひとつだけ申し上げますので、注意してて下さい。

4−2.色つき長方形を描く
線を描くのに”lineStyle(太さ,色,透明度)”という命令を使ったように、面を塗るのにも独自の命令があります。それが、

beginFill(,);(重要度☆☆☆)

です。第1講を受けた方は多分気づかれたかと思いますが、1は色(16進コード)、2は透明度です。つまり、「ベタベタの赤を、透過なしで塗りたい」という場合は、”beginFill(0xFF0000(赤を表す16進コード),100);”とすればいいわけです。
そしてその後は、線を描くときと同じで、”moveTo(X,Y);”で始点を決定、”lineTo(X,Y);”で次の点へ…というのを繰り返し、”endFill();”で面を閉じます。線のときとの唯一の違いは、「勝手に面を閉じてくれる(最後のlineToとmoveToを勝手に結んで面を完成させてくれる)」ことくらいでしょうか。勿論、線で多角形を描くときと同様に、自分で閉じちゃっても何ら問題はありません。
かなりアッサリと説明してしまったので、ここからは実践といきましょう。下のソースは第2講でも使った「長方形の描画」です。これの中に色を塗ってみることにします。

x1=90;

x2=230;

y1=50;

y2=270;

lineStyle(5,0x000000,100);//残した理由は後述

beginFill(0x00FF00,100);//緑で塗りつぶします

moveTo(x1,y1);

lineTo(x2,y1);

lineTo(x2,y2);

lineTo(x1,y2);

lineTo(x1,y1);

endFill();

このソースを打ち込んでプレビューすると、下のような画面になるはずです。

<枠のオマケつきです>

これまで敢えて言及しませんでしたが、線と面は同時に記述が可能です。だから上のようなことが出来るんですね。

4−3.塗りを優先すべし
ですがここで注意。線を描いた後で、全く別のところに面を描こうとすると、その枠線のスタイルは前に描いた線と同じになる上に、何とbeginFillの前までさかのぼって勝手に色(黒)を塗りやがってくれます。例えば、「青い直線と緑の枠なし長方形を描く」つもりで以下のスクリプトを打ち込めば、ちゃんと思い通りの描画が出来ると思いますよね?

/* 直線描画 */

lineStyle(5,0x0000FF,100);

moveTo(20,250); lineTo(250,20);

endFill();

 

/* 長方形描画 */

x1=160; x2=280;

y1=160; y2=280;

beginFill(0x00FF00,100);

moveTo(x1,y1);

lineTo(x2,y1); lineTo(x2,y2);

lineTo(x1,y2); lineTo(x1,y1);

endFill();

(完成予想図)

別にセミコロンごとに改行する必要はありません(勿論するのを推奨)。

大輔も最近気づいた(←アホ)新事実です>

しかしコンピュータ言語というのはそんなに気の利く奴ではありません。自分勝手な俺様ルールに従い、こんな結果を吐き出してくれやがります。

もう何ていうか、なつ●ちゃんにバールで100回吹っ飛ばしてもらいたい勢いですねこれは。仕方ないので、ここは人間様が譲歩して極力気を遣ってやりましょう。すなわち、

塗り(beginFillの方)を先にやってしまう

のです。これなら予想通りの描画ができますので、実際に試してみてください。別スプライトに記述するというのは最後の手段なので却下とさせていただきます。

と、今回の講義はここまでです。本当はグラデーションの塗り方の解説もここでするはずだったんですが、よく考えると講義1個分以上の分量があることに気づき、後回しということにしました。
そして次回は第3講で予告していた、リングの描き方の説明に入ります。今回やった「塗り」を活用した方法ですので、復習は忘れずにお願いします。


第5講に進む
 
教室トップに戻る