2008年12月6日土曜日

ActionScriptでHello World!

Flex Builderを使って、flashのHello Worldアプリケーションを作ってみたい。Flex Builderを使っていても、Flexフレームワークを使わないピュアなActionScpriだけのアプリケーションが作れる。また、Flex Builderはデザイナーよりもデベロッパー向きなので、コードを書く場合、Flash CS3やCS4を使うよりも便利である。

雛形の作成

まずは、雛形の作成から。

  1. File/New/ActionScript Projectを実行する。

  2. Project Nameを入力する。以降、プロジェクト名にHelloWorldを入力したものとして説明を続ける。

  3. Nextを押して、Main source folderにsrcを入力。(必ずしもこれをする必要はない)

  4. Finishを押す。


HelloWorldプロジェクトが作成され、srcフォルダの下(上記3を実行していなければ、プロジェクトの直下)に、HelloWorld.asが作成されているはずである。この時点で、実行可能であるが、残念ながら、まだ"Hello World"は表示されない。

コンソールにHello World

コンソールに"Hello World"を出力してみる。

  1. HelloWorld.asを開き、コンストラクタ(7行目と8行目の間)に次の一行を入力する。

    trace("Hello World");



  2. HelloWorld.asの変更を保存する。


デバッガーを起動してみる。残念ながらまだ、ブラウザ内に"Hello World"は表示されない。Flex Builderに戻って、コンソールを確認すると、そこに"Hello World"が表示されているはずだ。ブラウザ内(flashアプリケーション内)に表示するまでには、もう一手間かかる。

ブラウザ内にHello World


いよいよブラウザ内に"Hello World"を表示してみよう。

  1. HelloWorld.asを開き、次の1行を3行目に追加する。

    import flash.text.TextField;


    これは、次のステップを上手くやれば自動的に挿入されるので、スキップしてもよい。

  2. 次にコンストラクタに、trace文の代わりに、次の3行を追加する。

    var text:TextField = new TextField();
    text.text = "Hello World";
    addChild(text);



  3. HelloWorld.asの変更を保存する。


ここで、デバッガーを起動すると、"Hello World"がflashアプリケーション内に表示されたのが確認できるはずだ。ブラウザの大きさを変えると、字の大きさも変わることが確認できる。これは、flashアプリケーションのサイズがブラウザにあわせて自動的変わっているためである。

アプリケーションの幅と高さ


アプリケーションの幅と高さを調整してみる。

  1. HelloWorld.asを開き、クラスの宣言の直前(4行目と5行目の間)に、次の1行を追加する。

    [SWF(width="100",height="100")]


  2. HelloWorld.asの変更を保存する。


ここで、デバッガーを起動すると、先ほどとは違う大きさで表示されたことが確認できるはずだ。追加したのは、SWF(スウィフ)メタデータタグと呼ばれるもので、flashアプリケーションの属性などを定義できるものだ。しかし、どういうわけかこれに関するオフィシャルな情報を見つけることはできなかった。SWFメタデータタグに関しては、改めて記事を投稿する予定である。今度は、ブラウザのサイズを変えても字の大きさは変わらない。これが本来(スケール1倍)の大きさである。

HelloWorld.asは最終的に、以下のようになったはず。

package {
  import flash.display.Sprite;
  import flash.text.TextField;

  [SWF(width="100",height="100")]
  public class HelloWorld extends Sprite {
    public function HelloWorld() {
      var text:TextField = new TextField();
      text.text = "Hello World";
      addChild(text);
    }
  }
}

0 件のコメント: