プログラマのためのFlash遊び方

第1回無料でFlash作りに挑戦!Flex 3 SDKを導入してみよう

Flashを作るには何万円もする専用ソフトが必要…、デザイナーが使うものだから敷居が高い…。そう考えてる方も多いのではないでしょうか。実はそんなことはありません。

Adobe社が無料で提供している開発環境「Flex 3 SDK」を利用すれば、ActionScript 3.0というプログラミング言語でFlashを作成できます。ActionScript 3.0はECMAScriptに準拠しているため、プログラマの方にとってもなじみやすい言語といえます。

この連載ではプログラマの方に向けて、サンプルを交えながら、ActionScriptでFlashを作る手法を解説していきます。

ActionScript 3.0でHello World!

いきなりですが、ActionScript 3.0のサンプルコードを見てみましょう。定番のHello World!です。

package{
  import flash.display.*;
  import flash.text.*;

  public class HelloWorld extends Sprite{
    public function HelloWorld(){
      var tf:TextField = new TextField();
      tf.text = "Hello World!";
      addChild(tf);
    }
  }
}

このソースコードをコンパイルすると、画面に「Hello World!」と表示するFlashができあがります。コンパイル手順については後ほど詳しく解説しますが、ひとまずはソースコードをざっと見てみましょう。

classやpackageというキーワードがでてくるところからも分かるとおり、ActionScript 3.0はオブジェクト指向の言語です。Javaに似ていると思った人も多いのではないでしょうか。

本稿の最初でも触れましたが、ActionScript 3.0はECMAScriptに準拠しています。同じく、ECMAScriptに準拠した言語にJavaScriptがあります。しかし、このソースコードがJavaScriptに似ているようには見えません。

実は、ActionScript 3.0は、現在策定中のECMAScript4を先行実装しています。将来的にはJavaScriptでも、上のソースコードのように、クラスやパッケージを定義できるようになる予定になっています。

JavaScriptと似ているところ

それでは、Hello World!を少し書き換えてみましょう。

package{
  import flash.display.*;
  import flash.text.*;
  import flash.utils.setInterval;

  public class HelloWorld extends Sprite{
    public function HelloWorld(){
      var tf:TextField = new TextField();
      tf.text = "Hello World!";
      addChild(tf);

      var str:String = tf.text;
      var len:int = 0;

      setInterval(function():void{
        tf.text = str.substr(0, len);
        len = (len % str.length) + 1;
      }, 100);
    }
  }
}

このソースコードをコンパイルすると、⁠H」⁠He」⁠Hel」⁠Hell」⁠Hello」…の順に、1文字ずつ文字が増えていくアニメーションになります。

同じアニメーションをJavaScriptを使って再現してみます。

<body>
<div id="text">Hello World!</div>

<script>
var tf = document.getElementById("text");

var str = tf.innerText;
var len = 0;

setInterval(function(){
    tf.innerText = str.substr(0, len);
    len = (len % str.length) + 1;
}, 100);
</script>
</body>

いかがでしょう。setInterval()やsubstr()など、さきほどのActionScript 3.0のソースコードとほとんど同じですね。

このように、ActionScript 3.0とJavaScriptは、文法だけでなく、標準で利用できるクラスや関数も共通しています。もちろん、ActionScript 3.0独自のクラスも多数あるのですが、JavaScriptをご存知の方にとっては、非常にとっつきやすいと思います。

前置きが長くなりましたが、次のページからFlex 3 SDKを導入していきます。

開発環境の準備

Flex 3 SDKは次のOSに対応しています(参考:Adobe Flex 3:System requirements⁠。

  • Windows 2000、XPまたはServer 2003
  • Mac OS X 10.4.x
  • Redhat Enterprise Linux 3または4、Suse 10
  • Solaris 9、10

Flex 3 SDKのコンパイラはJavaで記述されているため、このように多くのOS上がサポートされています(対応OSにWindows Vistaがありませんが、筆者のWindows Vista環境では今のところ問題なく使えています⁠⁠。

また、HDDに空き容量は200MB程度必要です。メモリは512MB以上(1GBを推奨)となっています。

Java実行環境を導入

Java実行環境(JRE)は1.4.2以降のバージョンが必要です。

Sunのダウンロードページから現在のバージョンの確認や最新版のインストールしておいてください。

Flex 3 SDKをダウンロード

Flex 3 SDKは2008年2月末に公開されたばかりです。まだ、Adobeの日本語サイトからはダウンロードできないため、英語のページからダウンロードします。

ページの下の方に「I have read the Adobe Flex 3.0 SDK License...」というチェックボックスがあります。チェックボックスをクリックすると、ダウンロード用のリンクが登場します。リンクをクリックしてzipファイルをダウンロードしてください。

flex3ダウンロード

なお、ダウンロードすると、Adobe Flex 3.0 SDKのライセンスに同意したことになります。気になる人は目を通しておいてください。

Flex 3 SDKをインストール

Flex 3 SDKを展開するフォルダを作成します。Windowsの方はC:\flex、Mac OSの方は/Developer/SDKs/flexといった場所にするのが分かりやすいでしょう。

ダウンロードしたzipファイルをflexフォルダに展開します。先ほど作成したflexフォルダの中に、asdoc・bin・libなどのフォルダがあれば成功です。

パスを通す

Flex 3 SDKでのコンパイルはコマンドラインでの開発となります。そのため、コンパイラにパスを通しておくと、今後の作業が楽になります。他の言語のSDKを導入したことがある方にはおなじみの作業でしょう。

以下に代表的な環境での設定方法を書いています。

Windows XP

  1. システムのプロパティを開きます((エクスプローラの[マイコンピュータ]を右クリックして[プロパティ]をクリック⁠⁠。
  2. [詳細設定]タブを開き、[環境変数(N)]ボタンを押します。
  3. [システムのユーザー環境変数(S)]の中にPathという項目がある場合は[編集(E)]ボタンを押し、変数値の最後に「;C:\flex\bin」を追加します。Pathという項目がない場合は、[新規作成]ボタンを押し、変数名に「path⁠⁠、変数値に「c:\flex\bin」と入力します。

Mac OS

  1. テキストエディタでホームディレクトリの.profileを開きます。
  2. 最後の行に、export PATH=$PATH:/Developer/SDKs/flex/binと追加します。
  3. ファイルを保存して、テキストエディタを終了します。
  4. ターミナルにsource ~/.profile[Enter]と入力して、.profileの内容を反映します。

ここまででセットアップは完了です。

Flashファイル生成まであと一息です。

HelloWorld!をコンパイル

それでは、最初のページで紹介したHello World!のソースコードをコンパイルしてみましょう。

以下のソースコードをテキストエディタに入力し、HelloWorld.asというファイル名で保存してください。


package{
  import flash.display.*;
  import flash.text.*;

  public class HelloWorld extends Sprite{
    public function HelloWorld(){
      var tf:TextField = new TextField();
      tf.text = "Hello World!";
      addChild(tf);
    }
  }
}

Flex 3 SDKにはGUIの開発環境が付属しません。コンパイルは全てコマンドラインで行います。Windowsの方はコマンドプロンプトを、Mac OSの方はターミナルを起動してください。cdコマンドを利用して、HelloWorld.asが置いてあるフォルダまで移動しておきます。

コンパイラのコマンド名はmxmlcです。mxmlcのあとに、ソースコードのファイル名を入力して、エンターキーを押すとコンパイルが始まります。

mxmlc HelloWorld.as

コンパイルに成功すると、HelloWorld.asと同じフォルダに、HelloWorld.swfいうファイルが生成されます。

Loading configuration file C:\flex\frameworks\flex-config.xml
C:\sample\HelloWorld.swf (622 bytes)

「'mxmlc'は~認識されていません⁠⁠、⁠command not found」などと表示される場合には、Flex 3 SDK のbinフォルダにパスが通っていないようです。コンパイルエラーの場合には、エラーメッセージを参考にして、ソースコードの打ち間違いなどを確認してください。

Flashを表示してみよう

できあがったHelloWorld.swfを試すには、HelloWorld.swfをブラウザにドラッグアンドドロップしてみるのが簡単です。Flash Player 9以上がインストールされていれば、次のように表示されるはずです。

ブラウザプレビュー

このSWFファイルを自分のブログやホームページに貼り付ければ、Flashとして公開したことになるわけです。

ただし、Flex 3 SDKで作成したFlashを表示するには、Flash Player 9が必要です。Flash Player 9の普及率は95%を超えているため、通常はあまり気にする必要はないと思います参考資料⁠。

よりよい開発環境のために

以上で一通りの環境は整いましたが、残りのスペースを利用してお薦めの設定や環境をご紹介いたしましょう。

ドキュメントのダウンロード

Flex 3 SDK自体にはドキュメントが付属していません。以下の場所から参照できます。

頻繁に利用するのが、Adobe Flex 3リファレンスガイドというリファレンスです。ActionScript3.0やFlex3で利用できるクラスの情報が網羅されています。

ActionScript 3.0の使い方を基礎から学習する場合には、ActionScript 3.0のプログラミングも有用でしょう。

デバッグ版プレーヤー

Flash開発を行うにあたっては、デバッグ版のFlash Playerを導入しておくとよいでしょう。実行時の例外を検知できる、trace()関数でログ出力できる、などのメリットがあります。

デバッグ版プレーヤーのインストーラはFlex 3 SDKのruntimes/playerフォルダに入っています。Flash Playerがバージョンアップした際には、Adobe Flash Player Support Centerから最新のデバッグ版プレーヤーをダウンロードできます。

なお、trace()を有効にするためには、mm.cfgファイルを作成する必要があります。詳しい手順はデバッガ版のFlash Playerの構成をご覧ください。

コンパイルの高速化

mxmlcでのコンパイルは待ち時間が長いため、イライラする方も多いのではないでしょうか。Flex 3 SDKには、コンパイルを高速化するfcshという実行ファイル含まれています。fcshも有用なのですが、筆者はfcshを自動化するツールrascutの導入をお薦めします。

rascutは、ソースコードのタイムスタンプを監視しており、ファイルが書き換わった瞬間にfcshを利用して高速にコンパイルを行います。さらに、コンパイル完了後に、自動的にブラウザをリロードする機能もそなえているため、ソース修正から確認までがワンステップで実現できます。一度経験すると離れられなくなるぐらいに便利です。

紙面の都合上、導入手順は割愛しますが、詳しくは私のブログの記事ActionScriptやるなら入れとけ。rascut導入と使い方。を参照ください。

Flex Builder 3

GUIでの開発に慣れている方にはEclipseベースのFlex Builder 3がお薦めです。入力支援やデバッガ機能などがあるため、勉強し始めの初心者にとっても大きな味方になってくれることでしょう。

Flex Builder 3は有償ですが、期間限定の無料体験版もありますので、興味のある方は試してみてください。

Flex 3 SDKのオープンソース化

Flex 3 SDKの公開に伴い、Flex SDKの大部分がオープンソース化されました。コンパイラやデバッガのソースコードもMozilla Public Licenseの元で公開されています。興味のある方はAdobe Open Source 内のGet Source Code - Flex SDKからソースコードを入手してみてください。

次回予告

次回からはいよいよ実践編です。ActionScript 3.0を利用して、簡単な図形を描くところから始めていく予定です。

おすすめ記事

記事・ニュース一覧