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

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

0
Posted in Lab. By antsinc

前回は、サラッとFlex Builderを使ってSWFを作ってみました。今回は、もう少し複雑な動きをするSWFを作ってみることにしましょう。MXMLだけでなく、いよいよActionScript 3でのスクリプティングにも挑戦してみます。

画像を埋め込んでみよう

前回書いたコードのままだと、いかにもなボタンで殺風景です。そこで、アイコンを設定してみることにしましょう。アイコンに利用できるファイルはICOファイルではなく、Flexで扱える画像すべてです。ここでは、適当に画像を作ってPNG形式で保存します。可逆圧縮であること、圧縮率がよいこと、色空間が広いこと、透過できること、といった特徴から、Flexの中で利用する画像はPNG形式がオススメです。ここではICON_test.pngファイルを作成し、プロジェクトのMXMLファイルと同階層に配置します。

画像を準備したところで[Design]ペインを選択しましょう。[Flex Properties]ペインの[Common]に「Icon:」入力欄があるので、横のフォルダ アイコンからICON_test.pngを読み込みましょう。

■アイコン画像の読み込み
アイコン画像の読み込み

すると、「Icon:」フィールドに「@Embed(‘ICON_test.png’)」が入力されているはずです。この@Embed(‘ファイル名’)がオブジェクトの埋め込みを指示する文法となります。MXMLでは次のようにタグが書き変わっています。

@Embedによる埋め込み(MXML)

<mx:Button label="Test" id="testBtn01" labelPlacement="bottom" fontFamily="Courier New"
  fontSize="13" color="#ff8040" themeColor="#919cc4" fillColors="[#400080, #400080]"
  width="150" height="30" y="7" cornerRadius="4"
  mouseOver="popTxt01.text='mouseOver event occurerd.';popTxt01.visible=true;"
  mouseOut="popTxt01.visible=false;popTxt01.text='';" click="test();"
  horizontalCenter="0" icon="@Embed('ICON_test.png')"/>

Flexでは、画像のほかにMP3ファイルやFLV、TrueTypeフォントなども埋め込み可能なようです。今後、複雑めなサンプルを作る際にそれらについてはご紹介しましょう。ところで、[Design]表示でアイコンが正しく表示されていないです。これは不具合ではなく、Flexの表示更新タイミングの問題なので、[Design]―[Refresh]メニューを使って強制的にリフレッシュしてみましょう。ボタンのラベルまできちんと表示できるように、testBtn01の「Label placement:」入力欄で「right」を選択しておきましょう。このように調整した状態で、次にActionScript 3を書いてみましょう。

MXMLの中にActionScript 3を書いてみよう

それでは、いよいよスクリプティングっぽいことをやってみましょう。[Source]ペインを開きます。<mx:Application>がXMLのルート階層なので、その直下にスクリプト埋め込み用のタグを記述していきます。

<mx:Script>タグを挿入

<mx:Script>
  <![CDATA[
    
  ]]>
</mx:Script>

<mx:Text>タグの次の行で「<mx:Script>」と入力していきます。途中まで入力するとインクリメンタル検索で補完され、タグを閉じる「>」を入力すると、あとの部分は自動で挿入されます。これで後は空行部分にActionScript 3のスクリプトを入力していくことになります。では、前回作ったTestボタンを押すと適当なスクリプトが動作するようにイベントを追加してみましょう。

Testボタンにイベントを追加

<mx:Button label="Test" id="testBtn01" labelPlacement="right" fontFamily="Courier New"
  fontSize="13" color="#ff8040" themeColor="#919cc4" fillColors="[#400080, #400080]"
  width="80" height="30" y="7" cornerRadius="4"
  mouseOver="popTxt01.text='mouseOver event occurerd.';popTxt01.visible=true;"
  mouseOut="popTxt01.visible=false;popTxt01.text='';" click="test();"
  horizontalCenter="0"/>

このコードで追加したのは、clickイベント(マウスでクリックされた際に発行される)イベントが発生すると、test()メソッドを呼び出すようにしてみました。この段階では、<mx:Button>行の先頭に警告が表示されています。これはtest()メソッドがどこにも定義されていないことをコンパイラが警告したものです。[Problems]ペインにもその旨が表示されているはずです。

■Flexの警告表示
Flexの警告表示

せっかく<mx:Script>タグを用意したので、ここに未定義だったtest()メソッドを記述していきましょう。test()メソッドのひな形を作ってみます。

test()メソッドのひな形

function test():void{
  //……①
}

の部分にコードを書いていくことになります。それでは、「mouseOver event occurerd.」を表示する代わりに、「click event occurerd.」を表示するようにしてみましょう。前回はTestボタンのmouseOverイベントに対してコードを書きましたが、同じようなコードを記述します。test()メソッドの完成系は次のコードになりました。

test()メソッドの完成形

function test():void{
  popTxt01.text="click event occurerd.";
}

完成したMXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300">
  <mx:Button label="Test" id="testBtn01" labelPlacement="right" fontFamily="Courier New"
  fontSize="13" color="#ff8040" themeColor="#919cc4" fillColors="[#400080, #400080]"
  width="80" height="30" y="7" cornerRadius="4"
  mouseOver="popTxt01.text='mouseOver event occurerd.';popTxt01.visible=true;"
  mouseOut="popTxt01.visible=false;popTxt01.text='';" click="test();"
  horizontalCenter="0" icon="@Embed('ICON_test.png')"/>
  <mx:Text y="56" fontSize="18" fontWeight="bold" fontFamily="Courier New"
  color="#ffffff" width="400" id="popTxt01" textAlign="center" height="25"
  creationComplete="popTxt01.visible=false;" horizontalCenter="0"/>
  <mx:Script>
    <![CDATA[
      function test():void{
        popTxt01.text="click event occurerd.";
      }

    ]]>
  </mx:Script>
</mx:Application>

ここでCtrl+Sで保存すると、Flexの警告が表示されます。これは出ていても支障がないので、とりあえずは無視してしまいましょう。それでは、前回のように[Run]ボタンでプレビューしてみましょう。期待どおりに動きましたか?

今回はここまでです。イベントにアタッチするメソッドを<mx:Button>に直接書かず、<mx:Script>タグ内に埋め込んでみました。次回は、スクリプトの埋め込み量を減らし、外部ファイル化する方法を試してみることにしましょう。

Let’s Flex!

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