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

第2回  フルパフォーマンス!クラススタイル(1)

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

前回はProgressionのインストールをおこないました。今回からは,実際にWebサイトを制作していきましょう。サンプルを用いながら説明していきます。

最初の制作スタイルとして「クラススタイル」を取り上げます。なお,⁠クラススタイル」については今回と次回の2回に分けて紹介します。前半の今回は,Progressionからプロジェクトを作成し,第2階層の一部分までの2ページ分を制作してみます※1)⁠

※1
筆者の制作環境は,Adobe Flash CS4です。また,クラススタイルの制作はFlashDevelopの使用を前提として進めますが,FlashDevelopは必須ではありません。他のエディタや,Flash単体での作業も可能です。

プロジェクト作成

それでは,実際にプロジェクトを作成して開発の初期設定を行っていきましょう。

1.Progressionプロジェクト起動

Adobe Flashを起動します。画面上部にあるツールバーの[ウィンドウ]→[その他のパネル]→[Progression プロジェクト] をクリックしてください。

図1 Progressionプロジェクトを起動

図1 Progressionプロジェクトを起動

2.プロジェクトパネル

Progressionプロジェクトを起動させると,プロジェクトパネルが表示されます。ここで,プロジェクトの作成や管理,各種設定を行っていきます。

まずは,プロジェクトパネルの左上部にある,[新規作成] をクリックしてください。

図2 プロジェクトパネル

図2 プロジェクトパネル

プロジェクトの[新規作成] をクリックすると,作成するプロジェクトの初期設定を決定する画面が表示されます。

3.プロジェクト基本設定

プロジェクトの基本事項を設定していきます。[プロジェクト名]は任意で構いません。今回は「Project_gihyo」としておきます。[書き出し先]の設定も任意の場所で構いません。

続いて,制作スタイルを選択します。[種類] をデフォルトの「コンポーネント」から「クラス」へ変更してください。

今回はWebサイトを制作しますので,[プレイヤー] の項目は「Flash Player 10」を選択しましょう(⁠Flash Player 9」を選択しても構いません)⁠

[環境設定] はデフォルトの「Webコンテンツ」のままで問題ありません。選択してみれば分かるように,Progressionは様々な制作のコンテンツやスタイルに対応できるようになっています。

図3 プロジェクトの基本設定

図3 プロジェクトの基本設定

4.プロジェクトその他の設定

基本設定が完了したら,設定画面の上部にある[Action Script] のタブを選択してください。そして,選択した[Action Script] の画面の下部の[その他の設定] の中にある,⁠FlashDevelopに対応させる」にチェックを入れてください。

以上で設定は完了です。今回,上記以外の設定は全てデフォルトのままで問題ありません。

設定が完了したら,環境設定画面の右下部にある「作成する」ボタンをクリックしてください。

図4 プロジェクトを作成する

図4 プロジェクトを作成する

5.プロジェクトのテスト

プロジェクトのテストとプロジェクトを作成すると,プロジェクトパネルが以下のように表示されます。プロジェクトパネルにプロジェクト[Project_gihyo]の主要なファイルが表示されます。今後プロジェクトの管理はプロジェクトパネルでも行えるようになります。

では,作成したプロジェクト[Project_gihyo]が問題無いかテストしてみましょう。プロジェクトパネルの[プロジェクトをテスト]ボタンをクリックしてください。FlashのログにProgression関連のログが出れば成功です。

図5 プロジェクトソース一覧

図5 プロジェクトソース一覧

著者プロフィール

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

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

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

コメント

  • Re: CS3用のサンプル

    ご指摘いただきまして,ありがとうございます。

    大変申し訳ございませんが,
    CS3用のファイルを以下として,再アップしましたので,
    ご確認いただければ幸いです。

    http://gihyo.jp/assets/files/design/serial/01/progression4/0002/src_2_cs3r2.zip

    それでは,今後ともよろしくお願いいたします。

    Commented : #5  gihyo.jp編集部 (2010/07/15, 12:10)

  • CS3サンプルが開けれませんでした。

    親切に説明してあっただけに残念です。

    Commented : #4  サンプル (2010/07/11, 00:38)

  • CS3用ファイル

    CS3用ファイルの中のindex.flaが開けません。
    予期せぬファイルとはねられます。

    Commented : #3  なんだかなあ。。 (2010/07/09, 11:55)

  • CS3用のサンプル

    CS3用のサンプルを用意していただきました。
    2ページ目の本文リンク,または以下からダウンロードください。

    http://gihyo.jp/assets/files/design/serial/01/progression4/0002/src_2_cs3.zip

    それでは,今後ともよろしくお願いいたします。

    Commented : #2  gihyo.jp編集部 (2010/05/17, 22:08)

  • Re:

    サンプルがCS3で開けなくて残念です

    Commented : #1  Prog (2010/05/14, 15:58)

コメントの記入