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

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

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

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

シーン「gallery」の作成

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

図1 ⁠gallery」シーンの作成

図1 「gallery」シーンの作成

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

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

図2 ⁠GalleryButton」の作成

図2 

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

図3 ⁠scenePath」の設定

図3 「scenePath」の設定

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

図4 ロールオーバーの設定

図4 ロールオーバーの設定

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

図5 ボタンの設置

図5 ボタンの設置

「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 シーンエディタ」からキャストを作成しましょう。作成したら,シンボルを書き出してください。保存も忘れずに行いましょう。

図6 キャストの作成

図6 キャストの作成

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

図7 キャストの設定

図7 キャストの設定

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

図8 ⁠GalleryPage」の設定

図8 「GalleryPage」の設定

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

図9 ⁠GalleryPage」の設定

図9 「GalleryPage」の設定

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

図10 実行確認

図10 実行確認

著者プロフィール

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

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

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

コメント

コメントの記入