[AS3]スライドショーにキャプチャしたbitmapを組み合わせる

2010/06/11

こんにちは。きんくまです。

今回はスライドショーを作ってみようと思います。
↓今回つくったもの

スライドショーはFlashでは結構定番のような気がします。

それで、中身をこんな感じにひとつのMovieClipにまとめてフレームで並べたとします。
さらにそれをPagesとしてASに書き出します。

slide_fig1

それで、上のように画面をスライドさせる場合にどうやって実装するかが今回のテーマです。
いろいろとあると思うんですが、ひとつのMCしかないのに、１画面内に同時に２画面分の内容が出るので、
そこをどうしようか考えます。
まず、MCのインスタンスを２つステージ上に配置する方法があると思います。

それで、今回はそれとは別に、インスタンスを２つ作らないで、ひとつのMCで２画面分の内容をあらわそうとしました。
それには、BitmapDataとBitmapを使います。
BitmapDataで現在の状態をキャプチャして、同じMC内に吊るします。
もともとのMC自体は新しいフレームにgotoAndStopします。
そうすると、MC内に、古いページのキャプチャをしたBitmapと、新しい状態の本物のMCができました。

それで、MC全体をTweenして、Tween終了後に、キャプチャしたBitmapを取り除いてあげればＯＫです。

また、Tween処理をキャンセルすることができるようになっていれば、急いでいるユーザーのストレスも
軽減するかもしれないです。今回はTween中にもう一度クリックすると、Tweenがキャンセルされて
次のページをすぐに表示できるようにしてみました。

ゲームでも、演出としてムービーは当たり前に使われています。
ただ、それはキャンセル処理が手軽にできるからこそなんですよね。
同じムービーを何度も見せられるのは結構つらいもの。
最近Flashの風当たりがWeb業界内で強くなってきているので、
エフェクトの実装とともに、エフェクトのキャンセル処理をうまく実装してあげられるようにしたいです。
って、結構面倒なんですけどね、、。

今回のソース

ソース一式です

■メイン

package  
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	/**
	 * ...
	 * @author KinkumaDesign
	 */
	public class Main extends Sprite
	{
		public var pages:Pages;
		
		public function Main() 
		{
			pages = new Pages();
			addChildAt(pages, 0);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, stageMouseDownHD);
		}
		
		private function stageMouseDownHD(e:MouseEvent):void 
		{
			pages.nextPage();
		}
		
	}

}

■Pages.as

package  
{
	import caurina.transitions.Tweener;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.events.Event;
	/**
	 * ...
	 * @author KinkumaDesign
	 */
	public class Pages extends MovieClip
	{
		private var _isTweening:Boolean;
		private var _currentPage:int;
		private var _copyBitmap:Bitmap;
		private var SW:int;
		private var SH:int;
		
		public function Pages() 
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			SW = stage.stageWidth;
			SH = stage.stageHeight;
			_currentPage = 1;
			stop();
			_isTweening = false;
		}
		
		public function nextPage():void
		{
			//キャンセル処理
			if (_isTweening) {
				deleteCopyBitmap();
				Tweener.removeTweens(this);
				x = 0;
				_isTweening = false;
			}else {
				startSlide();
			}
		}
		
		private function startSlide():void
		{
			_isTweening = true;
			createCopyBitmap();//現在の画面キャプチャをとる
			
			_currentPage++;
			if (_currentPage > totalFrames) {
				_currentPage = 1;
			}
			gotoAndStop(_currentPage);
			x = SW;
			Tweener.addTween(this, { 
				x:0,
				time:1,
				transition:"easeinoutcubic",
				onComplete:function() {
					tweenCompleteHD();
				}
			});
		}
		
		private function tweenCompleteHD():void
		{
			deleteCopyBitmap();
			_isTweening = false;
		}
		
		private function createCopyBitmap():void
		{
			var bmd:BitmapData = new BitmapData(SW, SH);
			bmd.draw(this);
			_copyBitmap = new Bitmap(bmd, "auto", true);
			addChild(_copyBitmap);
			_copyBitmap.x = -SW;
		}
		
		private function deleteCopyBitmap():void
		{
			if (_copyBitmap != null) {
				removeChild(_copyBitmap);
				var bmd:BitmapData = _copyBitmap.bitmapData;
				bmd.dispose();
				bmd = null;
				_copyBitmap = null;
			}
		}
	}

}