NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

アニメーション

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

概要

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

サンプル解説

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

作成法

(1) シンボルの作成
  ・(左)配意するメニューボタンを作成。(ここでは3つ)
  ・(右)上下にスクロールさせるボタンをそれぞれ作成。
メニューボタン作成スクロールボタン作成
  ・メニューの必要な箇所だけ表示させるためにマスクを用意。
マスクシンボルの用意
  ・「menu00」というシンボルを作り、メニューボタン3つを配置。
メニューボタンの配置
  ・「menu」というシンボルを作り、「menu00」を配置。
  ・「menu00」にインスタンス名「MENU00」を設定。
メニューの配置
(2) シンボルをステージに配置
  ・ActionScriptを設定する「Action」レイヤーを作成。
  ・ボタンを配置する「ボタン」レイヤーを作成。
  ・マスクを配置する「マスク」レイヤーを作成。
  ・メニューを配置する「メニュー」レイヤーを作成。
  ・「ボタン」レイヤーにスクロールボタン2つを配置。
  ・「メニュー」レイヤーにシンボル「menu」を配置し、インスタンス名「MENU」を設定。
  ※以下、無くても可
  ・「Action」レイヤーにダイナミックテキストを3つ配置
  ・メニューの高さを表示する「menuHeightMax」、移動フラグを表示する「rollCount」、メニューのY座標を表示する「pos_y」をそれぞれ変数に設定。
  ・「枠線」レイヤーを作成し、枠線をつける。
(3) シンボルに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を設定。
 
01
02
03
04
05
06
07
on (rollOver) {
 _root.rollCount = 1;
}
 
on (rollOut) {
 _root.rollCount = 0;
}
  ・下方向にスクロールさせるシンボルを選択して以下のActionScriptを設定。
 
01
02
03
04
05
06
07
on (rollOver) {
 _root.rollCount = 2;
}
 
on (rollOut) {
 _root.rollCount = 0;
}
(4)ステージに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();
 }
}
(5)マスクの設定
  ・「マスク」レイヤーにシンボル「マスク」を「メニュー」レイヤーのシンボル「menu」と左上を基準に重ねあわせる。
  ・「マスク」レイヤーで「メニュー」レイヤーをマスクする。
マスクの設定

解説

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

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

ページ上部へ