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

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

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

ボタンの設定

今は,⁠american」⁠french」⁠mame」シーン間で遷移ができません。⁠動物の詳細」ページではスライドショーのようにお互いのシーンが行き来できるような構成になります。シーン間を遷移するために「BackButton」「NextButton」の設定を行いましょう。

まず,⁠BackButton」シンボルを選択してください。⁠component」レイヤーを作成し,⁠RollOverButton」を設置します。これまではコンポーネントインスペクタで「scenePath」を設定してきましたが,⁠BackButton」「NextButton」「scenePath」は常に一定ではありません。例えば「american」シーンでの「BackButton」の遷移先は「mame」シーンですが,⁠mame」シーンでの「BackButton」の遷移先は「french」シーンとなります。ですので,コンポーネントインスペクタでは設定を行わず,スクリプトを用いて設定を行いましょう。

「scenePath」は,⁠RollOverButton」コンポーネントが持つプロパティなので,スクリプトで設定する場合にインスタンスにアクセスする必要がありますので,あらかじめ「RollOverButton」のインスタンス名を設定しておきましょう。

「RollOverButton」コンポーネントを選択して,プロパティからインスタンス名を「back」としておきましょう。

図19 ⁠BackButton」の設定>

図19 「BackButton」の設定

次に「NextButton」シンボルを開いてください。こちらの同じように「component」レイヤーを作成し,⁠RollOverButton」コンポーネントを設置します。プロパティからインスタンス名を「next」に設定します。

図20 ⁠NextButton」の設定

図20 「NextButton」の設定

設定が完了したら,アクションの設定を行っていきましょう。

「BackButton」「NextButton」「scenePath」の値が変更するのは,⁠american」⁠french」⁠mame」シーンに遷移したときなので,それぞれのシーンの「onSceneLoad」イベントハンドラメソッド内で「scenePath」の設定を行います。

まず,⁠american」シーンから設定していきます。⁠american」シーンでの「BackButton」を押した際の遷移先は「mame」シーンですので,⁠scenePath」には[/index/gallery/mame]と設定します。⁠NextButton」の遷移先は「french」シーンなので「scenePath」に[/index/gallery/french]と設定します。

リスト17 ⁠scenePath」の設定

// americanシーンの表示オブジェクトの表示設定を行います。
american.onSceneLoad = function():void {
  // scenePath の設定を行います。
  backButton.back.scenePath = "/index/gallery/mame";
  nextButton.next.scenePath = "/index/gallery/french";
  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 )
  );
}

続いて「french」シーンでの設定を行います。⁠BackButton」の遷移先は「american」シーンに,⁠NextButton」の遷移先は「mame」シーンに設定します。

リスト18 ⁠scenePath」の設定

// frenchシーンの表示オブジェクトの表示設定を行います。
french.onSceneLoad = function():void {
  // scenePath の設定を行います。
  backButton.back.scenePath = "/index/gallery/american";
  nextButton.next.scenePath = "/index/gallery/mame";
  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 , frenchPhoto ),
    new AddChild( this.container , frenchText )
  );
}

最後に,⁠mame」シーンでの設定を行います。⁠BackButton」の遷移先は「french」シーンに,⁠NextButton」の遷移先は「american」シーンに設定します。

リスト19 ⁠scenePath」の設定

// mameシーンの表示オブジェクトの表示設定を行います。
mame.onSceneLoad = function():void {
  // scenePath の設定を行います。
  backButton.back.scenePath = "/index/gallery/french";
  nextButton.next.scenePath = "/index/gallery/american";
  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 , mamePhoto ),
    new AddChild( this.container , mameText )
  );
}

設定が完了したら,ムービーを書き出して確認しましょう。それぞれのシーンで「BackButton」⁠NextButton」を押した際に対応したシーンに遷移しているのが確認できます。

図21 シーン遷移の確認

図21 シーン遷移の確認

著者プロフィール

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

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

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