NEWS

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

  • Web creators

ActionScript

スクロールボタン

概要

ボタンを押し続けることで指定したシンボルを移動させることができます。
ブラウザ等で見かけるスクロールボタンのようにも応用できます。

サンプル解説

矢印が右向きと左向きのボタンを押し続けるとターゲットが移動します。
右上の数値はターゲットの位置情報が表示されます。
この値が約60〜300の時にボタンが有効になります。
また、ボタンにはマウスが重なったときに色が変わるようにしています。

作成法

(1) シンボルの作成
  ・シンボル以下の通り作成する。
  ※「CT_SIDE」「CTRL_LEFT」「CTRL_RIGHT」は後述。
シンボルの作成01シンボルの作成02シンボルの作成03
シンボルの作成04シンボルの作成05
(2) ロールオーバーボタンの作成
  ・(1)内の「CT_SIDE」をステージに設置するボタンとします。
  ・作成したシンボル「CT_SIDE_囲い_BG」と「CT_SIDE三角」を利用して以下の通り作成する。
  ※詳細は『ボタンの作成2 (『on』)』を参照。
ロールオーバーボタンの作成
(3) 左方向ボタンコントロールの作成
  ・(1)内の「CTRL_LEFT」はターゲットを移動させるためステージに設置するシンボルとする。
  ・以下の通り、フレーム名を付けるレイヤーとActionScriptを設定するレイヤーだけで構成する。
ボタンコントロールの作成
  ・フレーム2に「src」とフレーム名を設定する。
  ・フレーム1にActionScriptを設定する。
 
01
stop();
  ・フレーム2にActionScriptを設定する。
 
01
02
03
if(60 < _root.TARGET_01._x){
 _root.TARGET_01._x -= 10;
}
  ・フレーム3にActionScriptを設定する。
 
01
gotoAndPlay("src");
(4) 右方向ボタンコントロールの作成
  ・(3)同様、「CTRL_RIGHT」を作成する。
  ・(3)と違う箇所はフレーム2のActionScriptのみで、それ以外は同様に作成する。
 
01
02
03
if(300 > _root.TARGET_01._x){
 _root.TARGET_01._x += 10;
}
(5) シンボルをステージに配置
  ・ActionScriptを設定するレイヤー作成する。(レイヤー名をActionとする)
  ・シンボルを以下の通り設置する。
  ・ステージに直接設置するダイナミックテキストの変数は「x_pos」と設定する。
  ・「CTRL_LEFT」にインスタンス名「CTRL_LEFT」と設定する。
  ・「CTRL_RIGHT」にインスタンス名「CTRL_RIGHT」と設定する。
  ・「TARGET」にインスタンス名「TARGET」と設定する。
ステージに配置
(6) ステージへActionScriptを設定
  ・以下のActionScriptをActionScriptレイヤーに設定する。
 
01
02
x_pos = _root.TARGET_01._x;
y_pos = _root.TARGET_01._y;
(6) 設置したボタン選択し、ActionScriptを設定
  ・以下のActionScriptを「CT_SIDE(右向き)」に設定する。
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
on (rollOver) {
 this.gotoAndPlay("START");
}
on (rollOut) {
 this.gotoAndPlay("END");
}
on (press) {
 tellTarget("_root.CTRL_RIGHT"){
  gotoAndPlay("src");
 }
}
on (release, releaseOutside) {
 tellTarget ("_root.CTRL_RIGHT") {
  gotoAndStop(1);
 }
 this.gotoAndPlay("END");
}
  ・以下のActionScriptを「CT_SIDE(左向き)」に設定する。
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
on (rollOver) {
 this.gotoAndPlay("START");
}
on (rollOut) {
 this.gotoAndPlay("END");
}
on (press) {
 tellTarget("_root.CTRL_LEFT"){
  gotoAndPlay("src");
 }
}
on (release, releaseOutside) {
 tellTarget ("_root.CTRL_LEFT") {
  gotoAndStop(1);
 }
 this.gotoAndPlay("END");
}

解説

ステージのフレームを2フレームにしているのは、ターゲットの位置情報を表示するためで、値を表示させない場合は2フレーム目とActionScriptレイヤーは必要ありません。
ターゲットの移動で重要になるのは「CTRL_LEFT」と「CTRL_RIGHT」です。
(3)と(4)の2フレーム目のActionScript、01はターゲットが枠からはみ出さないようにする設定です。
03はターゲットが移動する距離を設定しています。
3フレーム目は動作をループ化させるためで、これによりターゲットは移動し続けます。
このようにステージと別にActionScriptを設定しているのはシンボルそれぞれがステージに影響されずに動作するためです。

ページ上部へ