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

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

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

3.表示オブジェクトの設定1

次に,何も表示されていない「GalleryScene」シーンにオブジェクトを表示させます。⁠GalleryScene」クラスを開き,⁠GalleryPage」※1の型で変数「gallerytPage」を宣言してください。続けて,コンストラクタ内でインスタンスを生成し,座標を設定します。イベント「atSceneLoad」内の「addCommand()」メソッドで「AddChild」コマンドを使用し,画面に表示させます。⁠AboutScene」シーンの時と同様に,⁠DoTweener」コマンドを使用します。複数のコマンドを設定する際は,間にカンマ(,)を入れてください。また,⁠GalleryScene」シーンから他のシーンに遷移した際は,⁠GalleryPage」インスタンスを表示リストから削除するので,⁠asSceneUnload」イベント内に削除処理を設定します。

※1
サンプルファイルのflaファイルにシンボルとして登録済みです。

リスト4 GalleryPageの設定

public class GalleryScene extends SceneObject { 
  public var galleryPage:GalleryPage; 
  public function GalleryScene( name:String = null, initObject:Object = null ) { 
    super( name, initObject ); 
    title = "title"; 
    // インスタンスを生成します。
    galleryPage = new GalleryPage(); 
    // 座標を設定します。
    galleryPage.x = 151; 
    galleryPage.y = 113; 
  } 
  override protected function atSceneLoad():void {
  	// インスタンスのアルファ値を設定します。 
    galleryPage.alpha = 0; 
    // addCommandに画像の表示とアニメーションの設定を登録します。
    addCommand( 
      new AddChild( container , galleryPage ), 
      new DoTweener( galleryPage , { alpha:1 , time:.2 } ) 
    ); 
  } 
  override protected function atSceneUnload():void {
  	// addCommandに画像の削除とアニメーションの設定を登録します。
    addCommand(
      new DoTweener( galleryPage , { alpha:0 , time:.2 } ),
      new RemoveChild( container , galleryPage )
    );
  }

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

図5 GalleryPageインスタンスの表示

図5 GalleryPageインスタンスの表示

「GalleryButton」ボタンを押し,⁠GalleryScene」シーンに遷移すると,⁠GalleryPage」インスタンスが表示されます。

4.子シーンの作成

続いて,⁠GalleryScene」シーンの下の階層に付くシーンを作成します。サンプルサイトでは,まだ設置していませんが,⁠動物の写真一覧のペー ジ」にある動物の写真をクリックすると「動物の詳細ページ」に遷移するようにします。その遷移先のシーンを先に作成していきます。

作成するシーンは3つです。全て同じ手順になります。[template]→[MySceneObject.as]を[src]→[scenes]へ3つコピーしてください。コピーしたファイル名,クラス名,コンストラクタ名をそれぞれ,⁠AmericanScene」⁠FrenchScene」⁠MameScene」※2に修正してください。その際,パッケージ名を「scenes」に修正してください。

※2
それぞれのシーンの名称は,表示させる動物の名前から命名したものです。

図6 シーンの作成

図6 シーンの作成

作成したシーンを,親シーンに繋げます。⁠IndexScene」シーンに「GalleryScene」シーンを繋げる方法と同じです。親シーンとなる「GalleryScene」クラスを開いてください。それぞれの子シーンのインスタンスを生成して「name」を設定し,⁠addScene()」メソッドで繋げます。

リスト5 子シーンを繋げる

public class GalleryScene extends SceneObject { 
  public var american:AmericanScene; 
  public var french:FrenchScene; 
  public var mame:MameScene; 
  public function GalleryScene( name:String = null, initObject:Object = null ) { 
  	// それぞれインスタンスを生成し、名前を設定します。
    american = new AmericanScene(); 
    american.name = "american"; 
    // GallerySceneに子シーンを追加します。
    addScene( american ); 
    
    french = new FrenchScene(); 
    french.name = "french"; 
    addScene( french ); 
    
    mame = new MameScene(); 
    mame.name = "mame"; 
    addScene( mame ); 
  } 

これで,子シーン「AmericanScene」⁠FrenchScene」⁠MameScene」を親シーンに繋げました。

著者プロフィール

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

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

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