今日は、Flex4での画像の表示方法について学ぶ。

ちなみに昨日作ったボタンを好きな位置に配置してみようと思ったら、一瞬だった。
プロパティを足すだけ。

<s:Button id="myButton" label="hello!!!"  creationComplete="myButton.x = 100; myButton.y = 200;" />

さて画像の表示であるが、Imageというタグが扱えるみたい。
今回は以下のような画像を作成。


card.png

次のタグでmxml内に記載。

<s:Image id="card1" source="@Embed('image/card.png')" />

すると、次のエラーが・・・

C:\Flash\HelloButton2\src\Main.mxml: Error: unable to resolve 'image/card.png' for transcoding

調べると、やはり英語のフォーラムだが画像はmxmlと同じフォルダに置けとのこと。
そうか!mxmlはsrcの下にあるから、そもそもパスが違うんだ。
asファイルなんかはsrcの下に配置するため、勘違いしてました。

というわけで../を足して次で解決。

<s:Image id="card1" source="@Embed('../image/card.png')" />

次に、画像を任意の位置に配置してみるが、これもボタンと同じ形でいけた。

<s:Image id="card1" source="@Embed('../image/card.png')" creationComplete="card1.x=100; card1.y=300;" />
<s:Image id="card2" source="@Embed('../image/card.png')" creationComplete="card2.x=150; card2.y=300;" />
<s:Image id="card3" source="@Embed('../image/card.png')" creationComplete="card3.x=200; card3.y=300;" />
<s:Image id="card4" source="@Embed('../image/card.png')" creationComplete="card4.x=250; card4.y=300;" />
<s:Image id="card5" source="@Embed('../image/card.png')" creationComplete="card5.x=300; card5.y=300;" />

このような感じで5つ配置してみると、以下のような結果に。



おぉ~。

で、これのクリックイベントをとりたいんだけど、とりあえずclick=で書けばいいのはわかるが
単純なシングルクリック以外のイベントとか、クリック時の処理で画像を変更するとかになると明らかに足りない。
てことはやっぱりActionScriptになるのかな?ということでActionScriptにてクリックイベントを取得してみる。

いろいろ試行錯誤したがまず、Flex4でmxml内にActionScriptを書く場合は次のタグを使う。
<fx:Script>

この中のスクリプトに下記のような形で記述。
mxmlのアイテムにて、idを指定しておけばそのアイテムのaddEventListenerが定義できる。

import flash.events.Event;

import flash.events.MouseEvent;

import mx.controls.Alert;


card1.addEventListener(MouseEvent.CLICK, alert)


public function alert(e:Event):void {

Alert.show('dekita-');

}

しかし、次のエラーが出て怒られる。

C:\Flash\HelloButton2\src\Main.mxml(17):  Error: Access of undefined property card1.

Flex3の公式ドキュメントを参考にしながら、addEventListnerを関数内に定義し、その関数をApplicationタグ内でcallした。

関数

public function createHandlers(e:Event):void {

card1.addEventListener(MouseEvent.CLICK, alert)

}


Applicationタグ

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="createHandlers(event)" >


結局、上記の形でうまくいきました。
card1のプロパティ設定するにあたって、何か記述位置等のルールがあるのかな?
このあたりの理由はいまいち理解が浅いのでわかってないけども、今日はここまで。