回転するメニュー 改良版
前回作った「回転するメニュー」の動きに納得がいかないので、改良版です。
改良版
前回と比べて、
- 何回まわしてもズレなくなった
- 以前作ったFadeClipを使ってみた
- 逆まわり可能ｗ
onEnterFrame = 体内時計
前回作った回転メニューは、５つのインスタンスの足並みがそろってなくて、ちょっとかっこ悪いものになってしまいました。
原因は、個々のインスタンスがそれぞれ独自のonEnterFrame（タイムライン・体内時計）を持っているからです。オブザーバは「動け、止まれ」の合図を出していただけなので、各インスタンスは合図に合わせてはいるものの、勝手に各々動いていたのでした。
笛に合わせたターンダッシュや、
だるまさんがころんだ、
と同じようなものです。
これはこれで、応用すると面白い効果がでるのですが、整然とならぶべき「ナビゲーションメニュー」では、さすがにカッコ悪い。
そこで今回は、回転を制御するonEnterFrameはたった１つになるように改良します。
改良の手順
たった１つのonEnterFrameは、オブザーバ（_root）に実装します。イメージとしては、オブザーバが、必死に手早くインスタンスを並べ替える感じ。インスタンスは、自分では動きません。
こんな感じ（プログラムいじる前にイメージを固めるのは、結構大切です）。
前回のMoveOnCircleからの変更点。
- まず、onEnterFrameをmoveItにリネームします。これで勝手には動かなくなりました。
- 動作開始・停止を制御するコードは削除します。
- 選択されたかどうか、一番下にたどり着いたかどうかは、MoveOnCircleにしか分からない情報なので、このあたりのロジックは残しておきます。
class MoveOnCircle extends MovieClip{
var ANGULAR_VELOCITY = 6;
var CENTER_X = 100;
var CENTER_Y = 100;
var RADIUS = 50;
var angle = 0;
var _selected = false;
function onRelease(){
_selected = true;
_root.notifySelected(this);
}
function onLoad(){
this.moveIt();
}
//onEnterFrameは削除
function moveIt(){
if( _selected && angle > 84 && angle <= 96 ){
_selected = false;
_root.nofityStopAll();
}
_x = RADIUS * Math.cos( angle * Math.PI/180 ) + CENTER_X;
_y = RADIUS * Math.sin( angle * Math.PI/180 ) + CENTER_Y;
angle += ANGULAR_VELOCITY;
if(angle>=360) angle-=360;
}
}
つぎに、オブザーバ側の変更です。
- オブザーバにonEnterFrameを追加します。ここでは、MoveOnCircle.moveItをひたすら呼びまくります。
- 回転開始・停止の合図は、インスタンスから飛んでくるので、それを元にして、onEnterFrameを制御します。
//インスタンス生成しながら、配列に束ねる。
var HOW_MANY = 6;
var items:Array = new Array();
for( var i = 0; i < HOW_MANY; i++ ){
items.push(
attachMovie('item','item'+i,i,{angle:(360/HOW_MANY)*i})
);
}
//回転の開始・停止の制御
var _stopAll = true;
function notifySelected( item ){
_stopAll = false;
}
function nofityStopAll(){
_stopAll = true;
}
//１つのタイムラインで、全部動かす。
onEnterFrame=function(){
if( _stopAll ) return;
for( var i = 0 ; i < items.length; i++ ){
items[i].moveIt();
}
}
これで、うまく足並みそろって回転するようになりました。
その後の手順は、前回と同じです。
サンプルダウンロード
