Flashのフレームワーク「Progression3」を始めてみよう!

第1回 Progression3に触れてみよう

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

制作環境を構築する

それでは,Progressionを利用したFlashコンテンツを制作するための環境を整えていきましょう※4⁠。

図2 ダウンロード用リンクボタン

図2 ダウンロード用リンクボタン

Progression.jpのトップページ右側にある,ダウンロード用リンクボタンより,Flash用標準パッケージをダウンロードしてください。ダウンロードしたファイルを解凍すると,Progression3-ja.mxpという拡張機能ファイルができますので,Adobe Extension Managerを利用し,Adobe Flashの拡張機能としてインストールします。

インストールが失敗したり,なんらかの理由によりmxpパッケージが利用できない場合は,jsflパッケージでインストールを行う方法も用意されています。

※4
Progressionのインストール方法は,Progression.jpのドキュメントに詳しく載っていますので,あわせて参照してみてください。

高機能なProgressionプロジェクトパネル

インストールが終了したら,早速Progressionを使って制作を開始してみましょう。

Adobe Flashを起動します。ここで,Progressionのプロジェクトパネルを開くために,いったん空のFlashファイル制作します。メニューバーのウィンドウ→⁠他のパネル⁠⁠→⁠Progressionプロジェクト]を選択してください。

Progressionプロジェクトパネルが開くはずです(拡張機能により,Progressionシーンエディタというパネルも追加されますが,今回は使用しません⁠⁠。

図3 Progressionプロジェクトパネルを開く

図3 Progressionプロジェクトパネルを開く

新しいProgressionプロジェクトを作成するたびに,このプロジェクトパネルを操作することになります。

図4 Progressionプロジェクトパネル

図4 Progressionプロジェクトパネル

このプロジェクトパネルを利用して,次の操作を行うことができます。

  • プロジェクトの名前の入力
  • 開発スタイルの決定(コンポーネント,タイムライン,クラス)
  • AIRプロジェクトかどうかの設定
  • コンテンツの幅,高さ
  • HTMLでの表示位置,背景色
  • フレームレート
  • ウィンドウモードの設定
  • スクリプトアクセスの可否設定
  • フルスクリーンの可否
  • パッケージ,メインクラス,ローダークラスの名前
  • FlashDevelopプロジェクトファイル作成の可否
  • GoogleAnalyticsに関する設定

これらが現時点で提供されている機能です。すべて,Progressionが最初に自動で生成するHTMLやプロジェクトファイルに関連する項目が並んでいます。プロジェクトパネルの項目を適切に設定することで,Webでの公開に必要なHTMLファイルを全く触ることなく,コンテンツの公開が可能となります。

実際にパブリッシュしてみよう

実際のサンプル制作は次回から行いますが,早速パブリッシュしてみましょう。

次のように設定してください。

  • プロジェクト名:gihyo_Progression_sample1
  • 種類:クラス
  • 幅:800
  • 高さ:600
  • HTMLで中央表示にチェックを入れる

図5 Progressionプロジェクトパネルで設定する

図5 Progressionプロジェクトパネルで設定する

その他は最初に入力された項目のまま,⁠新しく作成する」ボタンを押してくさい。すると,プロジェクトフォルダを作成する場所を選択する状態になりますので,任意の場所を指定します。これで,Progressionの初期ファイルが生成されます。

少々時間はかかりますが,ファイル生成後,すぐに制作を開始するか否かのダイアログが出ますので,⁠開始」を選択します。すると,生成されたIndex.fla,Index.asが開きます。

これらをパブリッシュしてみましょう。Progressionのプロジェクトパネルに,⁠パブリッシュ」というボタンがあります。こちらを押下することにより,現在Flashで開いているflaファイルと同階層にあるflaファイルを一度にコンパイルすることができます。

パブリッシュされたファイルを動かしてみましょう。Index.flaでムービープレビューをしてみてください。真っ白なswfファイルが再生されたと思います。その再生されたswfファイルの上で右クリックしてみてください。この状態で既にProgressionの機能を有していることが分かります。

図6 Progressionの機能を有していることが分かる

図6 Progressionの機能を有していることが分かる

これで準備ができました。

著者プロフィール

楢山哲弘(ならやまのりひろ)

3年前に上京してきた北海道出身のFlasher。

開発スピードを上げるため,Progressionに傾倒中。そのため,ブログではProgressionについての言及が多くなっている。

URLhttp://narayama.heteml.jp/