Cubix

MCでボタンの作成

2005.03.06

以前CubixのナビゲーションをFlashでやっていた頃のスクリプトです↓

よくみると分かりますが、実はこれは失敗作です。

なぜかというと、デザインがどうのこうの言うわけではなく、、メニューにマウスを乗せて素早くFlashの外にマウスを持っていくと、Out用のラベルに飛ばず途中で終ってしまいます。(;'Д')!!

これは、Overムービーの途中でマウスが外れたときに、きちんと判定ができて居ない為ですね。

以前は一生懸命考えたんですけど、結局解決できずにこれで妥協してしまいましたが、気になっていたのでこれを何とかする事にしました。こういうボタン作成は今後不可欠になってくるだろうし。

ちなみに、このFlashは以下のような判定でOutラベルに飛ばしています。

onClipEvent (enterFrame) {
	if (!_parent.hitTest(_root._xmouse,_root._ymouse,false)) {
		_parent.gotoAndPlay('out');
	}
	else {
		_parent.stop();
	}
}

hitTestで判定していたんですねぇ…。 マウスがFlashの外に出た時、マウス座標がnullとかになるならまだこれでも出来たかもしれませんが…。 今となってはどうでもいいことです。

灰色⇒青色 = Over用ムービー
緑色⇒灰色 = Out用ムービー

その1

見やすく、Over用ムービーとOut用ムービーの色を変えてあります。
まずは、ムービークリップに直接スクリプトを書くのをやめました。

this.onRollOver = function() {
	gotoAndPlay('out');
};
this.onRollOut = function() {
	if (this.moving) {
		gotoAndPlay('over');
	}
};

これでも、ぱっとみそれっぽいのですが、Overムービーが再生し終わる前でもマウスを外すとOutに飛んでしまいます。

次いこう。

その2

ついに完成形?!

ムービークリップのタイムラインActionScript。

//frame1
this.stop();
this.moveing = false;
this.onRollOver = function() {
	if (!this.moveing) {
		gotoAndPlay(2);
	}
};
this.onRollOut = function() {
	this.moveing = false;
};
this.onEnterFrame = function() {
};

//frame2
this.moveing = true;
this.onRollOver = function() {};

//frame10
stop();
this.onEnterFrame = function() {
	if(!this.moveing){
		this.gotoAndPlay(11);
		this.onEnterFrame = function () {}
	}
}

//frame11
this.moveing = true;

//frame21
gotoAndPlay(1);
this.moveing = false;

フラグを立ててどこを再生中か判定しつつ、各ムービーラベルの最初にイベント関数を初期化するように変更しました。 当初の予定は、ムービー中にはマウスが乗っても外れてもOver用ムービーを最後(完璧に青になった時点)までを流してから、 マウスが外れたらOut用ムービーに飛ばすと言う感じに考えていたんですが、連続でマウスを乗せるとアレレな状態に…。

その3

その2の色を変えてそれっぽくしてみました。 一番上のCubixのメニューはこのタイプですね。

その4

ムービー中に再度mouseOverしても最初のフレームに戻って流すようにしてみました。

//frame1
this.stop();
this.moveing = false;
this.onRollOver = function() {
	gotoAndPlay(2);
};
// 初期化する
this.onRollOut = function() {
	this.moveing = false;
};
this.onEnterFrame = function() {
};

//frame2
this.moveing = true;
this.onRollOver = function() {};

//frame10
stop();
this.onEnterFrame = function() {
	if(!this.moveing){
		this.gotoAndPlay(11);
		this.onEnterFrame = function () {}
	}
}

//frame11
this.moveing = true;

//frame21
gotoAndPlay(1);
this.moveing = false;

むしろこっちの方がなめらか？ 最初の予定は無かった事にして、これが完成形って事で。 場合によってその3と使い分ければ良いかな。 実際は、クリックしたの時のムービー等もあったほうがイケてるっぽいですが、それはそのうち。

やっと完成～ﾊｧﾊｧ(;'Д')