地球温暖化ガス

ちきゅうがとける

FLEXでの画面遷移アニメーションを制御(遷移元・遷移先によって動きを変える)

だいぶFLEXの事が分かってきました。

画面の遷移はViewStackというMXMLタグで制御して、画面と画面の切り替わりのアニメーションはViewStack内の
各ページのshowEffect、hideEffectで制御するらしいです。
showEffectが表示されるときの処理、hideEffectが消えるときの処理です。


ただ、showeffect、hideEffectで指定をすると、どこへ遷移しようがどこから遷移しようが固定の動きになってしまいます。
これだと進んだら右へ、戻ったら左へという画面遷移が実現できません。


以下のような感じ(2→3と3→2の動きが変)


それをするためには押したボタンに応じてshoweffectなどのエフェクトのプロパティを変えてやるしかないかと思うので変更してみたのが以下のような感じ(2→3と3→2の動きも問題なし)

※プルダウンでイージングエフェクトを選ぶと画面遷移のアニメーションがちょっと変わる。


うごき一つ制御するのもややこしいです。


ちょっとはてなダイアリでのFLEXのコードのはりつけ方がよく分からなかったのでソースは貼り付けてないですが、要望あればコードのはっつけ方調べて張ろうと思います。
要望なければ放置です。


<09年08月25日追記>
要望をいただいたのでコードの一部分をのせます。
といっても当時のコードはもうないので、うろ覚えで再現したコードなんですが…


ボタンをおしたタイミングでアニメーションを再定義して動作させるという簡単な動きになります。
これは三つの画面の遷移しかかんがえてないので、こんなif文になってしまってます。
さらに画面数が増える場合などはもうちょっと整理して書かないと視認性がかなり悪いと思います・・・

public function moveAction(moveFrom:String, moveTo:String):void {

  //画面1→画面2
  if(moveFrom == 'viewA'){
    motionSet(Application.application.moveEffectObjHide, '1');
    motionSet(Application.application.moveEffectObjShow, '3');
  
  //画面3→画面2
  } else if(moveFrom == 'viewC'){
    motionSet(Application.application.moveEffectObjHide, '2');
    motionSet(Application.application.moveEffectObjShow, '4');

  //画面2
  } else if (moveFrom == 'viewB'){

    //画面2→画面1        
    if(moveTo == 'viewA'){
      motionSet(Application.application.moveEffectObjHide, '2');
      motionSet(Application.application.moveEffectObjShow, '4');

    //画面2→画面3          
    } else if(moveTo == 'view3'){
      motionSet(Application.application.moveEffectObjHide, '1');
      motionSet(Application.application.moveEffectObjShow, '3');
    }
  }

  //遷移を実行
  Application.application.main_view.selectedChild=Application.application[moveTo];
  
  
}

public function motionSet(moveEffectObj:Object, effectFlg:String):void {

  switch(effectFlg){

    //画面内中央→画面外左に消える
    case '1':
      moveEffectObj.xFrom = 0;
      moveEffectObj.xTo = -100;
      break;

    //画面内中央→画面外右に消える
    case '2':
      moveEffectObj.xFrom = 0;
      moveEffectObj.xTo = 100;
      break;

    //画面外右→画面内中央に現れる
    case '3':
      moveEffectObj.xFrom = 100;
      moveEffectObj.xTo = 0;
      break;

    //画面外左→画面内中央に現れる
    case '4':
      moveEffectObj.xFrom = -100;
      moveEffectObj.xTo = 0;
      break;

  }

}