2014-12-20

2014-12-20

条件分岐Add Star

Flash

 

 

条件を見つける

 

 
Gadgets powered by Google

 


 

条件：右端まできたら

 

 

f:id:web-design-action:20111031062944g:image

 

 

処理：左端に移動する

 


if文

  • ユーザーが入力したパスワードが正しかったらこの処理をさせ、間違っていたらこの処理をさせたいなど、ある判定の結果によって処理を枝分かれを作るときに「if」を使います。

  if(判定したいこと)
  {
	判定結果が正しいときにやりたい処理；
	判定結果が正しいときにやりたい処理2；
	　　…
  }

ifの基本ルール
 var a:Number = 5;

 if( a < 10 )
 {
	trace( "aは10より小さい" );
 }

  1. 数値型の変数 a を宣言し、初期値として 5 を入れる
  2. a が10より小さいとき、「{}」で囲まれたところが実行される
  3. 結果を出力パネルに表示する

ifの処理の流れ

 

f:id:web-css-design:20111009192514j:image

 


もちろん、実際にこの文を使う場合、判定の結果はtrace文ではなく、もっと具体的な演出になります。


さまざまな条件
a < 10　　  a が10より小さい
a > 10　　  a が10より大きい
a <= 10　　a が10以下（10も含む）
a >= 10　　a が10以上（10も含む）
a == 10　　a が10と一致
a != 10　　 a が10ではない

この中で特に間違えやすいのは「==」という記号です。

等しいかどうか調べるときには必ず２つ必要です。


 if( password != "abc123" )
 {
	trace( "パスワードが間違っています。" );
 }

else

条件が成立しない場合に何かを実行したいときに、「そうではないとき」という処理を実行します。


 var a:Number = 15;

 if( a < 10 )
 {
	trace( "a は10より小さい" );
 }
 else
 {
	trace( "a は10より小さくはない" );
 }

 

f:id:web-css-design:20111009215402j:image

 


else if

if と else を使えば、条件が成立するときの処理も、成立しないときの処理も書けるので充分のように思えますが、もうひとつ if と else の間に書く「else if」には、if 文と同じように条件を書くことができ、「そうでなくて、もし～ならば」という処理をつくります。


 var a:Number = 10;

 if( a < 10 )
 {
	trace( "a は10より小さい" );
 }
 else if( a == 10 )
 {
	trace( "a はずばり10" );
 }
 else
 {
	trace( "a は10以上" );
 }

 

f:id:web-css-design:20111009215422j:image

 


ANDで条件を組み合わせる

if 文では、いくつかの条件を並べることができます。

条件を並べるときには「AND（&&）」か「OR（||）」を使って、条件どおしをつなぎます。

両方の条件が成立するときだけ処理を実行したいときには、AND（&&）を使います。


 var a:Number = 5;

 if( a > 0 && a < 10 )
 {
	trace( "a は１から９までの数値です。" );
 }
  • 条件A：a > 0　　a が０より大きい
  • 条件B：a < 10　 a が10より小さい

この例では条件A、Bの両方が成立する（true）ので、出力パネルには「a は１から９までの数値です。」と表示されます。


ORで条件を組み合わせる

どちらかの条件が成立するだけで処理を実行したいときは、OR（||）記号を使います。


 var a:Number = 5;

 if( a < 0 || a > 10 )
 {
	trace( "a は０より小さいか、10より大きい数値です。" );
 }
  • 条件A：a < 0　　a が０より小さい
  • 条件B：a > 10　 a が10より大きい

この例では条件A、Bのどちらも成立しない（false）ので、出力パネルにはなにも表示されません。


中括弧の省略

各コードブロックに文がひとつしかないときには、次のように括弧を省略することもできます。


 var a:Number = 5;

 if( a < 10 )
	trace( "a は10より小さい" );
 else if( a == 10 )
	trace( "a はずばり10" );
 else
	trace( "a は10以上" );

不用意に省略すると、うまくいかない原因にもなるため、常に中括弧を書くようにしましょう。


load と enterFrame どちら？

ムービークリップは連続的にX座標位置が変化しています。

ですから「条件：右端まできたら」を調べるのも「連続的」におこなう必要があります。

つまり、イベントハンドラ「enterFrame」に記述します。


条件の設定
  • 「条件：右端まできたら」を記述します

丁寧にいうと「ムービークリップが右端の座標まできたら・・・」となります。


 

 

ムービークリップのX座標位置と右端の位置を「比較」します。

 

 

《基準点》

 

f:id:web-design-action:20111031074058g:image

 


 

 

if（ 条件式 ）{

　条件式を満たしおこなう処理

}

 

 


ムービークリップ「ball_mc」がすべて見えなくなるまでの距離は「ステージ + ballの半分20px」です。

つまり、ムービークリップ「ball_mc」が右端に到達するということは、「this._x と520が等しい」といえます。


比較演算子

ActionScriptでは「等しい」を表す記号は「==」を使います。


 

 

if（ this._x == 520 ）{

　条件式を満たしおこなう処理

}

 

 

条件は、上記のように「this._x == 520」で表すことができます。

この条件を表す式を「条件式」と呼びます。


ブール値

「true」と「false」の２つをブール値と呼びます。

  • true「真」：条件を満たすこと
  • false「偽」：条件を満たさないこと

以下の場合は、

 trace(10 == 9);

 

f:id:web-design-action:20111031081809g:image

 


となり、比較式が「偽」であることがわかります。


適切な条件を考える

条件式は「this/_x == 520」でも文法的には間違いはないのですが、汎用性が低い、悪い記述の仕方です。

なぜかといえば、ムービークリップは移動速度によってはX座標の 520 に止まるとは限らないのです。

50ずつ移動するように設定した場合、520には止まらず条件を満たすことはありません。


今回の場合は、比較演算子「>=」を使います。


 

 

if（ this._x >= 520 ）{

　条件式を満たしおこなう処理

}

 

 


処理の追加

あとは、条件式を満たしたときにおこなう処理を書けば完成です。

「処理：左端に移動する」は、「this._x」に左端の座標を代入するだけです。

  if (this._x >= 520) {
    this._x = -20;
  }

マジックナンバーの削除
  onClipEvent(load) {
    speed = 10; //移動速度
    leftEdge = -20; //左端の座標
    rightEdge = 520; //右端の座標
  }

  onClipEvent(enterFrame) {
    this._x = this._x + speed;
    if (this._x >= rightEdge) {
        this._x = leftEdge;
    }
  }

function文

マジックナンバーと同じように「何の処理かわかりずらい処理」はよくありません。

これ場合、「 this._x = leftEdge; 」が、それにあたります。


「何の処理かわかりずらい処理」には名前をつけて、あとで修正しやすいような構造に書き換えます。


 

 

function　名前（ ）{

　処理１

　処理２

　…

}

 

 


function文には、さらに高度な利用法があるのですが、この段階では「処理に名前をつける」にとどめます。


function文を書いてみます。

まず、どのイベントハンドラに書くべきかを考えます。

マジックナンバーを削除するのと同じで「はじめに１回設定」すればよいので、イベントハンドラ「load」に記述します。


  onClipEvent(load) {
    speed = 10; //移動速度
    leftEdge = -20; //左端の座標
    rightEdge = 520; //右端の座標

    //ボールを左端にワープさせる
    function ballWarp (){
	this._x = leftEdge;	
    }
  }

カスタムメソッド

作成したfunction文を呼び出す方法は、変数の利用方法と同じです。

例えば「this.play();」などのメソッドの利用方法と同じです。


  onClipEvent (enterFrame) {
    this._x = this._x + speed;
    if ( this._x >= rightEdge) {
	this.ballWarp(); //カスタムメソッドの利用
    }
  }

《完成例》

  onClipEvent (load) {
    speed = 5; //移動速度
    leftEdge = -20; //左端の座標
    rightEdge = 520; //右端の座標

    //ボールを左端にワープさせる
    function ballWarp (){
	this._x = leftEdge;	
    }
  }

  onClipEvent (enterFrame) {
    this._x = this._x + speed;
    if ( this._x >= rightEdge) {
	this.ballWarp(); //カスタムメソッドの利用
    }
  }


複雑なif文：理論演算子

条件を満たさないときの処理

「else文」を利用することで、条件を満たさないときにも特定の処理を行うことができます。


 

 

if（ 条件式 ）{

　条件式が「真」のときに行う処理

} else {

　条件式が「偽」のときに行う処理

} 

 

 


条件を満たさない場合、さらに条件分岐させる処理

「else」の後ろに「if文」を追加することで条件式が「偽」のときにさらに条件分岐をすることができます。


 

 

if（ 条件式A ）{

　条件式Aが「真」のときに行う処理

} else if（ 条件式B ） {

　条件式Aが「偽」でしかも条件式Bが「真」のときに行う処理

} 

 

 


「else if」を追加していくことで、さらに複数の条件分岐が実現できます。

しかし追加しすぎると構造がわかりにくくなる場合もあります。


一度に複数の条件式を評価する

条件式は「理論演算子」を使うことで、複数扱うことができます。


 

 

if（ 条件A && 条件B ）{

　条件A、条件Bが「ともに」真のときに行う処理

} 

if（ 条件A || 条件B ） {

　条件A、条件Bが「どちらか」真のときに行う処理

} 

 

 


 

演算子とは

 


 

f:id:web-design-action:20111103063022j:image

 


理論演算子

 

演算子処理内容オペランド数
! 否定 (NOT) 単項
&& 論理積 (AND) 二項
|| 論理和 (OR) 二項

 


 

否定（NOT）

 

  • 否定（NOT）はオペランドのブール値を反転する論理演算です。
  • ブールは true また flase の2値で表されるデータ型です。

 

論理積 (AND)

 

  • 論理積（AND）は2つのオペランドの値がともに true のときに true、それ以外のときには false を返す論理演算です。

 

論理和 (OR)

 

  • 論理和（OR）は2つのオペランドの値のどちらか、または両方とも true のときに true、それ以外のときには false を返す論理演算です。