Lesson5 ActionScript
第5回 演算子、条件分岐
「演算子」は、数学で用いる通常の計算式(「+」、「-」、「*」、「/」、「%」など)のほかに、代入したり、比較したり、さまざまな用途の演算内容を指示する記号だ。「条件分岐」は、「もし○○だったら××する」のような比較演算子などを用いた条件文によって、実行する動作を変えることができる命令だ。条件文には比較演算子が多く用いられる。演算子の使い方を踏まながら、条件分岐についての理解を深めていこう。例題として、条件分岐の「if」文と演算子を使って、矢印ボタンを押すとスクロールする閲覧ページを作成していく。
解説:北川貴清
※「FlashのABC」の本文中の解説で使用しているサンプルデータは、別ページでダウンロードができます。
■Summary:演算子 演算子には、計算に使う「+」、「-」、「/」、「*」や、値を代入する「=」、「+=」、「-=」、値を比較する「==」、「>」、「<」などがある。「=」のように、通常とは異なるプログラミングの世界独自の使い方に注意しよう。 |
算術演算子
+
足し算、文字の連結
足し算、文字の連結
-
引き算
引き算
*
掛け算
掛け算
/
割り算
割り算
%
割った余りを求める
割った余りを求める
代入演算子
=
左辺の値に右辺の値を代入する
左辺の値に右辺の値を代入する
+=
左辺の値に右辺の値を足す
左辺の値に右辺の値を足す
-=
左辺の値から右辺の値を引く
左辺の値から右辺の値を引く
*=
左辺の値に右辺の値を掛ける
左辺の値に右辺の値を掛ける
/=
左辺の値を右辺の値で割る
左辺の値を右辺の値で割る
%=
左辺の値を右辺の値で割った余りを左辺に代入する
左辺の値を右辺の値で割った余りを左辺に代入する
インクリメント/デクリメント
++
1を足す
1を足す
--
1を引く
1を引く
比較演算子
==
左辺の値と右辺の値が等しい
左辺の値と右辺の値が等しい
!=
左辺の値と右辺の値が等しくない
左辺の値と右辺の値が等しくない
>
左辺の値が右辺の値より大きい
左辺の値が右辺の値より大きい
<
左辺の値が右辺の値より小さい
左辺の値が右辺の値より小さい
>=
左辺の値が右辺の値より大きいか同じ
左辺の値が右辺の値より大きいか同じ
<=
左辺の値が右辺の値より小さいか同じ
左辺の値が右辺の値より小さいか同じ
論理演算子
&&
AND処理。左辺の条件かつ右辺の条件がtrueの場合
AND処理。左辺の条件かつ右辺の条件がtrueの場合
||
OR処理。左辺の条件または右辺の条件がtrueの場合
OR処理。左辺の条件または右辺の条件がtrueの場合
!
NOT演算。trueまたはfalseを反転する
NOT演算。trueまたはfalseを反転する
■Summary:条件分岐 「if」文を使うと「もし○○だったら××する」のような、条件によって動作を変えなければならない場合のアクションを設定することができる。構文は次の通りだ。 |
構文
if (条件1){
条件が正しいとき(trueのとき)に実行するスクリプト
}
else if (条件2){
条件1以外で条件2が正しいとき(trueのとき)に実行するスクリプト
}
else{
上の条件にあてはまらないときに実行するスクリプト
}
条件が正しいとき(trueのとき)に実行するスクリプト
}
else if (条件2){
条件1以外で条件2が正しいとき(trueのとき)に実行するスクリプト
}
else{
上の条件にあてはまらないときに実行するスクリプト
}
「else if」文、「else」文はなくてもよい。また、[else if]文は「if」文の後ろにいくつでも追加することができる。
演算子と条件分岐を使ったアクション
「if」文と演算子を使って、スクロールする閲覧ページを作成しよう。
【サンプル1】ボタンを押している間、画面がスクロールし、離すとスクロールが停止する
1.[名前:page]、[タイプ:ムービークリップ]の新規シンボルを作成する。ステージに、左上を基準点とした背景となる矩形を描画し、その上に画像や、テキストなどのコンテンツを配置する【図1】。
【図1】閲覧ページとなるシンボルを作成
2.[名前:up_btn]、[タイプ:ボタン]の新規シンボルを作成。ページを上にスクロールさせるための矢印ボタンを作る【図2】。
【図2】スクロールさせるためのボタンシンボルを作成
3.「シーン1」に戻り、シンボル「page」と「up_btn」の2つを[ライブラリ]パネルからドラッグして、Y座標が20~300の間に閲覧画面が収まるように並べて配置する。また、下に配置している「up_btn」を縦に反転して、下向きの矢印ボタンに変更する。それぞれを選択し、プロパティインスペクタでインスタンス名を「page_mc」、「up_btn」、「down_btn」と設定する【図3】。
【図3】ページとボタンを配置し、インスタンス名を設定する
4.新規レイヤー「action」を作成する。[フレーム1]を選択し、[アクション]パネルに、矢印ボタンを押したとき、閲覧ページが上下に移動する処理を記述する【図4】。ここまでを[制御]→[ムービープレビュー]で確認しよう【図5】。ページのスクロールは可能になったが、スクロール領域を超えてもボタンを押した分だけ、ページが移動してしまう。
【図4】矢印ボタンをクリックしたときに「page_mc」が移動するActionScriptを記述
(1)
up_btn.onPress = function() {
page_mc._y += 10;
};
ボタン「up_btn」を押したとき、ムービークリップ「page_mc」のY座標の値を10増やす(下に10px移動)。
up_btn.onPress = function() {
page_mc._y += 10;
};
ボタン「up_btn」を押したとき、ムービークリップ「page_mc」のY座標の値を10増やす(下に10px移動)。
(2)
down_btn.onPress = function() {
page_mc._y -= 10;
};
ボタン「down_btn」を押したとき、ムービークリップ「page_mc」のY座標の値を10減らす(上に10px移動)。
down_btn.onPress = function() {
page_mc._y -= 10;
};
ボタン「down_btn」を押したとき、ムービークリップ「page_mc」のY座標の値を10減らす(上に10px移動)。
【図5】 ボタンを押すと10pxずつページが上下にスクロールする
5.そこで、条件分岐を使って、矢印ボタンを押したとき、上辺のY座標が20、下辺のY座標が300までの範囲内で、ムービークリップ「page_mc」が移動するよう制御する(その範囲外のときはボタンを押しても何も動作しない)。範囲を指定するには、ムービークリップ「page_mc」のY座標の最大値と最小値がわかればよい。最小値は高さのプロパティ「_height」を使うと、ページの高さにかかわらずY座標を指定することができる【図6】。これを条件分岐のActionScriptにあてはめると【図7】のようになる。[制御]→[ムービープレビュー]で確認しよう【図8】。
【図6】 ページがスクロールする範囲
【図7】「page_mc」の移動を「if」文によって制御するActionScriptを記述
(1)
up_btn.onPress = function() {
if( page_mc._y < 20 ){
page_mc._y += 10;
}
};
ボタン「up_btn」を押したとき、ムービークリップ「page_mc」のY座標の値が、もし「20」より小さかったらy座標の値を10増やす。
up_btn.onPress = function() {
if( page_mc._y < 20 ){
page_mc._y += 10;
}
};
ボタン「up_btn」を押したとき、ムービークリップ「page_mc」のY座標の値が、もし「20」より小さかったらy座標の値を10増やす。
(2)
down_btn.onPress = function() {
if( page_mc._y > 300 - page_mc._height ){
page_mc._y -= 10;
}
};
ボタン「down_btn」を押したとき、ムービークリップ「page_mc」のy座標の値が、もし「300-page_mc._height」より大きかったらY座標の値を10減らす。
down_btn.onPress = function() {
if( page_mc._y > 300 - page_mc._height ){
page_mc._y -= 10;
}
};
ボタン「down_btn」を押したとき、ムービークリップ「page_mc」のy座標の値が、もし「300-page_mc._height」より大きかったらY座標の値を10減らす。
【図8】指定した範囲内を超えるとスクロールしない
6.矢印ボタンを押したとき、押している間は連続してスクロールするように設定しよう。フレームが再生されるたびに処理を行うには、イベントハンドラメソッドの「onEnterFrame」を使用する。また、ボタンを離したときにスクロールを停止させるため、「onEnterFrame」を削除する処理も一緒に追加する必要がある。削除するには「delete」を使用する【図9】。[制御]→[ムービープレビュー]で確認しよう。
【図9】矢印ボタンを押している間、「page_mc」が連続してスクロールするActionScriptを記述
(1)
up_btn.onPress = function() {
_root.onEnterFrame = function(){
if( page_mc._y < 20 ){
page_mc._y += 10;
}
}
};
ボタン「up_btn」を押したとき、ムービークリップ「page_mc」のY座標の値が、もし「20」より小さかったらy座標の値を毎フレーム10ずつ増やす。
(2)
up_btn.onRelease = function() {
delete _root.onEnterFrame;
};
ボタン「up_btn」を離したとき、イベントハンドラメソッド「onEnterFrame」の処理を削除する。
(3)
down_btn.onPress = function() {
_root.onEnterFrame = function(){
if( page_mc._y > 300 - page_mc._height ){
page_mc._y -= 10;
}
}
};
ボタン「down_btn」を押したとき、ムービークリップ「page_mc」のY座標の値が、もし「300-page_mc._height」より大きかったらy座標の値を毎フレーム10ずつ減らす。
(4)
down_btn.onRelease = function() {
delete _root.onEnterFrame;
};
ボタン「down_btn」を離したとき、イベントハンドラメソッド「onEnterFrame」の処理を削除する。
up_btn.onPress = function() {
_root.onEnterFrame = function(){
if( page_mc._y < 20 ){
page_mc._y += 10;
}
}
};
ボタン「up_btn」を押したとき、ムービークリップ「page_mc」のY座標の値が、もし「20」より小さかったらy座標の値を毎フレーム10ずつ増やす。
(2)
up_btn.onRelease = function() {
delete _root.onEnterFrame;
};
ボタン「up_btn」を離したとき、イベントハンドラメソッド「onEnterFrame」の処理を削除する。
(3)
down_btn.onPress = function() {
_root.onEnterFrame = function(){
if( page_mc._y > 300 - page_mc._height ){
page_mc._y -= 10;
}
}
};
ボタン「down_btn」を押したとき、ムービークリップ「page_mc」のY座標の値が、もし「300-page_mc._height」より大きかったらy座標の値を毎フレーム10ずつ減らす。
(4)
down_btn.onRelease = function() {
delete _root.onEnterFrame;
};
ボタン「down_btn」を離したとき、イベントハンドラメソッド「onEnterFrame」の処理を削除する。
サンプルをダウンロードする
次回につづく
次回は9月27日(木)からの掲載開始となります。お楽しみに!
[プロフィール] きたがわ・たかきよ●1972年8月生まれ。三重県出身。三重大学工学部卒業。大阪を拠点としてwebデザインを中心に活動中。著書に『Flash8デザインスクール for Win & Mac 』、『ネタ帳ビギナーズ FLASHテンプレート集 』。 http://www.f-l-a-v-o-r.com |