Flex 3 SDKによるFlash開発入門

プログラマのためのFlash遊び方という記事で、無料でFlash開発が行えることが分かったので、その方法をまとめました。
最終的には簡単なアニメーション処理までを解説します。
基本的には各コンテンツに付記したページからの引用がメインなので、詳しくはリンク先ページを参照していただければと思います。

▲ページ先頭へ戻る▲

第1回　無料でFlash作りに挑戦！Flex 3 SDKを導入してみよう
にあるとおり、
Flex 3.0 SDK
からダウンロード後、適当な場所に配置すればOKです。
このページでは、

c:\flex_sdk_3

に配置したものとして説明していくので、異なる場所に配置した場合は、適宜読み替えてください。
配置したら、実行パスを通します。

c:\flex_sdk_3\bin;

と追加すればOKです。
以上でインストールは終了です。

▲ページ先頭へ戻る▲

ここでは、Flex 3 SDKを使う上で覚えておきたいお約束事項をまとめておきます。

• ファイル拡張子は、as
  これは、Action Script(3.0)という言語の省略形なので、ということです。多分。
  Action Script自体はJavaに近い文法です。
  
• ファイル名とクラス名は同じにする
• ファイル保存時は、UTF-8で
  SJISでもOKなようですが、UTF-8のほうがトラブル回避できるようなので・・・

▲ページ先頭へ戻る▲

Flex 3 SDKはコマンドラインツールによる開発となります。
普通にコマンドラインで開発してもよいのですが、せっかくEmacsユーザーなのですから便利な環境を使わない手はないだろう、ということで開発環境構築の説明です。
Emacsユーザーでない方は、読み飛ばしてもらっても結構ですし、これを機にEmacsユーザーとなっていただくことも大歓迎です。
なお、Emacs/Meadow TipsにEmacs/MeadowのTipsページがありますので、参考にしてください。

• Action Script編集モード
  Emacs mode for AS3
  で配布していますので、actionscript-mode.elをダウンロード後、lisp-pathに配置。
  Emacsの設定ファイル(.emacsなど)に以下を追加。
  

  (autoload 'actionscript-mode "actionscript-mode" "actionscript" t)
  (setq auto-mode-alist
  
        (append '(("\\.as$" . actionscript-mode))
  
                auto-mode-alist))
  

• コンパイル方法
  ソースの編集が終了したら、

  M-x compile

  と入力するとミニバッファにコマンドが入力できるようになるので、

  mxmlc ファイル名

  とすれば、コンパイルウィンドウがオープンし状況を知らせながら、コンパイルしてくれます。
  DOSプロンプトと行ったり来たりしなくていいので、効率的です。
  

▲ページ先頭へ戻る▲

HelloWorld!をコンパイルで紹介されているサンプルコードを適当な場所に保存します。
mxmlc ファイル名とすればswfファイルが作成されるはずなので、ブラウザでロードして確認すればOKです。

▲ページ先頭へ戻る▲

tweenerというアニメーションライブラリが有名なようなので、簡単なアニメーションサンプルを。
配布ページは、Tweener (caurina.transitions.Tweener)
リファレンスは、Tweener Documentation
使い方は、AS3版Tweenerを使ってみる
を参考にすればよいかと思います。

• Tweenerの導入
  Tweener (caurina.transitions.Tweener)からファイルをダウンロードします。
  複数のファイルがありますが、なんちゃら_as3.zipというファイルだけをダウンロードすればOKです。
  ダウンロードしたら適当な場所に解凍して、AS3版Tweenerを使ってみるにあるとおり、compcでライブラリ化しておきます。
  
• アニメーションサンプルファイルのビルド方法
  AS3版Tweenerを使ってみるにあるサンプルコードのコピペです。
  

  package {
      import flash.display.Sprite;
      import flash.text.TextField;
      import flash.events.MouseEvent;
      import caurina.transitions.Tweener;
      public class HelloTweener extends Sprite {
          public function HelloTweener() {
              var tf:TextField = new TextField();
              tf.text = "Hello Tweener";
              addChild(tf);
              stage.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
                  Tweener.addTween(tf, {x:mouseX, y:mouseY, time:1, transition:"linear"});
              });
          }
      }
  }
  

  というファイルを作成したら、そのファイルと同じ場所にcompcでライブラリ化したtweener.swcをコピーしてから、
  

  mxmlc -include-libraries=tweener.swc HelloTweener.as
  

  としてコンパイルすると、HelloTweener.swfが作成されるので、ブラウザで動作確認できます。
  ファイルサイズを見てみると、12KBもあります。
  まあ、このコードだけでアニメーション出来るわけですから、こんなもんなのかな。
  ということで、簡単なアニメーションの方法でした。
• 貼り付け方
  以下のようなコードをHTMLファイルに記述すればOKです。
  

  <embed src="HelloTweener.swf" width="400" height="400" />

• 動作サンプル
  
  ウィンドウ内をクリックすると、テキストがその場所に向かってリニアにアニメーションします。
  

▲ページ先頭へ戻る▲

AS3.0を使って作成したアプリケーションのデバッグには、Flash Debug Playerを使います。
Flex アプリケーションのクライアントコードをデバッグする を参考にするとよいでしょう。
簡単に書いておくと、

• Adobe Flash Player Support Centerから自分が使っている環境にマッチするDebug Playerをダウンロード＆インストール
• c:/Documents and Settings/ユーザー名/mm.cfg
  

  TraceOutputFileEnable=1
  ErrorReportingEnable=1
  

この後、traceを埋め込んだプログラムを動作させると、アプリケーションログが取れるようになります。
trace logは、

c:/Documents and Settings/ユーザー名/Application Data/Macromedia/Flash Player/Logs/flashlog.txt

追加説明として、自分の環境だと、最初のログ出力は文字化けしていたので、一度Meadowで読み込んで文字コードをUTF-8に変更後、ログを再出力したら、文字化けしなくなりました。
環境依存かもしれませんが、文字化けにお困りの際は、参考にどうぞ。
なお、Flex アプリケーションのクライアントコードをデバッグするに書いてあるとおり、環境変数のHOMEDRIVEとHOMEPATHを変更している場合は、適宜読み替えてください。
ってか、この二つの環境変数を書き換えるような人には、こんな説明は不要でしょうけど・・・

▲ページ先頭へ戻る▲

ここまで出来るようになったら、このウェブサイトの本題でもあるWeb APIへのアクセス方法を知りたいところ。
AS3.0では、強力なXMLサポートクラスが用意されているので、単体でアクセスできます。
例として、AmazonWebServiceへのアクセス方法が Amazon Web Service（AWS）をActionScript3.0から利用する方法 で紹介されているので参考にするとよいでしょう。
とても簡単ですね。

▲ページ先頭へ戻る▲

このページを作成する上で参考にしたサイトへのリンク集です。

• プログラマのためのFlash遊び方(gihyo)
  このページ作成のきっかけとなった記事です。
• ActionScript 3.0で始めるオブジェクト指向スクリプティング(gihyo.jp)
  有償版のアプリ用説明ですが、概念は参考になると思います。
• Adobe Flex 2 Component Explorer
  Flex 2で利用できるコンポーネントの一覧とそのサンプルソースがあります。Flex 3 SDKでもコンパイルできるので、動作確認できます。
• Adobe Flex 3 Language Reference
  その名のとおり、Flex 3 SDKで利用できるリファレンスです。
• Flex Builder 3でサクっとActionScriptコーディング！(@IT)
  Flex Builder向けの記事ですが、画面作りなどはSDKでも参考になります。
• ライブラリ
  
  • Tweener (caurina.transitions.Tweener)
    アニメーションライブラリTweenerです。
  • Google提供のAS3ライブラリ
    ちょっと前までAdobe LabsでAS3用のライブラリが提供されていたようなのですが、現在はGoogleCodeで提供されているようです。検索ページへのリンクです。コンテンツ内でも取り上げたTweenerのほか、YouTubeなどGoogleが提供しているサービスは勿論Last.fmやYahooのサービスとなっているFlickr libraryなど他社のサービスまで網羅されているので、見てるだけで楽しめます。
    ダウンロードページのコメントを見てみると、「Archive from Adobe Labs」とあるので、そっちからの移行なのかな？
    とりあえず、corelibだけはおさえておきましょう。

▲ページ先頭へ戻る▲

(データ提供：Amazon.co.jp)

▲ページ先頭へ戻る▲