키노트에서 이미지의 마스크를 편집할 때에 다음과 같이 화면에 보여지는 영역을 제외한 바깥쪽을 반투명하게 표시하는 효과가 있습니다.

플래시에서 이미지 편집 기능을 개발할 때에도 이런 효과를 쉽게 적용할 수 있습니다.
아래 플래시 무비에서, 이미지를 드래그 해 보세요.

아래 코드와 같이 cacheAsBitmap 속성을 사용하면, 반투명한 마스크를 사용할 수 있습니다. 참 쉽죠잉?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;
 
var sp:Sprite = new Sprite();
var grp:Graphics = sp.graphics;
grp.beginFill(0x0, 0.4);
grp.drawRect(0, 0, 600, 400);
grp.beginFill(0x0);
grp.drawRect(50, 50, 500, 300);
grp.endFill();
 
addChild(sp);
 
sp.cacheAsBitmap = true;
mc.cacheAsBitmap = true;
mc.mask = sp;

FLA 소스파일 다운로드

 

브라우저 설정에서 캐시를 사용하지 않도록 설정한 다음 확인해 보세요.

위 2개의 파일은 똑같이 라이브러리에서 2개의 이미지를 엑스포트하고, 동일한 코드를 사용해서 로딩을 체크하도록 되어 있습니다.
그런데 우측의 파일은 정상적으로 로딩을 처리하는 반면, 좌측의 경우 제대로 로딩을 인식하지 못하고, 로딩이 모두 끝이난 다음에야 스크립트가 실행되는 문제를 가지고 있습니다. 과연 왜 두 파일간에 차이가 생긴 걸까요?

사용된 코드는 다음과 같으며, 양쪽 모두 동일한 코드가 사용되었습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import flash.events.Event;
 
stop();
var cnt:int = 0;
 
addEventListener(Event.ENTER_FRAME, efListener);
function efListener(e:Event):void
{
	cnt++;
 
	var bl:int = loaderInfo.bytesLoaded;
	var tl:int = loaderInfo.bytesTotal;
	var pct:int = Math.floor(bl / tl * 100);
 
	var str:String;
	str = "Loaded: " + bl;
	str += "\nTotal: " + tl;
	str += "\rPercent: " + pct;
	str += "\rCount: " + cnt;
	tf.text = str;
 
	if(pct == 100){
		removeEventListener(Event.ENTER_FRAME, efListener);
	}
}
 

플래시의 타임라인에서 레이어 마스크를 사용하는 경우에, addChild() 메소드 사용 시에 주의가 필요합니다.
다음과 같이 레이어 마스크를 적용한 무비에, 액션스크립트로 생성한 무비클립을 애드해 보겠습니다.

1
2
3
4
5
6
var mc:MovieClip = new MovieClip();
var g:Graphics = mc.graphics;
g.beginFill(0xFF0000);
g.drawRect(50, 50, 200, 100);
g.endFill();
addChild(mc);

그러면 다음과 같이, 애드된 무비클립도 마스크가 적용되어 버리는 문제가 생깁니다.

아마도 Layer 2와 Layer 1 사이로 애드가 되면서, 마스크가 씌워지는 것으로 보입니다.

Layer 1 위에 다른 객체가 위치한 경우에는 마스크되지 않고 정상적으로 보여집니다. 또는 addChildAt(mc, 0)와 같이 사용해도 문제가 발생하지 않습니다.
레이어 마스크를 사용할 때에는 이런 부분을 염두에 두고 개발해야 겠네요.

 

Gapless sound looping in ActionScript 3.0

보통 사운드 루핑을 만들 때 Event.SOUND_COMPLETE 이벤트나 Sound.play(0, 999);를 사용할텐데요. 이 경우에 음악이 재생되는 사이에 약간의 틈이 발생합니다. 다음 플래시 무비처럼 말이죠.

이 파일은 아래의 코드와 같이, Event.SOUND_COMPLETE를 사용하여 사운드를 루프시키고 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import flash.media.*;
import flash.events.*;
import flash.utils.Timer;
 
var snd:Sound = new loop();
var chn:SoundChannel;
 
function playSound():void
{
	if(chn){
		chn.removeEventListener(Event.SOUND_COMPLETE, sndListener);
	}
	chn = snd.play();
	chn.addEventListener(Event.SOUND_COMPLETE, sndListener);
}
 
function sndListener(e:Event):void
{
	playSound();
}
 
lbl.text = "Loop with Event.SOUND_COMPLETE";
btn2.enabled = false;
btn1.addEventListener(MouseEvent.CLICK, clickListener1);
btn2.addEventListener(MouseEvent.CLICK, clickListener2);
function clickListener1(e:MouseEvent):void
{
	playSound();
	btn1.enabled = false;
	btn2.enabled = true;
}
function clickListener2(e:MouseEvent):void
{
	btn1.enabled = true;
	btn2.enabled = false;
	chn.stop();
}

Continue reading »

 

XML에 차일드 노드를 추가하는 것은 XML.appendChild() 메소드를 사용하면 되는데, 공식적으로 속성(attribute)을 추가하는 메소드는 없습니다.

그래서 구글로 검색해 보니, 다음과 같은 방법으로 간단히 속성을 추가할 수가 있네요.

var xml:XML = new XML(<root />);
xml.@newAtrb = "value";
trace(xml.toXMLString());
// output: <root newAtrb="value"/>
© 2011 Hangun's World - Blog Suffusion theme by Sayontan Sinha