Flash画面遷移フレームワーク「Progression 4」公式ガイド 第8回 コンポーネントスタイル(2) Twitterリスト 2010年7月26日 青木健至 この記事を読むのに必要な時間:およそ 5 分 1 2 3 4 次に「AmericanButton」の設定を行います。「AmericanButton」シンボルを選択し,「americanButton.gr」を貼り付けます。 図11 キャストの設定 続いて,アニメーションの設定を行います。「AmericanButton」のタイムライン上に「component」レイヤーを作成し,そこへ「FadeEffect」コンポーネントを設置しましょう。 図12 「FadeEffect」コンポーネントの設置 「FadeEffect」コンポーネントは,キャストの表示や削除の際にフェードの効果を与えます。フェードの時間をコンポーネントインスペクタで設定できるので,今回は「duration」の値を0.5にします。 図13 「duration」の設定 「FrenchButton」と「MameButton」も同様に設定しましょう。「FrenchButton」には「frenchButton.gr」,「MameButton」には「maemButton.gr」を設置します。 設定が完了したら,ムービーを書き出して確認してみましょう。 図14 実行確認 「動物の詳細」ページのシーンの作成 ここまでで,「動物の写真一覧」ページの設定がほぼ完了しました。次は「動物の詳細」ページの設定を行っていきます。 まず,シーンを作成するのですが,「動物の詳細」ページは3つありますので,「Progression シーンエディタ」で3つシーンを作成します。「動物の詳細」ページは「動物の写真一覧」ページの下層にあたるので,シーンの作成は「gallery」シーンで行ってください。また,3つのシーンに「american」「french」「mame」と名前を付けます。 図15 シーンの作成 ボタンの設定 先ほど作成した「AmericanButton」「FrenchButton」「MameButton」は,現在ボタンとしての機能を持ってはいないので,コンポーネントを設置してボタンの機能を持たせます。それぞれの「component」レイヤーに,「RollOverButton」コンポーネントを設置し,コンポーネントインスペクタから「scenePath」を設定します。 「AmericanButton」では,「/index/gallery/american」に設定します。 図16 「scenePath」の設定(AmericanButton) 同様に,「FrenchButton」には「/index/gallery/french」,「MameButton」では「/index/gallery/mame」と設定します。 図17 「scenePath」の設定(FrenchButton) 図18 「scenePath」の設定(MameButton) 1 2 3 4 著者プロフィール 青木健至(あおきたけし) 株式会社CLOQUE. 所属。Flash歴半年。Progression歴半年。Progression無しでのFlash制作は不可。2009年にFlashの技術を会得するために上京し,Progressionプロダクトマネージャーの阿部氏に師事。日々精進中。 Twitter:http://twitter.com/ichikaku1 URL:株式会社CLOQUE バックナンバー Flash画面遷移フレームワーク「Progression 4」公式ガイド 第8回 コンポーネントスタイル(2) 第7回 コンポーネントスタイル(1) 第6回 タイムラインスタイル(2) 第5回 タイムラインスタイル(1) 第4回 Flex SDK環境における,Progressionを使ったWebサイト構築 第3回 フルパフォーマンス!クラススタイル(2) 第2回 フルパフォーマンス!クラススタイル(1) 第1回 はじめよう!Progression