« 「クラブきっず」と吉良吉影問題 « » 吉良吉影問題(フォビア問題)と常識の視点について。 »

2006年12月05日

 Flashで、ぼんや~りとなるボタンを作成する小技このエントリーを含むはてなブックマーク




こんな感じの。
環境によっては一度クリックしないといけません。

ぼやーっと残像を残すようなボタンは、黒背景でボタンが並んでるときにとても見栄えがいいんですが、
AS使わなければいけないのと、アクティブ状態と非アクティブ状態の切り替えとかがある場合、
それなりにややこしくなるので、多用するとき頭が痛くなるのですが
この小技を使うと、フレームで指定したアニメーションを、それぞれの状態へ割り当てることができ、ボタンのアクティブとか、選択不可状態など、見た目の切り替えにも対応します。

MCボタンが_up、_over、_downラベルに自動的にgotoAndStopされるので、そこからさらにgotoAndPlayしなおす、というシンプルな方法ですが有効性は高いです。

この方法のいいところは、ラベルとASのレイヤーのフレームをコピーすればそのまま使えること。
normalやactiveのところの、this.e = 1;ってのを3、4と増やせばもっといろんな切り替わりがあるボタンにも対応できること。
そのまま切り替わり命令を書かずに、普通のボタンとして使えること。
アニメーションMCの入れ子が必要ないこと。
Flashのボタン機能をそのまま使うので、ヒット判定が比較的軽いこと。
ボタンの切り替わりをフレームアニメーションで表現できること
他人に渡して、ボタンのアニメーションを調節してもらいやすいこと。
とかがあります。

sample.fla(上サンプルのソース、Flash8専用)
sample2.fla(上サンプルからFlash8専用の表現を抜いて、2004形式対応にしたもの。)
sample3.fla(ボタンの余計な表現を全部消したもの。)

MCボタンなので、何らかの命令を書いていないと切り替え表示が機能しないので注意してください。
ちなみにこのボタンのASは

onClipEvent (load) {
	select = false;
}
on (release) {
	if (!select) {
		this.gotoAndPlay("active");
		select = true;
	} else {
		this.gotoAndPlay("normal");
		select = false;
	}
}

こんな感じになっているだけです。

ボタンの中身のフレームはこうなっています。(クリック拡大)

normalやactiveというラベルはボタンの機能に応じて変えてもいいですし、そのままでもいいです。
上のボタンへの命令と対応しています。

u、o、d、はそれぞれ、アップ、オーバー、ダウン。
ouとuoは、オーバー→アップのアニメーション、アップ→オーバーのアニメーションになります。
1とか2とかついているのが、それぞれnormalとactiveとに対応していて
一度そのフレームへgotoされると次からその番号のフレームを移動する仕組みになっています。

最初のフレームのAS
this.tag = "u";
this.e = 1;
gotoAndPlay(this.tag + this.e);
normalラベルフレームのAS
this.e = 1;
gotoAndPlay(this.tag + this.e);
activeラベルのフレームのAS
this.e = 2;
gotoAndPlay(this.tag + this.e);
_upラベルのフレームのAS
this.tag = "u";
gotoAndPlay("ou" + this.e);
_overラベルのフレームのAS
if (tag == "d") {
	this.tag = "o";
	gotoAndPlay("o" + this.e);
} else {
	this.tag = "o";
	gotoAndPlay("uo" + this.e);
}
_downラベルのフレームのAS
this.tag = "d";
gotoAndPlay(this.tag + this.e);

他のフレームのASは全部this.stop();です。
アニメーションは、このthis.stop();の位置を動かして終了位置を指定します。
(Flashの仕様上、ラベルとthis.stop();が同じ位置に来ないようにして、1フレームはアニメーションさせるようにしてください。)

ヒット領域を指定する場合は透明な図形を下に敷くといいです。