マウスの位置でスクロールするメニュー。
【製作過程】
画面サイズは500x60。背景は黒。
矩形のシェイプ(100x60)、とフォントサイズ「40」のダイナミックテキスト(インスタンス名:num)を配置して、シンボル化(シンボル名:thumb)。
ライブラリパネルでリンケージ設定。識別子は「thumb」。
メインタイムラインの1フレーム目に以下のコードを記述。
//空のMC「menu」を生成
var menu:MovieClip=_root.createEmptyMovieClip("menu",-1);
var cnt:Number=10;//MCの数
//MC「menu」の中にMC「thumb」を配置
for(var i:Number=0;i<cnt;i++){
var syoki:Object={_x:i*_root.thumb._width,_y:0};
var thumb:MovieClip=_root.menu.attachMovie("thumb","thumb"+i,i,syoki);
thumb.num.text=i;
}
var centerNum:Number=Math.floor(cnt/2)+cnt%2;//中央に配置する数字
//MC「menu」をステージ中央に配置
_root.menu._x=100*(2-centerNum);//MC「menu」のx座標
//MC「menu」をロールオーバー時の処理定義
_root.menu.onRollOver=function():Void{
//MC「menu」の限界値決定
var targetPosition:Number=-(cnt-Stage.width/100)*100;
this.onEnterFrame=function():Void{
var targetX:Number=_root._xmouse*targetPosition/Stage.width;
this._x+=((targetX-targetX%100)-this._x)/2; }
}
【まとめ】
要は、マウスが最も右端に来たときに、メニューのx座標がマイナスの限界に、左端に来たときには同様に、プラスの限界になるようシミュレートすればよい。
【応用例】
上のサンプルに、以前紹介した「ブラーフィルター」を適用してスピードによるブレを演出してみる。
おもしろい。
以下コード。
import flash.filters.BlurFilter;
//空のMC「menu」を生成
var menu:MovieClip=_root.createEmptyMovieClip("menu",-1);
var cnt:Number=10;//MCの数
//MC「menu」の中にMC「thumb」を配置
for(var i:Number=0;i<cnt;i++){
var syoki:Object={_x:i*_root.thumb._width,_y:0};
var thumb:MovieClip=_root.menu.attachMovie("thumb","thumb"+i,i,syoki);
thumb.num.text=i;
}
var centerNum:Number=Math.floor(cnt/2)+cnt%2;//中央に配置する数字
//MC「menu」をステージ中央に配置
_root.menu._x=100*(2-centerNum);
//MC「menu」をロールオーバー時の処理定義
_root.menu.onRollOver=function():Void{
//ブラーフィルターのパラメーター定義
var a:Number=8;//X軸のぼかし量(0-255)
var b:Number=0;//Y軸のぼかし量(0-255)
var c:Number=3;//ぼかしの実行回数(0-30)
//MC「menu」の限界値決定
var targetPosition:Number=-(cnt-Stage.width/100)*100;
//ブラーフィルターのパラメーター適用
this.onEnterFrame=function():Void{
var blur:BlurFilter=new BlurFilter(a,b,c);
for(var i:Number=0;i<cnt;i++){
_root.menu["thumb"+i].filters=new Array(blur);
}
var targetX:Number=_root._xmouse*targetPosition/Stage.width;
this._x+=((targetX-targetX%100)-this._x)/2;
a--;
}
}
さらに、MC「thumb」を100個にしてみる。
コードは、3行目を 「var cnt:Number=100;//MCの数」に変更するだけ。

コメントする