AIR/Flex: 2011年2月アーカイブ

Flash で、<mx:Image>タグで貼り付けた画像ファイルがちゃんと読み込まれたかの判定がしたい。

つまり、

<mx:Image x="10" y="10" id="image1" width="100" source="img/1.jpg" />

みたいに指定してた時、img フォルダの下に 1.jpg が無かったら（読み込めなかったら）任意の処理をしたいというわけだ。

例えば URLLoader を使ってデータを読み込んでくれば、失敗したかどうかはすぐに取れるんだけど、今回は <mx:Image> タグを使うのが必須条件。

で、最初は、データが読み込まれなければ（当然「空の画像」なわけだから）画像の横幅が取れないんじゃないかと思って、 image1.content.width の値を取ってみたんだけど、画像ファイルが読み込めなかった時も、14って値返してくるな・・・
どうも、ファイルが読めなかった時に表示される「壊れ画像アイコン」の幅を取ってきているようだ(^^;

さて、どうしようかなっと思ってググってたら、

obj = image1.getChildAt(0) as FlexLoader;

のようにして、Imageコントロールの子オブジェクトを取得しようとすれば、画像が読み込めてない時は NULL 値が返ってくるような記述を見つけた。

そこで、

var obj:FlexLoader  = image1.getChildAt(0) as FlexLoader;
if (obj == null) { // 読み込まれてない！
    ...いろいろな処理
}

という処理を書いてみたのだが、どうも上手く行く場合と行かない場合がある。
5つくらいの画像でこういう処理をやるのだが、5つの内、2つの画像ファイルが存在していない時、最初の（本来は存在していない）画像のみ NULL が返ってこないのだ。（2つ目の非存在画像ではちゃんと NULL が返ってくる）

何か、タイミングの問題なのかなと思い、メインウィンドウが表示される時の、creationComplete イベントで処理を起動していたのを、updateComplete イベントで起動するようにしたら上手くいったようだ・・・もう少しテストしてみんとタイミングの問題なんで何とも言えんが、今のところは上手くいってるみたい。

この調査及びプログラムの修正だけで半日を潰してしまった。よもや、こんなにハマるとは思わず、この処理はまったく工数見積してなかったのに・・・がっくり(;_;

しかし、creationComplete イベントの説明見ると、「コンポーネントの構築、プロパティ処理、測定、レイアウト、および描画が完了したときに送出されます。」って書いてあるんで、全ての画像ファイルを読み込んだ後で起動される・・・と判断していたのだが、何か違うのね・・・(^^;
updateComplete イベントもプログラム起動時に起動されるとは知らなかった。

なんか、イベント駆動型のプログラミングって、この辺の処理タイミングとかでハマること多いよなあ・・・(^^;

Adobe Flex Builder 3 での Flash 開発。

例えばサムネイル画像をマウスでクリックして何かする処理があったとする。
「何かする処理」はサムネイル画像の click イベントに書くのだが、それだけだと、マウスをサムネイル画像の上に持っていっても、「マウスポインタは矢印のまま」「サムネイル画像にも何の変化もない」ので、「サムネイル画像をクリックしたら何か起きる」感が全然ない。

ということで、マウスをサムネイル画像の上に持っていったら「マウスポインタを指マークにする」「サムネイルをハイライト（明るく）表示する」ことで、「クリックしたら何か起きる」感を出すことにしたい。

この場合、<mx:Image>タグで、

<mx:Image x="576" y="4" id="sumimg" source="img/sum1.jpg" width="48" height="48"
    click="changeImage();"
    useHandCursor="true" mouseChildren="false" buttonMode="true"
    rollOver="rollOverHandler(event)" rollOut="rollOutHandler(event)" />

という具合に、useHandCursor="true" mouseChildren="false" buttonMode="true" という指定を追加すれば、このサムネイル画像上にマウスポインタが来た時は指マークに変化する。

で、ハイライト表示だが、これは、rollOver プロパティ、rollOut プロパティにそれぞれマウスがロールオーバー、ロールアウトした時の処理を以下のように記述する。、

private function rollOverHandler (evt:MouseEvent) :void { 
    sumimg.alpha = 0.60; 
}

private function rollOutHandler (evt:MouseEvent) :void { 
    sumimg.alpha = 1.00; 
}

マウスがサムネイル画像の上に乗った（ロールオーバー）時は、サムネイル画像の非透明度を 60%（うっすら透明）に、マウスがサムネイル画像の外に動いた（ロールアウト）時は非透明度を100%（まったく透けてない）状態にしてるんだな。

こうすれば、うっすら透明にした時に、バックの白色が透けて、まるで画像が明るく光っているように見えるわけだ。画像のバックが黒色なら、多分、暗くなったように見えるんじゃろう。やったことないけど。

と、まあ、いつもは明るく光ってる画像を用意して、ロールオーバー時に画像を切り替えたりしてたんだけど、alpha プロパティの値変える方が簡単なので、メモっとく。