color pencils

今回はマウスカーソルを変更してみる。ちょっと悩んだ(汗

Flash上でマウスカーソル変更

こんなの作ります。
ボタン押すと、マウスカーソルが変わって、お絵かきができますｗがしがし描いて楽しい♪

グラフィックの準備

「マウスカーソル用のペンのアイコン」・「ボタン用の画像」を準備。全てムービークリップとしてシンボル登録します。

今回は、ペンのアイコンは初めはステージ上に置かず、「リンケージ」でActionScriptに登録しておく。という形になります。ボタンは今までどおりステージ上に配置。

リンケージのしかた。

「ライブラリ」パレットでシンボルを選択。右クリック「リンケージ」を選択し、「ActionScriptに書き出し」「最初のフレームに書き出し」をチェック。識別子を「pen_cursor_Sym」とします（識別子は任意の文字列）。
これで、ActionScriptでペンのカーソルのシンボルが使える。

スクリプト書き書き

/*==============================
//各宣言
==============================*/
var pen_btn:MovieClip;	//ボタン
var cursor:MovieClip;	//カーソルへの参照

//イベント登録 ==========
//ボタンイベント
pen_btn.onPress = PressButton;//ボタン押
pen_btn.onRelease = ReleaseButton;		//ボタン離
pen_btn.onReleaseOutside = ReleaseOutsideButton;
//ボタン外でマウス離

/*==============================
	メソッド
==============================*/
//====================
//ボタン
//ボタン押
function PressButton()
{
	//(1)ボタン押されたムービー（インスタンスpen_btnで定義済み）
	pen_btn.btnDown();
}
//ボタン離
function ReleaseButton()
{
	//(1)ボタン離したムービー（インスタンスpen_btnで定義済み）
	pen_btn.btnUp();

	//マウスカーソル変更
	Mouse.hide();//(2)まずはマウスカーソル消去
								   
	//(3)リンケージしたペンカーソルをインスタンス化
	cursor = _root.attachMovie("pen_cursor_Sym","penCursor",1);
	
	//(4)インスタンス化されたカーソルをマウス位置へ
	cursor._x = _root._xmouse;
	cursor._y = _root._ymouse;
	//(5)以後、マウス動作イベントを割り振り
	cursor.onMouseMove = cursorMove;
}
//ボタン外でマウス離
function ReleaseOutsideButton()
{
	//(1)ボタン離したムービー（インスタンスpen_btnで定義済み）
	pen_btn.btnUp();
}

//====================
//マウス
function cursorMove()
{
	//(6)カーソル変更後、動くたびカーソル画像追従
	// → 擬似的にカーソルを動かしているようにする
	this._x = _root._xmouse;
	this._y = _root._ymouse;

	//(7)滑らかな動作のために、フレームレートに関係なく再描画
	updateAfterEvent();
}

ボタン押すとマウスカーソル変更

(1)ボタンムービー

ボタン押したときへこむ。離したとき戻る。これらのムービーはボタンのシンボルにスクリプト定義済み。これらボタンについての動作は以前のエントリ参考

(2)マウスカーソル消去

カーソル変更のボタンを押したら、カーソル置き換えを擬似的に行うため、まずはマウスカーソルを消す

(3)cursor = _root.attachMovie("pen_cursor_Sym","penCursor",1);

リンケージしたペンカーソルのシンボルpen_cursor_Symをインスタンス化して（インスタンス名penCursorとして）、cursorに割り当てる。3つ目の引数はステージ上での深度。

(4)インスタンス化されたカーソルをマウス位置へ

カーソルをマウスの位置へ移動。消したカーソルの代わりに、マウスに追従して動かしカーソルのように見せる。

(5)、(6)カーソル変更後、マウス動くたびにカーソル追従

カーソル置き換え後、マウスが動くたびにカーソルを追従させるため、onMouseMoveイベントに関数割り振り。イベントのたびに、カーソルの座標をマウスの座標とする。

(7)updateAfterEvent();

updateAfterEventでフレームレートに関係なく画面を更新。滑らかな動作が可能に。

ペンを動かしてみ？

というわけで、完成ー

今回のエントリは、ボタンを押すとカーソルが変わる部分だけです。線を描くところは次回以降に。

お絵かきツール？

色変えれるとか、消しゴムとか、使えるようになると楽しいかな？ｗ
あとは、全消去ボタンとか、マウスカーソル元に戻すとかも必要かな？
いろいろ試してみようと思う。

次回以降

• 今回作った、線の描き方をまとめ。
• キーボードの入力受け取り。
• 音を鳴らしてみる。
• 外部ファイル管理をしよう。
• プログレスバーを作ろう。

などなど。

よく使うものは、ActionScriptのライブラリとかにしようかな。

参考

• Design Bible FLASH制作工房 - 石原修一・岡村健一（著）