■目次
・イントロダクション
・Flex 3 SDKのインストール
・お約束
・Emacsによる開発環境の構築
・HelloWorld
・tweenerによるアニメーション
・デバッグ方法
・Web APIへのアクセス方法
・リンク集
・参考書籍
・AS3.0アプリでのパラメータ受け渡し
・MXMLで画面作り
・FlashをVistaのがジェットに
・AS3でJSONのパース(corelib)
・イントロダクション
・Flex 3 SDKのインストール
・お約束
・Emacsによる開発環境の構築
・HelloWorld
・tweenerによるアニメーション
・デバッグ方法
・Web APIへのアクセス方法
・リンク集
・参考書籍
・AS3.0アプリでのパラメータ受け渡し
・MXMLで画面作り
・FlashをVistaのがジェットに
・AS3でJSONのパース(corelib)
■イントロダクション
プログラマのためのFlash遊び方という記事で、無料でFlash開発が行えることが分かったので、その方法をまとめました。
最終的には簡単なアニメーション処理までを解説します。
基本的には各コンテンツに付記したページからの引用がメインなので、詳しくはリンク先ページを参照していただければと思います。
最終的には簡単なアニメーション処理までを解説します。
基本的には各コンテンツに付記したページからの引用がメインなので、詳しくはリンク先ページを参照していただければと思います。
■Flex 3 SDKのインストール
第1回 無料でFlash作りに挑戦!Flex 3 SDKを導入してみよう
にあるとおり、
Flex 3.0 SDK
からダウンロード後、適当な場所に配置すればOKです。
このページでは、
配置したら、実行パスを通します。
以上でインストールは終了です。
にあるとおり、
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のほうがトラブル回避できるようなので・・・
■Emacsによる開発環境の構築
Flex 3 SDKはコマンドラインツールによる開発となります。
普通にコマンドラインで開発してもよいのですが、せっかくEmacsユーザーなのですから便利な環境を使わない手はないだろう、ということで開発環境構築の説明です。
Emacsユーザーでない方は、読み飛ばしてもらっても結構ですし、これを機にEmacsユーザーとなっていただくことも大歓迎です。
なお、Emacs/Meadow TipsにEmacs/MeadowのTipsページがありますので、参考にしてください。
普通にコマンドラインで開発してもよいのですが、せっかく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
HelloWorld!をコンパイルで紹介されているサンプルコードを適当な場所に保存します。
mxmlc ファイル名とすればswfファイルが作成されるはずなので、ブラウザでロードして確認すればOKです。
mxmlc ファイル名とすればswfファイルが作成されるはずなので、ブラウザでロードして確認すればOKです。
■tweenerによるアニメーション
tweenerというアニメーションライブラリが有名なようなので、簡単なアニメーションサンプルを。
配布ページは、Tweener (caurina.transitions.Tweener)
リファレンスは、Tweener Documentation
使い方は、AS3版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 アプリケーションのクライアントコードをデバッグする を参考にするとよいでしょう。
簡単に書いておくと、
trace logは、
環境依存かもしれませんが、文字化けにお困りの際は、参考にどうぞ。
なお、Flex アプリケーションのクライアントコードをデバッグするに書いてあるとおり、環境変数のHOMEDRIVEとHOMEPATHを変更している場合は、適宜読み替えてください。
ってか、この二つの環境変数を書き換えるような人には、こんな説明は不要でしょうけど・・・
Flex アプリケーションのクライアントコードをデバッグする を参考にするとよいでしょう。
簡単に書いておくと、
- Adobe Flash Player Support Centerから自分が使っている環境にマッチするDebug Playerをダウンロード&インストール
- c:/Documents and Settings/ユーザー名/mm.cfg
TraceOutputFileEnable=1 ErrorReportingEnable=1
trace logは、
c:/Documents and Settings/ユーザー名/Application Data/Macromedia/Flash Player/Logs/flashlog.txt追加説明として、自分の環境だと、最初のログ出力は文字化けしていたので、一度Meadowで読み込んで文字コードをUTF-8に変更後、ログを再出力したら、文字化けしなくなりました。
環境依存かもしれませんが、文字化けにお困りの際は、参考にどうぞ。
なお、Flex アプリケーションのクライアントコードをデバッグするに書いてあるとおり、環境変数のHOMEDRIVEとHOMEPATHを変更している場合は、適宜読み替えてください。
ってか、この二つの環境変数を書き換えるような人には、こんな説明は不要でしょうけど・・・
■Web APIへのアクセス方法
ここまで出来るようになったら、このウェブサイトの本題でもあるWeb APIへのアクセス方法を知りたいところ。
AS3.0では、強力なXMLサポートクラスが用意されているので、単体でアクセスできます。
例として、AmazonWebServiceへのアクセス方法が Amazon Web Service(AWS)をActionScript3.0から利用する方法 で紹介されているので参考にするとよいでしょう。
とても簡単ですね。
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だけはおさえておきましょう。
- Tweener (caurina.transitions.Tweener)
■参考書籍
(データ提供:Amazon.co.jp)


