そこで、ちょうど前回のエントリーで動く背景を作った事だし、自分のサイトでも使いましょうと思い立ちデジカメでとった動画を加工。

先日高円寺の阿波踊りがあったことだし阿波の動画をflv化してswfにMCとして読み込む
さくらちろって屋号なのに阿波の背景もどうかな？と思いうちのさくらとチロの動画もflv化してswfに読み込む。

せっかくだからもうちょっと動画を増やしてランダムで表示させたくなる。
最初javascriptでランダムにswfを読み込むようにしようかと考えていたけど、Flash側で制御した方が適してるし楽チンなんじゃないかって事でASを書く

loader.swf

//読み込むswfのリスト
var swf_list:Array = [
"dummy.swf",
"dummy.swf",
"dummy.swf",
"dummy.swf",
"dummy.swf"
];

//外部swfロード処理
var loader_obj:Loader=new Loader();
var loadFile = Math.floor(Math.random() * swf_list.length);
trace(swf_list[loadFile]);
var swf_url:URLRequest = new URLRequest(swf_list[loadFile]);
loader_obj.load(swf_url);

stage.addChild(loader_obj);

デモ｜さくらちろ
外部swfのリストを外部xmlにすれば更新が楽になるんだろうけど、そこまでしなくてもいいかなと。

今回の躓いた所
loader.swfから見た読み込むswfへのパスではなく
loader.swfを呼び出してるhtmlからswfへのパスじゃないと通らない

stage.addChild(loader_obj);してなくて、表示がされなかったり。

wpって自身のblogのエントリーへリンク張る方法用意されてるのかな？
自分のパーマリンクをコピって手動でやったけど、調べてみよう。

開発者のZeh氏のブログで公式なアナウンスの翻訳をしてくれてるblogにトラックバックしてみたんだけど、トラックバックとは、どう表示されるのだろう。

[追記｜20090808_02:22]
リンク手動でつけた

追記｜20090804_04:02
あーれー絶対パスでも相対パスでも表示されないぞ

追記｜20090804_04:22
fla内のxmlまでのパスを絶対パスにしたら読み込んだ。
wpが吐き出すhtmlはどの階層にあるんだろうか

というより絶対パスでしかちゃんと動作しないとなると
汎用性が全くなくなるんで意味がない。

[追記 / 20100519]
そういえばソースも何も書いてなかった。
コメントやtrace文そのまま貼りつけてみます。
xmlなどの入ったファイルもアップしておきます、参考になれば。

//tweener設定
import caurina.transitions.Tweener;

//画像関係のパス、xmlに切り替え時間表示時間を書き込めるようにする？
var pathXml:String = "photo-local.xml";

var url_list:Array = [];
var caption_list:Array = [];
var photoloader:Array = [];
var photo_bt;

//tweener関係ロード
var motion_list:Array = [];
var transSpan:Number = 1;//(切り替え間隔、単位：秒)
var transTime:Number = 1;//(切り替えに要する時間、単位：秒)
var transType:String = "easeOutSine";

//画像関係のカウント
var maxNum:int;//読み込んだ画像数
var bitNum:int;//bitmapに変換した画像数
//var nowPhoto:int;//現在表示されてる画像

const startimg:int = 0;
var nowimg:int = 0;
var nextimg:int = startimg + 1;
trace("●startimg ： "+startimg);

var url:URLRequest = new URLRequest(pathXml);
var url_loader:URLLoader = new URLLoader(url);

// xml読み込み完了時に呼び出されるイベント
url_loader.addEventListener(Event.COMPLETE,loadComplete);
function loadComplete(event : Event) {
	var xml:XML = new XML(url_loader.data);
	//xmlからターゲットのパスを指定する｜画像データ関係ロード
	for each (var element:Object in xml.photo) {
		url_list.push(element.photourl);
		caption_list.push(element.photocaption);
		//画像の枚数
		maxNum++;
		trace("maxNum : "+maxNum);
		//_txt.text=url_list.toString();
	}
	//xmlからターゲットのパスを指定する｜モーション関係ロード
	for each (var elementM:Object in xml.defaultMotion) {
	transSpan = elementM.transSpan;
	transTime = elementM.transTime;
	transType = elementM.transType;
	}
	loadphoto();
}

//画像読み込み
function loadphoto() {
	trace("loadphoto / "+loadphoto);
	var maxNum:int = url_list.length;
	for(var i:Number=0;i<maxNum;i++){;
	photoloader[i]=new Loader();
	photoloader[i].load(new URLRequest(url_list[i]));
	//読み込んだらbitmapにキャストする
	photoloader[i].contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
	addChildAt(photoloader[i],i);
	//読み込んだ画像のプロパティ(動作確認用)
	//photoloader[i].x += 10 + i * 25;
	//photoloader[i].y+=10;
	//photoloader[i].scaleX=photoloader[i].scaleY=0.25;
	photoloader[i].alpha = 0;
	//画像にボタン処理(動作確認用)
	//photoloader[i].addEventListener(MouseEvent.CLICK,onClick_func);
}
}
//画像毎の名前取得テスト用のfunction
function onClick_func(e:MouseEvent) {
trace("e.target.name"+e.target.name);
if (e.target.alpha == 1) {
	e.target.alpha = 0.2;
} else {
	e.target.alpha = 1;
}
}
//bitmap化してスムージングをtrueにするよ
function onComplete(e:Event):void {
var image:Bitmap = Bitmap(e.target.content);
trace("e.target.content :"+e.target.content);
image.smoothing = true;
bitNum++;//変換済みの枚数
if (bitNum == maxNum) {
	trace("//初期セット完了bigin実行");
	loopbegin();
	//begin();
	//初期セット完了
}
}

function setindex(nextName) {
var nummax:Number = numChildren;
var owner = nextName;//e.currentTarget;
trace("-nummax / "+nummax,"|-owner / "+owner);
trace("-getChildIndex(owner) / "+getChildIndex(owner));
setChildIndex(owner,nummax-1);
trace("-getChildIndex(owner) after / "+getChildIndex(owner));
}

//スライドショウ設定
function begin() {
trace("");
trace("■begin()開始今の画像 / "+nowimg,"maxNum / "+maxNum);
if (nowimg < maxNum - 1) {//小さいうちは
	trace("■側");
	loop2loop();
} else {//同じになったら
	trace("●else側");
	loop2loop2();
}
}

function loop2loop() {
trace("   通常ループ");
photoloader[nextimg].alpha = 0;//次の画像を透明にして
setindex(photoloader[nextimg]);//nextimgを最前面に移動
Tweener.addTween(photoloader[nowimg],{delay:transSpan,time:transTime,alpha:1,transition:transType,onComplete: begin});
nowimg++;
nextimg++;
}
function loop2loop2() {
trace("   最後だけ｜loop2loop2()");
nextimg = 0;
photoloader[nextimg].alpha = 0;//次の画像を透明にして
setindex(photoloader[nextimg]);//nextimgを最前面に移動
Tweener.addTween(photoloader[nowimg],{delay:transSpan,time:transTime,alpha:1,transition:transType,onComplete: begin});
nowimg = startimg;
nextimg++;
}

function loopbegin() {
trace("一回だけのつもりloopbegin()");
photoloader[nextimg].alpha = 0;//次の画像を透明にして
setindex(photoloader[nextimg]);//nextimgを最前面に移動
Tweener.addTween(photoloader[nowimg],{delay:0,time:transTime,alpha:1,transition:transType,onComplete: begin});
nowimg++;
nextimg++;
}

いやーしかし一年ぶりくらいにみたら、意味が全くわからない。
悲しいなぁ。

var photonum:Array = [];
var photomax = 5;

for (var i:int=0; i<photomax ; i++) {
	photonum[i] = "p" + i;
	this[photonum[i]].addEventListener(MouseEvent.CLICK,getindex);
}

function getindex(e:MouseEvent) {
	var nummax:int = numChildren;
	trace("nummax/"+nummax);
	var owner=e.currentTarget;
	trace("owner/"+e.currentTarget);
	trace(getChildIndex(owner));
	setChildIndex(owner,nummax-1)
}

動的に四角を作ってみる

var photonum:Array = [];
var photomax = 5;
var mySprites;

for (var i:Number=0; i<photomax; i++) {
	var rectcolor:uint = Math.floor(Math.random() * 0xffffff);
	mySprites=new Sprite();
	mySprites.graphics.beginFill(rectcolor);
	mySprites.graphics.drawRect((40*i)+10,(40*i)+10,100,100);
	mySprites.graphics.endFill();
	addChild(mySprites);

	mySprites.addEventListener(MouseEvent.CLICK,getindex2);
}
function getindex2(e:MouseEvent) {
	var nummax:Number = numChildren;
	trace("nummax/"+nummax);
	var owner = e.currentTarget;
	trace("owner/"+e.currentTarget);
	trace(getChildIndex(owner));
	setChildIndex(owner,nummax-1);
}

最初Shapeで四角を作っていたのだけれど、どうもうまくいかない（addEventListenerを設定できない）

as3に慣れてないから、自分の書いたソースのどこが間違ってるの全然わからない＞＜
とりあえずShapeがアヤシイとめぼしをつけて調べてみると

Sprite クラスにも graphics プロパティがあり、これには Shape クラスでは使用できない他の機能があります。 例えば、Sprite オブジェクトは表示オブジェクトコンテナであるのに対し、Shape オブジェクトはそうではありません（子表示オブジェクトも持てません）。したがって、表示するグラフィックスが同じであっても、Sprite オブジェクトは、Shape オブジェクトよりも多くのメモリを消費します。ただし、Sprite オブジェクトではマウスクリックイベントがサポートされますが、Shape オブジェクトではサポートされません。

との事。
なのでshapeをやめてspriteにしたら、マウスに反応した。
簡単な事なのに躓いてばかりだ。

for文の中で何回も同じ
mySprites=new Sprite();
でmySpritesを作成してaddChildしてるけど、これは問題ないのだろうか？
なんで上書きにならないんだろう

メモ（あとでnumChildrenとかsetchildIndexとか調べる時用）
ActionScript3.0逆引きクイックリファレンスp161
「a92、表示オブジェクトの重なり順をコントロールするには」

1. xml読み込む
2. xmlから必要な情報を配列にセット（画像のurl、表示時間、切り替え時間？）
3. 画像ロード
4. 読み込んだ画像を順にビットマップ化しsmoothing=true;
5. 全部読み込んだかの確認？

ここまでが初期設定になるのかな

今回Tweenerというのを初めて使ってみるので触りだけ勉強してみた、ライブラリってテンションが上がる。

スライドショウにする仕組みはどうするんだろう？
読み込んだ画像のalphaを0にセット、一番上だけ1.0か
それから2枚ずつペアでalphaを
1.0 –> 0.0
0.0 –> 1.0
と変化させる？
クロスフェード？あれ？

5枚あるとして（左が重なり順が上、右が奥）
1　1　1　1　1
0　1　1　1　1
0　0　1　1　1
0　0　0　1　1
0　0　0　0　1
1　1　1　1　1
以下ループのがいいかな？
1週するたびに全部を1に変更する時重くなる？ん～。。。

[追記｜20090727_13:42]
0　0　0　0　1 から
1　0　0　0　0 になって
1　1　1　1　1
0　1　1　1　1 に戻る時の処理が関数を新しく呼び出す関係からうまくクロスフェードできないでいる。
同時にhtmlで言うz-indexのようなものを操作すればいいのかな？
やってみよう。
それか2枚ずつペアで切り替わるようにするか、5枚あるときの5から1のつながりをどうすればいいのかなぁ

重なり順参考url

• http://www.adobe.com/jp/devnet/flash/quickstart/display_list_programming_as3/

• http://blog.bonkura.jp/2008/09/as30-13.html

• http://morishige.jp/blog/archives/99

[追記｜20090725_9:00]
targetプロパティで自分自身を選択できた、targetてなんだ？
そもそも参考書やWebのテキストではfunctionの引数（()の中のつもり）が
e:MouseEventになってたり
event:MouseEventとか
evt:MouseEventとか
Event:MouseEventとか
左側はなんでもいいのだろうか？

imgloader[i].addEventListener(MouseEvent.CLICK,click_bt2);

function click_bt2(e:MouseEvent) {
	trace(e.target);
	if (e.target.alpha == 1) {
		e.target.alpha = 0.2;
	} else {
		e.target.alpha = 1;
	}
}

[さらに追記｜20090725_17:05]
e.targetだけだとthisにならないようだ
なんなんだろうなtarget

addEventListenerに引数というのか変数というのかよくわからないけど、そんなのを乗せてfunctionに渡せないのだろうか？

for(var i:int=0;i<maxnum ;i++){
bt[i].addEventListener(MouseEvent.CLICK,bt_function,i);
}

function bt_functon(thisNum){
trace(thisNum);
}

みたいな感じにしたい。

ステージに3個のボタンと画像があって、for文でそれぞれのボタンにMouseEvent.CLICKを指定
同じfunctionから各々に対応した画像のalphaを切り替える
なんてしたかったんだけど、function bt_functionはボタンの数だけ作らないとダメなのだろうか？
そんなバカな！？
なんかやり方があるんだろうけど検索の仕方がわからん。

しかしaddEventListenerを調べてみても値を渡せなさそうだ。
引数は5個まであって、1,2が必須で3-5はオプション？

LoaderInfo.addEventListener
addEventListener () メソッド
override public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/events/EventDispatcher.html#addEventListener()

こんなの見つけた

http://blog.img8.com/archives/2008/04/003758.html

http://blog2.bonkura.jp/?p=13

どっちも「AS3：２６．イベント発生時の処理に引数を渡す」を参照しているのだけれどリンク先が見えない＞＜
[追記｜20100416]
たまたま移転先みつけた。AS3：２６．イベント発生時の処理に引数を渡す

[追記｜20090725_6:52]
bonkura blogの書き方はas1の時に使った記憶があるけどas3での取り出しが判らず使えないと思ってた（as1だと、this.iで参照できたよね？）
「e.target」で参照できるのかー勉強になりました。

for (var i:int=0; i<img_ar.length; i++) {
	me = this["bt_" + i];
	me.i = i;
	me.addEventListener(MouseEvent.CLICK,click_bt);
	trace("me +"+me.name);
}

function click_bt(e:MouseEvent) {
	trace(e.target.i);
	trace(e.target.name);
	if (imgloader[e.target.i].alpha == 1) {
		imgloader[e.target.i].alpha = 0.2;
	} else {
		imgloader[e.target.i].alpha = 1;
	}
}

あーthis.iで参照できたのはfor文の中でfunctionを書いてたから？
こうゆうのとは根本的に何が違うのかな？
違いが判らないのはセンスが無いからだろうか？

for (i = 0; i < 5; i++) {
	this["btn" + i].i = i;
	this["btn" + i].onRelease = function() {
		trace(this.i);
	};
}

• 外部から画像を読み込む
• 読み込む画像の枚数をflaを開かずに変更できる

as1時代に作ったのは、外部テキストに画像のurlと最大枚数を書いておいて表示させるといったモノ。
今回はせっかくなのでxmlを使ってみよう、xml有名だもんね、xml使うメリットとかデメリットとかそもそもxmlて何なの？って全くわかってないけど。

以下のxmlを用意した

<?xml version="1.0" encoding="utf-8"?>
<slideshow>
	<photo>
		<photourl>1.jpg</photourl>
		<photocaption>1枚目</photocaption>
	</photo>
	<photo>
		<photourl>2.jpg</photourl>
		<photocaption>2枚目</photocaption>
	</photo>
	<photo>
		<photourl>3.jpg</photourl>
		<photocaption>3枚目</photocaption>
	</photo>
	<photo>
		<photourl>4.jpg</photourl>
		<photocaption>4枚目</photocaption>
	</photo>
	<photo>
		<photourl>5.jpg</photourl>
		<photocaption>5枚目</photocaption>
	</photo>
</slideshow>

asはカヤックの記事を参考に書いてみる。

var pathXml:String="photo.xml";

var url_list:Array=[];
var caption_list:Array=[];

var url:URLRequest=new URLRequest(pathXml);
var url_loader:URLLoader=new URLLoader(url);

// 読み込み完了時に呼び出されるイベント
url_loader.addEventListener(Event.COMPLETE,loadComplete);
function loadComplete(event : Event) {
	trace("電話の相手が出ました");
	var xml:XML=new XML(url_loader.data);
	//trace(xml);
	//xmlからターゲットのパスを指定する
	for each (var element:Object in xml.photo) {
		url_list.push(element.photourl);
		caption_list.push(element.photocaption);
		//_txt.text=url_list.toString();
	}
	slideshowplay();
}
trace("受話器に向かってしゃべりました");
function slideshowplay() {
	trace("もう一度受話器に向かってしゃべりました");
	_txt.text=url_list.toString();
}

ここで躓いたのが
loadComplete内からしか配列を参照できなかった、ってこと。
（よく考えたら当たり前だし、以前の外部テキストを読み込む時も読み込みが完了した時に処理用の関数を呼び出してたのにすっかり忘れてる）
検索してみると、mixiで同じように躓いてる人の質問を発見

http://mixi.jp/view_bbs.pl?id=42643514&comm_id=580&page=all

11-16あたりの流れ

電話は呼出し音が終わって、相手が出てからしゃべりましょうということです。

FLASH-japan「外部XMLを配列化したときにonLoadの外で変数が反映されません」

http://www.flash-jp.com/modules/newbb/viewtopic.php?viewmode=flat&topic_id=3946&forum=6

今回はフレーム移動ではなく、function oadComplete内からfunction slideshowplayを呼び出してみる事にします。