Thread（そうめん）とTweenerで作るスライドショーFLASH

スライドショーFLASHの仕様

今回作るFLASHの仕様を決めるます。

そもそもなんでスライドショーなのかというと、仕事でなぜかよく

「ここの写真、スライドショーのが良くね？※1」

なんて話になり、そんなときは

「オーケーJohnny,そういうのにぴったりのモノがあるんだぜ！※2」

なんつって、昔作った「俺様謹製AS2版スライドする的なFLASH」を使ってきたわけですが、そろそろAS3版もあっても良かろうかと言うことで、今回そのベースとなるものをそうめんで作ってみることにしました。

※1　ビジネスの現場ですので実際は丁寧な日本語が使われています。たぶん。
※2　Johnnyは仮名です。大抵のJohnnyは日本人です。

話がそれました。
こんな仕様のFLASHにします。

XMLファイルの読み込み（画像のアドレスとリンク先が記述されている）
↓
一枚目の画像を読み込む
↓
★
　●Tweenerでフェードイン
　■次に表示する画像の読み込み開始、読み込み完了後ステージに透明な状態で配置
↓
●と■の両方が終わったら★に戻る

うーん。この書き方で分かるだろうか。要するに、画像を表示している裏で次に表示する画像の読み込みを行うという並列処理をそうめナイズしたいわけです。

クラスファイルの構成はこうしました。

App.as ：ドキュメントクラス
└ MainThread.as ：スレッドの親玉
　├ Fade.as ：Tweenerでフェードインする
　└ ImgLoad.as ：画像を読み込む

ドキュメントクラスでそうめんの初期化

さっそく書いてみます。まずはドキュメントクラスでそうめんを初期化だそうです。
ここはもうコピペです。はい。

ドキュメントクラス：App.as

package  
{
	import flash.display.Sprite;
	import org.libspark.thread.Thread;
	import org.libspark.thread.EnterFrameThreadExecutor;
	
	public class App extends Sprite
	{
		public function App() 
		{
			//Threadのイニシャライズ
			Thread.initialize(new EnterFrameThreadExecutor());
			//MainThread開始
			var main:MainThread = new MainThread(this);
			main.start();
		}
	}
}

一連の動作を制御するスレッドの親玉を作る

 本家のドキュメントに従い、extends Threadしたクラスを作成します。
override protected function run()から始まるのが作法みたいです。
overrideなんてやったことないので、早速泥沼化必至です。でも見よう見まねで進めます。今までもそうやって生きてきたし。

MainThread.as

package  
{
	import flash.display.DisplayObjectContainer;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.errors.IOError;
	import org.libspark.thread.Thread;
	import org.libspark.thread.threads.net.URLLoaderThread;
	import org.libspark.thread.utils.Executor;
	import org.libspark.thread.utils.ParallelExecutor;
	
	public class MainThread extends Thread
	{
		/**
		 * コンストラクタ
		 */
		public function MainThread(container:DisplayObjectContainer)
		{
			_container = container;
		}
		
		private var _container:DisplayObjectContainer;
		private var _xmlUrl:String = "slideShow.xml";
		private var _xmlLoader:URLLoaderThread;
		private var _xmlData:XMLList;
		private var _counter:int = 0;
		private var _linkUrl:String;
		
		/**
		 * XMLの取得
		 */
		override protected function run():void
		{
			//XML読み込み定義(URLLoaderThread)
			_xmlLoader = new URLLoaderThread(new URLRequest(_xmlUrl));
			//XML読み込み開始
			_xmlLoader.start();
			//XML読み込み完了まで待つ
			_xmlLoader.join();
			//XML読み込み完了後の指示
			next(xmlLoadComp);
			//エラーの時
			error(IOError, errorHandler);
			error(SecurityError, errorHandler);
		}
		/**
		 * XML読み込み完了
		 */
		private function xmlLoadComp():void
		{
			//読み込んだXMLを格納
			var myXML:XML = new XML(_xmlLoader.loader.data);
			_xmlData = myXML.item;
			//一個目の画像を読み込む
			var firstImg:ImgLoad = new ImgLoad(_xmlData[0].photo[0], _xmlData[0].link[0], _container);
			firstImg.start();
			firstImg.join();
			_counter++;
			next(sequence);
		}
		/**
		 * 次の画像の読み込みと、フェードインの2つの動作をParallelExecutorで監視
		 */
		private function sequence()
		{
			//ParallelExecutorを用意
			var paraExec:ParallelExecutor = new ParallelExecutor();
			//ParallelExecutorに画像の読み込みとフェードインスレッドを追加
			paraExec.addThread(new Fade(_container));
			paraExec.addThread(new ImgLoad(_xmlData[_counter].photo[0], _xmlData[_counter].link[0], _container));
			//カウンタを1増やす
			if (_counter < _xmlData.length() - 1) {
				_counter++;
			} else {
				_counter = 0;
			}
			//スレッドスタート
			paraExec.start();
			//完了待ち
			paraExec.join();
			//次へ
			next(sequence);
		}
		/**
		 * エラー処理
		 */
		private function errorHandler(event:IOError, t:Thread):void
		{
			trace("エラー：" + event.getStackTrace());
			next(null);
		}
	}
	
}

 しっかしもっと短く書けないのかな。きっともっと効率的なやり方があるに違いない。
まぁ、それはともかく、ポイントはParallelExecutorです。並列処理の部分をこのParallelExecutorが監視してくれます。ParallelExecutorに●フェードインスレッドと■次の画像読み込みスレッドをaddThreadすることで、両方が完了するまで処理を止めることが出来ます。

これは結構便利なんじゃないかと思います。複数のファイルをバーッと読み込みたいときはいいかも。
あと、XMLの読み込みにURLLoaderThreadを使用。これは読み込み完了を待ってくれるURLLoaderみたい。

で、セットしたスレッドはstart()で開始して、join()すれば待機モードになる。next(func)で完了時の次の動作だわな。

画像の読み込み部分をLoaderThreadで作る

画像を読み込む部分のクラスです。
LoaderThreadを使うのですが、これはURLLoaderThreadがURLLoaderクラスを使用しているのに対し、Loaderクラスを使用してファイルを読み込むという違いがあります。

んで、URLLoaderとLoaderの違いって何よ？っていったらあなた、僕が分かるわけないじゃない！（逆ギレですね？わかります。）

よく分からないので、XMLはURLLoader、画像類はLoaderと覚えてます。だって巷のサンプルソースがみんなそうなんだもの。ﾅﾊﾅﾊ

ImgLoad.as

package  
{
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.errors.IOError;
	import org.libspark.thread.Thread;
	import org.libspark.thread.threads.display.LoaderThread;
	
	public class ImgLoad extends Thread
	{
		
		public function ImgLoad(url:String, linkUrl:String, container:DisplayObjectContainer)
		{
			_url = url;
			_linkUrl = linkUrl;
			_container = container;
		}
		
		private var _url:String;
		private var _linkUrl:String;
		private var _imgLoader:LoaderThread;
		private var _container:DisplayObjectContainer;
		private var _photo:Sprite;
		
		/**
		 * 画像読み込み
		 */
		override protected function run():void
		{
			//読み込み定義（loaderThread）
			_imgLoader = new LoaderThread(new URLRequest(_url));
			//読み込み開始
			_imgLoader.start();
			_imgLoader.join();
			//読み込み終わったら
			next(imgSet);
			//エラーの時
			error(IOError, errorHandler);
		}
		/**
		 * スプライトを作ってその中に画像を入れ、透明にしてステージに配置
		 */
		private function imgSet():void
		{
			_photo = new Sprite();
			_photo.visible = false;
			_photo.alpha = 0;
			_photo.buttonMode = true;
			_photo.addChild(_imgLoader.loader.content);
			_container.addChild(_photo);
			//クリックセット
			_photo.addEventListener(MouseEvent.CLICK, imgClick);
		}
		/**
		 * クリックされたときの動作
		 */
		private function imgClick(event:MouseEvent):void
		{
			navigateToURL(new URLRequest(_linkUrl));
		}
		/**
		 * エラー処理
		 */
		private function errorHandler(event:IOError, t:Thread):void
		{
			trace("エラー：" + event.getStackTrace());
			next(null);
		}
	}
}

そもそもこの仕様で作っちゃったのが癌なのかもしれないけれど、このクラスでクリック時の動作を定義していて、このイベントをイベントリスナーじゃなくスレッドでevent()ってやったら最後、スライドショーがスライドしません。。。ﾅﾊﾅﾊ

そりゃそうだよね、親が「終わるまで待ってるよ」って言ってるのに、子供がクリック待ちしてたら次にいけないよね。本当はイベントリスナーを使わないで完成させたかった（意味ないけど）んだけど、変な拘りはやめました。
ということで、ごく普通のクリック設定です。

フェードイン部分をTweenerThreadで作る

画像がフェードインする部分のクラスです。
TweenerThreadってまんまTweenerなんだけど、予想外にスペシャルプロパティshow:trueが役に立った。これはTween開始時にvisibleをtrueにしてから動作するというもので、こういう痒いところに手が届いている点は開発者様の愛を感じます（笑）。

ただ、こうやって作ってみて思うのは、「TweenerのonCompleteでいいんじゃね？」ということ。
これは恐らく使いどころを間違えてますね。アタクシ。でもいいんです。これもまた勉強。頑張れ俺。

Fade.as

package  
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import org.libspark.thread.Thread;
	import org.libspark.thread.threads.tweener.TweenerThread;
	
	public class Fade extends Thread
	{
		public function Fade(container)
		{
			_contianer = container;
		}
		private var _contianer:DisplayObjectContainer;
		/**
		 * 画像のフェードイン
		 */
		override protected function run():void
		{
			var target:DisplayObject = _contianer.getChildAt(_contianer.numChildren -1);
			//TweenerThread定義
			var tween:Thread = new TweenerThread(target, {
				alpha:1,
				time:2,
				show:true
			});
			tween.start();
			tween.join();
			next(waiting);
		}
		/**
		 * 待機
		 */
		private function waiting():void
		{
			sleep(1 * 1000);
			next(lowerImgRemove);
		}
		/**
		 * 下の画像を消す
		 */
		private function lowerImgRemove():void
		{
			if (_contianer.numChildren > 2)
			{
				_contianer.removeChildAt(0);
			}
		}
	}
}

やっと完成です。

まさかこんなに長くなるとは思わなかった。ファイルも2個の想定が4個だし。でも非常に勉強になりました。
そうめんを知らなくても、使わなくても、恐らく今後困ることは無いのだろうけど、こうやって別のやり方があることを知ったことで知識の引き出しが増えて、いつか役に立つときが来るかも。なんて思うと感無量であります。

ということで、完成版はこちら

XMLはこちら