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

第5回 タイムラインスタイル(1)

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

ボタンの設置とフレームの設定

これでボタンの設定が完了したので,これらをステージのタイムライン上の「stage」レイヤーの1フレーム目を選択し,そこにボタンを設置します。それぞれの座標は,⁠HomeButton」が[x:0,y:180], ⁠AboutButton」が[x:0,y:232] です。

図17 ボタンの設置

図17 ボタンの設置

現在の設定だと,フレーム内でループしている時に空白のフレームが存在してしまうので,アクションの中に「stop()」「nextFrame()」を入れましょう。⁠stop()」「manager」を宣言した行の後ろに,⁠nextFrame()」は最後に,それぞれ設定して下さい。

リスト5 stop()の設定

// Progression インスタンスを保持します。
var manager:Progression;

stop();

リスト6 nextFrame()の設定

// 最初のシーンに移動します。
manager.goto( manager.syncedSceneId );
    
nextFrame();

設定が完了したら,ムービーを書き出して確認しましょう。⁠AboutButton」ボタンを押すと「about」シーンに,⁠HomeButton」を押すとルートの「index」シーン遷移しているのがログで確認できます。

図18 ムービーの確認

図18 ムービーの確認

図19 ムービーの確認

図19 ログの確認

表示オブジェクトの設定

次に,⁠サイトについての説明」ページに遷移した際に表示されるオブジェクトを設定していきます。Flaファイルのシンボルの「home」フォルダの「about」フォルダの中にある「AboutPage」を開いてください。これが「サイトについての説明」ページに遷移した時に表示される画像です。この画像はスクリプトを用いて表示設定を行いますが,アニメーションの設定はタイムラインで行います。

表示される時は下方から,削除される時は下方に動くアニメーションを設定しましょう。新しいレイヤーを作成し,名前を「label」にします。プロパティから,1フレーム目に「in⁠⁠,8フレーム目に「stop⁠⁠,15フレーム目に「out」のラベルを設定してください。

図20 ラベルの作成

図20 ラベルの作成

InOutMovie コンポーネント

表示に関する設定を行うために,コンポーネントの「InOutMovie」使用します。タイムライン上に新しいレイヤーを作成し,レイヤー名を「component」に設定して下さい。作成したレイヤーを選択した状態で,⁠InOutMovie」をシンボル内に設置しましょう。

図21 InOutMovie コンポーネント設置

図21 InOutMovie コンポーネント設置

「aboutPage」レイヤーの1フレーム目で画像のアルファ値を0に,座標を[x:0 , y:20]に設定し,8フレーム目にキーフレームを挿入,画像のアルファ値を100に,座標を[x:0 , y:0]に設定します。最後に,15フレーム目でキーフレームを挿入し,画像のアルファ値を0に,座標を[x:0 , y:20]に設定します。

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

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

アニメーションの設定は以上で完了です。

イベントの設定

それでは,先ほど設定した表示オブジェクトを実際に表示する処理を設定しましょう。⁠シーン」では,移動したタイミングなどの状況に合わせて「イベント」が発生します。

Progressionではそれらを使用するために「イベントハンドラメソッド」が用意されています。ここでは代表的な4つの「イベント」と,⁠イベントハンドラメソッド」を紹介します。

  1. SceneEvent.SCENE_LOAD / onSceneLoad イベントハンドラメソッド
    このイベントは,シーン移動時に目的地がこのシーンオブジェクト自身もしくは子階層だった場合に,階層が変更された直後に送出されます。
  2. SceneEvent.SCENE_INIT / onSceneInit イベントハンドラメソッド
    このイベントは,このシーンオブジェクト自身が目的地だった場合に,到達した瞬間に送出されます。
  3. SceneEvent.SCENE_GOTO / onSceneGoto イベントハンドラメソッド
    このイベントは,このシーンオブジェクト自身が出発地だった場合に,移動を開始した瞬間に送出されます。
  4. SceneEvent.SCENE_UNLOAD / onSceneUnload イベントハンドラメソッド
    このイベントは,シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に,階層が変更される直前に送出されます。

「AboutPage」シンボルは,他シーンから「about」シーンに到着した時に表示し,⁠about」シーンから移動する際に画面から削除するので,扱うイベントハンドラメソッドは「onSceneInit」「onSceneGoto」の2つになります。

著者プロフィール

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

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

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