NEWS

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

  • Web creators

ActionScript

ボタンでシーンを切り替える

概要

Flashでタイムラインが長いアニメーションや、ボタンをクリックしてインターフェイスを作成する場合、管理しやすいようにシーンに分けてることがあります。
シーンは特に設定しない限り順番に再生されますが、シーンを切り替えるタイミングを意図的に操作したい場合はActionScriptで指定することで実現できます。
ここではボタンをクリックした時にシーンが切り替わるActionScriptを紹介します。

サンプル解説

真ん中のボタンをクリックすると「シーン2」に変わり、さらにボタンをクリックすると「シーン1」に戻ります。

作成法

(1)シーンの準備

・「シーン 1」と「シーン 2」を用意する。
[参考:シーンの追加と名前変更]

(2)ボタンとなる素材を用意

・ボタンをシンボルで用意。

ボタンシンボルを作成

(3)「シーン 1」の設定

・レイヤー「Action」を設定
・レイヤー「レイヤー 1」にボタンシンボルを設置
・レイヤー「レイヤー 1」に「シーン 1」を示すテキストを設置

「シーン 1」の設定

・設置したボタンのインスタンス名を「btn_a」と設定

ボタンのインスタンス名

(4)「シーン 2」の設定

・レイヤー「Action」を設定
・レイヤー「レイヤー 1」にボタンシンボルを設置
・レイヤー「レイヤー 1」に「シーン 2」を示すテキストを設置

「シーン 2」の設定

・設置したボタンのインスタンス名を「btn_b」と設定

ボタンのインスタンス名

(5)「シーン 1」にActionScriptの設定

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

01
02
03
04
05
06
07
stop();

btn_a.addEventListener( MouseEvent.MOUSE_DOWN, changeScene_1 );

function changeScene_1( event:MouseEvent ):void {
  gotoAndStop("1", "シーン 2");
}

(6)「シーン 2」にActionScriptの設定

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

01
02
03
04
05
06
07
stop();

btn_b.addEventListener( MouseEvent.MOUSE_DOWN, changeScene_2 );

function changeScene_2( event:MouseEvent ):void {
	gotoAndStop("1", "シーン 1");
}

解説

このサンプルは「シーン 1」と「シーン 2」のそれぞれに設置したボタンをクリックすることで切り替わるようにしています。
設置したボタンのインスタンス名を「btn_a」と「btn_b」、ActionScriptのfunction名も「changeScene_1」と「changeScene_2」に分けていますが、シーンを分けて作成してもパブリッシュした際は一つのタイムラインとして書き出されるため、同じインスタンス名やfunction名があるとエラーとなります。
「シーン 1」に設定したActionScriptで1行目はタイムラインが進まないように「stop」を指定しています。指定していない場合は「シーン 1」と「シーン 2」が交互に表示されます。
3行目ではインスタンス名が指定されたシンボルのイベントを取得しており、ここではクリックされるとfunction「changeScene_2」を呼び出すようにしています。
5行目から7行目は「changeScene_2」部分となり、6行目でシーンの切り替えを行っています。シーン名に日本語を利用している場合はそのまま日本語で記載します。
シーンを作成すると半角スペースが含まれることがあるため、指定時には注意が必要です。
「シーン 2」のActionScriptもインスタンス名とfunction名が異なる程度で内容は一緒です。

ページ上部へ