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

第8回 コンポーネントスタイル(2)

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

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

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

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

図19 キャストの設定

図19 キャストの設定

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

「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]

図20 ⁠american」シーンのキャストの設定

図20 「american」シーンのキャストの設定

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

図21 ⁠french」シーンのキャスト設定

図21 「french」シーンのキャスト設定

図22 ⁠mame」シーンのキャスト設定`

図22 「mame」シーンのキャスト設定`

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

図23 シンボルの書き出し

図23 シンボルの書き出し

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

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

図24 実行確認

図24 実行確認

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

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

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

図25 ⁠CloseButton」の設定

図25 「CloseButton」の設定

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

図26 ⁠BackButton1」の設定

図26 「BackButton1」の設定

図27 ⁠BackButton2」の設定

図27 「BackButton2」の設定

図28 ⁠BackButton3」の設定

図28 「BackButton3」の設定

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

図29 ⁠NextButton1」の設定

図29 「NextButton1」の設定

図30 ⁠NextButton2」の設定

図30 「NextButton2」の設定

図31 ⁠NextButton3」の設定

図31 「NextButton3」の設定

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

図32 実行確認

図32 実行確認

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

著者プロフィール

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

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

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