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

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

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

表示オブジェクトのアニメーション設定

続いて,⁠gallery」シーンに遷移した際に表示される表示オブジェクトの設定を行いましょう。表示されるのはシンボルとして登録してある「GalleryPage」です。

簡単なアニメーションの設定を行いましょう。⁠AboutPage」の設定とほぼ同じです。シンボルの「GalleryPage」を選択してタイムライン 上に「component」レイヤーと「label」レイヤーを作成します。⁠component」レイヤーには「InOutMovie」コンポーネントを設置しします。⁠label」レイヤーには1フレーム目に「in⁠⁠,8フレーム目に「stop⁠⁠,15フレーム目に「out」と,ラベル名をそれぞれ設定しましょう。

図6 レイヤーの設定

図6 レイヤーの設定

次に,⁠galleryPage」レイヤーを選択して,8フレーム目と15フレーム目にキーフレームを挿入します。1フレーム 目で,画像のアルファ値を0に,座標を[x:0 , y:-20]に設定します。8フレーム目でアルファ値を100に,座標を[x:0 , y:0]に設定します。15フレームで画面から消しますので,再びアルファ値を0に,座標を[x:0 , y:-20]に設定します。そして,設定したフレーム間でクラシックトゥイーンを作成します。

図7 アニメーションの設定

図7 アニメーションの設定

表示設定

設定が完了したら,アクション内でインスタンスを生成後,座標を設定して表示設定を行いましょう。座標は[x:151 , y:114]です。

リスト5 ⁠GalleryPage」の作成

// galleryPageを作成します。
var galleryPage:GalleryPage = new GalleryPage();
galleryPage.x = 151;
galleryPage.y = 114;

次に,イベントハンドラメソッドを用いて表示の設定を行っていくのですが,⁠about」シーンでは「onSceneInit」「onSceneGoto」イベントハンドラメソッドを使用していました。⁠about」シーンからの遷移先はルートシーンか「gallery」シーンのみでしたが,⁠gallery」シーンからは下の階層の子シーンに遷移することがあります。子シーンに移動するたびにオブジェクトを表示したり削除する必要もないので,⁠galleryPage」「onSceneLoad」⁠onSceneUnload」イベントハンドラメソッドで設定を行いましょう。

リスト6 ⁠galleryPage」の表示設定

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

「gallery」シーンに遷移した際に「GalleryPage」が表示され,他のシーンに遷移すると「GalleryPage」が画面から消去するのが確認できます。

図8 ⁠GalleryPage」表示確認

図8 「GalleryPage」表示確認

ボタンの設定

「gallery」シーンでは3つのボタンを表示します。この3つのボタンはそれぞれ「american」⁠french」⁠mame」シーンに遷移するためのボタンになります。Flaファイルのシンボルにある「home」フォルダから「gallery」フォルダを開くと「AmericanButton」⁠FrenchButton」⁠MameButton」が定義されていますが,これからこの3つのシンボルにボタンの機能を設定し,⁠gallery」シーンで表示させましょう。ボタン機能の設定方法はこれまでと同じです。

AmericanButton

まず「AmericanButton」を選択してください。⁠component」レイヤーを作成し,⁠RollOverButton」コンポーネントを設置します。次にコンポーネントインスペクタから「scenePath」を設定します。このボタンを押した際の遷移先は「american」シーンなので,⁠scenePath」の値には[/index/gallery/american]と設定します。

図9 シーンパスの設定

図9 シーンパスの設定

ここでは,特にアニメーションやロールオーバーのアクションを設定しません。

FrenchButton

次に,⁠FrenchButton」を選択してください。⁠component」レイヤーを作成し,⁠RollOverButton」コンポーネントを 設置します。次にコンポーネントインスペクタから「scenePath」を設定します。このボタンを押した際の遷移先は「french」シーン なので,⁠scenePath」の値には[/index/gallery/french]と設定します。

図10 シーンパスの設定

図10 シーンパスの設定

MameButton

最後に「MameButton」を選択してください。⁠component」レイヤーを作成し, ⁠RollOverButton」コンポーネントを 設置します。次にコンポーネントインスペクタから「scenePath」を設定します。このボタンを押した際の遷移先は「mame」シーン なので,⁠scenePath」の値には[/index/gallery/mame]と設定します。

図11 シーンパスの設定

図11 シーンパスの設定

著者プロフィール

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

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

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