[3기 강남 백정의] 플래시의 비트맵을 활용한 영상을 재생시키고 레이어 추가

플래시에서 외부 영상을(FLV,SWF 등) 이용하여 영상 겹치기와 유저가 필요한 사진이나 화면,플래시 내부 오브젝트를 넣는 방법을 소개하겠습니다. 

원리는 기본적인 플래시 스테이지 위에 배경 Sprite를 하나 만들고 필요한 개발 오브젝트나 사진 등을 올립니다. 그 위에 영상을 재생 시키기 위한 Bitmap 영역을 다시 만들고 내부 혹은 외부에서 로드한 영상을 재생시킵니다. 

이때 특정 색상 값을 투명처리 할 때 영상의 특성상 매우 화질이 좋다하더라도 어느 정도의 범위를 두고 투명처리를 하게 됩니다.

이때 노이즈 픽셀이 생기는 경우가 있기 때문에 영상을 재생시키는 영역을 맨 아래에 다시 한번 배치해두는 방법으로 매우 퀄리티 높은 커스텀 영상을 만들 수 있습니다.

위 그림과 같은 방식으로 레이어가 구성 됩니다. 플래시는 외부 영상 재생을 위해서 비트맵 데이터를 활용하는 방법이 있는데 비트맵 영역에 비트맵 데이터로 변환하여 영상을 재생시킵니다.

필요한 크기와 배경색을 지정한 후(배경색은 영상에 가려지기 때문에 아무 상관 없습니다) 기본적인 배경 Sprite를 하나 만든 뒤에 스테이지에 추가합니다.

경로 및 설정 데이터를 지정해주고 필요한 영상을 로드합니다.

그리고 배경으로 영상을 재생 시킬 비트맵을 만듭니다. 크기를 지정해주고 배경색(마찬가지로 의미 없습니다)을 지정해 줍니다. 8자리 중에 앞두자리는 알파값과 관련 있으므로 FF로 지정해줍니다.

만든 영상 비트맵위에 영상을 1초 혹은 1Frame씩 그리면서 재생시킵니다.

이제 필요한 개발 사진이나 오브젝트를 그 위에 올립니다.

예를들어

간단한 색상 있는 도형이나

이미지를 로드하여 추가합니다.

그위에 다시 비트맵을 만드는 과정을 이용하여 비트맵을 만들고 그 위에 다시 영상을 재생시킵니다.

이때 비트맵에는 투명값을 지정할 생상영역을 설정해둡니다. 그 뒤에 

이와 같은 방식으로 투명하게 할 색상과 영역(범위)과 그 곳을 매울 색상 값을 지정합니다. (빈 곳은 개발하여 채우기 때문에 이 때의 색상값도 큰 의미가 없습니다.)

위 메소드에 대한 메뉴얼을 보면

   threshold()

public function threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint, color:uint = 0, mask:uint = 0xFFFFFFFF, copySource:Boolean = false):uint

Language Version:

ActionScript 3.0

Runtime Versions:

Flash Player 9, AIR 1.0 //버전 9아래일 경우 모션 단계에서 수정이 필요

Tests pixel values in an image against a specified threshold and sets pixels that pass the test to new color values. Using thethreshold() method, you can isolate and replace color ranges in an image and perform other logical operations on image pixels.

The threshold() method's test logic is as follows:

1. If ((pixelValue & mask) operation (threshold & mask)), then set the pixel to color;
2. Otherwise, if copySource == true, then set the pixel to corresponding pixel value from sourceBitmap.

The operation parameter specifies the comparison operator to use for the threshold test. For example, by using "==" as theoperation parameter, you can isolate a specific color value in an image. Or by using {operation: "<", mask: 0xFF000000, threshold: 0x7F000000, color: 0x00000000}, you can set all destination pixels to be fully transparent when the source image pixel's alpha is less than 0x7F. You can use this technique for animated transitions and other effects.

Parameters

	sourceBitmapData:BitmapData — The input bitmap image to use. The source image can be a different BitmapData object or it can refer to the current BitmapData instance.
	sourceRect:Rectangle — A rectangle that defines the area of the source image to use as input.
	destPoint:Point — The point within the destination image (the current BitmapData instance) that corresponds to the upper-left corner of the source rectangle.
	operation:String — One of the following comparison operators, passed as a String: "<", "<=", ">", ">=", "==", "!="  //원하는 형식의 기호를 지정해 줍니다.
	threshold:uint — The value that each pixel is tested against to see if it meets or exceeds the threshhold.
	color:uint (default = 0) — The color value that a pixel is set to if the threshold test succeeds. The default value is 0x00000000. //색상 값 지정
	mask:uint (default = 0xFFFFFFFF) — The mask to use to isolate a color component.
	copySource:Boolean (default = false) — If the value is true, pixel values from the source image are copied to the destination when the threshold test fails. If the value is false, the source image is not copied when the threshold test fails.

Returns

uint — The number of pixels that were changed.

Throws

	TypeError — The sourceBitmapData, sourceRect destPoint or operation are null.
	ArgumentError — The operation string is not a valid operation

Example  ( How to use this example ) 

The following example uses the perlinNoise() method to add a blue and red pattern to one BitmapData object, and then uses the threshold() method to copy those pixels from the first BitmapData object to a second one, replacing those pixels in which the red value is greater than 0x80 (50%) with a pixel set to transparent red (0x20FF0000):

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.geom.Point;
import flash.geom.Rectangle;

var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

var seed:int = int(Math.random() * int.MAX_VALUE);
var channels:uint = BitmapDataChannel.RED | BitmapDataChannel.BLUE;
bmd1.perlinNoise(100, 80, 12, seed, false, true, channels, false, null);

var bitmap1:Bitmap = new Bitmap(bmd1);
addChild(bitmap1);

var bmd2:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);
var pt:Point = new Point(0, 0);
var rect:Rectangle = new Rectangle(0, 0, 200, 200);
var threshold:uint =  0x00800000; 
var color:uint = 0x20FF0000;
var maskColor:uint = 0x00FF0000;
bmd2.threshold(bmd1, rect, pt, ">", threshold, color, maskColor, true);

var bitmap2:Bitmap = new Bitmap(bmd2);
bitmap2.x = bitmap1.x + bitmap1.width + 10;
addChild(bitmap2);

위 경우 비트맵 채널을 활용하여 샘플을 만들었는데 이는 샘플을 제작하기 위함이고 영상이나 사진 등을 활용할 경우 비트맵 채널을 필요하지 않습니다.

이와 같은 방식으로 플래시에서 영상 내부에 외부 오브젝트를 실시간으로 삽입하여 재생시키는 방법 입니다.

출처 :플래시 Help 메뉴얼, 본인