OS & 開発環境別に、環境構築から Hello, World! するまでの手順をまとめました。どの開発環境を使えば良いかよく分からない人は、開発スタイルを選ぼうを見て選んでくださいね。
それぞれのチュートリアルで作成するHelloWorldのソースコードは以下のものです。
package {
import flash.display.Sprite;
import flash.text.TextField;
public class HelloWorld extends Sprite {
public function HelloWorld() {
var textField:TextField = new TextField();
textField.text = "Hello World";
addChild(textField);
}
}
}
動作サンプルはこれ
要執筆
まずはAdobe Open SourceのFlex SDK\ のページからFlex SDKをダウンロードしてきて、適当な場所に展開します(とりあえずマイドキュメント直下に展開したとします)。 圧縮・解凍のソフトは Lhaz や Lhaplus などを使用するといいでしょう。
展開したフォルダの中に必要なもの一式が入っていて、中にあるbinフォルダにはコマンドラインツール郡が入っています。 このコマンドラインツール郡は開発する上で頻繁に使うことになるので、先にパスを追加しておきましょう。
コントロールパネルのシステムを開きます。その中の詳細設定タブの下に環境変数ボタンがあるので、クリックして環境変数の設定画面を開きます。 上段のユーザの環境変数という項目に PATH という項目がなければ 新規、既にある場合は PATH を選んで 編集 のボタンを押します。 先ほど展開したフォルダの下にあるbinを追加するので、以下のように入力し、OK ボタンを押します。
C:\Documents and Settings\ログオン名\My Documents\flex_sdk_3\bin
きちんとパスが追加されたか確認するために、コマンドプロンプトを開き、コマンドを入力してみます。 (コマンドプロンプトを開くには、スタートメニューの ファイル名を指定して実行 を開き、cmd と入力して ok ボタンを押します。)
C:\Documents and Settings\ログオン名> mxmlc
Adobe Flex Compiler (mxmlc)
Version 3.0.0 build 477
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.
mxmlc [options] [defaultVar]
Use 'mxmlc -help' for more information.
ここまでで特に問題が無ければ開発環境の構築は完了です。早速ActionScriptを書き始めましょう!!
Flex SDKで開発を始めるにあたって、特に決められたルールはありません。なので適当な場所ですぐに開発を始める事が出来ます。 今回は解りやすくするために、マイドキュメント以下で作業をすることにします。
まず最初にhelloworldというフォルダを作って、その中を開発用フォルダにしましょう。
次にメインロジックとなるクラスファイルを作りましょう。テキストエディタで新規テキストを作成し、ココのような内容を入力し、 HelloWorld.asという名前で保存してください。
保存出来たら、早速コンパイルしてみましょう。コンパイルにはmxmlcというコマンドを使用します。コマンドプロンプトを開いて実行してください。
# 開発用フォルダに移動
C:\Documents and Settings\ログオン名> cd "My Documents\helloworld"
# コマンドを実行
C:\Documents and Settings\ログオン名\My Documents\helloworld> mxmlc HelloWorld.as
これを実行するとhelloworldフォルダの中に、HelloWorld.swfというファイルが作成されていると思いますのでブラウザ等で開いてみましょう。無事にHello Worldが表示されると思います。
まずはAdobe Open SourceのFlex SDKのページからFlex SDKをダウンロードしてきて、適当な場所に展開します。
# とりあえずホームディレクトリ直下に展開
$ unzip flex_sdk_3.zip -d ~/flex_sdk_3
展開したディレクトリの中に必要なもの一式が入っていて、中にあるbinディレクトリにはコマンドラインツール群が入っています。 このコマンドラインツール群は開発する上で頻繁に使う事になるので、先にパスに追加しておきましょう。
$ export PATH="${PATH}:${HOME}/flex_sdk_3/bin"
ちゃんとパスに追加出来たか確認するのにはwhichコマンドが便利です。 mxmlcという名前のコンパイラがインストールされているはずなので、それをwhichコマンドで確認してみましょう。
$ which mxmlc
/Users/ユーザ名/flex_sdk_3/bin/mxmlc
ここまでで特に問題が無ければ開発環境の構築は完了です。早速ActionScriptを書き始めましょう!!
Flex SDKで開発を始めるにあたって、特に決められたルールはありません。なので適当な場所ですぐに開発を始める事が出来ます。 今回は視覚的にも解りやすくするために、デスクトップで開発していく事にします。
まず最初にhelloworldなディレクトリを作って、その中を開発用ディレクトリにしましょう。
$ cd
$ mkdir helloworld
$ cd ./helloworld
次にメインロジックとなるクラスファイルを作りましょう。ココのようなファイルを作って、 HelloWorld.asという名前で保存してください。
保存出来たら、早速コンパイルしてみましょう。コンパイルにはmxmlcというコマンドを使用します。
$ mxmlc HelloWorld.as
これを実行するとhelloworldディレクトリの中に、HelloWorld.swfというファイルが作成されていると思いますのでブラウザ等で開いてみましょう。無事にHello Worldが表示されると思います。
要執筆
Flex SDK + お気に入りのテキストエディタ (Mac OSX)を参考にFlex SDKをインストールします。その後、rascutをインストールします。
# gemでrascutをインストール
$ sudo gem install rascut --include-dependencies
途中でmongrelを選択する画面が出る事が有りますが、
Bulk updating Gem source index for: http://gems.rubyforge.org
Select which gem to install for your platform (i686-darwin8.8.3)
1. mongrel 1.1.4 (ruby)
2. mongrel 1.1.4 (java)
3. mongrel 1.1.4 (x86-mswin32-60)
4. mongrel 1.1.3 (java)
5. mongrel 1.1.3 (i386-mswin32)
6. mongrel 1.1.3 (ruby)
7. Skip this gem
8. Cancel installation
rubyのバージョンを選択します(この場合1番)。以上でmongrelのインストールは完了です。
次に、ソースコードを好みのエディタで書きます。ソースコードここの通りに書き写してください。 そうしたら、ソースがおいてあるディレクトリまで移動してrascutを実行します
# ソースコードのあるディレクトリに移動
cd hoge
# rascutの実行
_JAVA_OPTIONS="-Duser.language=en -Dfile.encoding=UTF-8" rascut -s HelloWorld.as
ソースコードに問題がなければ次のようにメッセージが表示されます
$ _JAVA_OPTIONS="-Duser.language=en -Dfile.encoding=UTF-8" rascut -s HelloWorld.as
[05/22 02:32:00] Start Rack::Handler::Mongrel http://0.0.0.0:3001/
[05/22 02:32:00] Compile Start
[05/22 02:32:01] Found update file(s)["./HelloWorld.as"]
[05/22 02:32:03] fcsh: Assigned 1 as the compile target id
Loading configuration file /Developer/flex_sdk_3/frameworks/flex-config.xml
/Users/jiro/Documents/workspace/as-users.jp/html/helloworld/source/HelloWorld.swf (621 bytes)
それでは、ブラウザで動作を確認してみましょう。Rascutがサーバーをたてているので、ブラウザでアクセスするだけで動作を確認する事ができます。http://localhost:3001にアクセスしてみましょう。無事にHello Worldが表示されているはずです。
要執筆
要執筆
要執筆
要執筆
要執筆
要執筆
要執筆
要執筆
要執筆
要執筆