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

第7回 コンポーネントスタイル(1)

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

初期配置コンポーネント

「index.fla」を開いてください。ステージ上には,⁠EasyCastingLoader」「WebConfig」コンポーネントが設置されています。⁠WebConfig」コンポーネントは初期化を行うコンポーネントで,⁠EasyCastingLoader」コンポーネントは実行時にXMLファイルを読み込んで,Progressionインスタンスを作成してくれます。これら2つのコンポーネントに関しては特に設定は必要ありません。

図7 初期配置コンポーネント

図7 初期配置コンポーネント

背景画面の設定

まず,背景画面の設定を行いましょう。ライブラリの中に「HomeBG」という名前のシンボルを作成します。そのシンボルに[assets]フォルダの[home]にある,⁠homeBG.gr」グラフィックを貼り付けます。

図8 HomeBGシンボルの作成

図8 HomeBGシンボルの作成

「HomeBG」シンボルに貼り付けた「homeBG.gr」の座標を[x:0 , y:0]に設定します。これからシンボルに対してグラフィックを貼り付ける際は基本的に座標を[x:0 , y:0]にします。

作成した「HomeBG」シンボルをステージに設置しましょう。⁠Scene1」を選択し,タイムラインを表示してください。タイムライン上の「stage」レイヤーの下に「background」レイヤーを挿入します。

図9 レイヤーの挿入

図9 レイヤーの挿入

レイヤーを挿入したら,1フレーム目を選択し,そこに「HomeBG」シンボルを設置しましょう。座標は[x:0 , y:0]です。

図10 シンボルの設置

図10 シンボルの設置

設置が完了したら,ムービーを書き出して確認してみましょう。設置したシンボルが表示されます。

図11 実行確認

図11 実行確認

Progression シーンエディタ

続いて,サイトの構成を担う「シーン」を作成していきます(シーンはURLのようなものだと考えてください⁠⁠。⁠シーン」を作成するために,⁠Progressionシーンエディタ」を使用します。画面上部にあるツールバーの[ウィンドウ]→[その他のパネル]→[Progression シーンエディタ] をクリックします。

図12 Progressionシーンエディタ

図12 Progressionシーンエディタ

シーンの作成

「Progressionシーンエディタ」を開いたら,早速シーンを作成しましょう。⁠index」と書かれた項目があるはずです。これがルートのシーンで,⁠トップ」ページにあたるシーンになりますので,このルートシーンの下にシーンを作成していきましょう。

「index」と書かれた横のシンボルをクリックすると,⁠シーンを挿入する」という選択肢が表示されるので,それを選択してください。

図13 シーンの作成

図13 シーンの作成

新規作成されたシーンに「about」と名前を付けてください。この「about」シーンが「サイトについての説明」ページにあたるシーンになります。

図14 シーンの名前設定

図14 シーンの名前設定

これで,⁠トップ」ページと「サイトについての説明」ページの枠が完成しました。⁠Progressionシーンエディタ」のファイルから「名前を付けて保存」を選択し,⁠easycasting.xml」と名前を付けて[Project_gihyo_comp]→[bin-debug]内に保存しましょう。上書き保存で構いません。

図15 ⁠easycasting.xml」の保存

図15 「easycasting.xml」の保存

今後「Progressionシーンエディタ」を使用して,何かしらの変更があった場合は保存を毎回行いましょう。

著者プロフィール

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

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

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