第3回　変数と条件分岐

技術評論社より好評発売中の「速習Webデザイン ActionScript 3.0」をテキストに、ActionScript 3.0の基本がわかる充実の2日間「林拓也のプログラミング未経験者向けActionScript 3.0入門講座」を開催いたします。詳細はこちらでご確認ください。

今回は変数と条件分岐を扱います。変数は数学でもおなじみの概念です。条件分岐は、状況に応じてどの処理を実行するかを判断する構文です。変数の値を調べて状況を判断することが多く、変数と一緒に学習していきます。

変数の宣言と型指定

変数は値が変化する可能性のある情報を扱うために使用します。

前回、次のようなスクリプトでムービークリップインスタンス"star_mc"が5度ずつ回転するアニメーションを作成しましたが、これを例に考えてみます。

スクリプト1

01： star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
02： function xEnterFrame(evt) {
03：   star_mc.rotation += 5;
04： }

このスクリプトでは回転スピードが5に固定されていますが、この値が何かのキッカケで増減するように変更するとします。すると、この5という値を変数に置き換えて管理することになります。

変数を使う場合、変数の「宣言」を行う必要があります。変数の宣言は次の書式のようにvarキーワードを使います。

var 変数;

変数名は基本的に任意のものをつけられますが、次のようなルールでつけておくのが一般的です。

半角英数文字と「_」（⁠アンダースコア⁠）⁠、「⁠$」（⁠ドル記号）のみを使う
1文字目を数字で始めない
ActionScriptの語として使われているものをそのまま変数名として使用しない

変数の宣言時にはその変数がどのような種類のデータを扱うかを指定する「型指定」も行うようにします。型指定は、次の書式のように宣言した変数の後に「:」（⁠コロン）をつけて扱うデータの型を指定します。

var 変数:データ型;

主なデータ型には次のようなものがあります。

データ型を表す語	説明
Number	数値全般
int	整数値
uint	正の整数値
String	文字の値（文字列）
Boolean	ブール値（true/false）
MovieClip	ムービークリップインスタンス
TextField	ダイナミックテキスト、テキスト入力

変数の値の設定にはプロパティの設定のときと同様に「=」（⁠イコール）を使います。

値の設定は、宣言とは別の行で行っても構いませんし、宣言の行で行っても構いません。

宣言後に別の行で設定

var 変数:データ型;
変数 = 値;

宣言と同じ行で設定

var 変数:データ型 = 値;

スクリプト1を、変数を使って書き換えてみます。変数名はspeedとし、整数を扱うものとします。

01： var speed:int = 5;
02： star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
03： function xEnterFrame(evt) {
04：   star_mc.rotation += speed;
05： }

さらにボタンで変数speedの値を増減できるようにしましょう。

スピード増加ボタンのインスタンス名は"faster_btn"、スピード減少ボタンのインスタンス名は"slower_btn"とします。

ボタンの処理とコメントを追加すると次のようになります。

サンプル1

01： //変数定義
02： var speed:int = 5;
03： //アニメーションのイベント処理
04： star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
05： //ボタンへのclickイベント処理設定
06： faster_btn.addEventListener(MouseEvent.CLICK, xFasterClick);
07： slower_btn.addEventListener(MouseEvent.CLICK, xSlowerClick);
08： //enterFrameイベント用の処理
09： function xEnterFrame(evt) {
10：   star_mc.rotation += speed;
11： }
12： //Fasterボタンのclickイベント用の処理
13： function xFasterClick(evt) {
14：   speed += 1;
15： }
16： //Slowerボタンのclickイベント用の処理
17： function xSlowerClick(evt) {
18：   speed -= 1;
19： }

完成サンプル（sample3-1.fla）

条件分岐（ifステートメント）

サンプル1ではボタンで回転スピードを速くしたり遅くしたりできるようにしました。

しかし、スピードの最小値や最大値などに関する制限をしていないので、ボタンを押し続けると不都合が出てきます。

例えば［Slower］ボタンは回転スピードを遅くするという趣旨ですが、［⁠Slower］ボタンを何度も押していくと、回転が停止しその後反対回転になります。さらに押し続けると、回転が反対方向に「速く」なっていってしまいます。

次のサンプルでは、変数speedの最大値は10、最小値は1と決めて、この範囲からでないようにします。

具体的には、［⁠Faster］ボタンの処理では変数speedが10より小さいときだけ増加し、［⁠Slower］ボタンの処理では1より大きいときだけ減少するという処理内容になります。

このように状況をチェックし、条件に当てはまる場合に処理を実行するような場合には条件分岐を使います。条件分岐はifステートメントを使うのが代表的な方法です。

ifステートメントのもっとも基本的な書式は次のものです。

if (条件式){
       処理
}

条件式の代表的なものとしては値の比較式があります。

値の比較はには「=」「⁠<」「⁠>」「⁠!」などの演算子を使います。

演算子	書式	説明
==	a == b	aとbが等しいか
!=	a != b	aとbが異なっているか
>	a > b	aがbより大きいか
>=	a >= b	aがb以上か
<	a < b	aがbより小さいか
<=	a <= b	aがb以下か

等しいかどうかの比較が「=」ではなく「==」なのがポイントです。「⁠=」だと代入式になってしまうので注意しましょう。

スピード値の制限を行ったスクリプトは次のようになります。

サンプル2

01： //変数定義
02： var speed:int = 5;
03： //アニメーションのイベント処理
04： star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
05： //ボタンへのclickイベント処理設定
06： faster_btn.addEventListener(MouseEvent.CLICK, xFasterClick);
07： slower_btn.addEventListener(MouseEvent.CLICK, xSlowerClick);
08： //enterFrameイベント用の処理
09： function xEnterFrame(evt) {
10：   star_mc.rotation += speed;
11： }
12： //Fasterボタンのclickイベント用の処理
13： function xFasterClick(evt) {
14：   if (speed < 10){
15：         speed += 1;
16：   }
17： }
18： //Slowerボタンのclickイベント用の処理
19： function xSlowerClick(evt) {
20：   if (speed > 1){
21：         speed -= 1;
22：   }
23： }

完成サンプル（sample3-2.fla）

このサンプルではボタンが無効になっているときでも、ボタンの見た目は変わりません。

ボタンが無効になっている間はvisibleプロパティをfalseに設定し見えなくすることで無効であることが分かるようにします。

ただし、全く見えなくなると唐突な感じがするので、ボタンの無効な状態のボタンのグラフィックを背景に配置しておきます。

［Faster］ボタンをクリックした結果、変数speedが最大値の10になったら［Faster］ボタンを無効にするには次のような処理になります。次のスクリプトはサンプル2の［Faster］ボタンのイベント処理部分を抜粋したものです。

スクリプト2

01： //Fasterボタンのclickイベント用の処理
02： function xFasterClick(evt) {
03：   if (speed < 10){
04：         speed += 1;
05：         //スピードが最大値になったら［Faster］ボタンを無効に
06：         if (speed == 10){
07：               faster_btn.visible = false;
08：         }
09：   }
10： }

これで［Faster］ボタンは変数speedが最大値の10になったら無効になります。

次は、［⁠Slower］ボタンをクリックして変数speedの値が減少したら［Faster］ボタンを有効に戻す処理を追加します。

有効に戻す処理は［Slower］ボタンのイベント処理内で行います。

以下、［⁠Slower］ボタンのイベント処理です。

スクリプト3

01： //Slowerボタンのclickイベント用の処理
02： function xSlowerClick(evt) {
03：   if (speed > 1){
04：         //スピードが最大値だったら［Faster］ボタンを有効に
05：         if (speed == 10){
06：               faster_btn.visible = true;
07：         }
08：         speed -= 1; 
09：   }
10： }

これで［Faster］ボタンは有効／無効の切り替えができるようになりました。

［Slower］ボタンにもスクリプト2やスクリプト3同様の考えでスクリプトを追加すると、次のようになります。

サンプル3

01： //変数定義
02： var speed:int = 5;
03： //アニメーションのイベント処理
04： star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
05： //ボタンへのclickイベント処理設定
06： faster_btn.addEventListener(MouseEvent.CLICK, xFasterClick);
07： slower_btn.addEventListener(MouseEvent.CLICK, xSlowerClick);
08： //enterFrameイベント用の処理
09： function xEnterFrame(evt) {
10：   star_mc.rotation += speed;
11： }
12： //Fasterボタンのclickイベント用の処理
13： function xFasterClick(evt) {
14：   if (speed < 10){
15：         //スピードが最小値だったら［Slower］ボタンを有効に
16：         if (speed == 1){
17：               slower_btn.visible = true;
18：         }
19：         speed += 1;//スピード値増加
20：         //スピードが最大値になったら［Faster］ボタンを無効に
21：         if (speed == 10){
22：               faster_btn.visible = false;
23：         }
24：   }
25： }
26： //Slowerボタンのclickイベント用の処理
27： function xSlowerClick(evt) {
28：   if (speed > 1){
29：         //スピードが最大値だったら［Faster］ボタンを有効に
30：         if (speed == 10){
31：               faster_btn.visible = true;
32：         }
33：         speed -= 1;//スピード値減少
34：         //スピードが最小値になったら［Slower］ボタンを無効に
35：         if (speed == 1){
36：               slower_btn.visible = false;
37：         }
38：   }
39： }

完成サンプル（sample3-3.fla）

定数の使用

サンプル3ではスピードの最小値を1、最大値を10として制限を設定しました。

このような値は、コンテンツの調整のために変更される可能性の高いものです。これを直接スクリプトコードの処理内に点在させておくと、値の意味が分かりにくく変更しにくいことがあります。

例えば、サンプル3のスクリプトでスピードの最小値1から0に変更しようとなった場合に、1という数値を機械的に0に変更していったのでは問題が発生します。

1という数値は、ボタンをクリックしたときのスピードの増減の変化量でも使われているからです。

このように今回は、1という数値がスピードの変化量とスピードの最小値という2つの用途で使われていますが、スクリプトコードをパッと見たときにはそれが分かりにくいのです。

そのような場合に定数を使うと、スクリプトコードの見通しがよくなり管理しやすくなります。

定数は変数と似たものですが、変数のようにコンテンツの実行中に値が変化するものには使わず、1度設定した値は変化することがありません。使用する際にはやはり宣言と型指定を行います。

定数の宣言はvarキーワードではなくconstキーワードを使います。値の設定は原則として宣言時に一度だけ行うことができます。

const 定数:データ型 = 値;

定数名も基本的に変数と同様のルールで任意のものをつけられますが、定数名は習慣的に大文字を使うのが一般的です。

スピードの最小値、最大値およびスピードの変化量を定数として設定してみます。

サンプル4

01： //定数定義
02： const MAX_SPEED:uint = 10;
03： const MIN_SPEED:uint = 1;
04： const CHANGE_SPEED:uint = 1;
05： //変数定義
06： var speed:int = 5;
07： //アニメーションのイベント処理
08： star_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
09： //ボタンへのclickイベント処理設定
10： faster_btn.addEventListener(MouseEvent.CLICK, xFasterClick);
11： slower_btn.addEventListener(MouseEvent.CLICK, xSlowerClick);
12： //enterFrameイベント用の処理
13： function xEnterFrame(evt) {
14：   star_mc.rotation += speed;
15： }
16： //Fasterボタンのclickイベント用の処理
17： function xFasterClick(evt) {
18：   if (speed < MAX_SPEED){
19：         //スピードが最小値だったら［Slower］ボタンを有効に
20：         if (speed == MIN_SPEED){
21：               slower_btn.visible = true;
22：         }
23：         speed += CHANGE_SPEED;//スピード値増加
24：         //スピードが最大値になったら［Faster］ボタンを無効に
25：         if (speed == MAX_SPEED){
26：               faster_btn.visible = false;
27：         }
28：   }
29： }
30： //Slowerボタンのclickイベント用の処理
31： function xSlowerClick(evt) {
32：   if (speed > MIN_SPEED){
33：         //スピードが最大値だったら［Faster］ボタンを有効に
34：         if (speed == MAX_SPEED){
35：               faster_btn.visible = true;
36：         }
37：         speed -= CHANGE_SPEED;//スピード値減少
38：         //スピードが最小値になったら［Slower］ボタンを無効に
39：         if (speed == MIN_SPEED){
40：               slower_btn.visible = false;
41：         }
42：   }
43： }

完成サンプル（sample3-4.fla）

コンテンツの動作は何も変わっていませんが、定数を指定することでスクリプトコード内の処理の意図も分かりやすくなり、調整する場合も対象となる値が冒頭にまとめられているので管理がしやすくなりました。