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

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

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

次に「AmericanButton」の設定を行います。⁠AmericanButton」シンボルを選択し,⁠americanButton.gr」を貼り付けます。

図11 キャストの設定

図11 キャストの設定

続いて,アニメーションの設定を行います。⁠AmericanButton」のタイムライン上に「component」レイヤーを作成し,そこへ「FadeEffect」コンポーネントを設置しましょう。

図12 ⁠FadeEffect」コンポーネントの設置

図12 「FadeEffect」コンポーネントの設置

「FadeEffect」コンポーネントは,キャストの表示や削除の際にフェードの効果を与えます。フェードの時間をコンポーネントインスペクタで設定できるので,今回は「duration」の値を0.5にします。

図13 ⁠duration」の設定

図13 「duration」の設定

「FrenchButton」「MameButton」も同様に設定しましょう。⁠FrenchButton」には「frenchButton.gr」⁠⁠MameButton」には「maemButton.gr」を設置します。

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

図14 実行確認

図14 実行確認

「動物の詳細」ページのシーンの作成

ここまでで,⁠動物の写真一覧」ページの設定がほぼ完了しました。次は「動物の詳細」ページの設定を行っていきます。

まず,シーンを作成するのですが,⁠動物の詳細」ページは3つありますので,⁠Progression シーンエディタ」で3つシーンを作成します。⁠動物の詳細」ページは「動物の写真一覧」ページの下層にあたるので,シーンの作成は「gallery」シーンで行ってください。また,3つのシーンに「american」⁠french」⁠mame」と名前を付けます。

図15 シーンの作成

図15 シーンの作成

ボタンの設定

先ほど作成した「AmericanButton」⁠FrenchButton」⁠MameButton」は,現在ボタンとしての機能を持ってはいないので,コンポーネントを設置してボタンの機能を持たせます。それぞれの「component」レイヤーに,⁠RollOverButton」コンポーネントを設置し,コンポーネントインスペクタから「scenePath」を設定します。

「AmericanButton」では,⁠/index/gallery/american」に設定します。

図16 ⁠scenePath」の設定(AmericanButton)

図16 「scenePath」の設定

同様に,⁠FrenchButton」には「/index/gallery/french」⁠⁠MameButton」では「/index/gallery/mame」と設定します。

図17 ⁠scenePath」の設定(FrenchButton)

図17 「scenePath」の設定

図18 ⁠scenePath」の設定(MameButton)

図18 

著者プロフィール

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

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

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

コメント

コメントの記入