Flash画面遷移フレームワーク「Progression 4」公式ガイド

第2回  フルパフォーマンス!クラススタイル(1)

この記事を読むのに必要な時間:およそ 7 分

7.他のボタンの表示

しかし,今は一方通行な状態です。⁠AboutScene」シーンから「IndexScene」シーンに戻ってこれませんので,⁠TOPページ」である「IndexScene」に遷移するボタンも「AboutScene」側に作りましょう。先ほど「AboutButton.as」を作成した時と同じ手順で作成します。ファイル名,クラス名,コンストラクタ名を「HomeButton」にしましょう。ついでに,パッケージ名を「ui」に設定します。シーンの遷移先を決定する「sceneId」プロパティの値は「/index」に設定します。

リスト7 HomeButtonの設定

public function HomeButton( initObject:Object = null ) {
  super( initObject );
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index" );
}

作成した「HomeButton.as」を,⁠IndexScene.as」内で設定します。先ほどの「AboutButton」と同じ手順です。⁠IndexScene」クラス内で「HomeButton」をインポートしておきましょう。

リスト8 HomeButtonの表示

public class IndexScene extends SceneObject {
  public var homeButton:HomeButton;
  public function IndexScene() {
    title = "Project_gihyo";
    homeButton = new HomeButton();
    homeButton.y = 150;
  }

  override protected function atSceneLoad():void {
    addCommand(
   // ボタンの表示設定を行います。
      new AddChild( container , aboutButton ),
      new AddChild( container , homeButton )
    );
  }


ムービーを書き出して確認してみましょう。⁠AboutButton」を押して「AboutScene」に遷移した後,⁠HomeButton」を押すと,Flashのログ上で,シーン間の遷移が確認できます。これで,シーン同士で遷移できるようになりました。

図16 HomeButtonの表示

図16 HomeButtonの表示

図17 シーン遷移の繰り返し

図17 シーン遷移の繰り返し

8.画像の消去処理

しかし,シーンは遷移しているのに「AboutScene」シーンのみで表示されるはずの「AboutPage」が,⁠IndexScene」シーンに戻ってきても表示されたままになっています。

そこで,⁠AboutScene」シーンを出発して,他のシーンに遷移したら,表示されている画像を消すという処理を追加します。現在,⁠AboutScene」シーンの移動先は同階層または親階層に移動するので,⁠AboutScene」クラス内のイベント「atSceneUnload」の中に設定しましょう。

リスト8 画像の消去

override protected function atSceneUnload():void {
  addCommand(
   // 画像を不可視にするアニメーションを設定します。
    new DoTweener( aboutPage , { alpha:0 , y:aboutPage.y + 20 , time:.3 , transition:"easeInCirc" } ),
    // 画像を消去する設定をします。
    new RemoveChild( container , aboutPage )
  );
}

ムービーを書き出してみると,⁠AboutScene」シーンから「IndexScene」シーンに遷移した際に,表示されていた「AboutPage」が消去されることを確認できます。

9.外部リンク

最後に,Progression 公式サイトへリンクするボタンを作成します。Progressionでは簡単に外部リンクを実現できます。先ほどから,ボタンを作成する際に継承している「CastButton」クラスの「href」プロパティを使います。まず,先ほどと同じようにボタンを作成します。ファイル名,クラス名,コンストラクタ名は「ProgressionButton」として下さい。パッケージは「ui」に設定します。

ボタンの遷移先を決める際に2つのプロパティがあります。それが「sceneId」「href」です。シーンの遷移であれば,⁠sceneId」を用い,外部リンクを使いたいときには「href」プロパティを使いましょう。

では,⁠sceneId」の一行をコメントアウトしてください。そして,その下に記述してある「href」プロパティのコメントを解除して,値を以下のように修正します。

リスト9 外部リンクの設定(1)

public function ProgressionButton( initObject:Object = null ) {
  super( initObject );
  //sceneId = new SceneId( "/index" );
  

これで,ボタンの方の設定は完了しました。⁠IndexScene.as」内で、⁠ProgressionButton」のインスタンスを生成して表示設定を行ってください。⁠ProgressionButton」もインポートしましょう。

リスト10 外部リンクの設定(2)

public class IndexScene extends SceneObject {
  public var progressionButton:ProgressionButton;
  public function IndexScene() {
    progressionButton = new ProgressionButton();
    progressionButton.x = 10;
    progressionButton.y = 446;
  }
----------------------------------------
  override protected function atSceneLoad():void {
    addCommand(
     // ボタンの表示を設定します。
      new AddChild( container , progressionButton )
    );
  }

これでムービーを書き出すと,画面左下の Progression のロゴマークから,Progression の公式サイトにリンクしているのが確認できます。外部リンクやシーンの遷移など,場面に合わせてプロパティを有効にしたり,変更していきましょう。

図18 ProgressionButtonの表示

図18 ProgressionButtonの表示

まとめ

今回は急ぎ足で進めましたが,どうでしたでしょうか。今回は,2つのシーンの行き来だけでしたが,次回はさらにその下の階層のシーンを作成し,3階層の構成にして行きたいと思います。今回のチュートリアルでは、プロパティの細かな説明などはあまり行いませんでした。より詳しい情報をご覧になりたい方は、Progression 4 API リファレンスを参照下さい。

また、Progressionに関してより詳しい内容や,開発工程を知りたい方は,Progression の書籍ProgressionによるFlashコンテンツ開発ガイドブックを一読頂ければ幸いです。

著者プロフィール

青木健至(あおきたけし)

株式会社CLOQUE. 所属。Flash歴半年。Progression歴半年。Progression無しでのFlash制作は不可。2009年にFlashの技術を会得するために上京し,Progressionプロダクトマネージャーの阿部氏に師事。日々精進中。

http://twitter.com/ichikaku1
URL株式会社CLOQUE