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

2010/06/11

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

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

 

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

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

slide_fig1

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

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

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

また、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;
			}
		}
	}

}

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る