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

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

この記事を読むのに必要な時間:およそ 4 分

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を導入していきます。

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/

コメント

コメントの記入