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

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

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

3.ボタンの作成

互いのシーンが行き来できる構造が完成しましたが,現在ムービーを書き出してみても,⁠サイトについての説明のページ」に遷移するための手段がありません。

そこで次はシーンを遷移するための「ボタン」を作成していきます。まずは,先ほど作成した「サイトについての説明のページ」に遷移するためのボタンを作成しましょう。このボタンも通常のサイトにあるボタンのような役割を果たします。このボタンを押したらココに遷移する,といった処理を設定します。

ボタンを作成するときも「テンプレート」を使用しましょう。プロジェクト[Project_gihyo]の「template」フォルダにある「MyCastButton.as」をコピーします。コピーしたファイルを「src」フォルダの中に貼りつけます。ボタンも後ほど多くなりますので,⁠src」内に「ui」というパッケージ名のフォルダを作成して,ファイルを移動しておきましょう。

その後,コピーした「MyCastButton.as」の名前を「AboutButton」に変更します。このファイルを開き,クラス名とコンストラクタ名を「AboutButton」に修正します。

図12 ボタンの作成

図12 ボタンの作成

ソース内を確認すると,コンストラクタ内にプロパティ「sceneId」を設定している箇所があります。この「sceneId」の値が,ボタンを押した時の移動先を決めています。ここでは,⁠AboutScene」シーンに遷移するように設定したいので,先ほど「IndexScene.as」内で「AboutScene」のインスタンスに設定した,⁠name」プロパティの値を「sceneId」に設定します。先ほど「シーン」同士をつなげたときに「IndexScene」の下に「AboutScene」を加えたので,"/index/about"という記述になります。この記述はURLのアドレスによく似ています。

リスト3 シーン識別子の設定

public function AboutButton( initObject:Object = null ) {
  // 親クラスを初期化します。
  super( initObject );
  // 移動先となるシーン識別子を設定します。
  sceneId = new SceneId( "/index/about" );
}

これで,⁠AboutButton」ボタンを押した時に「AboutScene」シーンに移動する処理を設定しました。次はこのボタンを配置します。

4.イベントの設定

設定したボタンを表示させていくのですが,ボタンの表示を設定する際は「シーン」で表示の設定を行いましょう。今は「TOPページ」から他の「シーン」に遷移させたいので,ボタンを表示させるシーンは「IndexScene」シーンです。⁠IndexScene.as」を開いてください。ボタン表示の設定を記述していきます。

「AboutButton」型で変数「aboutButton」を宣言してください。コンストラクタ内で変数をインスタンス化します。座標の値も設定しておきましょう。また,⁠AboutButton」をインポートしておきましょう。

リスト4 AboutButtonの定義

public class IndexScene extends SceneObject {
public var aboutButton:AboutButton;
public function IndexScene() {
aboutButton = new AboutButton();
aboutButton.y = 202;
}

続いて、このボタンの表示処理の設定を行います。

シーンでは"どのタイミングで何をするか"を設定するために,タイミング毎に「イベント」があります。このイベントの中で,ボタンを表示する設定を行います。

設定する前に,イベントの種類について簡単に説明します。Progression の「シーン」には大きく4つのイベントがあります。

atSceneLoad イベント
このイベントは,シーン移動時に目的地がこのシーンオブジェクト自身もしくは子階層だった場合に,階層が変更された直後に送出されます。
atSceneInit イベント
このイベントは,このシーンオブジェクト自身が目的地だった場合に,到達した瞬間に送出されます。
atSceneGoto イベント
このイベントは,このシーンオブジェクト自身が出発地だった場合に,移動を開始した瞬間に送出されます。
atSceneUnload イベント
このイベントは,シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に,階層が変更される直前に送出されます。

少し難しいかもしれませんが,慣れていくうちに覚えるものでもあるので,今の段階ではそうなるものだと考えてください。

今回のタイミングは,⁠IndexScene」シーンに階層が変更された時が適切なので,⁠atSceneLoad」イベントを選択します。このイベントの中に,処理を記述していきましょう。

5.「コマンド」の設定

さて,これでボタンを表示させるための記述場所はわかりました。次は、そこに記述する内容を説明します。実は,このイベントの中に,いつも通り「addChild」メソッドを記述しても問題なく動きます。しかし,Progressionでは,どのように画像やボタンを表示させたりするかの設定のために,⁠コマンド」という機能があります。少し難しい言い方になりますが,⁠コマンド」とは,よく使う機能をひとつのクラスとしてまとめたもので,インターフェイスを統一させることによって,ある程度決まったフォーマットに沿って使用することができる,とても便利なクラスです。普段であれば、少し面倒な処理も、コマンドを用いればとても単純に設定できてしまします。複雑な処理を簡潔に記述することができるのです。

代表的なコマンドのクラスとして「DoTweener」クラスがあります。名前からもわかる通り,トゥイーンライブラリの「Tweener」を使うためのコマンドです。こちらは後ほど使用します。まずは,⁠AddChild」クラスを使用して先ほど作成したボタンを表示させていきます。⁠AddChild」クラスも名前の通り,オブジェクトを表示させるためのクラスです。では,⁠IndexScene.as」「atSceneLoad」イベントの中に以下のように記述してください。

リスト5 コマンドの設定

override protected function atSceneLoad():void {
  addCommand(
  // ボタンの表示設定を行います。
  new AddChild( container , aboutButton ) //※3
  );
}
※3
containerは「SceneObject」が持つプロパティです。

記述方法は少し特殊な感じがします。本来,コマンドは[登録]→[実行]という2ステップを踏まなければなりません※4が,⁠addCommand」の中に処理したい内容を記述した場合,イベントの流れに応じて自動的に処理が実行されます。基本はこの記述の仕方になります。今は一行だけの処理ですが,複数の処理を記述でき,それらを同時に実行することが可能です。

さて,ボタンを表示する設定が完了したので,⁠IndexScene」シーンから「AboutScene」シーンへ行く準備が完了しました。実際にムービーを書き出して確認してみましょう。

実行されると,ムービーの左部に「AboutButton」ボタンが表示されたのが確認できます。そのボタンを押すと,画面上では何も変化がありませんが,Flashのログ上で,シーンが遷移しているのが確認できます。

図13 AboutButtonの表示

図13 AboutButtonの表示

図14 シーンの遷移

図14 シーンの遷移

ここまでで,⁠TOPページ」から「サイトについての説明のページ」の構成がほぼできあがりました。

あとは今やった様な内容で「シーン」同士を繋げて,⁠コマンド」でオブジェクトをどのように表示するかを設定していくだけで,大まかな作業は完了します。

※4
通常,コマンドでは変数を定義して命令を登録したあと実行を行う。
例:var com:DoTweener = new DoTweener();   com.execute(); // execute()メソッドは実行をするメソッド

6.画像の表示

今は遷移しても何も表示されない「AboutScene」シーンに,画像を表示させましょう。⁠AboutScene.as」を開いて,⁠AboutPage」クラス※5の型で変数「aboutPage」を宣言してください。コンストラクタ内でインスタンス化したあと,座標を設定してください。イベント「atSceneLoad」内で「AddChild」クラスを使って画面に貼り付けてください。動きを加えるために,コマンドの「DoTweener」クラスを使用します。⁠DoTweener」クラスの使い方は,⁠Tweener」とほぼ同じです。複数のコマンドを設定する際は,間にカンマ「,」を入れます。

リスト6 画像の表示設定

public class AboutScene extends SceneObject {
  public var aboutPage:AboutPage;
  public function AboutScene( name:String = null, initObject:Object = null ) {
    super( name, initObject );
    title = "title";
    aboutPage = new AboutPage();
    aboutPage.x = 149;
    aboutPage.y = 134;
  }
  override protected function atSceneLoad():void {
    aboutPage.alpha = 0;
    addCommand(
	 // 画像の表示設定を行います。
      new AddChild( container , aboutPage ),
      // 画像のアニメーションを設定します。
      new DoTweener( aboutPage , { alpha:1 , y:aboutPage.y - 20 ,time:.2 , transition:"easeOutCirc" } )
    );
  }
※5
サンプルフォルダのFlaファイルの中にシンボルとして登録してあります。

これでムービーを書き出し,⁠AboutButton」を押すと,⁠AboutPage」が表示されます。

図15 サイトについての説明ページの表示

図15 サイトについての説明ページの表示

著者プロフィール

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

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

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