ピクテクの写真をランダムに落下して表示しちゃうよFLASHの制作実況中継

★まずはデザイン・・・消費ビール：１.5本

デザインを考えます。

画面をキャプってFireworksに張り込みます。
あとはひたすらゴニョゴニョします。

僕は結構ゴチャゴチャした感じが好きなので、細かな部品をたくさん置きたくなるタイプなんですが、「ほどほどに」と言い聞かせつつデザイン。

で、出来上がったのがこれ。

★FLASHにデザインを取り込む・・・消費ビール：0.5本

おもむろにFLASHを起動。
ウチのFLASHはCS3です。ちなみに、CS4を入れるか1バージョン飛ばすか真面目に悩んでます。会社が6月決算なんで、有り余るほどの利益が出たらバージョンアップなんですが（ぶっちゃけあり得ない）、仕事だとAS2の案件のほうが圧倒的に多いので、我慢したりラジバンダリ。

部品を2つのムービークリップにしてライブラリに保管します。

AS3のリンケージって、クラス名を指定するって概念だから、なんだか敷居が高い感があって、僕のような「デザイナーさんのなんちゃってプログラミング」系にはとっつきにくいです。

いちいちクラスをnewするんじゃなくて、

「attachMovieでアタッチ・デタッチ（意味違う）すればいいじゃないかよコノヤロウ。」

とか思うんですが、リファレンスを見ますと・・・

attachMovie()  削除されました。
ActionScript 3.0 では、子表示オブジェクトを追加するには addChild() を使用します。

なんて言いやがるんです。
もうね、僕はね、

「そんなにChildをaddしたいんなら、Meの精子でYouの子宮に着床させちゃうよ？」

とか思っちゃうんです。

・・・。
既に酔ってます。

★Movable TypeからXMLを出力しないとね・・・消費ビール：0.5本

Movable Type（以下MT）でピクテクのエントリー一覧をXMLとして出力させてFLASHに読み込ませるわけですな。

MT管理画面にログインして、デザイン>テンプレートの新規作成で新しいテンプレートを作ります。

  
    
      <$mt:EntryDate format="%Y.%m.%d"$>
      <$mt:EntryExcerpt$>
      <$mt:EntryLink$>
    
  

これでピクテクのエントリー一覧XMLがこんな風に出来上がります。

なお、MTは現時点の最新版Commercial version 4.25です。
MT3で頑張って勉強して以来、いきなりの4.2なんで、ワケワカメです。でも良くできてると思います。Actionscriptもそうだけど、よりプログラマー寄りになった感じがします。基本、世間は僕に冷たいです。

★いよいよActionscriptを組みます・・・消費ビール：3.5本

ぶっちゃけ、数字が苦手なんです。
高校では数Ⅰしか習ってません。しかもその数Ⅰのテストで30点とかやらかしたことがあります。もうね、トラウマですよ？逆に古典とか98点で学年トップとか？向いてないんじゃないの？この業界。

でもね、好きなんですよ、コンピューターが。小学生の時から。パソコンサンデーとか食い入るように見てましたからね。意味も分からずに。

はい、そんなわけで、FlashDevelop起動であります。

XMLの読み込みは僕のAS3のバイブルであります、大重さんの「ActionScript 3.0 入門ノート 」にあるXMLloaderクラスをそのまんま使います。

FLASHでドキュメントクラスを設定してFlashDevelopでそのクラスを新規作成。

package  
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.text.*;
	import caurina.transitions.Tweener;
	import XMLloader;
	/**
	 * PixTex Random Image Sampler
	 * @author POMP
	 */
	public class App extends Sprite
	{
		private static const XMLURL:String = "http://www.two-hearts.net/pixtex.xml";
		private var xmlLoader:XMLloader;
		private var xmlData:XML;
		private var entryList:XMLList;
		private var bg:Sprite = new Bg();
		private var frame:Sprite = new Frame();
		//コンストラクタ
		public function App() 
		{
			//XMLloaderクラスを呼んでXMLを読み込む
			xmlLoader = new XMLloader(XMLURL, true);
			//読み込み終わったらonXMLloadedに行く
			xmlLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
			//ライブラリの部品をステージに置く。2つの部品をBgとFrameでリンケージしてある。
			frame.x = 130;
			bg.x = 47;
			bg.y = -15;
			addChild(bg);
			addChild(frame);
		}
		//XML読み込み完了
		private function onXMLloaded(event:Event):void
		{
			//XMLゲッツ
			xmlData = xmlLoader.getXML();
			//XML内の各エントリーを格納
			entryList = xmlData.entry;
			//アクションスタート！
			action();
		}
		//ハクション！もとい、アクション！
		private function action():void
		{
			//表示する写真をランダムで決定
			var photoNum:int = Math.floor(Math.random() * entryList.length());
			//画像のロード
			imgLoader(photoNum);
		}
		//画像を読み込みます
		private function imgLoader(num:int)
		{
			//表示する写真のアドレスをゲッツ
			var photoStr:String = entryList[num].excerpt;
			//文字列を分解して画像のURLだけを抽出
			var firstIndex:int = photoStr.indexOf("<img src=\"", 0);
			var lastIndex:int = photoStr.indexOf(".jpg", 0);
			var photoURL:String = photoStr.slice(firstIndex + 10, lastIndex + 4);
			//イメージを読み込むコンテナ
			var imgContainer:Sprite = new Sprite;
			imgContainer.x = 165;
			imgContainer.y = -100;
			//ロード用オブジェクトのインスタンスを生成
			var loader:Loader = new Loader();
			imgContainer.addChild(loader);
			//画像を押せるようにしますん
			imgContainer.addEventListener(MouseEvent.CLICK, onClick(num));
			//指カーソルには自動でなってくれないのだ
			imgContainer.buttonMode = true;
			//URL定義（StringのURL文字列をURLとして定義するわけだ。こーゆーのがいちいちめんどい^^;）
			var urlReq:URLRequest = new URLRequest("http://www.two-hearts.net" + photoURL);
			//イベントリスナーを定義
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaderOnLoaded(imgContainer, num));
			//読み込んでみる
			loader.load(urlReq);
		}
		//画像が読み込まれたよ！
		private function imgLoaderOnLoaded(target:Sprite, num:int):Function { 
			return function ():void {
				//ブツを設置します。
				addChild(target);
				//一番手前に部品を入れ替え
				swapChildren(target, frame);
				/**
				 * ここからTweenerの出番です。
				 * まずはちょびっと顔を出します。
				 */
				Tweener.addTween(target, { y: -50, time:1 } );
				//続いて落下＆日付表示設定
				Tweener.addTween(target, { y:77, time:1, delay:1, transition:"easeOutBounce", onStart:function(){dateDisp(num)} } );
				//そんでもって退場＆次のインディーズ芸人カモン！
				Tweener.addTween(target, { y:180, time:1, delay:3, transition:"linear", onStart:action } );
				//退場したら消さないとね
				Tweener.addTween(target,{time:5, onComplete:function(){removeChild(target)}})
			}
		}
		//クリックイベント
		private function onClick(num:int):Function { 
			return function ():void {
			//番号からリンク先URLをゲッツ
			var pageURL:URLRequest = new URLRequest(entryList[num].entryLink);
			//リンク先
			navigateToURL(pageURL);
			}
		}
		//日付表示
		private function dateDisp(num:int):void
		{
			bg["date_txt"].text = entryList[num].date;
		}
	}
}

つまづいたところ1

すんごい初歩的なんだけど、画像を読み込むときのイベントリスナーってLoader.contentLoaderInfoなのね。ずっとloader.addEventListenerとかやってて全然ロード完了が帰ってこないでやんの。

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaderOnLoaded);

つまづいたところ2

画像を読み込んで終わったらゴニョゴニョってところで、読み込みの監視にイベントリスナーを使うわけですが、COMPLETEで一緒にそのインスタンスを渡してあげたいと思ったわけです。でも、そのやり方が分からない。。。「addEventListener 引数」でググったら早速出てきた（笑）インターネッツはべんりだなぁ。

addEventListenerで一緒に引数を渡したい - apeirophobia

イベント発生時の処理に引数を渡す ←ここの後半の書き方はまさしくワケワカメ。でもやりたかったのはこれなので、おまじないとして覚えることにするポ。

んでも、書いてる事が高度すぎてワケワカメ。僕のレヴェルではまだ早いのかな。まぁいいや、その辺（GC：ガベージコレクション）はてきとーに。。。嗚呼、ﾃﾗﾊｽﾞｶｼｽ(´・ω・｀)ｼｮﾎﾞｰﾝ