無料でFlashの制作環境を構築 FlashDevelopとFlex SDKのインストール

2009年07月14日 (火)

FlashDevelopのインストールチュートリアル

FlashDevelop(フラッシュ・デベロップ)というActionScriptのエディターが非常に優秀で、これとAdobeがオープンソースで提供しているFlex SDKがあれば、お手軽かつ無料でFlashを作ることができます。

FlashDevelopはソフトの軽さと強力なコードヒント機能によってプロのFlasherから熱烈な支持を受けているエディターです。まずはコードヒント機能がどのくらい優れているか分かる90秒のライブコーディングビデオを用意しました。

FlashDevelop Code Hint Movie from clockmaker on Vimeo.

コードの補間によってキータイプの量を劇的に減らせ、自動的に整形されるため見通しの良いコードが仕上がるのがおわかりになるかと思います。

では、そんな便利で高機能なFlashDevelopのインストール方法を紹介します。できる限りステップを短くしたので、全ステップでおおよそ15分程度だと思います。

まずはチュートリアルビデオで

ビデオは8分間でインストールからサンプルのパブリッシュまで一連の流れを紹介しています。文章にて下記で説明しますが、ビデオがあればその通りすればできるのでお急ぎの方は参考ください。

Tutorial of Install FlashDevelop with Flex SDK from clockmaker on Vimeo.

以下、文章で詳しく説明していきます。

【Step.1】まずは必要なものを先にインストールしておく

FlashDevelopを動作させるために必要な「Java」と「.net Framawork」をインストールしておきます。これがなくてもFlashDevelopは一応起動しますが、一部機能が動作しないことがあるので必ず入れておきましょう。

なお、.NET Frameworkは2.0で動作しますが3.5を入れても特に問題はありません。

※チュートリアルビデオはStep.1完了後から始めてます。

【Step.2】FlashDevelopのダウンロードとインストール

090714_02

次はFlashDevelopをダウンロードしましょう。次のリンクから[Release→Flash Develop 3.x.x(一番上のリンク)→ページ下にあるDownload FlashDevelop 3.x.xをクリック]とページを進み、インストーラーをダウンロードします。

FlashDevelop.org :: Index

ダウンロードしたインストーラーをダブルクリックして、インストールを進めます。インストールは[Next>]をクリックし続けて完了させます。

【Step.3】Flex SDK 3のダウンロード

090714_03

次はFlex SDK 3のダウンロードです。

Download Flex 3 – Flex SDK – Confluence

上記ページの[Latest Milestone Release Builds]の[Adobe Flex SDK]をダウンロードします。保存先はCドライブの直下に[flex_sdk_3]というフォルダを作成してそこに入れています。つまり絶対パスは[C:flex_sdk_3]となります。

（画像をクリックで拡大表示）

【Step.4】FlashDevelopを起動して諸設定を行う

ここまで正常にインストールが完了すれば、デスクトップにFlashDevelopのアイコンがあるので、それをダブルクリックして起動します。

FlashDevelopのインストールチュートリアル

起動後は初期設定を全てやってしまいましょう。

メニューバーから[Tools→Program Settings...]を選択
ダイアログを開いたら、左のメニューから[AS3Context]を選択
右パネルの[Flex SDK Location]に、Step3でダウンロードしたFlex SDKのパスを設定。手順通りであれば「C:¥flex_sdk_3」と入力
[Default Flash Version]で「10」に設定

（画像をクリックで拡大表示）

次にプレビューの設定を行います。

左のメニューから[FlashViewer]を選択
右のパネルの[Movie Display Style]で「Popup」を選択

（画像をクリックで拡大表示）

以上で設定完了です。

【Step.5】試しにサンプルを作成してみる

スタートアップ画面の[New Project...]でプロジェクト作成ダイアログを開きましょう。

（画像をクリックで拡大表示）

ダイアログは次のように入力します。

[Installed Template]から[AS3 Project]を選択
[Name] に「Main」
[Location]に任意のフォルダ(デスクトップ等)
[package]は空のまま
[Create directory for project]のチェックボックスを選択
[OK]をクリック

（画像をクリックで拡大表示）

プロジェクトが作成され、右側のツリーに表示されますので[src→Main.as]をダブルクリックしてASファイルを開きます。

（画像をクリックで拡大表示）

そのメインクラス内にスクリプトでも書いておきましょう。次のコードをコピペします。

package {
	import flash.display.Sprite;
	public class Main extends Sprite {
		public function Main():void {
			var sp:Sprite = new Sprite();
			sp.graphics.beginFill(0xFF0000);
			sp.graphics.drawCircle(100, 100, 100);
			addChild(sp);
		}
	}
}

そして画面右上の三角マークを押してコンパイルします。数秒後、画面にFlashが再生されればOKです。

素敵なAS3デモの宝庫であるwonderflのコードを利用するなら

なお、ビデオチュートリアルではwonderflのコードを試してますが、一般的にwonderflで外部ライブラリを使っていないコードであればコピペして動きます。

コピペして動かしてみたい方にお勧めのコードはこちらです。

HANABI（初級者がコードに注釈をつけてみた）

Arrows Flow Simulation

また、wonderflの中にはFlash Player 10用の機能を使っている物があるので、そのコードを試したい場合は、Projectパネルのプロジェクトを右クリックで[Properties...]を選択し、[Target]のプルダウンを「Flash Player 10」にすればコンパイルが通ります。

（画像をクリックで拡大表示）

※コピペする場合はクラス名がクラスファイル名と一致する必要があるので、クラス名を「Main」と名付けている場合は、コード内のクラス名とコンストラクタ名を「Main」に変更ください。

FlashDevelopでFlash CS4は…

FlashDevelopでFlash制作環境導入の敷居は低くなりますが、動きを作ったり、がっつりしたものを作ろうとしたら、用途に応じてFlash CS4かFlex Builder 3も利用・併用したほうが良いと思います。

FlashDevelopとFlash CS4

よく利用されているのは Flash CS4 で素材やアニメーション・レイアウトを作り、 FlashDevelop でコードを書くという方法です(実案件では一番効率的)。FlashDevelopはFlash CS4の心強いサポーターとなりますので、Windowsユーザーならインストールしておくとよいでしょう。(上の画像はMacでFlashDevelopを動かしている画面。わりと皆やってます。)

なお、trick7さんがスクリーンキャストを紹介されてますので、こちらも参考ください。