マウススクロールメニュー

| コメント(0) | トラックバック(0)

マウスの位置でスクロールするメニュー。

FLASH PLAYER

Get Adobe Flash player

【製作過程】

画面サイズは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座標がマイナスの限界に、左端に来たときには同様に、プラスの限界になるようシミュレートすればよい。

【応用例】

上のサンプルに、以前紹介した「ブラーフィルター」を適用してスピードによるブレを演出してみる。

FLASH PLAYER

Get Adobe Flash player

おもしろい。
以下コード。

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の数」に変更するだけ。

FLASH PLAYER

Get Adobe Flash player

トラックバック(0)

トラックバックURL: http://www.ayabin.jp/mt5/mt-tb.cgi/171

コメントする

このブログ記事について

このページは、webmasterが2009年5月16日 21:14に書いたブログ記事です。

ひとつ前のブログ記事は「フルフラッシュサイト(4)」です。

次のブログ記事は「サインコサイン(1)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。