[AS3] 투명 무비클립 비트맵 합치기(Merge transparent MovieClip to BitmapData)

두개의 MovieClip 의 비트맵 데이터를 합쳐서 하나의 비트맵으로 만드는 방법입니다. 합칠때 해당 객체의 투명한 부분을 유치할 수 있습니다. (물론, MovieClip 외에도 Sprite, Bitmap 등의 BitmapData 를 얻을 수 있는 객체라면 모두 가능합니다.)

투명한 점을 유지하기 위해서는 BitmapData 를 생성할때 투명도(transparent)를 true 줘야 하기도 하지만, 중요한건 115 라인에 적은 블렌드 모드(BlendMode) 입니다. (자세한 사항은 Adobe ActionScript3.0 Reference 를 참고하세요.)

import flash.display.BlendMode;

trace(BlendMode.LAYER);

블렌드 모드를 LAYER 로 설정하게 되면 투명 상태를 유지하며 이미지가 겹쳐집니다. 포토샵이나 그래픽 프로그램을 접해본 분들이라면 쉽게 이해를 하실텐데, 그래픽 편집 프로그램에서 여러장의 이미지를 개별로 두고 쉽게 편집 가능하도록 각각의 객체를 개별로 유지해 줍니다.

블랜드 모드에는 여러 효과가 있는데, 블랜드 모드를 변경하여 비트맵을 겹칠때 효과를 줄 수 있고, 각 객체별로 색상(ColorTransform) 이나 모양 변형(Matrix)을 따로 지정할 수 있으니 이 값을 설정해도 됩니다.

아래 예에서는 간단하게 두개의 객체만 합칠 수 있도록 하고 있습니다. 이를 응용해서 이미지의 워터마크 작성이나 플래시로 편집한 내용을 이미지로 다운로드 하는 등 여러 방법으로 활용 할 수 있겠죠. 플래시에서 BitmapData 를 이미지로 작성하는 방법은 "ActionScript 3 Jpeg Encoder Revealed: Saving Images from Flash"을 참고하세요.

 

/**
 * BitmapMergeSample.as
 *
 * @author		KAi (http://kais.tistory.com/)
 * @lisence		GPL
 */
package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.DisplayObject;
	import flash.display.IBitmapDrawable;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
	import flash.text.TextField;

	public class BitmapMergeSample extends MovieClip
	{
		// {{{

		private var _boxA:MovieClip;
		private var _boxB:MovieClip;

		// }}}
		// {{{ constructor

		public function BitmapMergeSample()
		{
			_boxA = new MovieClip();// or Sprite etc...
			addChild(_boxA);
			_boxA.graphics.beginFill(0xFFFFA515);
			_boxA.graphics.drawRect(0, 0, 100, 100);
			_boxA.graphics.endFill();
			_boxA.x = 5;
			_boxA.y = 5;
			
			_boxB = new MovieClip();
			addChild(_boxB);
			_boxB.graphics.beginFill(0xFF9317FD);
			_boxB.graphics.drawRect(25, 25, 50, 50);
			_boxB.graphics.endFill();
			_boxB.x = 105;
			_boxB.y = 5;

			var button:TextField = new TextField();
			addChild(button);
			button.addEventListener(MouseEvent.MOUSE_UP, onClickMerge);
			button.selectable = false;
			button.text = 'click to merge';
			button.x = (stage.stageWidth - button.width) / 2;
			button.y = 110;
		}

		// }]}
		// {{{ onClickMerge

		private function onClickMerge(evt:MouseEvent):void
		{
			var bd:BitmapData = merge(_boxA, _boxB);
			var _result:Bitmap = new Bitmap(bd, "auto", true);

			addChild(_result);
			_result.x = (stage.stageWidth - _result.width) / 2;
			_result.y = 150;//*/
		}

		// }}}
		// {{{ merge

		/**
		 * public	merge
		 *
		 * 입력된 두 객체의 비트맵 데이터를 합치고 그 결과를 반환한다.
		 * 비트맵 영역의 위치 및 크기와 색상 및 모양 변환 값을 지정할 수 있다.
		 * 만약, 지정하지 않으면 첫번째 객체를 기준으로 기본값으로 설정한다.
		 * 
		 * @param	IBitmapDrawable		targetA					기준이 되는 대상
		 * @param	IBitmapDrawable		targetB					겹쳐질 대상
		 * @param	Rectangle			drawingRect			(optional) 비트맵 영역 (위치 및 크기)
		 * @param	ColorTransform		colorTransform		(optional) 색상 변환 객체정보 (#1)
		 * @param	Matrix				matrixTransform		(optional) 모양 변환 객체정보 (#2)
		 * @return	BitmapData									비트맵데이터 값
		 *
		 * @see		#1	http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/ColorTransform.html
		 * @see		#2	http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html
		 */
		public function merge(targetA:IBitmapDrawable,
							  targetB:IBitmapDrawable,
							  drawingRect:Rectangle = null,
							  colorTransform:ColorTransform = null,
							  matrixTransform:Matrix = null)
		:BitmapData
		{
			if (drawingRect === null) {
				drawingRect = getRectangle(targetA as DisplayObject);
			}

			var bdA:BitmapData = getBitmapData(targetA,
											   drawingRect,
											   null);

			var bdM:BitmapData = new BitmapData(drawingRect.width,
												drawingRect.height,
												true);
			bdM = bdA.clone();

			// Drawing `b` to `m` by "layer mode".
			bdM.draw(targetB,// source
					 matrixTransform,// matrix transform
					 colorTransform,// color transform
					 BlendMode.LAYER,// blend mode : "layer"
					 drawingRect,// drawing rectangle
					 true);// smooth

			return bdM;
		}

		// }}}
		// {{{ getBitmapData

		/**
		 * public	getBitmapData
		 *
		 * 입력된 객체의 비트맵 정보를 반환한다. 인자 값으로 비트맵으로 가져올 위치 및 크기,
		 * 블렌드 모드, 색상 및 모양 변환 트랜스폼 값을 넘겨주어 비트맵 정보를 가져올 수 있
		 * 다. 객체외에 다른 값을 지정하지 않으면 기본값으로 null 을 지정하게 되며, 영역 값은
		 * 입력된 객체의 크기를 기준으로 지정한다.
		 *
		 * @param	IBitmapDrawable		source					비트맵을 가져올 대상 객체
		 * @param	Rectangle			drawingRect			(optional) 비트맵 영역 (위치 및 크기)
		 * @param	String				blend				(optional) 블렌드 모드 (#1)
		 * @param	ColorTransform		colorTransform		(optional) 색상 변환 객체정보 (#2)
		 * @param	Matrix				matrixTransform		(optional) 모양 변환 객체정보 (#3)
		 * @return	BitmapData									비트맵데이터 값
		 *
		 * @see		#1	http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BlendMode.html
		 * @see		#2	http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/ColorTransform.html
		 * @see		#3	http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html
		 */
		public function getBitmapData(source:IBitmapDrawable,
									  drawingRect:Rectangle = null,
									  blend:String = null,
									  colorTransform:ColorTransform = null,
									  matrixTransform:Matrix = null)
		:BitmapData
		{
			if (drawingRect === null) {
				drawingRect = getRectangle(source as DisplayObject);
			}

			var bd:BitmapData = new BitmapData(drawingRect.width,// bitmap width
											   drawingRect.height,// bitmap height
											   true,// transparent
											   0xFFFFFFFF);// fill color

			bd.draw(source,// source  as DisplayObject
					matrixTransform,// matrix transform
					colorTransform,// color transform
					blend,// blend mode
					drawingRect,// drawing rectangle
					true);// smooth

			return bd;
		}

		// }}}
		// {{{ getRectangle

		private function getRectangle(source:Object):Rectangle
		{
			var r:Rectangle = new Rectangle(0,
											0,
											source.width,
											source.height);
			return r;
		}

		// }}}
	}// END: class
}// END: package

샘플 파일 다운로드

BitmapMergeSample.zip

---

참조 사이트

• [actionscript blog] Merge 2 BitmapData into 1 Bitmap AS3
• [Franto.com] Merge 2 transparent BitmapDatas

참고 링크

• [DEsignReviver] ActionScript 3 Jpeg Encoder Revealed: Saving Images from Flash
• [as3corelib] ActionScript 3.0 library for several basic utilities.