前回は，シーンの構成や外部リンクなどのサイトの一部を作成しました。後半となる今回でサイトを完成させます。

シーン「gallery」の作成

それでは，早速制作に移りましょう。まず，「⁠動物の写真一覧」ページにあたるシーンを作成します。前回作成した「about」シーンと全く同じ作成方法になります。シーンの名前は「gallery」とします。それでは，「⁠Progression シーンエディタ」を開いて設定していきましょう。

「gallery」へ遷移するためのボタンの作成

次に，「⁠gallery」シーンへ遷移するためのボタンを作成します。作り方は「HomeButton」や「AboutButton」と同じです。ライブラリに「GalleryButton」シンボルを作成し，[assets]→[home]にある「galleryButton.gr」をシンボル内に貼り付けます。

ほかのボタンを作成した時と同じように，「⁠component」レイヤーを作成し「RollOverButton」コンポーネントを設置するのですが，「⁠GalleryButton」インスタンスの「RollOverButton」コンポーネントの「scenePath」にはさきほど作成した「gallery」シーンを設定します。

続いてロールオーバー時の効果を設定します。これも前回と同じやり方です。「⁠effect」レイヤーと「label」レイヤーを作成し，トゥイーンを設定します。

作成したボタンを表示させてみましょう。メインのタイムライン上の「stage」レイヤーの1フレーム目に「GalleryButton」シンボルを貼り付けます。座標は[x:0 , y:284]です。

「gallery」で表示するキャストの設定

ここまでで，「⁠動物の写真一覧」ページへと遷移できるようになりました。ただし，現在は「動物の写真一覧」ページに遷移しても何も表示されませんので，表示されるキャストの設定を行いましょう。

「動物の写真一覧」ページのキャストは「GalleryPage」と「AmericanButton」「⁠FrenchButton」「⁠MameButton」の4つです。後者3つは，「⁠動物の詳細」ページに遷移するためのボタンです。

それぞれの座標は，「⁠GalleryPage」を[x:150 , y:115]，「⁠AmericanButton」を[x:150 , y:160]，「⁠FrenchButton」を[x:270 , y:160]，「⁠MameButton」を[x:390 , y:160]に設定し，「⁠Progression シーンエディタ」からキャストを作成しましょう。作成したら，シンボルを書き出してください。保存も忘れずに行いましょう。

書き出したシンボルに，[assets]→[home]→[gallery]内の画像を貼り付けましょう。「⁠GalleryPage」シンボルに「galleryPage.gr」を貼り付けます。

次にアニメーションの設定を行います。「⁠AboutPage」シンボルの設定の際に使用した「InOutMovie」コンポーネントを使いましょう。「⁠component」レイヤーを作成し，「⁠InOutMovie」コンポーネントを設置します。「⁠label」レイヤーも設置し，全レイヤーのフレームを15まで伸ばしたあと，「⁠label」レイヤーの1フレーム目に「in」⁠，6フレーム目に「stop」⁠，11フレーム目に「out」とラベルの名前を設定しましょう。「⁠galleryPage.gr」を設置したレイヤーの名前を「galleryPage」に変更しておきます。

「galleryPage」レイヤーの1フレーム目で，座標を[x:0 , y:-20]，アルファ値を0にします。次に6フレーム目でキーフレームを挿入し，座標を[x:0 , y:0]，アルファ値を100にします。続いて，11フレーム目でキーフレームを挿入し，座標を[x:0 , y:-20]，アルファ値を0に設定します。最後にフレーム間でクラシックトゥイーンを作成したら設定は完了です。

ムービーを書き出して確認してみましょう。