nmLog

Flashでフェードイン、フェードアウトでの表示切替。

仕事でよく使うBitmapを使用した表示切替の方法をまとめる。単純にMovieClipのalphaでフェードアウトすると、途中の透過表示が不自然なことがあるので、 MovieClipをBitmapDataにコピーしてフェードアウトさせる。

package {
	
	import flash.display.*;
	import flash.events.*	
	import flash.text.*; 
	import flash.geom.*;
	
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.events.TweenEvent;
	import org.libspark.betweenas3.tweens.*;
	import org.libspark.betweenas3.easing.*;
	
	import frocessing.color.*;
	

	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 _main:MovieClip;		
		
		private function setup():void {
			
			_main = new MovieClip();			
			
			setup_buttons();
			setup_card();
			
			_main.width = _stage.stageWidth - 80;
			_main.scaleY = _main.scaleX;			
			_main.x = Math.round((_stage.stageWidth - _main.width) / 2);
			_main.y = _stage.stageHeight - _main.height - 20;
			_this.addChild(_main);
			
			setup_changeanimation();
		}
		
		/**
		 * setup card
		 */
		private var _card:MovieClip;
		private var _cardbase:MovieClip;
		private var cardwid:Number;
		private var cardhei:Number;
		
		private function setup_card():void {
			
			_cardbase = new cardbase();
			
			_cardbase.width = cardwid = 268;
			_cardbase.height = cardhei = 268;
			
			_card = new MovieClip();
			
			_card.x = _stage.stageWidth / 2;
			_card.y = _stage.stageHeight / 2 - 60;
			
			changecardaction(radbtn.currentButton);			
			
			_card.addChild(_cardbase);
			_this.addChild(_card);
		}
		/** */
		private function changecard(tgtbtn:MovieClip):void {
			
			changeanimation();
			
			changecardaction(tgtbtn);
		}
		//
		private function changecardaction(tgtbtn:MovieClip):void {
			
			var _n:TextField = _cardbase["n"];
			_n.width = 0;
			_n.height = 0;
			_n.autoSize = "left";
			_n.multiline = false;
			_n.wordWrap = false;
			
			var f:TextFormat = new TextFormat();
			f.color = tgtbtn.Color_en;
			f.letterSpacing = -5;
			f.indent = 0;
			f.rightMargin = 5;
			_n.defaultTextFormat = f;
			
			_n.text = tgtbtn["n"].text;
			_n.x = -_n.width / 2;
			_n.y = -_n.height / 2;
			//_n.border = true;
			
			var _t = _cardbase["t"];
			
			var color_t:ColorTransform = _t.transform.colorTransform; 
			color_t.color = tgtbtn.Color_en;
			_t.transform.colorTransform = color_t;
		}
		
		/**
		 * change animation
		 */
		private var _animmc:MovieClip;
		private var animbitmapdata:BitmapData;
		private var animbitmap:Bitmap;
		private var animbitmapdatamatrix:Matrix;
		private var updateanimbt:ITween;
		//
		private function setup_changeanimation():void {
			
			_animmc = new MovieClip();
			
			animbitmapdatamatrix = new Matrix();
			animbitmapdatamatrix.translate(cardwid / 2, cardhei / 2);
			
			animbitmapdata = new BitmapData(cardwid, cardhei, false, 0xFFFFFF);
			animbitmapdata.draw(_card, animbitmapdatamatrix);
			
			animbitmap = new Bitmap(animbitmapdata, "always", true);
			
			_animmc.addChild(animbitmap);
			_animmc.x = -cardwid / 2;
			_animmc.y = -cardhei / 2;
			_card.addChild(_animmc);

			_animmc.visible = false;
		}
		//
		private function changeanimation():void {
			
			animbitmapdata.lock();
			animbitmapdata.draw(_card, animbitmapdatamatrix);
			animbitmapdata.unlock();
			
			_animmc.visible = true;
			_animmc.alpha = 1;
			
			if(updateanimbt) updateanimbt.stop();
			updateanimbt = BetweenAS3.tween(_animmc, {alpha:0}, null, .8, Sine.easeOut);
			updateanimbt.addEventListener(TweenEvent.COMPLETE, function(){
																		 _animmc.visible = false;																		 
																		 });
			updateanimbt.play();
		}	
		
		/**
		 * setup buttons
		 */
		private var radbtn:NM_Radiobutton;
		
		private function setup_buttons():void {
			
			var colorhsl = new ColorHSL();
			colorhsl.h = 200;
			colorhsl.s = 1;
			
			radbtn = new NM_Radiobutton();
			radbtn.Init();
			
			for(var i:int = 0; i < 12; i++) {
			
				var btn = new buttonbase();
				btn["n"].mouseEnabled = false;
				btn["n"].text = i + 1;
				btn.x = 100 * i + (btn.width / 2);
				btn.y = 0;
				
				colorhsl.h += i * 8;
				
				btn.Color_di = 0xCCCCCC;
				
				colorhsl.l = .7;
				btn.Color_en = colorhsl.value;
				
				colorhsl.l = .5;
				btn.Color_ov = colorhsl.value;
				
				colorhsl.l = .98;
				btn.Color_ac = colorhsl.value;				

				
				var color_di:ColorTransform = btn.di.transform.colorTransform; 
				color_di.color = btn.Color_di;
				btn.di.transform.colorTransform = color_di; 
				
				var color_en:ColorTransform = btn.en.transform.colorTransform; 
				color_en.color = btn.Color_en;
				btn.en.transform.colorTransform = color_en; 
				
				var color_ov:ColorTransform = btn.ov.transform.colorTransform; 
				color_ov.color = btn.Color_ov;
				btn.ov.transform.colorTransform = color_ov;
				
				var color_ac:ColorTransform = btn.ac.transform.colorTransform; 
				color_ac.color = btn.Color_ac;
				btn.ac.transform.colorTransform = color_ac; 
				

				var initargs:Object = {};
				initargs.stage = _stage;
				initargs.radiobutton = radbtn;
				btn.Init(initargs);
				btn.SetEnable();
	
				_main.addChild(btn);
				
				radbtn.addNMButton(btn);
				
				btn.addEventListener(MouseEvent.CLICK, btn_click);
			}
			
			radbtn.Start(radbtn.buttonList[Math.floor(radbtn.buttonList.length * Math.random())]);
		}
		/** */
		private function btn_click(eo:* = null):void {
			
			changecard(eo.currentTarget);
		}



	}
}