無限にスクロールするメニュー　FLASHRAVE

|　トップ　>　アニメーション　>　無限にスクロールするメニュー　|

限られたスペースで多くのメニューボタンを配置したい場合、メニューをスクロールするようにすればボタンの数を気にすることはありません。
一通りのメニューが表示された後は初期表示の位置に戻るため、永遠にメニューがループしているような表現が可能です。

▲ボタンにマウスを合わすとメニューを上に、▼でメニューを下へスクロールします。

（１）　シンボルの作成

・（左）配意するメニューボタンを作成。（ここでは3つ）

・（右）上下にスクロールさせるボタンをそれぞれ作成。

・メニューの必要な箇所だけ表示させるためにマスクを用意。

・「menu00」というシンボルを作り、メニューボタン3つを配置。

・「menu」というシンボルを作り、「menu00」を配置。

・「menu00」にインスタンス名「MENU00」を設定。

（２）　シンボルをステージに配置

・ActionScriptを設定する「Action」レイヤーを作成。

・ボタンを配置する「ボタン」レイヤーを作成。

・マスクを配置する「マスク」レイヤーを作成。

・メニューを配置する「メニュー」レイヤーを作成。

・「ボタン」レイヤーにスクロールボタン2つを配置。

・「メニュー」レイヤーにシンボル「menu」を配置し、インスタンス名「MENU」を設定。

※以下、無くても可

・「Action」レイヤーにダイナミックテキストを3つ配置

・メニューの高さを表示する「menuHeightMax」、移動フラグを表示する「rollCount」、メニューのY座標を表示する「pos_y」をそれぞれ変数に設定。

・「枠線」レイヤーを作成し、枠線をつける。

（３）　シンボルにActionScriptの設定

・インスタンス名「MENU」を選択して以下のActionScriptを設定。

01
02
03
04
05
06
07
08
09
10
11

onClipEvent (load) {

　 function init() {

　　this.MENU00._y = 0;

　　this.MENU1._y = _root.menuHeightMax * -1;

　　this.MENU2._y = _root.menuHeightMax;

　}

　this.MENU00.duplicateMovieClip("MENU1", this.getNextHighestDepth());

　this.MENU00.duplicateMovieClip("MENU2", this.getNextHighestDepth());

　this.init();

}

・上方向にスクロールさせるシンボルを選択して以下のActionScriptを設定。

on (rollOver) {

　_root.rollCount = 1;

}

on (rollOut) {

　_root.rollCount = 0;

}

・下方向にスクロールさせるシンボルを選択して以下のActionScriptを設定。

on (rollOver) {

　_root.rollCount = 2;

}

on (rollOut) {

　_root.rollCount = 0;

}

（４）ステージにActionScriptの設定

・「Action」レイヤーに以下のActionScriptを設定。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22

_root.rollCount = 0;

_root.menuHeightMax = _root.MENU.MENU00._height;

_root.menuHeightMin = _root.MENU.MENU00._height * -1;

onEnterFrame = function() {

　if(_root.rollCount == 1){

　　_root.MENU.MENU00._y -= 5;

　　_root.MENU.MENU1._y -= 5;

　　_root.MENU.MENU2._y -= 5;

　}else if(_root.rollCount == 2) {

　　_root.MENU.MENU00._y += 5;

　　_root.MENU.MENU1._y += 5;

　　_root.MENU.MENU2._y += 5;

　}

　_root.pos_y = _root.MENU.MENU00._y;

　if (_root.pos_y > _root.menuHeightMax) {

　　_root.MENU.init();

　}

　if (_root.pos_y <= _root.menuHeightMin) {

　　_root.MENU.init();

　}

（５）マスクの設定

・「マスク」レイヤーにシンボル「マスク」を「メニュー」レイヤーのシンボル「menu」と左上を基準に重ねあわせる。

・「マスク」レイヤーで「メニュー」レイヤーをマスクする。

動作の概要としては、初期表示時に「MENU00」を上下に一つずつ複製して配置しています。
スクロールボタンにマウスが重なることでこの複製物を合わせた3つのシンボルを移動させ、一定距離移動すると元の場所に戻すことで無限にスクロールしているように錯覚させています。

詳細として、初期表示時に「MENU」内のActionScriptが動作します。ここで「MENU00」の複製「MENU01」と「MENU02」が自動的に配置されます。
スクロールボタンにマウスが重なると「rollCount」の値を変更させます。
root上では常にこの「rollCount」の値を見ており、ActionScriptの5行目からようにメニューボタンを上か下へ移動させています。
14行目では移動するメニューのY座標を取得しており、それが「MENU00」の高さを超える数値の場合、元の場所に戻るようにしています。