FlashDevelop は Flash/ActionScript 用の Windows 向け開発環境(IDE)。
.NET で開発されていてオープンソース。

Flex SDK 2.0.1 と Flex Compiler Shell と組み合わせることでフリーの ActionScript 3.0 開発環境を構築可能。

Flex 2 SDK のインストール

Adobe - Adobe Flex 2: Flex 2 SDK から Adobe Flex SDK 2.0.1 をダウンロードして解凍して、今回は C:\flex_sdk_2 に設置。
参考: Adobe Flex 2 のインストールと Hello World

Flex Compiler Shell (fcsh) のインストール

Flex Compiler Shell - Adobe Labs から flex_compiler_shell_012307.zip をダウンロードして解凍。

中身はこんな感じ。


C:\flex_compiler_shell_012307>tree /F
フォルダ パスの一覧
ボリューム シリアル番号は 00543210 CAFE:BABE です
C:.
│  FlexCompilerShell-license.txt
│
├─bin
│      fcsh
│      fcsh.exe
│
└─lib
        fcsh.jar

bin と lib 以下のファイルをそれぞれ C:\flex_sdk_2 の bin と lib 以下にコピーする。

FlashDevelop のインストール

FlashDevelop.org が FlashDevelop のトップページ。
現時点での最新バージョンは FlashDevelop 3.0.0 Beta4.
FlashDevelop.org :: View topic - FlashDevelop 3.0.0 Beta4 released から FlashDevelop-3.0.0-Beta4.exe をダウンロードする。

Important notice:

* Settings and plugins are now installed in the user's applications files: <userdir>\Local Settings\Application Data\FlashDevelop
You can navigate to this location from the main menu: Tools > Application Files)
* The Flex SDK (2 or 3) is required for Actionscript 3 development (if you don't use Flash CS3).
* Java 1.6+ is required for the Flex compiler (Actionscript 3).

FlashDevelop.org :: View topic - FlashDevelop 3.0.0 Beta4 released

# Java 1.6 が必要らしい…… が、自分の環境ではJDK1.4でも動作しているような気が。
# JAVA_HOME を見ているのか PATH を見ているのか、それとも何か設定があるのか……

FlashDevelop-3.0.0-Beta4.exe を実行してインストール。
今回は C:\FlashDevelop にインストールする。

[select the type of install] で Default を選択。
「Registry Modifications」にチェックが入っているけど意味はよくわからない。

FlashDevelop で使う ActionScript コンパイラの設定

FlashDevelop を起動。

メニューバー -> [Tools] -> [Program Settings] にて、
[Plugins] -> [AS3Context] -> [AS3] -> [Flex 2 SDK Location] に Flex 2 SDK のパスを設定。今回は C:\flex_sdk_2 となる。

FlashDevelop 日本語環境の設定

FlashDevelop のコードエディタはそのままでは日本語を表示してくれないので、一度 FlashDevelop を終了させて日本語の設定をする。

C:\FlashDevelop\FirstRun\Settings\ScintillaNET.xml 内の <value name="default-font">Courier New</value> を <value name="default-font">ＭＳ ゴシック</value> へ変更。

FlashDevelop を起動。

メニューバー -> [Tools] -> [Program Settings] にて、
[Main] -> [FlashDevelop] -> [その他] -> [Default CodePage] にて、EightBits から UTF8に変更。

サンプル的なプログラムをいくつか作ってみる

メニューバー -> [Project] -> [New Project]
Installed Templates で ActionScript3 - Default Project を選択。
Test という名前(Name)でプロジェクトを作成。

右の[Project]ペインにある Test -> classes -> Main.as をダブルクリックするとエディタが開く。

Main.as の [File] -> [Encoding] で UTF-8 を選択する。
# 日本語環境の設定をしたにもかかわらず、最初から存在する Main.as だけはエンコーディングが自動で UTF-8にならない。

Main.as をエディタで編集。
とりあえず、Hello, world してみる。


package
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    
    public class Main extends flash.display.Sprite
    {
        public function Main():void
        {
            var textField:TextField=new TextField();
            textField.text="hello, world. こんにちは世界。";
            textField.autoSize=TextFieldAutoSize.LEFT;
            addChild(textField);
        }
    }
}

ギアと赤い何かのマークの [Build Current File] アイコンをクリックしてビルド＆実行。

FlashDevelop

Adobe Flash Player 9 が起動して「hello, world. こんにちは世界。」と表示される。

FlashDevelop

次に新しいクラスを作る。
右にある Project ペインの classes ディレクトリにて右クリック -> [Add] -> [New Class] にて新しく NewClass.as を作成。
Embed で埋め込む image.jpg をプロジェクトの classes ディレクトリに置いておく。


package
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
 
    public class NewClass extends flash.display.Sprite
    {
        
        [Embed(source='image.jpg')]
        private var Sample:Class;
        
        public function NewClass():void
        {
            addChild(new Sample());
        }
    }
}

NewClass.as をエディタで表示した状態で、[Build Current File] アイコンをクリックしてビルド＆実行。
Adobe Flash Player 9 が起動して画像が表示される。

FlashDevelop

次は、動的にファイルを読み込む例。
右にある Project ペインの classes ディレクトリにて右クリック -> [Add] -> [New Class] にて新しく TextLoader.as を作成。
プロジェクトディレクトリにテキストファイル hoge.txt を UTF-8 で作成して、中身になんらかの文章を書いておく。


package 
{
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.text.*;
    
    public class TextLoader extends Sprite
    {
        private var loader:URLLoader;
        private var label:TextField;
 
        public function TextLoader()
        {
            label = new TextField();
            label.autoSize = TextFieldAutoSize.LEFT;
            label.text = "";
            addChild(label);
 
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE, onComplete);
            loader.load(new URLRequest("hoge.txt"));
        }
 
        private function onComplete(event:Event):void
        {
            label.text = loader.data;
        }
    }
}

もしも、「SecurityError: ローカルリソース hoge.txt にアクセスできません。ローカルファイルシステムの SWF および信頼されているローカル SWF ファイルのみがローカルリソースにアクセスできます。」みたいなエラーが出た場合は Flash/Flex SDK で信頼できるローカルSWF を設定する。

実行時のスクリーンショット。

FlashDevelop

次は、パッケージを使う例。
まず、外部ライブラリである Tweener のソースコードを classes 以下に設置。
先ほどの TextLoader.as に 外部ライブラリの Tweener を使うコードを追加。


package 
{
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.text.*;
    import caurina.transitions.Tweener;
    
    public class TextLoader extends Sprite {
        
        private var loader:URLLoader;
        private var label:TextField;
 
        public function TextLoader() {
 
            label = new TextField();
            label.autoSize = TextFieldAutoSize.LEFT;
            label.text = "";
            addChild(label);
 
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE, onComplete);
            loader.load(new URLRequest("hoge.txt"));
        }
 
        private function onComplete(event:Event):void {
            label.text = loader.data;
            Tweener.addTween(label, {x:200, time:1.0, transition:"easeoutbounce"});
        }
    }
}

実行時のスクリーンショット。

FlashDevelop

参考URL

tags: zlashdot Flash Flash FlashDevelop Flex

Posted by NI-Lab. (@nilab)