Hello World を Flex 3 + rascut でやってみた。

ActionScript

ということで一つ前のエントリーでFlex 3 sdkとrascutがインストールできたので恒例のはろーわーるどしてみます。
windowsもMacも基本は同じなので作業ディレクトリだけ以下の前提条件でいきます。空のディレクトリを作成してください。

ASファイルの作成

HelloWorld.asというテキストファイルを作成してください。ファイル名はclass名と対応するようなので必ずこの名前で。
そんでもってエディターで以下の内容を保存。文字コードはutf-8(BOMなし)がいいでしょう。

package {
  import flash.display.*;	
  import flash.text.*;
  
  public class HelloWorld extends Sprite {	//HelloWorldクラスの定義 ファイル名と同じにすること
    public function HelloWorld() {		//()演算子がないのに即実行されるのはそういうもの？
      var text:TextField = new TextField();	//TextField型？のtext変数を生成
      text.text="Hello World!!";		//文字列挿入
      stage.addChild(text);			//textの表示
    }
  }
}

さっそくコンパイル

ということでまずはcdします。
Windows

d:
cd doc\flex_test\

Mac osX

cd ~/Documents/flex_test/

そしてrascut経由でコンパイル。

rascut HelloWorld.as -s

初回のコンパイルは少し時間がかかりますがrascutを起動しているあいだは次回以降コンパイルが劇的に早くなります。-sはなくてもいいですがあると幸せになれます。ふふふ。
コンパイルが終了すれば同階層にHelloWorld.swfができてるはず！！ターミナルorコマンドプロンプトはそのまま。

修正

そして修正。このときにさきほどまでのターミナルorコマンドプロンプトをそのままにしていれば（rascutを起動したままにしていれば）HelloWorld.asを保存するたびにrascutのバッチ処理で自動的にコンパイルしなおしてくれます。試しに文字列を"Hello World!! Hello Flex 3!!!!"に修正。

package {
  import flash.display.*;	
  import flash.text.*;
  
  public class HelloWorld extends Sprite {
    public function HelloWorld() {
      var text:TextField = new TextField();
      text.text="Hello World!! Hello Flex 3!!!!";  //文字列変更
      stage.addChild(text);
    }
  }
}

asファイルを保存しなおすだけでコンパイルしなおしてくれてるはず！！でもなんか文字列が切れてますね。（ブラウザ画面の大きさによっては切れてないかも）

-s の正体

で、ここでrascut HelloWorld.as -sの-sオプションの説明。
コンソール画面を見てれば気づいてると思いますが（windows XP以上ならFWが騒いでるか。。。）、http://localhost:3001/ を開いてみてください。おそらくswfが全画面で表示されているかと。
そう、-sはserverを起動するってことだったのです。しかもこの画面、コンパイルしなおすごとにリロードしてくれるのです。ということはasを編集して保存すると。。。

  1. ファイルの更新を検知
  2. 自動でコンパイル
  3. ブラウザがAjaxで更新を検知
  4. リロード

すげー！Flash8とかよりべんり！！
ということで、HelloWorld.swfの文字が切れてたのを修正してみる。せっかくなのでブラウザでhttp://localhost:3001/ を開いてね。

package {
  import flash.display.*;	
  import flash.text.*;
  
  public class HelloWorld extends Sprite {
    public function HelloWorld() {
      var text:TextField = new TextField();
      text.text="Hello World!! Hello Flex 3!!!!";
      text.width=500;				  //textの横幅を広げる
      stage.addChild(text);			  //↑デフォルトの値？を上書き
    }
  }
}

いじょー。textにバックグラウンドカラーをひいたり場所を移動したりするだけでレイアウトっぽいこともできますよ。

参考リンク

あとで書く