ActionScript3を始めてみた

ActionScript Flex Flash

数日前にWonderflというのが登場したんだけど、これはすごい。ブラウザ上でコードを書くと、リアルタイムにWonderflのサーバサイドでコンパイルしてすぐ横でFlashとして実行される。しかもそのままコードとFlashは公開されて、他の人に見てもらえる。もちろん自分も他人のコードも見る事ができるし、そのコードをいじってしまうこと(Fork)もできる。

つまり、ブラウザだけでActionScript3の開発ができちゃう。勉強や腕試しにも向いてる。

さっそく登録した(ログイン自体はOpenIDやはてなIDなどの認証を使う)。自分のアカウントは以下。

各自のページがRSSを配信しているあたり、とってもすばらしいなあ。

codepad

ちなみに、codepadというのがあって、CやPerlやRubyやSchemeなど(他にもたくさん)の言語をやはりブラウザ上で入力して実行結果を得られる。ざっくりとはこれに似てるかな。

ローカルでもActionScript3を書きたい

さて、Wonderflで遊んでたら急にActionScript3に興味が出てきたので、ローカルでも開発できるように準備する。

まず上記でFlex 3 SDKをダウンロードする。zipを解凍して、適当なところに置いて、中のbinディレクトリにPATHを通す。

あとFlex 3 SDKはJavaで作られているのでJavaの実行環境が必要なんだそうだ。Macに入ってた1.5では動いたよ。

これでもうコードがコンパイルできる。ActionScriptを書いてasファイルとして保存して、

$ mxmlc hoge.as

みたいにすると、hoge.swfが生成される。終わり。簡単。

ライブラリを入れる

Wonderflで使えるライブラリはhelpに書いてあったので、同じものをローカル環境にも入れた。

swcで配布されているものはそのままどっかに置けばいいけど、asファイルで配布されているものは、自分でswcを作った。

$ compc -include-sources (asが入ったディレクトリ) -output hogehoge.swc

こんな感じで作れる。

swcを適当なところに置いて、今後コンパイルするときに、mxmlcに「-library-path=(swcを置いた場所)」というオプションを追加すれば良いっぽい。

とりあえず Hello World

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

    public class HelloWorld extends Sprite{
        public function HelloWorld(){
            var t:TextField = new TextField();
            t.text = 'Hello, World!';
            this.addChild(t);
        }
    }
}

TextFieldをnewしてaddChildしているだけ。

Tweenerを使ってみる

package{
    import flash.display.*;
    import caurina.transitions.Tweener;

    public class HelloTweener extends Sprite{
        public function HelloTweener(){
            var s:Sprite = new Sprite();
            s.graphics.lineStyle(1, 0xff0000);
            s.graphics.beginFill(0xff0000);
            s.graphics.drawCircle(0, 0, 10);
            s.graphics.endFill();
            this.addChild(s);
            Tweener.addTween(s, {
                x: 400,
                y: 400,
                width: 100,
                height: 100,
                time: 2,
                transition: 'easeOutExpo'
            });
        }
    }

Spriteをnewして円を描いてaddChild。次に、それに対してTweenerでaddTweenして動きを付けている。

FizzBuzz

あとはFizzBuzzくらいやっとくか。

シンプル
package{
    import flash.display.*;
    import flash.text.*;

    public class FizzBuzz extends Sprite{
        public function FizzBuzz():void{
            var r:Array = [];
            for(var i:Number = 1; i <= 500; i++){
                var out:String = '';
                if(i % 3 == 0) out += 'Fizz';
                if(i % 5 == 0) out += 'Buzz';
                if(out.length == 0) out += i.toString();
                r.push(out);
            }

            var t:TextField = new TextField();
            t.text = r.join(', ');
            t.autoSize = TextFieldAutoSize.LEFT;
            t.wordWrap = true;
            t.width = 450;
            this.addChild(t);
        }
    }
}

非常にシンプル。

マウスクリックに反応する版
package{
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    import caurina.transitions.Tweener;

    public class FizzBuzz2 extends Sprite{
        public function FizzBuzz2():void{
            Number.prototype.toFizzBuzz = function():String{
                var out:String = '';
                if(this % 3 == 0) out += 'Fizz';
                if(this % 5 == 0) out += 'Buzz';
                if(out.length == 0) out = this.toString();
                return out;
            };

            var stage:Sprite = this;

            var num:Number = 1;
            var b:Button = new Button('next');
            b.addEventListener(MouseEvent.MOUSE_DOWN, function(e:Event):void{
                var t:TextField = new TextField();
                t.text = Object(num).toFizzBuzz();
                t.autoSize = TextFieldAutoSize.LEFT;
                t.selectable = false;
                t.x = Math.random() * 400;
                t.y = -20;
                stage.addChild(t);
                Tweener.addTween(t, {
                    x: 20 + (Math.floor((num - 1) / 20) * 50),
                    y: 30 + ((num - 1) % 20 * t.height),
                    time: 1,
                    transition: 'easeOutExpo'
                });
                num++;
            });
            stage.addChild(b);
        }
    }
}

import flash.display.*;
import flash.text.*;

class Button extends Sprite{
    public function Button(text:String):void{
        this.graphics.lineStyle(1, 0xa0a0a0);
        this.graphics.beginFill(0xc0c0c0);
        this.graphics.drawRect(0, 0, 50, 20);
        this.graphics.endFill();
        var t:TextField = new TextField();
        t.text = text;
        t.autoSize = TextFieldAutoSize.LEFT;
        t.selectable = false;
        t.x = this.width / 2 - t.width / 2;
        t.y = this.height / 2 - t.height / 2;
        this.addChild(t);
    }
}

ボタン(のように見える部分)をクリックすると次に進むFizzBuzz。別クラスはpackageの外に定義しないとダメ(別ファイルにすればいいんだけど、Wonderflは1ファイルで全部書かなきゃいけないっぽいので)。

せっかくなのでTweenerで動きを付けたら、いかにもFlashのサンプルっぽい感じになった。

AIRもできるかな

ここ最近、html+js+cssによるAIRアプリを作ってたんだけど、せっかくas3を覚えるならこっちでAIRやりたいね。ライブラリをうまく使えば、Flash持ってなくてもコードだけで動きのあるAIRアプリを作ることもできそうだ。

Frocessingやろうとしたら、あまりの無知さに撃沈したので逝ってくる。

FlashDevelop

どうやらこういう開発ではFlashDevelopを使うのがいいらしいんだけど、.NETアプリのため、Macでは動かない。

じゃあMacの人は代わりに何を使ってるのかなーと思って調べたら、どうやらみんなVMware FusionやParallels経由でがんばってFlashDevelopを使ってるらしい。。。そんなにまで使いたくなるほど良いのかFlashDevelopは。

勉強するか

as3は今回始めたばかりで、どんなことができるのか、どんな書き方が書きやすいのかなどのセオリーをまだ知らない状態。とりあえず定番のhttp://www.saturn.dti.ne.jp/~npaka/flash/as30/で勉強しようかな。