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

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

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

ボタン作成

次は,それぞれのページを行き来するための「ボタン」を設置していきましょう。まずは「ボタン」の設定からです。

Flaファイルのシンボル内の「home」フォルダの中に,⁠HomeButton」シンボルと「AboutButton」シンボルがあります。

「HomeButton」を押した時は「トップ」ページに,⁠AboutButton」を押した時は「サイトについての説明」ページに遷移するように設定します。⁠ボタン」の機能を持たせるために「コンポーネント」を使用し、遷移先の設定には「コンポーネントインスペクタ」を使用します。⁠コンポーネントインスペクタ」「コンポーネント」のパラメータ等を設定することが可能です。

ツールバーの[ウィンドウ]→[コンポーネント]と[コンポーネントインスペクタ]を開いてください。

図8 コンポーネント

図8 コンポーネント

RollOverButton コンポーネント

「HomeButton」「AboutButton」のシンボルに,⁠RollOverButton」コンポーネントを追加します。この「RollOverButton」コンポーネントは,シンボルに対してボタンとしての機能を与えます。名前の通りマウスアクションによるエフェクトを設定することも可能です。

「HomeButton」シンボルのタイムライン上に新しいレイヤーを作成します。レイヤーのプロパティからレイヤーの名前を「component」に設定してください。そのレイヤーを選択している状態で,⁠RollOverButton」コンポーネントをシンボル内に設置します。

図9 コンポーネント設置

図9 コンポーネント設置

次にボタンの設定を行いますので,コンポーネントインスペクタを開いて下さい。

コンポーネントインスペクタのパラメータを選択してください。そこに,⁠scenePath」という欄があります。ここに設定した値が,このボタンを押した際の遷移先になります。⁠HomeButton」を押した際は「トップ」ページに遷移させたいので,⁠scenePath」の値を,[/index]と設定します。⁠index」はルートシーンにあたります。

図10 シーンパスの設定(1)

シーンパスの設定(1)

次に「AboutButton」の設定を行います。⁠HomeButton」と同じようにレイヤーにコンポーネントを配置したら,⁠RollOverButton」コンポーネントを選択してコンポーネントインスペクタを開きます。⁠AboutButton」を押した際の遷移先は「サイトについての説明」ページなので,⁠scenePath」の値は[/index/about]と設定します。

図11 シーンパスの設定(2)

図11 シーンパスの設定(2)

ロールオーバーの設定

最後に,マウスのエフェクトを設定しましょう。⁠HomeButton」シンボルのタイムライン上に「label」という名前のレイヤーを作成してください。そのレイヤーの1フレーム目を選択した状態で,プロパティのラベルの名前を「up」に設定します。次に,8フレーム目を選択し,ラベルを「over」と設定してください。

図12 ラベルの作成

図12 ラベルの作成

エフェクトの画像を表示するために,もう1つ新しいレイヤーを作成します。レイヤーのプロパティから名前を「effect」に設定してください。⁠effect」レイヤーは「label」レイヤーの下に配置します。作成したレイヤーを選択した状態で,シンボルの「home」フォルダの中にある「Effect」シンボルを画面に配置しましょう。

図13 エフェクトの追加

図13 エフェクトの追加

「Effect」レイヤーの1フレーム目で,アルファ値を0に設定し,座標を[x:-70 , y:0]に設定します。

図14 フレームの設定(1)

図14 フレームの設定(1)

8フレーム目にキーフレームを挿入し,⁠Effect」のアルファ値を100に設定し,座標を[x:0 , y:0]に設定します。

図15 フレームの設定(2)

図15 フレームの設定(3)

フレーム間でクラシックトゥイーンを作成すれば完了です。マウスがシンボルにオーバーしている時は,ラベルの「up⁠⁠→⁠over」間のアニメーションが,アウトした時は「over⁠⁠→⁠up」間のアニメーションが表示されます。

「AboutButton」シンボルも同じように設定してください。

図16 クラシックトゥイーンの作成

クラシックトゥイーンの作成

著者プロフィール

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

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

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