「動物の詳細」ページで表示するキャストの設定

ここまでで，サイトの構成は完成しました。最後に，「⁠動物の詳細」ページで表示するキャストの設定を行います。

「動物の詳細」ページでは，キャストが重複するところがあるので，それぞれ名前に番号を割り振りましょう。まず「american」シーンのキャストの設定からです。「⁠Progression シーンエディタ」を開いてください。キャストを7つ挿入します。名前は「PhotoBG1」「⁠PhotoBase1」「⁠CloseButton1」「⁠BackButton1」「⁠NextButton1」「⁠AmericanPhoto」「⁠AmericanText」です。

次にそれぞれの座標とインデックスを設定します。インデックスは数が大きいほど上位に表示されます。それぞれの座標とインデックスは以下のとおりです。

「PhotoBG1」 [x:0 , y:0] [index:1]
「PhotoBase1」[x:100 , y:20] [index:3]
「CloseButton1」[x:507 , y:30] [index:2]
「BackButton1」[x:30 , y:220] [index:4]
「NextButton1」[x:570 , y:220] [index:4]
「AmericanPhoto」[x:120 , y:40] [index:4]
「AmericanText」[x:120 , y:354] [index:4]

他の2つのシーンでも同様の設定を行います。最後に数字が振られている「PhotoBG」などは末尾に重複しない数字を付けます。座標とインデックスは全く同じです。「⁠AmericanPhoto」「⁠AmericanText」があるように，「⁠french」「⁠mame」シーンにも固有のキャストがあります。それぞれ「FrenchPhoto」「⁠FrenchText」と「MamePhoto」「⁠MameText」です。「⁠Progression シーンエディタ」から設定を行いましょう。

設定が完了したらファイルを保存し，シンボルを書き出しましょう。

シンボルをそれぞれ定義していきます。番号が振られている「PhotoBG1」や「PhotoBG2」などは，[assets]→[home]→[gallery]内にある番号無しの同名グラフィックをシンボル内に貼り付けていきます。「⁠PhotoBG1」や「PhotoBG2」には「photoBG.gr」を貼り付けます。「⁠AmericanPhoto」や「FrenchText」など，シーン固有のものは，[assets]→[home]→[gallery]→[シーン名]のフォルダ内に同名のグラフィックがあるので，それを貼り付けてください。

「american」「⁠french」「⁠mame」シーン，それぞれの7つのシンボルを定義したら，ムービーを書き出して確認しましょう。

次にボタンの設定を行いましょう。「⁠動物の詳細」ページには「動物の写真一覧」ページに遷移する「CloseButton」と，次の「動物の詳細」ページに遷移する「NextButton」と，前の「動物の詳細」ページに遷移する「BackButton」の3つのボタンがあります。

まずは「CloseButton」の設定から行います。タイムライン上に「component」レイヤーを作成し，「⁠RollOverButton」コンポーネントを設置して下さい。コンポーネントインスペクタから，「⁠scenePath」の値を「/index/gallery」に設定します。

この設定を，「⁠CloseButton1」「⁠CloseButton2」「⁠CloseButton3」の3つに行ってください。

続いて，「⁠BackButton」の設定を行いましょう。「⁠component」レイヤーを作成して，「⁠RollOverButton」コンポーネントを設置するところまでは同じ方法です。肝心の「scenePath」の値なのですが，一つ前のシーンに遷移すればいいので，「⁠BackButton1」では「/index/gallery/mame⁠」⁠，「⁠BackButton2」では「/index/gallery/american⁠」⁠，「⁠BackButton3」では「/index/gallery/french」と設定します。

次は「NextButton」の設定です。「⁠BackButton」とほぼ同じ設定を行うのですが，違うのは「BackButton」の反対のシーンを「scenePath」に設定することだけです。「⁠NextButton1」の「scenePath」には「/index/gallery/french⁠」⁠，「⁠NextButton2」では「/index/gallery/mame⁠」⁠，「⁠NextButton3」では「/index/gallery/american」と設定します。

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

「BackButton」と「NextButton」が機能しているのが確認できます。