Flash開発お勉強(4)画像配置とクリックイベント(AS3)

昨日はmxmlにs:Imageを並べて5つ画像を表示してみたが、
実際のところ5つ固定で並べるよりも、動的に生成したいもの。

というワケでActionScript側で組んでみました。

・Main.mxml

<?xml version="1.0" encoding="utf-8"?>

<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" applicationComplete="init()">

<fx:Declarations>

</fx:Declarations>

<fx:Script source="init.as" />

</s:Application>

・init.as

import flash.events.Event;

import flash.events.MouseEvent;

import mx.controls.Alert;

import flash.display.Loader;

import flash.net.URLRequest;

import flash.display.Sprite;

import mx.controls.Button;

import mx.core.UIComponent;

import flash.ui.Mouse;

import flash.ui.MouseCursor;

import spark.effects.Rotate

public function init():void {

for (var i:int = 1; i <= 5; i++){

dispotisionCard(i);

}

}

private function dispotisionCard(number:Number):void {

var loader:Loader = new Loader();

var randNum:String;

var urlReq:URLRequest;

var ui:UIComponent = new UIComponent();

// ランダム値計算（1～10までのランダム数を取得）

randNum = (Math.floor(Math.random() * 10) + 1).toString();

// 2桁で先頭0埋め

randNum = String("0" + randNum).slice( -2);

// 画像ファイルを取得

urlReq = new URLRequest("../image/s" + randNum + ".png");

// 画像ファイルロード

loader.load(urlReq);

// 画像のサイズ変更

ui.scaleX = 0.5;

ui.scaleY = 0.5;

// 画像の位置変更

ui.x = this.stage.x + number * 100;

ui.y = this.stage.stageHeight - 200;

//　画像配置・イベント設定

ui.addChild(loader);

ui.addEventListener(MouseEvent.CLICK, function(e:Event):void { alert(number, ui) } );

// ボタンにする（マウスオーバー時にカーソルが指になる）

ui.buttonMode = true;

addElement(ui);

}

public function alert(number:Number,　ui:UIComponent):void {

Alert.show(str + "番目のカードがクリックされました");

ui.setVisible(false);

dispotisionCard(number);

}

mxml側がスカスカになってます。

・できたモノ
https://dl.dropboxusercontent.com/u/189929509/Flash/20130707/Card/bin/index.html

・ポイント1
画像ファイルの読み込みは、
①Loaderを定義
②URLRequestを定義して、画像ファイルパスを指定
③ ②を①のLoaderに読ませる
④UIComponentのaddChildにLoaderを指定
⑤UIComponentをaddElement
としています。他にも色々とお作法はあるみたい。
都度読み込むような形になっているので重いし、やり方悪いような気がするなぁ･･･

・ポイント2
作成したUIComponentにaddEventListnerをしていますが
このListnerから呼ばれる関数に引数を渡したいため、無名関数を作成したその中でalert関数を呼んでいます。
クリックしたカードの入れ替えをしたいため、対象のuiを非表示にした後配置し直してます。

ホントは、クリック時に何かしらのエフェクト効果（画像暗転とか）をかけたいんですが、そのやり方がいまいちわからず。
mxmlのfx:Declarations内にs:Rotateとかを定義して、mxmlの部品からmouseDownEffectをつけてやると動くんですが、
そのプロパティをAS側で組むやり方がわからない。
mxml側に
<s:Rotate id="rotate"angleFrom="0" angleTo="360" duration="1000"  autoCenterTransform="true" />
などと定義し、AS側で
ui.setStyle("mouseDownEffect","rotate")
ではダメだった。
ASの中だけでrotateさせるのは毎フレームrotation値を変更する･･･というようなものしか見つからなかったし。

mxml側に定義した部品のプロパティをASでいじることはできるので、
ちょっとmxml側に部品を置く形で組みなおしてみようかな。