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

第6回 タイムラインスタイル(2)

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

ボタンの表示

ボタンの設定が完了したら,実際に表示させましょう。これまで,ボタンの表示はFlaファイルのステージに直接配置していましたが,設定をした3つのボタンはすべて「gallery」シーンに遷移した際に表示されるものです。ステージに直接ではなくスクリプトでイベントハンドラメソッドを使用してボタンを表示させましょう。

表示設定の前には,他の表示オブジェクトと同様にインスタンスを生成し座標を設定します。

リスト7 ボタンの表示設定

// ボタンインスタンスを生成します。
var americanButton:AmericanButton = new AmericanButton();
americanButton.x = 150;
americanButton.y = 161;
// ボタンインスタンスを生成します。
var frenchButton:FrenchButton = new FrenchButton();
frenchButton.x = 270;
frenchButton.y = 161;
// ボタンインスタンスを生成します。
var mameButton:MameButton = new MameButton();
mameButton.x = 390;
mameButton.y = 161;

表示設定の際に使用するイベントハンドラメソッドは「onSceneLoad」です。⁠gallery」インスタンスを使用して「gallery.onSceneLoad」と呼び出すのですが,これは「galleryPage」の表示設定の際に使用しているため,同箇所に記述します。⁠addCommand()」メソッド内で複数の処理を登録する場合,処理の間にカンマを入れてください。

リスト8 ボタンの表示設定

// galleryPage の表示設定を行います。
gallery.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , galleryPage ),
    new AddChild( this.container ,  americanButton ),
    new AddChild( this.container ,  frenchButton ),
    new AddChild( this.container ,  mameButton )
  );
}

ボタンの削除処理も「galleryPage」と同箇所で行います。

リスト9 ボタンの削除処理

// galleryPage の削除設定を行います。
gallery.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , galleryPage ),
    new RemoveChild( this.container ,  americanButton ),
    new RemoveChild( this.container ,  frenchButton ),
    new RemoveChild( this.container ,  mameButton )
  );
}

設定が完了したら,ムービーを書き出して確認してみましょう。

図12 画像の確認

図12 画像の確認

表示されているボタンをクリックすると,それぞれの対応したシーンに遷移するのがログで確認できます。

図13 ログの確認

図13 ログの確認

表示オブジェクトの設定

「動物の詳細」ページの設定に移りましょう。シーンの構成はできているので,あとは表示オブジェクトの設定をするだけです。⁠動物の詳細」ページには共通の表示オブジェクトが5つと,各シーン毎に2つの表示オブジェクトが存在します。ボタンも含まれていますが,まずは表示を先に設定しましょう。

まずは「american」シーンを設定していきます。Flaファイルのシンボルの「home」フォルダから「gallery」フォルダにある「PhotoBG」⁠PhotoBase」⁠CloseButton」⁠BackButton」⁠NextButton」がシーン共通の表示オブジェクトになります。さらに「american」フォルダにある「AmericanPhoto」⁠AmericanText」「american」シーン固有の表示オブジェクトになります。始めにこれらのインスタンスを生成し,座標を設定します。

リスト10 表示オブジェクトの設定

// インスタンスを生成します。
var photoBG:PhotoBG = new PhotoBG();
photoBG.x = 0;
photoBG.y = 0;   
// インスタンスを生成します。
var photoBase:PhotoBase = new PhotoBase();
photoBase.x = 100;
photoBase.y = 20;
// インスタンスを生成します。
var closeButton:CloseButton = new CloseButton();
closeButton.x = 507;
closeButton.y = 30;
// インスタンスを生成します。
var backButton:BackButton = new BackButton();
backButton.x = 30;
backButton.y = 220;
// インスタンスを生成します。
var nextButton:NextButton = new NextButton();
nextButton.x = 570;
nextButton.y = 220;
// インスタンスを生成します。
var americanPhoto:AmericanPhoto = new AmericanPhoto();
americanPhoto.x = 120;
americanPhoto.y = 40;
// インスタンスを生成します。
var americanText:AmericanText = new AmericanText();
americanText.x = 119;
americanText.y = 354;

次に,イベントハンドラメソッド「onSceneLoad」を使用して,表示設定を行います。

リスト11 表示オブジェクトの表示設定

// americanシーンの表示オブジェクトの表示設定を行います。
american.onSceneLoad = function():void {
  this.addCommand(
    new AddChild( this.container , photoBG ),
    new AddChild( this.container , closeButton ),
    new AddChild( this.container , photoBase ),
    new AddChild( this.container , backButton ),
    new AddChild( this.container , nextButton ),
    new AddChild( this.container , americanPhoto ),
    new AddChild( this.container , americanText )
  );
}

続いて,⁠onSceneUnload」イベントハンドラメソッドを使用して,削除処理を設定します。

リスト12 表示オブジェクトの削除設定

// americanシーンの表示オブジェクトの削除設定を行います。
american.onSceneUnload = function():void {
  this.addCommand(
    new RemoveChild( this.container , photoBG ),
    new RemoveChild( this.container , closeButton ),
    new RemoveChild( this.container , photoBase ),
    new RemoveChild( this.container , backButton ),
    new RemoveChild( this.container , nextButton ),
    new RemoveChild( this.container , americanPhoto ),
    new RemoveChild( this.container , americanText )
  );
}

ここまで設定が完了したら,ムービーを書き出して確認してみましょう。⁠AmericanButton」を押すと,設定した表示オブジェクトが表示されるはずです。

図14 表示オブジェクト確認

図14 表示オブジェクト確認

表示オブジェクトの削除設定

表示オブジェクトの削除処理は設定しましたが,今の段階では上位のシーンに戻れません。⁠gallery」シーンに遷移するために,⁠CloseButton」を編集しましょう。⁠CloseButton」「galleryScene」に戻るためのボタンです。⁠CloseButton」シンボルのタイムライン上に「component」レイヤーを作成し,⁠RollOverButton」を設置し,コンポーネントインスペクタを開いて下さい。遷移先は「gallery」シーンですので,⁠scenePath」の値を[/index/gallery]と設定して下さい。

図15 シーンパスの設定

図15 シーンパスの設定

設定が完了したら,ムービーを書き出して確認してみましょう。⁠CloseButton」を押した際に「gallery」シーンに遷移するのがログで確認できます。

図16 ⁠CloseButton」の遷移確認

図16 「CloseButton」の遷移確認

著者プロフィール

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

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

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