Flash/ActionScript

フリーハンドで線を描画する

5色のパレットから好きな色を選び、フリーハンドでFlash上に線を描画します。以前登場した直線線の描画をフレームが進むたびに繰り返すことで実現しています。

執筆者:渡辺 大介

フリーハンドで線を描画します。5色のパレットから好きな色の線を選び描いてみましょう。
フリーハンドで線を描画するにはフレーム毎に直線を描画する処理を繰り返す。
Adobe Flash CS3 Professionalを使用してサンプルを作成しています。

フリーハンドで描画するには連続して直線を描画する

パレットに5色の色が並ぶ
1. ここからサンプルのFlashをここからダウンロードしてください。白い背景の上に、空のインスタンス「canvas」、その上のレイヤーに5色のパレットが配置されています。

2. 今回の制作フローは以下の通りになります。

・ 線の色をパレットから選択する
・ マウスがプレスされているとき、マウスが動く度に動いた分の直線を描画する


3. レイヤー「action」の1フレーム目に以下のActionscriptを確認してください。
lineColor = 0xFF0000;

colorRed.onRelease = function(){
	lineColor = 0xFF0000;
	colorRed._alpha = 100;
	colorGreen._alpha = 30;
	colorBlue._alpha = 30;
	colorYellow._alpha = 30;
	colorBlack._alpha = 30;
	
}

colorGreen.onRelease = function(){
	lineColor = 0x00FF00;
	colorRed._alpha = 30;
	colorGreen._alpha = 100;
	colorBlue._alpha = 30;
	colorYellow._alpha = 30;
	colorBlack._alpha = 30;
}


----以下略----
この部分はパレットの制御です。1行目でデフォルトの色「0xff0000(赤)」を変数「lineColor」に代入し指定しています。
2行目以降は各パレットのボタンがクリックされた場合、対応する色を変数「lineColor」に代入し、自身の不透明度を「100%」とし、他の色の不透明度を「30%」としています。
以降は5色分この繰り返しを記述しています。

4. レイヤー「action」の1フレーム目に続けて以下のActionscriptを記述してください。
startx = _root._xmouse;
starty = _root._ymouse;

_root.onMouseMove = function(){
	if(pressTest == 1){
		canvas.lineStyle(1,lineColor);
		canvas.moveTo(_root._xmouse,_root._ymouse);
		canvas.lineTo(startx,starty);
		startx = _root._xmouse;
		starty = _root._ymouse;
	}
	startx = _root._xmouse;
	starty = _root._ymouse;
}

_root.onMouseDown = function(){
	pressTest = 1;
}

_root.onMouseUp = function(){
	pressTest = 0;
}

1・2行目でマウスの初期位置を記録しています。
3行目からはマウスが動作している場合に実行される関数です。下部で、マウスが押されている場合「onMouseDown」と押していない場合「onMouseUp」を判定し、変数「pressTest」が「1」の場合押している、「2」の場合押していない状態としています。これを条件に押されている場合をif文で判定して以降を実行しています。

if文内の処理は1行目で先程パレットで指定した色を含む線のスタイルを指定しています。
2行目で移動後のマウスの座標を起点として線の描画を開始しています。
3行目で移動前のマウスの座標を終点として線の描画を終了しています。
最後に新しいマウスの座標を記録している座標と入れ替えています。



これで完成です!
完成したファイルをダウンロード


描画関連はこれで一通り登場しました。結局は単純な図形意外Flash上で絵を描いた方が早い場合がほとんどですが、個数が決まっていないデータを表示する場合などに罫線や表をデザインに使えたらより見やすく良いレイアウトになるのではないでしょうか?
【編集部おすすめの購入サイト】
Amazon で Flash 関連の書籍をチェック!楽天市場で Flash 関連の書籍をチェック!
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます