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

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

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

ボタンの設定

次に,ページ間を遷移するためのボタンを作成します。⁠index.fla」のライブラリの中で新規に2つのシンボルを作成してください。それぞれの名前は「HomeButton」「AboutButton」です。

まずは,⁠HomeButton」から設定していきましょう。⁠HomeButton」シンボルを選択したら,[assets]→[home]にある「homeButton.gr」を貼り付けます。次にボタンの機能をつけるためコンポーネントを使用します。タイムラインに新規レイヤーを挿入し,名前を「component」に設定しましょう。

図16 ⁠component」レイヤーの挿入

図16 「component」レイヤーの挿入

コンポーネントは,あらかじめ決められた機能を持っているため,簡単な設定を行うだけで使用することができます。それでは,上部ツールバーの[ウィンドウ]→[コンポーネント]を選択してください。開かれたコンポーネント群から,⁠ProgressionButtons」にある「RollOverButton」コンポーネントを「component」レイヤーの1フレーム目に貼り付けます※1⁠。

※1
コンポーネントはシンボル内のどこに設置しても構いません。

図17 ⁠RollOverButton」コンポーネントの設置

図17 「RollOverButton」コンポーネントの設置

このボタンを押した時の遷移先を設定します。上部ツールバーから[ウィンドウ]→[コンポーネントインスペクタ]を開いてください。コンポーネントの設定はコンポーネントインスペクタで行います。⁠RollOverButton」コンポーネントを選択した状態でコンポーネントインスペクタを開くと,⁠scenePath」と表示されている部分がありますが,ここに設定した値がこのボタンを押した時の遷移先になります。現在設定するのは「トップ」ページに遷移する「HomeButton」なので,⁠scenePath」の値を「/index」と設定しましょう。

図18 ⁠scenePath」の設定

図18 「scenePath」の設定

続いて,ボタンにロールオーバー時の効果をつけましょう。まず効果となるシンボルを作成します。⁠index.fla」のライブラリに新たに「Effect」というシンボルを作成します。そのシンボルに[assets]→[home]内にある「effect.gr」を貼り付けます。

図19 ⁠Effect」シンボルの作成

図19 「Effect」シンボルの作成

その後,⁠HomeButton」のタイムラインに新しいレイヤーを挿入し名前を「effect」と設定します。もうひとつ「label」というレイヤーを作成します。さらにタイムライン上にあるレイヤーの15フレーム目に右クリックからフレームを挿入し,すべてのレイヤーを15フレームにします。

図20 タイムラインの設定

図20 タイムラインの設定

設定が完了したら「effect」レイヤーの1フレーム目に「Effect」シンボルを設置してください。座標は後ほど設定します。⁠label」レイヤーも設定を行います。8フレーム目に右クリックからキーフレームを挿入します。1フレーム目にプロパティから「up」と8フレーム目に「over」と,それぞれラベルの名前を設定しましょう。

図21 ⁠label」レイヤーの設定

図21 「label」レイヤーの設定

「effect」レイヤーの座標等の設定を行います。まず「effect」レイヤーの1フレーム目を選択し,⁠Effect」シンボルを選択した状態で,プロパティから座標を[x:-70 , y:0],アルファ値を0に設定します。

図22 ⁠effect」レイヤーの設定

図22 「effect」レイヤーの設定

次に「effect」レイヤーの8フレーム目を選択し,右クリックからキーフレームを挿入します。8フレーム目で「Effect」シンボルを選択した状態で座標を[x:0 , y:0],アルファ値を100に設定します。

図23 ⁠effect」レイヤーの設定

図23 「effect」レイヤーの設定

今設定を行った1フレームと8フレームの間でクラシックトゥイーンを作成します。

図24 ⁠effect」レイヤーの設定

図24 「effect」レイヤーの設定

これで「HomeButton」設定は完了です。⁠AboutButton」も同じように,シンボル内に「aboutButton.gr」「Effect」などを設定するのですが,⁠AboutButton」に設置する「RollOverButton」コンポーネントの「scenePath」の値は「/index/about」に設定します。

図25 ⁠AboutButton」の設定

図25 「AboutButton」の設定

著者プロフィール

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

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

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