株式会社antsのホームページへようこそ。

FlexとActionScript 3でガジェットを作る!<第1回>

0
Posted in Lab. By antsinc

そろそろFlash 9のロードマップも聞こえてきたことだし、ActionScript 3移行を見据えて勉強しようかなぁ、ということで、いまのところActionScript 3で開発できる唯一の環境「Flex 2」で遊んでみることにしましょう。

Flex 2をゲットしよう

では、さっそくFlex 2を入手してみましょう。Flex 2には、統合開発環境としてカスタマイズ版のEclipseを使う「Adobe Flex Builder 2」と、コマンドラインでコンパイラを利用するSDK版の2種類が用意されています。統合開発環境版はレジスト コードを入力するまでは試用版として30日間体験利用でき、SDK版は無償利用できます。とりあえず、Flex関連のインストーラをアドビ システムズ社の公式サイトからダウンロードしてしまいましょう。

■Flex体験版のダウンロード
Adobe Flex 2(アドビ システムズ社公式サイト)

ダウンロードが終わったら、理解しやすいFlex Builderを使うべくインストールしましょう。これでActionScript 3で遊ぶ準備は完了です。

Flex Builderを起動してデザイナーを使ってみる

BetaNewsの環境には英語版をインストールしてあるのでスクリーンショットが英語表記ですが、メニューの配置は日本語版と変わらないので、適宜読み替えてください。

起動直後にはプロジェクトを作ることになります。新規プロジェクトを作成する際に表示されるダイアログでは、特に必要がない限り[Basic]オプションをラジオボタンで選んでおきます。

■Flex Builderでの新規プロジェクト作成
Flex Builderでの新規プロジェクト作成

プロジェクトの新規作成が完了するとテンプレートが展開され、デザイナー画面に移行します。

■新規プロジェクトの最初の画面
新規プロジェクトの最初の画面

この画面の説明をする前に、簡単にFlexプロジェクトのテンプレートを紹介しておきましょう。上の画面の左上の[Navigator]パネルの中に入っているのが、新しく作成したプロジェクトのテンプレートから生成されたファイル群です。まず、ルート階層にはMXML(Macromedia XML)ファイルが1つ存在します。これはプロジェクト名と同名で拡張子を.mxmlとしたもので、Flexでアプリケーションを作成する際のメインとなるソース ファイルです。開発が進むと、ルート階層には各種XMLファイル、SWFファイルに埋め込むフォントや画像、CSSといったリソースが置かれることになります。

次に「bin」ディレクトリですが、ここにはコンパイル済のSWF(通常用とデバッグ用)、SWFファイルをWebブラウザでロードするためのHTML、CSS、JavaScript、Flash Playerインストールを促すSWFなどが含まれます。「html-template」ディレクトリには、「bin」ディレクトリを生成する際の元となるファイルが保管されています。ここを書き換えれば、コンパイル時に自動生成されるページをカスタマイズできるようです。

アプリケーション作成時には、基本的にはMXMLかASファイルを編集し、コンパイルした結果が「bin」ディレクトリに生成される、ということを覚えておきましょう。ガジェット作成においては、「bin」ディレクトリに生成されるプロジェクト名と同名のSWFファイルをガジェット フォルダにコピーしてテストする流れとなります。

これで前置きはおしまい。さっそくデザイナーでコントロールを配置するところから試してみましょう。

UIコンポーネントをペタペタと

EclipseやVisualStudioなどのIDE(統合開発環境)に馴染んでいる人ならば、あまり違和感なくデザイナーの画面に飛び込めると思います。ここでは、[Navigator]パネルの下に見えている[Component]パネルから適当にコントロールを落としてみましょう。中央に表示されている落とす先は青いキャンバスの上です。ためしに、[Component]パネルの中で折りたたまれている「Controls」をクリックして展開し、「Button」コントロールをドラッグ&ドロップしてみます。

■UIコントロールの生成
UIコントロールの生成

ここで、「Button」と書かれたコントロールがアクティブになり、右側の[Flex Properties]パネルの表示が変化したと思います。まず、ここでは適当に入力していきましょう。分からないことがあれば、各フィールドのラベル部分などにマウスオーバーすればツールチップが表示されるので、値を入力していきます。ここでは、一例として以下のような設定をしてみます。

■Buttonコントロールのプロパティ設定
Buttonコントロールのプロパティ設定
MXMLって何者?

さて、いま編集しているのはMXMLファイルなのですが、MXMLとはいったいどのような構造になっているのか見てみることにしましょう。名前のとおり、MXMLはFlex用の名前空間が利用できるXMLです。MXMLのコードを編集するには、中央のキャンバスに付いている[Source]タブ]をクリックします。すると、次のようなソースコードが表示されるはずです。

Buttonコントロールを貼っただけのMXMLファイル

<?xml version="1.0" encoding="utf-8"?> ……①
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> ……②
  <mx:Button x="220" label="Test" id="testBtn01"
    labelPlacement="bottom" fontFamily="Courier New"
    fontSize="13" color="#ff8040" themeColor="#919cc4"
    fillColors="[#400080, #400080]" width="150" height="30" y="220"
    cornerRadius="4"/> ……③
</mx:Application> ……④

は、MXMLでXMLとしての決まり事を宣言している部分です。の部分は、MXMLがFlexアプリケーションたり得ているタグです。ここで「<mx:Application~~」とありますが()、これがFlex流のアプリケーション定義用のタグです。Flexでコンポーネントを作成すると、コンポーネントを示すタグ(「Canvas」など。ベース クラスにより変化)に変わります。の部分がButtonコントロールの定義です。このように、HTMLのようなイメージで属性として見た目を設定しているわけです。

ここで、いったんデザイナー画面での編集結果をセーブしてみましょう。すると、「bin」ディレクトリにあるSWFが更新されているはずです。ツールバーにあるRun Iconのアイコンで実行してみましょう。すると、ブラウザが開きTestボタンが貼られただけのページが表示されます。基本的には、Flexではこの流れでの作業が多くなります。

■とりあえず走らせてみよう
とりあえず走らせてみよう

ところで、せっかくButtonコントロールを置いたのに、マウスで何も起こらないのはつまらないですよね。そこで、マウスオーバーしたらテキストフィールドを表示し、メッセージを表示するように加工してみます。

コントロールにイベントを書いてみる

では、いったんFlex Builderの[Design]パネルに戻り、マウスオーバーでメッセージを表示するテキストフィールドを配置しましょう。[Component]パネルからTextコントロールを選択し、キャンバスにドラッグ&ドロップします。そのままでは非常に小さい黒字に地味な境界線なので、右ペインにある[Flex Properties]パネルで適宜見た目を設定します。その際に、デフォルトで表示されるテキストを示す「Text」プロパティを空白にしておきます(文字スタイルの編集中はデフォルトの文字を残しておいた方が便利です)。ここでBetaNewsが適当に作ったテキスト表示領域のMXMLタグは次のようなものになりました。

ポップアップ用のテキストフィールド

<mx:Text x="169" y="300" fontSize="18" fontWeight="bold" fontFamily="Courier New"
  color="#ffffff" width="250" id="popTxt01" textAlign="center" height="26"/>

これで、超適当にpopTxt01と命名されたTextコントロールが配置されました。そこでFlex Builderの[Source]パネルに戻ってみます。MXMLの<mx:Button>~~という部分があると思います。ここがTestボタンに相当するので、マウスオーバーに対応するアクションを記述してみましょう。

Flex Builderでは、MXMLのノード内の属性記述が途切れた部分でスペースを入力すると、自動的にそのコントロールが持っている属性/プロパティ/イベントがインクリメント検索されます。それを利用して、最後尾の属性の直後でスペースを入力し、mouseOverイベントを探してみます。ある程度絞り込めたコード ヒントが表示されたら、Tabキーを押すだけで、「mouseOver=””」というコードが挿入されます。

■コード ヒントでイベントを書く
コード ヒントでイベントを書く

自動生成されたイベントの部分に、ハンドラとなるコードをActionScriptで記述してみましょう。ここでは、Textコントロールを表示状態にして、さらに「mouseOver event occurerd.」というメッセージを表示することにします。記述するのは次のコードです。

ハンドラとなるコード(ボタン用)

popTxt01.text='Button mouseOver event occurerd.';
popTxt01.visible=true;

これで、popTxt01の内容となるテキストを書き換え、さらに強制的に表示状態にするコードをイベントにアタッチできました。ついでに、mouseOutイベントに対してもコードを挿入しておきましょう。完成したtestBtn01のタグは次のようなものになります。

testBtn01のタグ全体

<mx:Button x="220" label="Test" id="testBtn01" labelPlacement="bottom"
  fontFamily="Courier New" fontSize="13" color="#ff8040" themeColor="#919cc4"
  fillColors="[#400080, #400080]" width="150" height="30" y="220" cornerRadius="4"
  mouseOver="popTxt01.text='mouseOver event occurerd.';popTxt01.visible=true;"
  mouseOut="popTxt01.visible=false;popTxt01.text='';"/>

これでボタン上のマウス イベントに応じてTextコントロールを書き換えるコードは完了です。ただし、アプリケーションのロード時にTextコントロールが表示状態になってしまうので、コントロールの表示準備が整って表示状態に切り替わる直前に発行されるcreationCompleteイベントをハンドルしておきましょう。

popTxt01のタグ全体

<mx:Text x="169" y="300" fontSize="18" fontWeight="bold" fontFamily="Courier New"
  color="#ffffff" width="250" id="popTxt01" textAlign="center" height="26"
  creationComplete="popTxt01.visible=false;"/>

メッセージの長さを考慮してTextコントロールやキャンバス(アプリケーション)自体のサイズを調整したMXMLコードとSWFを作りましたので、皆さんもいろいろと実験してみてください。MXMLはテキスト エディタなどでEclipseで開いたMXMLに全部をコピー&ペーストするだけでコンパイルできると思います。次回は、もうちょっと複雑なコードをMXMLの中に埋め込んでいく実験をしていきます。

Let’s Flex!

■今回作ったサンプルのMXMLとSWF
FlexSample01.zip