ボタンの設定

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

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

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

※1

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

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

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

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

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

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

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

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

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