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

第4回 Flex SDK環境における,Progressionを使ったWebサイト構築

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

第4回目となる今回は番外編です。内容は,Flex SDKの導入からProgressionによるFlashサイトの構築を解説します。

現在,Progression自体はフリーのオープンソースですが,Adobe Flashは有料です。しかし,AdobeがFlashを構築する環境を無料で提供しています。それがFlex SDKです。ここでは,Flashを使用しないでサイトを構成する際の注意点なども踏まえて,制作を行っていきます。

サンプルサイトは,前回作成したサイトと同じものを使用します。Progressionの機能に関しての説明は,第2回第3回を参照してください。

FlashDevelop 導入

まずは制作を行う環境を導入していきます。主に,FlashDevelop※1上で設定を行います。

FlashDevelopは,フリー,そしてオープンソース(MIT license)のソースコードエディタです。機能が非常に充実しており,多くのFlasherから支持を受けています。とてもフリーのソフトとは思えない程優秀なエディタで,ActionScriptだけでなく,XMLやHTMLのコーディングにも非常に便利です。

FlashDevelopのサポートサイトとして,FlashDevelop.jpがあります。FlashDevelop.jpはユーザ有志によって管理,運営されており,FlashDevelopのインストール手順や使用方法などが紹介されています。FlashDevelopへのProgressionの導入手順も掲載されています。

今回,導入や設定手順は FlashDevelop.jpのページを,その都度参照します。FlashDevelopを導入されていない方は,FlashDevelop.jpを見てインストールを行ってください。

※1
今回は,FlashDevelopは日本語版を使用します。

Flex SDK 導入

FlashDevelopにFlex SDKを導入しましょう。手順はFlashDevelop.jpのインストール方法を参考してください。Flex SDKの設定途中の[Step.4]の中に,プレビューの設定がありますが,どちらの方法を選んでもらっても構いません。

Progression 導入

次に,FlashDevelop内でProgressionを利用できるように設定します。手順はProgression 用プロジェクトテンプレートを参考してください。ここでは,プロジェクトの作成まで行います。プロジェクト名は[Project_sdk]としましょう。

図1 プロジェクト作成

図1 プロジェクト作成

プロジェクト設定

プロジェクトを作成したら,その他の設定を行います。ツールバーの[プロジェクト]→[プロパティー]を選択してください。

図2 プロパティー選択

図2 プロパティー選択

表示されるプロパティー設定パネルから,[サイズ]を「640px × 480px」に変更します。

図3 プロパティー設定

図3 プロパティー設定

プロジェクト[Project_sdk]の設定は完了しました。このプロジェクトを作成した時,もう一つ[Preloader]というプロジェクトが作成されます。プロジェクトパネルから,プロジェクト[Preloader]をダブルクリックし,プロジェクトを変更します。プロジェクト[Preloader]も同様に,ツールバーからサイズを「640px × 480px」に変更します。設定が完了したら,プロジェクトを[Project_sdk]に戻します。

著者プロフィール

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

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

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

コメント

コメントの記入