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

第7回 コンポーネントスタイル(1)

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

ボタンの設置

ここまでで,ボタンの作成が完了しました。次に作成したボタンをステージに設置しましょう。メインのタイムライン上にある「stage」レイヤーの1フレーム目を選択し,そこに「HomeButton」⁠AboutButton」のシンボルを設置してください。⁠HomeButton」シンボルの座標は[x:0 , y:180],⁠AboutButton」シンボルの座標は[x:0 , y:232]です。

図26 ボタンの設置

図26 ボタンの設置

ここまで設定が完了したら,ムービーを書き出してみましょう。設置したボタンが表示されているのが確認できます。

図27 実行確認

図27 実行確認

キャストの設定

今は「AboutButton」を押しても何も変化がありません。実際には「about」シーンに遷移しているのですが,⁠about」シーン内で何も表示設定をしていないため,見た目上での変化がありません。ですので次は「about」シーンで表示するキャストを設定していきます。キャストとは表示オブジェクトのようなものです。

キャストの定義も「Progressionシーンエディタ」を使用します。⁠Progressionシーンエディタ」「about」を選択して「キャストを挿入」をクリックします。新しく作成されたキャストに「AboutPage」と名前を付けましょう。座標は[x:150 , y:115]です。

図28 キャストの作成

図28 キャストの作成

設定が完了したら,⁠Progressionシーンエディタ」のツールから「シンボルを書き出す」を選択します。ライブラリに新しくシンボルが作成されます。⁠easycasting.xml」の保存も忘れず行いましょう。

図29 シンボルの書き出し

図29 シンボルの書き出し

ライブラリ内に書き出されたシンボルを選択し,[assets]→[home]→[about]内の「aboutPage.gr」を貼り付けてください。

次に「AboutPage」にアニメーションを設定していきます。⁠AboutPage」シンボルのタイムライン上に,⁠component」「label」レイヤーを新たに挿入します。⁠aboutPage.gr」を貼り付けてあるレイヤーにも「aboutPage」と名前を付けましょう。そして,すべてのレイヤーの15フレーム目にフレームを挿入します。⁠component」レイヤーの1フレーム目には「コンポーネント」から「InOutMovie」コンポーネントを設置します。⁠InOutMovie」コンポーネントは,表示と削除時のアニメーション等の設定時に使用するコンポーネントです。

図30 ⁠InOutMovie」コンポーネントの設置

図30 「InOutMovie」コンポーネントの設置

「label」の6フレーム目と11フレーム目にキーフレームを挿入し,1フレーム目に「in⁠⁠,6フレーム目に「stop⁠⁠,11フレーム目に「out」とそれぞれラベルの名前を設定します。

図31 ラベルの設定

図31 ラベルの設定

それでは,⁠AboutPage」シンボルのアニメーションを設定しましょう。⁠aboutPage」レイヤーの1フレーム目を選択して,⁠aboutPage.gr」を選択したら座標を[x:0 , y:20],アルファ値を0に設定します。

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

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

次に6フレーム目を選択してキーフレームを挿入後,座標を[x:0 , y:0],アルファ値を100に設定します。

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

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

続いて11フレームを選択しキーフレームを挿入後,座標を[x:0 , y:20],アルファ値を0に設定します。最後に「aboutPage」レイヤーのキーフレーム間でそれぞれクラシックトゥイーンを作成します。

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

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

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

図35 実行確認

図35 実行確認

「AboutButton」ボタンを押すと,⁠AboutPage」シンボルが表示され,⁠HomeButton」ボタンを押すと表示が消えるのが確認できます。

これで「トップ」ページと「サイトについての説明」ページは完成です。

著者プロフィール

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

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

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