ボタンの設置

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

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

キャストの設定

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

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

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

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

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

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

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

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

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

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

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

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