nmLog

Flashでカードをめくるような動作の表現。

カードを一枚ずつめくるような動作の表現を制作する。FlashのNative3Dでシンプルに制作した。

ステージの右側をクリックするとカードが減り、左側をクリックするとカードが増えます。

package {
	
	import flash.display.*;
	import flash.text.*;
	import flash.filters.*;
	import flash.events.*;
	import flash.ui.*;
	
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.events.TweenEvent;
	import org.libspark.betweenas3.tweens.*;
	import org.libspark.betweenas3.easing.*;
	

	public class NMain extends MovieClip {
		
		//-------------------------------------------------------------------------------- Properties

		private var _this:*;
		private var _stage:Stage;
		
		
		//-------------------------------------------------------------------------------- Constractor
		
		public function NMain() {
			
			_this = this;
			_stage = stage;
			
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;
			
			Init();
		}
		
		
		//-------------------------------------------------------------------------------- Function
		 
		/**
		 * initialize
		 */
		public function Init():void {

			setup();
		}
		
		/**
		 * setup
		 */
		private var pagecounter:int;
		private var sheetwid:Number;
		private var sheethei:Number;

		private function setup():void {
			
			pagecounter = 123;
			
			sheetwid = 260;
			sheethei = 380;
			
			setup_main();
			
			setup_basepage();
			
			setup_slidepage();
			
			setup_actions();
		}
		
		/**
		 * actions
		 */
		private function setup_actions():void {
			
			_stage.addEventListener(MouseEvent.MOUSE_MOVE, action_mousemove);			
			_stage.addEventListener(MouseEvent.MOUSE_DOWN, action_mousedown);
			_stage.addEventListener(Event.MOUSE_LEAVE, action_mouseleave);
		}
		//
		private function action_mousemove(eo:* = null):void {
			
			var mposx = _main.mouseX;
			
			if(mposx > 0) {
				
				if(mposx < sheetwid / 2) {
					
					Mouse.cursor = "auto";
					mposlr = "center";
				}
				else {
					
					Mouse.cursor = "button";
					mposlr = "right";
				}
			}
			else if(mposx < 0) {
				
				if(mposx > -sheetwid / 2) {
					
					Mouse.cursor = "auto";
					mposlr = "center";
				}
				else {
					
					Mouse.cursor = "button";
					mposlr = "left";
				}
			}			
			
			swingmain_start();
		}
		//
		private function action_mousedown(eo:* = null):void {
			
			if(mposlr == "center") {
				
				return;
			}
			else if(mposlr == "left") {
				
				if(sliding_prev) return;
				
				slide_next();
			}
			else if(mposlr == "right") {
				
				if(sliding_next) return;
				
				slide_prev();
			}
		}
		//
		private function action_mouseleave(eo:* = null):void {
			
			mposlr = "stageout";
			
			swingmain_start();
		}
		
		/**
		 * main
		 */
		private var _main:MovieClip;
		
		private function setup_main():void {
			
			_main = new MovieClip();
			_main.x = Math.round(_stage.stageWidth / 2);
			_main.y = Math.round(_stage.stageHeight / 2);
			
			_this.addChild(_main);
		}
		/** */		
		private function swingmain_start():void {
			
			_main.removeEventListener(Event.ENTER_FRAME, main_enterframe);
			_main.addEventListener(Event.ENTER_FRAME, main_enterframe);
		}
		//
		private function main_enterframe(eo:* = null):void {
			
			mainswingaction();
		}
		/** */
		private function swingmain_stop():void {
			
			_main.removeEventListener(Event.ENTER_FRAME, main_enterframe);
		}
		/** */
		private var mposlr:String;
		
		private function mainswingaction():void {

			var mposx = _main.mouseX;
			var tgtroty:Number;
			
			if(mposlr == "stageout") {
				
				tgtroty = 0;
				mposx = 0;
			}
			else if(mposlr == "center") {
				
				tgtroty = 0;
				mposx = 0;
			}
			else if(mposlr == "left") {
				
				tgtroty = 50;
			}
			else if(mposlr == "right") {
				
				tgtroty = -50;
			}
			
			_main.rotationY += (tgtroty - _main.rotationY) * .2;
			
			if(Math.abs(tgtroty - _main.rotationY) < 1) swingmain_stop();
		}
		
		/**
		 * basepage
		 */
		private var _basepage:MovieClip;
		
		private function setup_basepage():void {
			
			_basepage = page();
			_basepage.x = Math.round(-sheetwid / 2);
			_basepage.y = Math.round(-sheethei / 2);
			
			page_settext(_basepage, pagecounter);
			_main.addChild(_basepage);
		}
		
		/**
		 * slidepage
		 */
		private var _slidepage:MovieClip;
		
		private function setup_slidepage():void {
			
			_slidepage = new MovieClip();
			_slidepage.x = Math.round(-sheetwid / 2);
			_slidepage.y = Math.round(-sheethei / 2);
			
			_main.addChild(_slidepage);
		}
		/** */
		private var sliding_next:Boolean;
		
		private function slide_next():void {
			
			sliding_next = true;
			
			pagecounter ++;
			
			var _slide_next = page();
			page_settext(_slide_next, pagecounter);
			
			_slide_next.pid = pagecounter;
			
			_slidepage.addChild(_slide_next);

			_slide_next.z = -100;
			_slide_next.x = -800;
			_slide_next.alpha = 0;
			
			var bt = BetweenAS3.serial(
									   BetweenAS3.tween(_slide_next, {x:0, alpha:.8}, null, .4, Quad.easeOut),
									   BetweenAS3.tween(_slide_next, {z:0, alpha:1}, null, .2, Quad.easeOut)
									   );
			
			bt.addEventListener(TweenEvent.COMPLETE, slide_next_complete);
			
			bt.play();
		}
		//
		private function slide_next_complete(eo:* = null):void {
			
			var _slide_next = eo.currentTarget.getTweenAt(0).target;
			
			_slidepage.removeChild(_slide_next);
			
			if(_slidepage.numChildren == 0) sliding_next = false; 			
			
			page_settext(_basepage, _slide_next.pid);
		}
		/** */
		private var sliding_prev:Boolean;
		
		private function slide_prev():void {
			
			sliding_prev = true;
			
			var _slide_prev = page();
			page_settext(_slide_prev, pagecounter);
			
			_slidepage.addChildAt(_slide_prev, 0);
			
			pagecounter --;			
			page_settext(_basepage, pagecounter);
			
			var bt = BetweenAS3.serial(
									   BetweenAS3.tween(_slide_prev, {z:-100, alpha:.8}, null, .2, Quad.easeOut),
									   BetweenAS3.tween(_slide_prev, {x:800, alpha:0}, null, .4, Quad.easeOut)
									   );
			
			bt.addEventListener(TweenEvent.COMPLETE, slide_prev_complete);
			
			bt.play();
		}
		//
		private function slide_prev_complete(eo:* = null):void {
			
			_slidepage.removeChild(eo.currentTarget.getTweenAt(0).target);
			
			if(_slidepage.numChildren == 0) sliding_prev = false; 
		}

		/**
		 * page
		 */
		private function page():MovieClip {
			
			var _page:MovieClip = new MovieClip();
			_page.cacheAsBitmap = true;
			
			var g = _page.graphics;
			g.lineStyle(1, 0xCCCCCC, 1, false, "none");
			g.beginFill(0xFFFFFF, 1);
			g.drawRect(0, 0, sheetwid, sheethei);
			g.endFill();
			
			g.lineStyle(1, 0x222222, 1, false, "none");
			g.beginFill(0xFFFFFF, 1);
			g.drawRect(15, 15, sheetwid - 30, sheethei - 30);
			g.endFill();
			
			var _textmc = new textmc();
			_textmc.name = "textmc";
			
			_page.addChild(_textmc);
			
			return _page;
		}
		/** */
		private function page_settext(tgtpage:MovieClip, textnum:int):void {
			
			var _textmc = tgtpage.getChildByName("textmc");
			var t = _textmc.getChildByName("t");
			
			t.width = 0;
			t.height = 0;
			t.autoSize = "left";
			t.multiline = false;
			t.wordWrap = false;
			//t.border = true;
			
			var f:TextFormat = new TextFormat();
			f.size = 1000;
			f.color = 0x222222;
			f.letterSpacing = -8;
			f.indent = 0;
			f.rightMargin = -new Number(f.letterSpacing);
			
			t.defaultTextFormat = f;			
			t.text = new String(textnum);

			_textmc.width = 160;
			_textmc.scaleY = _textmc.scaleX;

			if(_textmc.height > 140) {
				
				_textmc.height = 140;
				_textmc.scaleX = _textmc.scaleY;
			}
			
			_textmc.x = Math.round((sheetwid - _textmc.width) / 2);
			_textmc.y = Math.round((sheethei - _textmc.height) / 2);
		}
		

		
	}
}