はじめてのActionScript3.0プログラミング
2006年11月30日 プログラミングTIPS
Flashで動くお絵かきで気になっていた「フリーのFlashコンパイラMTASCを使ってお絵かきツールを作る」の記事。
とある人から、現在ではMTASCではなく、Adobeから公式にフリーのコンパイラが配布されていることを教えてもらいました。
そこで、早速AdobeのActionScript3.0に触れてみることにしました。
（ActionScript3.0とは、Flash Player 9以降のプラグインで実行できるプログラムを作ることができるオブジェクト指向スクリプト言語のことです）
とある人から、現在ではMTASCではなく、Adobeから公式にフリーのコンパイラが配布されていることを教えてもらいました。
そこで、早速AdobeのActionScript3.0に触れてみることにしました。
（ActionScript3.0とは、Flash Player 9以降のプラグインで実行できるプログラムを作ることができるオブジェクト指向スクリプト言語のことです）
はじめてのActionScript3.0プログラミングとして、以下の手順でFlashコンテンツを作ってみます。
- Flex 2 SDKをダウンロードする手順
- Flex 2 SDKのディレクトリ構成の確認
- サンプルのコンパイル方法
- Flexのドキュメント確認
- はじめてのActionScript3.0プログラミング
- ActionScript 3.0で参考になりそうなサイトへのリンク
- Flex 2 SDKのディレクトリ構成の確認
Flex 2 SDKをダウンロードする手順
- 1.アドビ - ダウンロードページの
開発用ツール＞Adobe Flex 2 ご購入 体験版 アップデート 詳細
から「ご購入」をクリックして、
Adobe - Adobe Flex 2: ご購入についてページへ。- 2.無償ダウンロード＞Flex 2 SDK
をクリックし、Adobeメンバーシップの会員登録（メールアドレスが必要）。- 3.メールアドレスを記入し新しいアカウントを作成するために、「次へ」をクリック（すでに会員ならアカウントを作成せずIDを記入）。
- 4.アカウント情報（パスワードや住所など）を記入し、アンケートに答え「次へ」をクリック。
体験版ダウンロードページへ進み、Flex 2 SDK （無償）のFlex 2™ ソフトウェア開発キット＞Flex SDKをダウンロード。- 5.続いて、Flex Language Packもダウンロード。
- 6.ダウンロードした圧縮ファイルflex_sdk_2.zipを解凍。
- 7.ダウンロードした圧縮ファイルflex_sdk_2_ja.zipを同じフォルダに解凍し、上書き。
- 8.解凍したlicense_ja.htm、readme_ja.htmを読んでおく。
- 2.無償ダウンロード＞Flex 2 SDK
Flex 2 SDKのディレクトリ構成の確認
Flex SDK には、次のディレクトリがあります。
bin
mxmlc、compc、fdb などのコマンドラインツールが格納されています。これらのツールは、Flex アプリケーションとコンポーネントのコンパイルとデバッグに使用します。
"bin/jvm.config" ファイルには Java VM 設定が記録されています。
frameworks
Flex アプリケーションのコンパイル時に使用する "framework.swc" ファイル、"frameworks.swc" ソースコード、その他のヘルパーファイルが格納されています。
"frameworks/flex-config.xml" ファイルには、デフォルトのコンパイルオプションが記録されています。
players
Adobe® Flash® Player 9 のデバッガ版が格納されています。
lib
コンパイラが使用する JAR ファイルが格納されています。
resources
Flash Player の検出および履歴管理を行うための HTML テンプレートが格納されています。
これらのファイルの使用法の詳細については、『Flex 2 アプリケーションの構築および展開ガイド』の「ラッパーの作成」を参照してください。
samples
サンプルアプリケーションのソースコードが格納されています。
メモ :このディレクトリ構造はどこにでも保存できますが、"bin" ディレクトリと "lib" ディレクトリは同じレベルにする必要があります。
サンプルのコンパイル方法
SDK サンプルディレクトリには、サンプルアプリケーションのソースコードが格納されています。
Flex 2 SDK サンプルアプリケーションをコンパイルするには :
Windows : "flex_sdk_dir/samples" ディレクトリにある "build-samples.bat" ファイルを実行します。
Macintosh または Unix :"flex_sdk_dir/samples" ディレクトリにある "build-samples.sh" ファイルを実行します。
上記のスクリプトを実行するには、mxmlc コンパイラを含む SDK "bin" ディレクトリが "samples" ディレクトリと同じレベルにある必要があります。
サンプルをコンパイルしたら、ブラウザで各サンプルの HTML ファイルを開いて表示します (explorer.html、flexstore.html、hybridstore.html、PhotoViewer.html、finder.html)。
Flexのドキュメント確認
Adobe - Flex : Flex ドキュメンテーションページで、最新の各種マニュアルなどを確認できます。「ActionScript 3.0 のプログラミング」に、ActionScript 3.0の詳しい概要や使い方が載っています。
Adobe Flex 2 のインストールによれば、
"java_home/bin" ディレクトリがシステムパスに定義されているコンピュータ上に Java SDK がインストールされていることを確認します。JDK 1.4 または 1.5 が必要です。JDK 1.4 の場合、JDK 1.4.2_06 以降が必要になります。と説明されているので、JDKのバージョンが違う場合はJDKをインストールします。
はじめてのActionScript3.0プログラミング
適当なテキストエディタ（terapadなど）を開き、以下のソースを記述して、first.asというファイル名、文字コードUTF-8で保存します。
package {
import flash.display.*;
import flash.text.*;
public class first extends Sprite{
public function first(){
var tf1:TextField = new TextField();
tf1.text = "はじめてのActionScript3.0プログラミング";
tf1.width = 300; //表示テキスト横幅
tf1.height = 200; //表示テキスト縦幅
tf1.x = 50; //表示テキスト横位置
tf1.y = 20; //表示テキスト縦位置
addChild(tf1); //追加
}
}
}
ソースができあがったら次はコンパイル。WinXPの場合、スタート＞アクセサリ＞コマンド プロンプトを開き、以下のコマンドを入力します。
ダウンロード、解凍したディレクトリ\bin\mxmlc -default-size 400 400 -default-frame-rate=30 -default-background-color=0xCCCCCC ソースを保存したディレクトリ\first.as
毎回、コマンドプロンプトから設定を入力しても問題ありませんが、設定をXMLファイルに書くこともできます。
ファイル名-config.xmlを新規作成し（今回の場合は、first-config.xml）、以下のように書きます。
<flex-config>
<output>first.swf</output>
<default-size>
<width>400</width>
<height>400</height>
</default-size>
<default-frame-rate>30</default-frame-rate>
<default-background-color>0xCCCCCC</default-background-color>
<use-network>false</use-network>
<benchmark>true</benchmark>
<compiler>
<incremental>true</incremental>
</compiler>
</flex-config>
そして、コマンドプロンプトからコンパイルすると、自動的にこのXML設定ファイルが読み込まれます。
ダウンロード、解凍したディレクトリ\bin\mxmlc ソースを保存したディレクトリ\first.as
うまくコンパイルできていれば、first.swfが作成されます。
あとはHTMLファイルにfirst.swfを読み込むように記述し、HTMLファイルとswfファイルをアップロードすればブラウザでActionScript3.0プログラムが実行できるようになります。
→サンプルプログラムこちらになります
（ブラウザでの実行にはAdobe Flash Player 9以降のプラグインがインストールされている必要があります）
HTMLファイルにはfirst.htmlとして以下のように記述します。
うまくできていれば、Flashコンテンツとして、「はじめてのActionScript3.0プログラミング」と表示されたはずです。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>はじめてのActionScript3.0プログラミング</title> </head> <body> <object codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400" > <param name="movie" value="first.swf"> <param name="quality" value="high"> <embed src="first.swf" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="400" ></embed> </object> </body> </html>
はじめてのプログラミングでは"Hello,world!"とするのが一般的ですが、日本語環境では、ひらがなや漢字などの表示に問題ないか確認しておく必要があるため、今回は"はじめてのActionScript3.0プログラミング"としました。
UTF-8環境であれば問題なく表示できていると思います。
さらに練習用として、
- 文字列表示
- 画像表示
- マウス情報取得
- キーボード情報取得
- 画像表示
→サンプルプログラムこちらになります
改良すれば、もっといろいろなアイディアを実現できそうです。