ActionScript3.0 Archive

Flexからアニメーションをガリガリ作る時の標準は今はTweenerライブラリなんでしょうかね？
新しく開発中っぽいアニメーション用のライブラリを見つけたのでメモ。

Go animation system
(現在 closed betaらしい)
* とても軽量(およそ4K)
* 柔軟な設計で、高い拡張性を持つ。
* Fuseのようになんでもできるというようなものではない。
* ただし。Goを使ってFuseのようなものを作ることはできる。
* Goは特殊な書き方を要求しない。
* Goのエンジンは10から20000ものアニメーションを動かすことができる。
* 物理エンジンや３Dエンジンと一緒に使えるよう設計されている。
* GoのアプローチはCairngormフレームワークにインスパイアされている。

だ、そうです。
「物理エンジンや３Dエンジンと一緒に使えるよう設計されている。」ってのが興味深いですね。

気が付けば出てました。
FlashDevelop Beta5。

FlashDevelopでAIRを開発すべく色々と設定を漁ってきましたが、
ついに正式にサポートされたようです。
新規プロジェクトのActionScript3の項目には、

Flex 3 Project

AIR Flex 3 Projector

AIR Projector

というFlex3用のプロジェクト項目がデフォルトで入るようになりました。

これで、誰でも面倒な設定無しでAIRの開発ができますね。
･･･と、言いたいところですが、
まだ設定を自動で全てやってくれるというところまでは言っていないようです。
なので、手動で設定しましょう。以下2点を設定すれば普通に使えるはずです。

まずはコンパイラです。
「Flex3プロジェクト」や「AIRプロジェクト」といっても、
コンパイラの切り替えを促すようにはなっていないようなので、
FlashDevelopの通常のFlexSDKをFlex2SDKにしている場合には、
Flex3のSDKに設定しなおします。
これは、メニューの「Project」->「Properties」の設定ダイアログから、
「Compiler Options」タブを選択し、
「Custom Path to Flex SDK」の項にFlex３のSDKへのパスを設定しましょう。

続いては、コード補完です。
コード補完用のファイルはデフォルトで付いてくるようになったのですが、
それがなぜかプロジェクトに反映されていません。
これも、メニューの「Project」->「Properties」の設定ダイアログから、
「Compiler Options」タブを選択し、
「Intrinsic Libraries」の項に必要なパスを追加しましょう。
コード補完用のファイルは、(インストールフォルダ)\FirstRun\Library 以下にあります。
例えば、AIRのプロジェクトなら、

Library\AS3\frameworks\Flex3

Library\AS3\frameworks\AIR

の二つを追加すれば、
Flex3のmx系のコード補完と、AIR用のコード補完がきくようになります。

画像は、先日のミニAIRアプリ(13行アプリ)の設定ダイアログです。

英語のBlogとか読みますか？

英語力がなさ過ぎて、いつもすごく時間がかかります。
GoogleToolBarがマウスオーバーで英単語の意味をポップアップしてくれるのですが、
残念ながらあまり的確ではありません･･･。

新しいタブを開いて、英辞郎を開いて検索して･･･、
が面倒で面倒で！

なので、サクッとそれっぽいのを作りましょうー。
で、コードは以下です。

< ?xml version="1.0"?>
< mx :Application xmlns:mx="http://www.adobe.com/2006/mxml">
  < mx :Script>
  < ![CDATA[
    private function translate(word:String):void {
      html.location = "http://eow.alc.co.jp/" + word;
      textinput.text = "";
    }
  ]]>
  < /mx:Script>
  < mx :HTML id="html" width="100%" height="100%" />
  < mx :TextInput id="textinput" width="100%" enter="{translate(textinput.text)}" />
< /mx:Application>

テキストボックスに文字を入れてエンターキーで、英辞郎のページを開きます。
ま、マッシュアップ(小)。

13行。よし！と思ってから数分。
こういう感じでサクッと作れるのがいいですねー。

Alt+TABでブラウザとAIRアプリを切り替えつつ、ダバダバ読み進めると。
ん～、まぁ･･･、さすがに実用にはほど遠いですね。

FlashDevelop3.0.0 Beta4が出ましたね。
設定の仕方は、こちら
[IDE]ActionScript3.0(Flex3・AIR)の開発環境構築(1)
[IDE]ActionScript3.0(Flex3・AIR)の開発環境構築(2)
に書きましたが、少し設定の方法も変わったようなので、
FlashDevelop3.0.0 Beta4でFlex/AIR対応させるやり方を新しく書きます。
(自分用の備忘録に近いですが･･･)

まず、FlashDevelop3.0.0をインストールをしましょう。
とりあえずFlashDevelopを起動できるところまでいったら、
文字コードの設定をします。
Tools -> Program Settings で、設定ダイアログを開きます。
左側の項目からMain FlashDevelopを選択し、「その他」の項目の「Default CodePage」
をUTF8にします。ドロップダウンで選択するだけなので簡単ですが、
この設定をしないと日本語のコメントなどがかけません。

続いてFlex3コンパイラの設定をします。
設定ダイアログの左側の項目から、Plugins AS3Contextを選択し、
「Flex 2 SDK Location」の項目にFlex3のパスを指定します。
この指定をするときに結構間違うらしいのですが、mxmlcなどがあるbinフォルダ
をしていると上手く動きません。その上のbinフォルダを含むフォルダを指定です。

それから、コード補完用のファイルを設定します。その辺の設定は、
[IDE]ActionScript3.0(Flex3・AIR)の開発環境構築(1)のままですね。

そしてここがBeta4のキモです。なんとこのままではコンパイルが上手くいきません。
Flex3 Beta3ではfcshが日本語対応したためにFlashDevelopで上手く動かなくなっているのだそうです。ちなみにfcshとは、コンパイルの状態をキャッシュして二度目以降のコンパイル速度を上げるものです。Flex3のsdkには同梱されています。
[ActionScript3]FlashDevelopとFlex 3 SDK beta 2の相性が悪いのを何とかする
こちらの記事を参考にコンパイラの設定を直します。
sdkのbinフォルダ内に「jvm.config」というファイルがあるので、このファイルをエディタで開きます。

# Arguments to VM
java.args=-Xmx384m -Dsun.io.useCanonCaches=false

この部分を、

# Arguments to VM
java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en

と追記して保存しておきます。これでfcshが英語で起動するようです。

とりあえず、ここまででFlashDevelopでコンパイルができるはずです。チェックしてみましょう。

AIRプロジェクトの設定についてはほとんど、[IDE]ActionScript3.0(Flex3・AIR)の開発環境構築(2)と同じですが、色々バージョンアップして違うところもあるので、また次回書きます。

ではでは。

こちらの記事[AS3S.ORGさん]でデバッグに便利な環境について書かれていたので。
流れに乗って。

1. Debug Player

これは必須ですね。FlashPlayerのDebug用バージョン。普通のFlashPlayerだとランタイムエラーとか拾ってくれないので。エラーが出ているのに表示されないのでデバッグが余計大変になってしまいます。しかも、普通に動くけど実はエラーが起きているということもあるというのが曲者です。例えば画像の読み込み時のIOErrorとかですね。気がつかないままリリースすると、他の開発者の人に「あーIOErrorをちゃんとハンドルしてないんだー」みたいなことがばれてしまうのは恥ずかしいです。

ちなみに、いろんなベータ版とか試してるうちにこっそりとFlashPlayerが新しく置き換わることが結構あって、気がつかないうちにDebugPlayerではなくなっている、ということもあります。DebugPlayerの場合はFlash/Flex上で右クリックしたときに「デバッグ」というコマンド(ただしグレーで実行できない)が入るようですよ。

2. Flash Tracer

FireFoxのアドオンでtraceの出力をFlreFoxのサイドバーで確認できるというものです。

すごい趣味の問題なんですけど、サイドバーじゃなかったらなぁ、と。デバッグ用の出力ウインドウはなんか画面下に欲しいんですよね。
（FireFoxに他のアドオン入れれば下にできるのかもしれないけど、ブックマークの時とかは横にあって欲しいし･･･）

3. Flash Switcher

FireFoxでFlashPlayerのバージョンを切り替えるアドオンです。
便利なんだけど･･･、他のタブでFlashPlayerが起動してると動かないんですよね。僕は結構タブを多めに開いたままにする派なので、なかなか使いづらい･･･。
FireFoxが常用のブラウザじゃない人には良いかも。

あとは、最近いたるところで話しにのぼっている、
ThunderBoltですね。
FireBugに出力できるというライブラリです。ただの出力か、警告かエラーかなど色々な出力を簡単に実現できるのは良いところですが、ソースコードにデバッグ用のコードが色々残ってしまうのが若干面倒ですね。
FireBugに出力するだけ、という意味では、
ExternalInterface.call("console.log", "hogehoge");
でだせます。自分でうまいことデバッグ用のクラスを書いたほうが後々便利かもしれませんね･･･。

Shigeru-Nakagaki.comさんの記事にて、ActionScript3.0でのincludeについての解説がありました。

importについては、普段つかっているものなので、理解はしていたんですが、
「include」があることすら知りませんでした･･･。

include

コンパイル時にソースを丸ごとぶち込みます
注意点としては複数のファイルで同じファイルをincludeすると
無駄にSWFが肥大化しますので、個人的にはお勧めしません ^_^;
オブジェクト指向なんていう形式的なことは
毛頭言う気はありませんが、それでもFlexでは
クラス化したほうが良いと思います

なるほど。
ってことは、staticな変数とかは、コンフリクトを起こしてしまうんでしょうかね？
そもそもincludeの使いどころってどういう状況なんだろう？過去のバージョンとの互換とかのために使えるようになってるだけなら良いんですが、どこかに使いどころがあるんでしょうね、多分。そういえばFlexFrameworkのソースの中にincludeがあったような･･･。

ちゃんとAdobeから出されているリファレンスとか読み込まないとだめだなぁと痛感しますね。

いつもその場しのぎで検索していくだけでは･･･だめだっ！

as3でzipの操作用ライブラリ

FZip
ライセンスはzlib/libpng license
商用利用もOKなライセンスっぽい。

zipの解凍用で圧縮はできないのかな？このライブラリは。
.airファイルの中身をのぞいたりもできますね。

< ?xml version="1.0" encoding="utf-8"?>
< mx :WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
  < mx :Script>
    < ![CDATA[
      import deng.fzip.FZip;
      public var fzip:FZip;
      public function init():void{
        fzip = new FZip();
        var req:URLRequest = new URLRequest();
        req.url = "hogehoge.air";
        fzip.addEventListener(Event.COMPLETE, loadComplete);
        fzip.load(req);
      }
      public function loadComplete(e:Event):void{
        status = fzip.getFileCount().toString();
        for(var i:int=0;i<fzip .getFileCount();i++){
          ta.text += fzip.getFileAt(i).filename+"n";
          ta.text += fzip.getFileAt(i).getContentAsString();
          ta.text += "nn";
        }
      }
    ]]>
  < /mx>
  < mx :TextArea id="ta" width="100%" height="100%"/>
< /mx:WindowedApplication>

fxug - フォーラム

ここによると、

alert = Alert.show("hogehoge");

で開いたAlertは、

PopUpManager.removePopUp(alert);

で消せるらしいです。

確かにリファレンスを見ると、Alert.show()でAlert型が戻り値になってますね。戻り値あったんだ・・・。この関数。

というかそれ以前にAlertがPopupManagerで開かれていることを知らなかった・・・。
FlexFrameworkのソースって読めるんですよね。やっぱソースとかしっかり読んで勉強するべきなのかなぁ・・・。

前回の続きです。

前回はFlashDevelopのインストールから、Flex3のSDKを適応し、
コード補完をできるようにするところまででした。

今回は、AIRの開発用のProjectTempleteを作ります。

まずは、FlashDevelopをインストールしたフォルダを確認してください。
特に変更せずにインストールしていれば、
(Windowsなら)C:\Program Files\FlashDevelop\だと思います。
そこからさらにもぐって、
C:\Program Files\FlashDevelop\FirstRun\Templates\ProjectTemplates\
を確認します。
[ProjectTemplates]フォルダ内には、
[00 ActionScript 2 - Empty Project]~[08 HaXe - Default Project]までの
プロジェクトテンプレートファイルがあります。
どれでも良いですが、とりあえず[06 ActionScript 3 - Default Project]をコピーして、
[09 Air - Default Project]という名前にリネームします。
これで、Air用の新しいプロジェクトができました。

FlashDevelop再起動後にnew Projectで確認できると思います。

次はAirプロジェクトのコンパイル設定です。
swfをAirアプリにするためには、application descriptor fileというxmlファイルが必要です。
new Projectの際に自動でこのファイルができるように、
[09 Air - Default Project]フォルダ内にapplication.xmlというファイルを作っておきましょう。

< ?xml version="1.0" encoding="UTF-8"?>

  hoge

  
    hoge.swf
  

これで新規プロジェクトの際には、自動的にapplication.xmlというファイルができることになります。

次にコンパイルのオプションを設定します。
[09 Air - Default Project]フォルダ内の Project.as3proj というファイルをメモ帳で開いてみてください。
中身はXML形式で書かれています。
まず、build という項目に以下を追記します。

  
　　　　　　　・
　　　　　　　・
　　　　　　　・

続いて、
postbuildCommand という項目を以下のように修正します。

  “C:pathtoflex3_sdkbinadl.exe” application.xml

adlへのパスは環境に合わせてください。

これで設定は終了です。
FlashDevelopを再起動し、Airプロジェクトを新規で作ってください。
自動で作られたapplicaiton.xml内のrootContentで指定するswfを適当に調整し、
F8でAirアプリの完成です。

Flex3の開発環境といえば、FlexBuilder3。
ですが、使用期限ももう限界です。

僕は少し前からFlashDevelop3.0に切り替えました。
AIRの開発に他の人は何を使ってるんだろう･･･。
ここを見ながら設定するとAIRの開発に問題無しです。

若干コード補完がおかしいときがありますが、
体感的にはFlexBuilderよりも軽いし、無料だし。

ほぼそのままですが、開発環境の構築手順を。

まずはFlashDevelopをここからダウンロードします。
2007年8月11日現在、最新版はFlashDevelop 3.0.0 Beta2のようです。
そして、インストール。
FlashDevelopの起動には「.NET Framework 3.0」が必要なので、インストール前に入れておきましょう。

英語ですが、普通に進めれば問題無くインストールできると思います。
うまくインストールできたら文字コードを設定します。
これをしておかないと、FlexBuilderからのファイルとかを移行したときに日本語が化けます。
メニューから、
Tools -> Program Settings -> その他 -> Default CodePage　と選択して、
ここの数値を「1252」から「65001」に変更します。これでUTF-8になるようです(細かいことはわかってない)。
情報元はここ。

それでは、ここからはAIRのBeta1とかFlex3用のプロジェクトを作る設定です。

まずはFlex3のSDKを設定します。
先ほどと同様に、Tools -> Program Settings から、
plugins -> AS3Context -> settings
と選択していきます。
すると、「AS3Contexet」というタイトルのウインドウが出るはずなので、
その中の、AS3項目内「Flex 2 SDK Location」にFlex3のSDKを設定します。
(SDKの設定なので、mxmlcのあるフォルダの上のフォルダを設定)

続いてコード補完用のファイルを設定します。
まずは、このページのはじめの書き込みの「Update: Flex 3/AIR Intrinsic Classes 」という部分から「flex3_intrinsic.zip」というファイルをダウンロードしてください。

先ほどの、「AS3Context」ウインドウをもう一度開き、
今度は、「AS3 Classpath」というところを先ほどダウンロードしてきたflex3_intrinsic.zipを解凍したものを設定します。

一度、FlasDevelopを再起動し、
新しいProjectを作ってみましょう。

project -> new Project

で開いたウインドウからProject名などは適当に。Templeteは「ActionScript3 - Default Project」で。
すると、

こんな感じに自動でファイルが作られます。

F8押すか、
Project -> Build Project
で、コンパイルできるはずです。

適当にFlex3で新しく追加されたクラスなどを書いてみてください。
コード補完は Ctl + space です。

コレでFlex3と同様のswfをコンパイルできるようになりました。
が、しかし、AIRの開発を行うためにはもう少し設定を続けなければいけません。

続く。