うみの河童

東京ひよこの会(第2回) Event祭りに行ったよ

みなさん、待ちに待った第2回東京ひよこの会に行ってきました!

今回のお題は
Event

Flash(ActionScript3.0)を使うときは必ず使うといっても過言ではない
あのEvent

たくさんあるEventの中から
自分はLoaderまわりのEventをつかった発表をした。

某案件でやったんだけど、
XMLに記述してあるパスの画像を順番に読込んで配列に入れるという処理。
もちろんそのXMLを読込んだ後は画像をLoaderを使って読込むんだけど
そこで問題発生。

こんな感じになる。
Loader 普通バージョン

[sourcecode language="actionscript3"]
package classes
{
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
/**
* ...
* @author Kurashita Masayuki
*/
public class Main extends MovieClip
{
//画像のパスが入る配列
private var _imagePathArray:Array;

//画像が入る配列
private var _imageArray:Array;

//現在の格納数のカウンタ
private var _count:uint;

//--------------------------------------------------------------------------
//
// コンストラクタ
//
//--------------------------------------------------------------------------
public function Main()
{
init();
}

//--------------------------------------------------------------------------
//
// 初期化
//
//--------------------------------------------------------------------------
private function init():void
{
_imagePathArray = [
"./images/image_01.jpg",
"./images/image_02.jpg",
"./images/image_03.jpg",
"./images/image_04.jpg"
];

_imageArray = [4];

//カウントの初期化
_count = 0;

//画像の読込み開始
loadStart();
}

//----------------------------------
// 画像の読込み開始
//----------------------------------
private function loadStart():void
{
var _loader:Loader;

var _num:uint = _imagePathArray.length;
for (var i:uint = 0; i < _num; i++)
{
_loader = new Loader();

_loader.load(new URLRequest(_imagePathArray[i]));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadComp);
}
}

//----------------------------------
// 画像の読込み終了
//----------------------------------
private function imageLoadComp(e:Event):void
{
var _loader:Loader = e.currentTarget.loader as Loader;

var _bm:Bitmap = _loader.content as Bitmap;

//画像を流し込むテンプレート
var _temp:tempMc = new tempMc();
_temp.addChild(_bm);
_temp.txt.text = Math.round(_loader.contentLoaderInfo.bytesTotal / 1000) + "KB";
_temp.y = Math.floor(_bm.height / 2);

//配列に格納
/////////////////////////////////////////////////////////////////////
//ノーマル
_imageArray[_count] = _temp;
/////////////////////////////////////////////////////////////////////

//読込んだ数をカウント
_count++;

//全て読込んだら
if (_count == _imagePathArray.length) allLoad();
}

//--------------------------------------------------------------------------
//
// 全て読込んだ
//
//--------------------------------------------------------------------------
private function allLoad():void
{
//配列に格納された順に配置する
var _num:uint = _imageArray.length;
for (var i:uint = 0; i < _num; i++)
{
_imageArray[i].x = i * 200;
addChild(_imageArray[i]);
}
}
}
}
[/sourcecode]

読み込みたい順番(画像下の番号)でパスをかいてるのに
順番がバラバラになってしまう。
これは、画像の容量によってloaderが完了する順番が変わってくるため、
比較的容量が軽いのが先にはいってしまうから。

そこで、改良したのがこちら。
Loader 整理バージョン

[sourcecode language="actionscript3"]
package classes
{
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;
/**
* ...
* @author Kurashita Masayuki
*/
public class Main extends MovieClip
{
//画像のパスが入る配列
private var _imagePathArray:Array;

//画像が入る配列
private var _imageArray:Array;

//現在の格納数のカウンタ
private var _count:uint;

//--------------------------------------------------------------------------
//
// コンストラクタ
//
//--------------------------------------------------------------------------
public function Main()
{
init();
}

//--------------------------------------------------------------------------
//
// 初期化
//
//--------------------------------------------------------------------------
private function init():void
{
_imagePathArray = [
"./images/image_01.jpg",
"./images/image_02.jpg",
"./images/image_03.jpg",
"./images/image_04.jpg"
];

_imageArray = [4];

//カウントの初期化
_count = 0;

//画像の読込み開始
loadStart();
}

//----------------------------------
// 画像の読込み開始
//----------------------------------
private function loadStart():void
{
var _loader:Loader;

var _num:uint = _imagePathArray.length;
for (var i:uint = 0; i < _num; i++)
{
_loader = new Loader();

_loader.load(new URLRequest(_imagePathArray[i]));
//名前を付ける
_loader.name = String(i);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadComp);
}
}

//----------------------------------
// 画像の読込み終了
//----------------------------------
private function imageLoadComp(e:Event):void
{
var _loader:Loader = e.currentTarget.loader as Loader;

var _bm:Bitmap = _loader.content as Bitmap;

//画像を流し込むテンプレート
var _temp:tempMc = new tempMc();
_temp.addChild(_bm);
_temp.txt.text = Math.round(_loader.contentLoaderInfo.bytesTotal / 1000) + "KB";
_temp.y = Math.floor(_bm.height / 2);

//配列に格納
/////////////////////////////////////////////////////////////////////
//ノーマル
//_imageArray[_count] = _temp;
//整列
_imageArray[_loader.name] = _temp;
/////////////////////////////////////////////////////////////////////

//読込んだ数をカウント
_count++;

//全て読込んだら
if (_count == _imagePathArray.length) allLoad();
}

//--------------------------------------------------------------------------
//
// 全て読込んだ
//
//--------------------------------------------------------------------------
private function allLoad():void
{
//配列に格納された順に配置する
var _num:uint = _imageArray.length;
for (var i:uint = 0; i < _num; i++)
{
_imageArray[i].x = i * 200;
addChild(_imageArray[i]);
}
}
}
}
[/sourcecode]

ちゃんと順番通りになってるでしょ!
今回工夫したところは、70行目なんですが
Loaderにnameで名前をつけます。iを入れているから
0~3が入るはず。
そして、 95行目でnameを取り出してその番号の配列に突っ込む。
すると、容量に関係なく順番に入ると!! でも、安全な開発を考えるなら
一つずつ読込んでいくのがいいみたい。
同時に読込むと、、、心配だね(笑) ってことでこの仕組みは使わなくなっちゃうかも。
まぁ自分のことはどうでもいいの!
皆さんの発表がすばらしかった!
その中でも記憶に残っているのが

・event.stopPropagation();
・Dictionaryクラス

自分もはじめて知った部分だったんで、
他に参加していた方々のレポートで見てみてください。

今回も白熱した発表で時間もオーバー!
みんな熱いな!と
その勢いで懇親会へ。

みんな熱いな!と
ビックゲストのひろゆきさんも今回の東京ひよこに参加されていて
ドキドキでした!こんな無知で、、、と終始恥ずかしかった。。。
もっと勉強しなきゃ

あとは、8インチ?のフロッピーが武器になる
とか
windowsのHDDがなぜCから始まるのか
とか

 

Flashの話はしませんでした(笑)
先輩に話せるほどFlashネタも浅いのでたすかりましたが。
勉強します!

絶対第3回も参加します!

次はスライドつくろうかな、、、

お疲れ様でした!