TOPシステム開発> Windows XPにFlex Builder 2をインストールする
Flex 2
徹底攻略!Free Flex 2 SDK

第2回:実践!Flex 2のインストール

著者:ウノウ  酒徳 峰章   2006/12/1
前のページ  1  2  3
Windows XPにFlex Builder 2をインストールする

   次にFlex Builder 2のインストール方法を説明します。こちらはダウンロードしたインストーラを起動し、画面の指示にしたがってインストールするフォルダなど一般的な項目を設定すればインストールが完了します。

   1点注意することは「インストールセットの選択」です。
インストールセットの選択
図4:インストールセットの選択

   一般的には上の「Flex Builder および Flex SDK」を選んでインストールすることをお勧めします。すでにEclipseをインストールしており、Flexのプラグインのみをインストールする場合は下の「Flex BuilderプラグインおよびFlex SDK」を選択します。


Flex Builder 2でコンパイルする

   Flex Builderを使う場合には、煩雑な操作は必要なく実行ボタンを1回クリックするだけで、コンパイルから実行までを行うことができます。

   Flex Builderの起動後、「ファイル」メニューから「新規 → Flex プロジェクト」を選択します。「Flex プロジェクトの作成」画面が表示されるので「次へ」ボタンをクリックします。

   次のダイアログではプロジェクト名を指定します。ここでは、「Hello」と入力し「終了」ボタンをクリックします。

プロジェクト名の設定
図5:プロジェクト名の設定

   すると図6の編集画面が表示されます。

編集画面
図6:編集画面
(画像をクリックすると別ウィンドウに拡大図を表示します)

   ここに先ほどと同じ以下のMXMLのソースコードを記述し「実行」ボタンをクリックすると、画面に「こんにちは」と表示するSWFファイルが生成されます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
      <mx:Label x="10" y="10" text="こんにちは" fontSize="40"/>
</mx:Application>

   Flex Builderでは、上記のようなソースコードによる編集だけでなく、グラフィカルなインターフェースを使って作業することもできます。その際はエディタの上の「デザイン」タブをクリックします。

   デザイン画面に切り替わります。そこで左側にある「コンポーネント」パネルから、「Label」を選びデザイン画面内にドラッグします。次にボックス内を選択して「こんにちは」とテキストを入力します。入力した文字のサイズや色は右側にあるプロパティで調節することが可能です。

デザイン画面
図7:デザイン画面
(画像をクリックすると別ウィンドウに拡大図を表示します)

   画面上部にある実行ボタンをクリックするか、「実行」メニューより「Helloの実行」を選択すると、SWFファイルの生成・実行が行われます。

Webブラウザでの実行画面
図8:Webブラウザでの実行画面


まとめ

   以上、Flex 2のインストールと簡単なプログラムのコンパイル方法を紹介しました。Hello.mxmlのソースを見ると、プログラムというよりはHTMLに似ていると感じたのではないでしょうか。次回、さらに詳しくプログラムを作成する方法について解説します。

前のページ  1  2  3


ウノウ株式会社  酒徳 峰章
著者プロフィール
ウノウ株式会社  酒徳 峰章
ウノウ(株)プログラマ。ソフト企画「くじらはんど」にて、オンラインソフトを多数発表。代表作は「テキスト音楽『サクラ』」や「日本語プログラミング言語『なでしこ』」など。オンラインソフトウェア大賞2001入賞。2004年度IPA未踏ユースでスーパークリエイターに認定。著書に「ゲームプログラミングで学習するActionScript(Flash8/MX2004)」など。


INDEX
第2回:実践!Flex 2のインストール
  はじめに
  Windows XPにFlex 2 SDKをインストールする
Windows XPにFlex Builder 2をインストールする