Flex Builder 3 및 Flash Builder 4 로 개발하면서 도움말 참조는 흔히 있는 일이다. Blueprint는 이들 IDE에 plug-in 형태로 제공되며 단축키(Win:Alt+B, Mac:Control+B)만으로 쉽게 도움말을 찾을 수 있게 지원해준다.
라이브 독을 찾아다닐 필요없이 단축키만으로 쉽게 설명을 찾을 수 있으니 이 얼마나 편한가? ^^
Flex의 SystemManager는 Flex가 구동될 때 Application이 동작하기전 각종 설정을 하면서 사용자들에게 충분히 그 시간을 기다릴 수 있도록 UI적으로 Preloading 화면을 보여준다. 하지만 Flex가 아닌 ActionScript 3.0 프로젝트로 만들면 이런 UI를 보여주지 않는다. Flex는 되는데 ActionScript라고 못할까? 사실 매우 쉬운 방법으로 이 기능을 추가할 수 있다. 방법은 다음 글을 참고하길 바란다.
ActionScript 3.0도 Flex 컴파일러인 mxmlc로 컴파일하는 것이기 때문에 [Frame] 메타 데이타 태그를 이용해 Preloading 기능을 추가할 수 있는 것이 핵심이다. 이를 이용해 만들어진 Preloading 기능 추가한 클래스에 각종 설정 및 자원관리를 할 수 있는 로직을 만들어 사용하면 좋겠다.
한가지 팁을 소개하자면....
mxmlc가 Flex 컴파일러라서 내부적으로 [Frame] 메타 데이타 태그를 사용하면 기본 CSS를 포함하게 된다. 그래서 위 글대로 하면 다음과 같은 경고 문구가 나온다.
Default css file not found
이 경고 문구를 없애려면 내용이 아무 것도 없는 null.css를 하나 만들고 컴파일 옵션으로 -defaults-css-url null.css를 추가하면 경고문구가 사라진다.
네이버 오픈케스트에 "Adobe ColdFusion에 대해 알아봐요."라는 제목으로 발행했습니다.
국내에서는 이상하게도 ColdFusion에 대해 많이 무관심한 편입니다. 알고 보면 정말 멋진 RIA 기술인데도 말이죠. 개발은 쉽게하고 유지보수도 편하게 하는 것을 좋아하시는 분들에게 ColdFusion은 큰 매력으로 자리 잡을 수 있을 것이라 생각합니다. 물론 개인 뿐 아니라 기업 입장에서도 효율적인 개발 및 유지보수 차원에서 도입한다면 좋을 것이라 생각합니다.
TLF는 Flash Player 10, AIR 1.5 기반의 새로운 Text 엔진이다. Adobe Flash CS4 및 Flex 4 에서 사용할 수 있다. Flash API에서 제공하는 TextField의 부족한 부분을 개선하고 일반 워드 처럼 Text 편집 작업을 할 수 있도록 하는 것이 이 프레임워크의 목적이 아닌가 싶다.
Adobe Labs에 다운로드 페이지에서 직접 받을 수 있다. 소스는 최신 Flex 4 SDK에 포함되어 있다고 한다. Night Build 버전으로 다운로드 받을 수 있고 [여기]를 참조한다.
TLF의 Beta 1 버전은 다운로드 받으면 CS4, Flex 3, Flex 4 환경에서 개발할 수 있고 꼭 Flash Player 10 버전으로 컴파일 옵션으로 지정해야한다. 그리고 3개의 SWC파일인 textLayout_conversion.swc, textLayout_core.swc, textLayout_edit.swc 를 라이브러리로 포함하면 되겠다.
Flex 4로 넘어오면서 생소하게 느꼈던 부분 중에 하나가 바로 자식(Child) 관리 메소드들의 변화가 아닌가 생각한다. 바뀐 부분이 무엇이고 왜 바뀌었는지 알아보도록 하겠다.
Flex 3에서 Canvas, Box 등의 컨테이너는 모두 mx.core.Container 클래스를 확장해서 만들어졌다. 이 Container 클래스는 flash.display.DisplayObjectContainer에서 정의되어 있는 자식관리 메소드인 numChildren, addChild(), addChildAt(), removeChild(), removeChildAt() 등을 그대로 Override(재정의) 해서 사용했다. 그런데 이렇게 재정의 한것이 문제가 컸다. Flex 3의 Container는 DisplayObjectContainer의 메소드를 그대로 사용하므로 자식은 모두 flash.display.DisplayObject로 받게 된다. 하지만 실제 자식으로 사용할 수 있는 것은 IUIComponent를 구현한 클래스만 자식으로 받을 수 있다. 즉 UIComponent만 자식으로 받을 수 있는 것이다. 아래 코드는 Flex 3의 Container에서 자식을 추가할 때 내부적으로 addingChild()메소드가 호출되는데 거기에 있는 코드이다.
var uiChild:IUIComponent = IUIComponent(child);
Flex 3에서 addChild()를 통해 받는 자식은 DisplayObject인데 런타임시 사용될 수 있는 컴포넌트는 IUIComponent이니 실제 Flex 3를 이용해서 개발하는 사람들은 오용할 소지가 크게 된 것이다. 나도 Container에 Sprite 객체를 넣으려고 하다가 안되서 애먹은 적이 있었는데 바로 이것때문이다.
Flex 4부터는 이 문제를 말끔히 없애고자 DisplayObjectContainer의 자식 관리 메소드를 재정의 하지 않고 다른 메소드를 만들었다. 그 다른 메소드는 무엇일까?
Flex 4에서는 아래와 같이 IVisualElementContainer 인터페이스를 정의했다. 이 인터페이스는 Flex 4의 모든 Spark, Halo 컨테이너에서 모두 구현하고 있다. 보면 알겠지만 addChild대신 addElement, removeChild대신 removeElement로 된 것이다. 결국 Child 대신 Element를 사용한거다.
package mx.core
{
public interface IVisualElementContainer
{
function get numElements():int;
function getElementAt(index:int):IVisualElement
function addElement(element:IVisualElement):IVisualElement;
function addElementAt(element:IVisualElement, index:int):IVisualElement;
function removeElement(element:IVisualElement):IVisualElement;
function removeElementAt(index:int):IVisualElement;
function removeAllElements():void;
function getElementIndex(element:IVisualElement):int;
function setElementIndex(element:IVisualElement, index:int):void;
function swapElements(element1:IVisualElement, element2:IVisualElement):void;
function swapElementsAt(index1:int, index2:int):void;
}
}
위 인터페이스는 정확히 무엇을 의미하는가? 자식 추가할 때 이제 더이상 DisplayObject가 아니라는 것에 주목하자. DisplayObject대신 IVisibleElement를 관리하고 있다. 이것이 핵심이다. 즉 이제 런타임시가 아닌 컴파일 단계서부터 원천적으로 컨테이너에 자식들은 모두 IVisibleElement을 구현한 것만 다루겠다는 것이다. Flex 4는 Flex 3와 다르게 모든 컨테이너는 IVisibleElementContainer를 구현한 것이다. 그리고 mx.core.UIComponent는 IVisibleElement를 구현했다. 이로서 컨터이너에 붙는 자식들을 더욱 명확하게 사용할 수 있게 되었다.
그럼 addChild, addChildAt은 어떻게 했을까? 아래 코드는 Spark 컨테이너의 SkinnableComponent와 GroupBase에 재정의된 것이다. 즉 이들 메소드를 사용하면 런타임시 예외처리를 해준다. 이 클래스를 확장해서 만든 Spark 계열의 컨테이너인 SkinnableContainer, SkinnableDataContainer, Group, DataGroup, Panel 전부 이렇게 동작한다.
/**
* @private
*/
override public function addChild(child:DisplayObject):DisplayObject
{
throw(new Error(resourceManager.getString("components", "addChildError")));
}
/**
* @private
*/
override public function addChildAt(child:DisplayObject, index:int):DisplayObject
{
throw(new Error(resourceManager.getString("components", "addChildAtError")));
}
하지만 기존 Halo 기반의 컨테이너(mx.core.Container)는 addChild(), removeChild() 사용시 예외처리를 해두지 않았다. 물론 IVisualElementContainer는 구현했지만 말이다. 이는 기존 Flex 3 Halo 기반의 컴포넌트와의 호환성 문제 때문에 그리 한 것이라 판단한다.
Flex 4 문서를 보면 되도록이면 Halo보다 Spark 기반의 컴포넌트와 컨테이너를 사용할 것을 권장하고 있다. 지금까지 소개한 내용도 그렇게 권장하는 이유중에 하나일 것이다.
Flex SDK 개발자들이 Flex 2 시절 전부터 이런 문제를 알고 있었을 텐데 왜 지금에서야 바꿨는지... ㅎㅎㅎ
스킨 부분에 있어서 Flex 3에서는 ProgrammaticSkin을 기반으로 Skin을 ActionScript 코드로 만들었는데 Flex 4부터는 MXML로 만들 수 있도록 했다. 이 부분이 가장 크게 달라진거다.
위의 Skin 코드를 살펴보면 몇가지 재미있는 점을 발견할 수 있다. 살펴보자.
먼저 HostComponent 메타 데이타를 볼 수 있다. Flex 4에서 나온 새로운 메타 데이타이다. 이것은 이 스킨이 어떤 컴포넌트가 Host인가 명시적으로 지칭해주는 역할을 한다. Button은 ButtonBase를 확장해서 만들었고 ButtonBase는 SkinnableComponent를 확장해서 만들어졌는데 HostComponent가 쓰이는 부분은 SkinnableComponent인 듯 보인다. 아래는 SkinnableComponent내에 정의된 attachSkin() 메소드이다. 이것은 createChildren() 혹은 commitProperties()가 호출될때 이 메소드가 호출되는데 skinClass 스타일이 바뀔 때 Skin을 붙여주는 역할을 담당한다.
/**
* Create the skin for the component.
* You do not call this method directly.
* Flex calls it automatically when it calls createChildren() or
* the UIComponent.commitProperties() method.
* Typically, a subclass of SkinnableComponent does not override this method.
*
*
This method instantiates the skin for the component,
* adds the skin as a child of the component, and
* resolves all part associations for the skin
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
protected function attachSkin():void
{
// Factory
var skinClassFactory:IFactory = getStyle("skinFactory") as IFactory;
if (skinClassFactory)
setSkin( skinClassFactory.newInstance() as Skin );
// Class
if (!skin)
{
var skinClass:Class = getStyle("skinClass") as Class;
if (skinClass)
setSkin( new skinClass() );
}
if (skin)
{
skin.owner = this;
// As a convenience if someone has declared hostComponent
// we assign a reference to ourselves. If the hostComponent
// property exists as a direct result of utilizing [HostComponent]
// metadata it will be strongly typed. We need to do more work
// here and only assign if the type exactly matches our component
// type.
if ("hostComponent" in skin)
{
try
{
Object(skin).hostComponent = this;
}
catch (err:Error) {}
}
// the skin's styles should be the same as the components
skin.styleName = this;
super.addChild(skin);
skin.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, skin_propertyChangeHandler);
}
else
{
throw(new Error(resourceManager.getString("components", "skinNotFound", [this])));
}
findSkinParts();
invalidateSkinState();
}
위 코드에 보면 hostComponent 부분이 보이는데 바로 HostComponent 메타데이터와 관련이 있어 보인다. 아직 정확한 동작방식은 모르겠다.
주제를 바꿔서 맨 위 코드에 <s:state>가 존재하는 것을 볼 수 있다. 이것은 상태를 의미하는 것으로 이미 Button 자체에 up, down, over, up 상태가 메타 데이터 형태로 정의 되어 있다. . ButtonBase에 보면 아래와 같은 방식으로 4개의 상태를 나타내는 메타 데이터가 정의되어 있다.
/**
* Up State of the Button
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("up")]
/**
* Over State of the Button
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("over")]
/**
* Down State of the Button
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("down")]
/**
* Disabled State of the Button
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("disabled")]
public class ButtonBase extends SkinnableComponent implements IFocusManagerComponent
{
...
}
저 상태변화는 SkinnableComponent 클래스에서 알아서 처리하도록 되어 있다. Button의 스킨의 상태에 따른 변화의 동작방식을 이해하기 위해 SkinnableComponent를 분석해야한다. 뭐, 분석까지 아니더라도 SkinnableComponent를 활용하는 방법만 알면 될 것이다. SkinnableComponent는 UIComponent를 확장한 것이고 모든 Spark 계열의 컴포넌트는 SkinnableComponent를 확장한 형태이다. ColorPicker나 DateChooser와 같이 예전 Halo 계열의 컴포넌트는 SkinnableComponent를 확장하지 않았다.
<s:filters>는 말그대로 필터를 설정하는 것을 의미한다. 여기서는 DropShadowFilter를 사용했다. Flex 4에서 추가한 새로운 기능중에 각 속성에 state를 지정할 수 있다. DropShadowFilter를 사용할 때도 아래 처럼 속성에 이 기능을 적용했다.
alpha="0.5" alpha.over="0.3"
DropShadowFilter를 사용한 부분 중에 alpha값을 위처럼 사용했다. 보통때는 alpha값이 0.5이지만 상태가 over이면 0.3을 사용하겠다는 것을 의미한다. alpha.over="0.3" 부분이 어떻게 ActionScript 로 바뀌는가 살펴보려면 컴파일 옵션에 -keep-generated-actionscript를 해보면 알 수 있다. 그럼 컴파일을 하면 src/generated 폴더가 생성된다. 그 안에 com.jidolstar.skins 패키지로 가보면 MyButtonSkin-generated.as 파일이 있는데 열어보면 alpha.over="0.3" 가 어떻게 바뀌는가 한눈에 알 수 있다. 아래 코드는 MyButtonSkin-generated.as의 일부분이다.
/**
* @private
**/
public function MyButtonSkin()
{
super();
// our style settings
// properties
this.filters = [_MyButtonSkin_DropShadowFilter1_i()];
this.layout = _MyButtonSkin_BasicLayout1_c();
this.mxmlContent = [_MyButtonSkin_Rect1_c(), _MyButtonSkin_SimpleText1_i()];
this.currentState = "up";
// events
states = [
new State ({
name: "up",
overrides: [
]
})
,
new State ({
name: "down",
overrides: [
new mx.states.SetProperty().initializeFromObject({
target: "_MyButtonSkin_DropShadowFilter1",
name: "inner",
value: true
})
]
})
,
new State ({
name: "over",
overrides: [
new mx.states.SetProperty().initializeFromObject({
target: "_MyButtonSkin_DropShadowFilter1",
name: "alpha",
value: 0.3
})
,
new mx.states.SetProperty().initializeFromObject({
target: "_MyButtonSkin_DropShadowFilter1",
name: "distance",
value: 15
})
,
new mx.states.SetProperty().initializeFromObject({
target: "_MyButtonSkin_DropShadowFilter1",
name: "blurX",
value: 15
})
,
new mx.states.SetProperty().initializeFromObject({
target: "_MyButtonSkin_DropShadowFilter1",
name: "blurY",
value: 15
})
,
new mx.states.SetProperty().initializeFromObject({
target: "_MyButtonSkin_GradientEntry2",
name: "ratio",
value: 0.25
})
]
})
,
new State ({
name: "disabled",
overrides: [
]
})
];
}
private function _MyButtonSkin_DropShadowFilter1_i() : spark.filters.DropShadowFilter
{
var temp : spark.filters.DropShadowFilter = new spark.filters.DropShadowFilter();
temp.quality = 3;
temp.alpha = 0.5;
temp.distance = 5;
_MyButtonSkin_DropShadowFilter1 = temp;
return temp;
}
결국 alpha.over="0.3"는 State 객체를 만들어 각 상태에 따른 속성으로 지정해버리도록 만들어진다. currentState를 "up"으로 설정하고 상태가 바뀔 때마다 등록된 State를 실행하도록 되는 것이다. 이걸 보니깐 원리가 확실히 이해가 된다.
다시 돌아가서....
<s:Rect>과 <s:SimpleText>는 mxmlContent=[_MyButtonSkin_Rect1_c(), _MyButtonSkin_SimpleText1_i()] 의 형태로 추가 된다. mxmlContent도 Flex 4부터 추가된 속성인데 생소하기 짝이 없다. ㅎㅎ 좀 알아보기 위해 또 뒤져봤다.
//----------------------------------
// mxmlContent
//----------------------------------
private var mxmlContentChanged:Boolean = false;
private var _mxmlContent:Array;
[ArrayElementType("mx.core.IVisualElement")]
/**
* The visual content children for this Group.
*
*
The content items should only be IVisualItem objectss.
* An mxmlContent Array should not be shared between multiple
* Group containers because visual elements can only live in one container
* at a time.
*
*
If the content is an Array, do not modify the Array
* directly. Use the methods defined by Group class instead.
*
* @default null
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
public function get mxmlContent():Array
{
if (_mxmlContent)
return _mxmlContent.concat();
else
return null;
}
/**
* @private
*/
public function set mxmlContent(value:Array):void
{
if (createChildrenCalled)
{
setMXMLContent(value);
}
else
{
mxmlContentChanged = true;
_mxmlContent = value;
// we will validate this in createChildren();
}
}
/**
* @private
* Adds the elements in mxmlContent to the Group.
* Flex calls this method automatically; you do not call it directly.
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
private function setMXMLContent(value:Array):void
{
var i:int;
// if there's old content and it's different than what
// we're trying to set it to, then let's remove all the old
// elements first.
if (_mxmlContent != null && _mxmlContent != value)
{
for (i = _mxmlContent.length - 1; i >= 0; i--)
{
elementRemoved(_mxmlContent[i], i);
}
}
_mxmlContent = (value) ? value.concat() : null; // defensive copy
if (_mxmlContent != null)
{
var n:int = _mxmlContent.length;
for (i = 0; i < n; i++)
{
var elt:IVisualElement = _mxmlContent[i];
// A common mistake is to bind the viewport property of an Scroller
// to a group that was defined in the MXML file with a different parent
if (elt.parent && (elt.parent != this))
throw new Error(resourceManager.getString("components", "mxmlElementNoMultipleParents", [elt]));
elementAdded(elt, i);
}
}
}
위 코드는 Group 클래스이다. mxmlContent는 Skin 클래스의 부모 클래스인 Group에 구현되어 있는 속성인 것이다. mxmlContent에 값을 설정하면 setMXMLContent() 함수가 호출되어 기존의 MXML 추가된 Element들을 지우고 새로운 Element인 Rect과 SimpleText를 추가한다. 또한 IVisibelElement인 컴포넌트만 자식으로 추가하도록 되어 있고 다른 부모를 가지는 컴포넌트인 경우에 예외처리도 한다. 결국 mxmlContent은 Group에서 사용된 MXML형태의 비주얼 컴포넌트를 Flex 컴파일러가 AS3로 추가해주기 위해 만들어진 것이다.
<s:Application> 부분에 버튼 추가한 부분은 어떻게 변해 있을까? 살펴보면 아래 처럼 되어 있다.
private function _sparkskin_Button1_c() : spark.components.Button
{
var temp : spark.components.Button = new spark.components.Button();
temp.label = "확인";
temp.setStyle("skinClass", com.jidolstar.skins.MyButtonSkin);
if (!temp.document) temp.document = this;
return temp;
}
skinClass가 원래 Style속성이다. SkinnableComponent를 보면 [Style(name="skinClass", type="Class")]로 정의 되어 있다. 이는 validateSkinChange() 함수에서 붙여주게 된다.
/**
* @private
*/
private function validateSkinChange():void
{
// If our new skin Class happens to match our existing skin Class there is no
// reason to fully unload then reload our skin.
var skipReload:Boolean = false;
if (_skin)
{
var factory:Object = getStyle("skinFactory");
var newSkinClass:Class;
if (factory)
newSkinClass = (factory is ClassFactory) ? ClassFactory(factory).generator : null;
else
newSkinClass = getStyle("skinClass");
skipReload = newSkinClass &&
getQualifiedClassName(newSkinClass) == getQualifiedClassName(_skin);
}
if (!skipReload)
{
if (skin)
detachSkin();
attachSkin();
}
}
내가 한가지 흥미를 느꼈던 것은 바로 <s:SimpleText> 부분이였다. Flex 4의 Button은 Label의 컴포넌트를 바꿀 수 없었는데 Flex 4에서는 스킨 기능을 이용해 Text엔진을 바꿀 수 있다. 가령 <s:SimpleText> 대신 <s:RichText>로 바꿔보길 바란다. 잘 된다. 이는 TextGraphicElement를 확장한 SimpleText와 RichText만 가능하다. 만약 TextArea와 같은 것을 사용하면 아래와 같은 에러가 나오게 된다.
TypeError: Error #1034: 유형 강제 변환에 실패했습니다. spark.components::TextArea@70c36d1을(를) spark.primitives.supportClasses.TextGraphicElement(으)로 변환할 수 없습니다.
이런 식의 사용은 Spark 컴포넌트 전체에서 사용할 수 있다. 참 좋은 방법이다.
생각하기
Flex 4는 Flex 3 처럼 무리하게 ActionScript 3.0까지 분석할 필요까지 느끼게 해주지 않도록 하는 것이 컨셉인 것 같다. 하지만 내가 좀 독특한 건가 예전 버릇을 버리지 못해 어찌 돌아가는지 알고 싶어서 Flex 4 SDK를 훑어보게 되었다. 하지만 이렇게 저렇게 분석하면서 살펴봤지만 아직도 모르는게 산적해있다. 먼저 사용하는 법부터 좀 공부해야겠다. ㅎㅎ
7월 13일에서 14일까지 한국에서 인터넷으로 접속시에 Adobe 관련 사이트 접속에 장애 있었다. 요즘 DDoS때문에 Adobe가 한국 IP를 차단한 줄로 예상하고 외국 Proxy에 돌려서 접속해 보니 잘 접속되었다. 결국 Adobe가 막은 줄 알았다. 그런데 의외의 정보를 접했다.
7월13일~14일까지 국내 인터넷 서비스망을 통한 인터넷 접속시 www.adobe.com/kr 포함한 www.adobe.com 웹사이트 접속이 불가능하였으나, 어제 오후 7시부로 다시 접속이 가능해졌습니다.
KISA(한국정보보호진흥원) 상황실에서 근래 있었던 DDoS 공격을 의심, 어도비에게 사전공지 없이 독단적으로 어도비 홈페이지 IP 접속을 차단시켰던 것으로 확인 되었습니다. 따라서 어도비 홈페이지가 DDoS와 전혀 상관이 없음을 인정하고 다시 차단된 IP를 해제, 접속 에러 문제가 해결되었습니다.
며칠 사이 어도비의 수많은 중요한 고객분들께 불편을 끼친 점을 안타깝게 생각하며, 이는 폐사의 불찰이 아니었음을 양해하여 주시기 바랍니다.
애꿎은 Adobe를 나무랐던 것이다. KISA(한국정보보호진흥원)이 DDoS 공격 의심으로 Adobe 한국지사를 비롯한 관련 업체에게 아무런 공지없이 그냥 IP를 차단한거다.
정말 어이없다. 도데체 저 단체는 한국내 있는거 맞나? 막으려면 알려주고나 막지. Adobe가 작은 업체인가? 정말 무식한거 아닌가? 답답하기만 하다. 세금내는게 아깝다. 몇일간 Adobe에 접속 못해서 습득하지 못한 정보 때문에 시간 낭비 했는데 아무래도 KISA가 책임져야한다고 생각이 든다. 좀!!!! 제대로 일좀 하십시다.
Flex의 모든 비주얼 컴포넌트는 Sprite를 확장한 UIComponent를 기반으로 한다. 생성할 대 호출되는 함수와 발생되는 이벤트에 대해서 하나의 그림으로 표현되어 있다. Flex 커스텀 컴포넌트를 작성해야할 때 Life Cycle을 이해하는 것은 반드시 필요하다. 그러므로 눈에다 팍팍 익혀두면 도움이 될 것이다.
위 그림은 Flex Builder 3(Flash Builder 4)의 Profiling(프로파일링) 기능에서 시간별 메모리의 상태를 보여주고 있는 것이다. 프로젝트를 하다가 저놈의 메모리가 도데체 왜 올라가는지 이해할 수 없었다. 분명 참조를 제대로 지워주고 있지 않으렸다!
등록했던 이벤트도 지워주고 자식들도 빼주고 붙여주면서 원인을 분석해갔다. 전체에서 부분으로 부분에서 전체를 훑어보면서 메모리의 변화를 계속 살펴봤다.
위 그림은 메모리가 정상적으로 반환되고 있는 모습이다. Flash Player에서는 참조관계가 root에 묶여 있거나 환형참조일때 가비지 컬렉션(Garbage Collection)으로 인식하여 어느 서점에 메모리에서 해지를 시킨다. 그래서 개발자는 참조를 잘 지워줘야 한다.
메모리가 비정상적으로 올라간 첫번째 원인은 이벤트 핸들러를 등록만 하고 지우지 않은데서 비롯되었다. 그래서 이벤트 핸들러를 약참조(weak reference)로 하도록 해서 해결했다. 약참조의 경우 소멸시점이 명확하지 않을때 유용하게 사용할 수 있다. 그리고 객체 중복 참조로 인해 메모리가 상승했는데 한쪽에서만 참조를 없애고 다른 한 곳에서는 삭제하지 않은 오류를 범했다. ㅡㅡ;
아~ Flex Builder에 이 기능이 없었다면 저걸 어떻게 찾을 수 있었을까? Flash Builder 4부터는 이 프로파일링 기능에 퍼포먼스 해석(performance analysis)기능 까지 추가 되고 개선되었다는데~~ 어찌하는지 해봐야 겠다.
Adobe RIA에 대한 정보에 대한 소통의 도구로 네이버 오픈캐스트를 개설했습니다. Flex, Flash, ActionScript 3.0을 주로 다룰 것이고 그와 관련된 LCDS, BlazeDS, ColdFusion등, 다양한 Adobe RIA와 관련된 기술도 공유하고자 합니다.
제 오픈 케스트에 올라왔으면 하는 글 있으면 언제든지 추천해주시고요.
구독도 많이 해주세요~~~
더욱 좋은 정보 공유를 위해 앞장서도록 노력하겠습니다. ^^
지금 생각하는 주제를 몇가지 적어보면
한글문제, 3D, 컴포넌트 제작, 보안, Stratus, Alchemy, LCDS, BlazeDS, CF.... , 또... 이들에 대한 세부 주제까지... 정말 많네요. ㅎㅎ
일전에 Flex 4 CSS에 대한 글을 올렸습니다. Flex 4의 CSS는 Flex 3까지의 CSS의 한계를 극복하도록 만들어졌죠. 그런데 이 CSS가 기능이 확장된 계기가 있었습니다. 갑자기 궁금해지지 않나요? Flex 개발에 관련된 Adobe 개발자들이 머리를 짜서 하자고 했을까요? 아니면 어떤 요청이 있었을까요? 답은 Adobe Bug reporting 시스템에 있었습니다.
Adobe에서는 Adobe Bug Reporting 시스템을 운영하고 있습니다. 들어가보면 알겠지만 Flex, BlazeDS, Flash Player, ActionScript Compiler 주제로 개설되어 있고 개발자들의 요구사항 및 버그를 이곳에서 전부 받고 같은 요구사항이 있는 사람들이 투표하는 방식으로 진행되어 투표수가 많으면 Adobe에서 우선순위를 가려서 개발착수에 들어가지요.
Jacob Wright라는 사람이 리포팅을 했고 투표수가 75입니다. 그만큼 CSS의 기능이 더욱 확장되었으면 좋겠다는 사람의 수가 많은 거지요. 투표수가 많으니 Adobe 측에서도 무시할 수 없게 된 것이고 이번 Flex 4에서 지원하게 된 것입니다.
버그 리포팅에 참여하자.
그럼 우리도 참여할 수 있을까요?
때론 그럴겁니다 영어 못하기 때문에 참여 못한다고....
하지만 꼭 그렇지 않습니다. 자주 들어가 내용을 살펴보고 투표로써 작은 관심을 가져주는 것만으로도 충분합니다. 개발자중에서도 영어 잘하는 사람이 이런 글을 올립니다. 그럼 그 사람의 요청이 있으면 가서 투표해주면 되는 겁니다. 절대 어려운 일이 아닙니다. 아래에 버그 리포팅에서 추천(투표)의 중요성에 대해 알 수 있을 겁니다.
Adobe Flex/AIR 관련되어 한글문제가 꽤 있습니다. 이 한글문제를 해결하기 위해서도 이 버그 리포트 시스템을 이용하면 됩니다. 이미 Flash Platform 한글문제 공동대응팀이 생겼고 지속적으로 이 문제를 해결하기 위해 다양한 각도로 일하고 있습니다. 대응팀 총괄을 맡고 있는 이희덕씨 블로그에 관련 글이 많습니다.
여러분도 Adobe RIA 기술에 대한 불만 또는 원하는 사항들이 있을겁니다. 앞에서 설명드린데로 잘 정리해서 Adobe Bug Reporting 시스템에 올리시거나 투표를 적극적으로 참여함으로써 성취할 수 있는 겁니다. 한국 개발자들은 유독 영어 울렁증이 있다고들 호소하는데(저를 비롯) 사실 핑계라고 생각합니다. 필요하면 공부하면 되고요. 이런 일들은 꼭 영어를 잘해서 하는 일도 아니거든요. 한국 Adobe RIA 기술에 관련된 시장은 일본에 비해 거의 8배 정도 부족합니다. 그리고 적극성도 일본에 비해 많이 뒤쳐지며 나오는 컨텐츠의 창의력도 훨씬 뒤지는 편입니다. 왜 유독 일본어만 Flex Livedocs가 있을까요? Adobe는 시장성이 없는 한국에 한글문서 작성 인력을 투자하기에는 그들도 아깝다는 생각을 하는겁니다. 물론 Adobe는 그런 마음을 가지면 안되는 것이지만 또한 적극적이지 못한 우리도 반성해야될 일이라고 생각합니다. 우리가 안으로만 숨지않고 적극적으로 활동하면 Adobe에서 한국시장을 무시 못하게 될겁니다. 그런 날이 오길 반드시 바랍니다.
Flex 4는 Flex 3를 완전히 갈아 엎었다는 느낌이 든다. 기존 컴포넌트에서 없어진 것도 있고 새로 추가 된 것도 상당히 많다. 익숙해지려면 적지 않은 시간투자가 필요할 것 같다.
CSS에 네임스페이스 추가
Flex 4부터 CSS에 네임스페이스가 추가가 되었다. 이러한 구분이 필요한 것은 컴포넌트가 기존 halo 컴포넌트 외에 Spark 컴포넌트가 새로 추가가 되면서 필요해진 것이다. 즉 두개의 컴퍼넌트가 다른 네임스페이스를 사용하고 있기 때문에 CSS도 다른 네임스페이스를 쓰게 하는 것이다. 다음 소스를 보면 이해가 쉽겠다.
<fx:Style>내에 @namespace를 정의하고 네임스페이스명|컴포넌트 의 형태로 CSS를 정의할 수 있도록 되었다. 그다지 어려운 사실은 아니다. ^^
이런 구조로 만들어진데에는 Flex 4가 Flash Catalyst와 연동이 되면서 디자이너와 개발자의 협업에 충실해지기 위한 거라고 한다. 예를 들어 Slider의 경우 liveDragging속성이 CSS쪽에서는 제어할 수 없던 반면 이번 Flex 4부터는 할 수 있게 되어 개발자는 코드상에서 디자이너는 CSS쪽에서 접근이 가능해져 협업이 되는 것이다. 디자이너의 경우 CSS를 직접 건드리지 않고 Flash Catalyst를 통해서 작업하기 때문에 CSS에 대해서는 몰라도 되지만 그 결과물은 CSS에 속성이 정의 되어 있음을 확인할 수 있을 것이다. 이러한 점이 개발자와 디자이너간에 협업을 가능하게 한 것이라고 생각한다.
고급 CSS (Advanced CSS)
Flex 3의 CSS에서 Selector는 단지 2개 였다. Class Selectors와 Type Selectors가 그것이다. 하지만 Flex 4부터는 이 Selector 종류가 크게 늘어났다. 이는 더욱 세밀하게 CSS 작업을 할 수 있다는 것을 의미한다. 이제 거의 HTML CSS와 맞먹을 정도인 것 같다. ^^ (CSS는 개인적으로 Flex의 강점중에 하나라고 생각한다. 기존 Flex 3 만으로도 강력한 CSS기능은 나로 하여금 Flex 매력에 푹 빠지게 했다.)
참고로 Class Selector와 Type Selector는 다음과 같다.
Type Selector
같은 종류의 컴포넌트에 적용된다. 다음과 같은 경우 spark.components.Button 및 이를 확장한 컴포넌트에 적용된다.
s|Button { color: #CC0000; }
Class Selector
컴포넌트의 styleName을 지정한 컴포넌트라면 종류에 상관없이 적용이 된다.
.header { background-color: #CCCCCC; }
아래부터는 Flex 4에서 추가된 CSS selector에 대해 예제와 함께 살펴본다.
1. ID Selectors
예전부터 컴포넌트 ID별로 CSS를 줄 수 있으면 좋겠다는 생각을 가졌다. Flex 4에 부터 적용되니 기쁘다. ID별로 CSS를 적용할 수 있기 때문에 같은 계열의 컴포넌트라도 하나의 객체로 생성된 유일한 1개의 컴포넌트에만 CSS를 적용할 수 있게 된다.
위 예제에서 Label에 styleName을 설정할 때 class selector를 2개 썼다. class1, class2는 각각 폰트색과 종류를 설정했는데 이 2개의 selector를 사용한 Label은 두개의 class selector에 정의가 적용된다. 결국 Label의 글자색은 빨강, 폰트는 궁서로 보이게 된다.
이렇게 class selector를 중첩이 가능하게 됨에 따라 중복되는 selector가 없도록 깔끔하게 CSS구성을 할 수 있게 되었다.
3. Descendant Selectors
이 selector는 자식/부모 관계에 있는 컴포넌트에 해당한다. Panel위에 Button을 놓았다고 하자. 이때 관계에서 Panel이 부모, Button은 자식이 된다. 특정 부모는 자식에게 어떤 것을 바랄 수 있게 된다. 그래서 사과를 줄수도 있고 바나나도 줄 수 있다. 여기에 특정 부모라는 말이 중요하다. 아무 부모나 자식에게 그렇게 주는 것을 금지한다. 이 관계를 이용한 것이 바로 Descendant selector이다.
위 코드에서 볼 수 있듯이 Panel에 자식 Button만 CSS를 적용하도록 되어 있기 때문에 Group위에 올라간 Button에는 CSS적용이 안된다.
4. Pseudo selectors
Flex 4에서 상태변화에도 CSS를 적용할 수 있게 되었다. Flex 4에서는 Skin을 ProgrammaticSkin 기반이 아닌 SparkSkin기반으로 MXML형태로 제작할 수 있도록 되어 있다. flex4.swc에 spark.skins.*쪽을 훑어보기 바란다. Button의 경우 ButtonSkin.mxml이 존재하는데 아래와 같이 상태별로 다른 스킨을 줄 수 있도록 되어 있다.
Papervision3D나 Away3D 라이브러리를 이용하지 않고 Flash Player 10 3D API만을 이용해 태양계의 행성인 토성을 그려보았다. 토성을 그리기 위해 먼저 표면부분과 고리부분의 Texture를 구해야한다. 아래 사이트에서 다양한 행성의 Texture 그림을 구할 수 있다.
토성을 모양을 만들기 위해 토성의 표면과 고리에 대한 Mesh데이타를 만들어야 한다. 아래코드는 고리(Ring) 부분의 Mesh데이타를 만드는 부분이다. 표면부분과 다르게 고리 Texture를 반복해서 그리는 데이타를 만든다.
/**
* 고리 Mesh 데이터 작성
* @param radius 고리 안쪽 반지름
* @param thickness 고리 두께
* @param div 고리 조각수
* @return mesh 데이터
*/
function createRingMesh( radius:Number, thickness:Number, div:uint ):GraphicsTrianglePath
{
var vertices:Vector. = new Vector.( 0, false );
var indices:Vector. = new Vector.( 0, false );
var uvtData:Vector. = new Vector.( 0, false );
var mesh:GraphicsTrianglePath = new GraphicsTrianglePath( vertices, indices, uvtData, TriangleCulling.NONE );
var s:Number = 0;
var x1:Number = radius;
var x2:Number = radius + thickness;
var y1:Number = 0;
var y2:Number = 0;
var z:Number = 0;
var cos:Number;
var sin:Number;
var n:Number = 0;
for( var i:uint = 0; i < div; i++ )
{
//Vertices
mesh.vertices.push(
x1, y1, z,
x2, y2, z
);
s = Math.PI * 2 * (i + 1) / div;
cos = Math.cos( s );
sin = Math.sin( s );
x1 = radius * cos;
x2 = (radius + thickness) * cos;
y1 = radius * sin;
y2 = (radius + thickness) * sin;
mesh.vertices.push(
x1, y1, z,
x2, y2, z
);
//UVT
mesh.uvtData.push(
0,1,1,
1,1,1,
0,0,1,
1,0,1
);
//Indices
n = i * 4;
mesh.indices.push( n, n+1, n+2, n+2, n+1, n+3 );
}
return mesh;
}
Enterfame시에 렌더링을 실시하는데 Utils3D.projectVectors(), graphics.beginBitmapFill(), graphics.drawTriangles() 메소드를 2번씩 호출한다. 즉, 토성의 구와 고리를 그리기 위해 투영, 렌더링을 2번씩 하는 것이다.
언뜻보면 이 코드는 문제가 없어보이지만 실제로 실행해보면 바로 문제가 있다는 것을 확인할 수 있다.
아래는 이 프로그램을 실행한 것이다.
마우스로 돌려보고 화살표키로 확대/축소도 할 수 있다. 또한 Space키 누르면 삼각형 부분이 보인다.
실행한 결과를 보면 문제가 있다. 토성 표면 뒤에 고리가 보인다. 당연히 저렇게 그려지면 안된다. 이 문제는 위의 방법처럼 Texture와 Mesh데이타가 2개여서는 방법이 나오지 않는다. 왜냐하면 graphics.drawTriangles() 함수를 2번 그려주게 되면 먼저 그린 것은 항상 나중에 그린것에 의해 가려지기 때문이다.
위 함수처럼 1번만 투영/렌더링 처리하면 이제 토성의 표면과 고리는 아래처럼 자연스럽게 나오게 된다.
하지만 완벽하지 않다. 이유는 렌더링시 Culling을 None으로 지정했기 때문이다. 이는 보이지 않는 표면까지 그린다는 의미이다. 고리의 경우 양쪽면이 다보여야한다. 그러므로 고리의 Mesh데이타는 None으로 지정한다. 하지만 토성 표면의 경우는 화면 앞쪽을 향하는 부분만 보이면 되므로 Culling을 Positive로 지정하면 된다. 첫번째 예제에서는 어짜피 Mesh 데이터가 2개이므로 상관없었지만 두번째의 경우에는 양면 다보여야하는 고리때문에 토성의 표면도 None처리 했다. 이는 보이지 않는 부분까지 렌더링하므로 그만큼 속도저하가 일어난다. 이를 해결하기 위해 Positive로 지정하되 고리를 앞뒤면으로 겹쳐서 그리면 된다. 하지만 이 방법밖에 없는지 의문이다.
정리하기
이런 작업은 신나는 일이다. ^^
이 토성에 Light효과를 주어 Shading 예제도 만들어봐야 겠다.
참고로 모든 작업은 Flash Builder 4에서 했으며 Flex 4 SDK를 이용했다. 결과물은 Flash Player 10이상 설치된 브라우져에서만 확인할 수 있다.
만약 Separator를 지우고 싶다면 단순히 headerSeparatorSkin 에 mx.skins.ProgrammaticSkin으로 정의하면 된다. 아래는 실행화면과 소스코드이다. mx.skins.ProgrammaticSkin는 프로그램적으로 스킨을 만들 필요가 있을때 사용하는 클래스로 이 클래스 내부에서는 어떤 렌더링도 하지 않기 때문에 headerSeparatorSkin 을 이 클래스로 대체하는 것만으로도 Header의 separator를 삭제할 수 있는 것이다.
DataGrid에는 drawSeparators() 메소드가 protected로 지정되어 있다. 만약 DataGrid를 커스터마이징해서 Separator 그리는 방식을 바꾸고 싶다면 drawSeparators() 부터 찾아가면 된다. 아래 코드는 DataGrid의 drawSeparators() 메소드 정의이다
/**
* Creates and displays the column header separators that the user
* normally uses to resize columns. This implementation uses
* the same Sprite as the lines and column backgrounds and adds
* instances of the headerSeparatorSkin and attaches mouse
* listeners to them in order to know when the user wants
* to resize a column.
*/
protected function drawSeparators():void
{
DataGridHeader(header)._drawSeparators();
if (lockedColumnHeader)
DataGridHeader(lockedColumnHeader)._drawSeparators();
}
위 코드에서 볼 수 있듯이 결국 DataGridHeader에 정의된 _drawSeparators()쪽을 살펴봐야한다. 아래는 DataGridHeader의 _drawSeparators()와 drawSeparators() 부분이다.
mx_internal function _drawSeparators():void
{
drawSeparators();
}
/**
* Creates and displays the column header separators that the user
* normally uses to resize columns. This implementation uses
* the same Sprite as the lines and column backgrounds and adds
* instances of the headerSeparatorSkin and attaches mouse
* listeners to them in order to know when the user wants
* to resize a column.
*/
protected function drawSeparators():void
{
if (!separators)
separators = [];
var lines:UIComponent = UIComponent(getChildByName("lines"));
if (!lines)
{
lines = new UIComponent();
lines.name = "lines";
addChild(lines);
}
else
setChildIndex(lines, numChildren - 1);
// required to deal with some 2.x clipping behavior
lines.scrollRect = new Rectangle(0, 0, unscaledWidth, unscaledHeight + 1);
if (headerSepSkinChanged)
{
headerSepSkinChanged = false;
clearSeparators();
}
var n:int = visibleColumns ? visibleColumns.length : 0;
if (!needRightSeparator && n > 0)
n--;
for (var i:int = 0; i < n; i++)
{
var sep:UIComponent;
var sepSkin:IFlexDisplayObject;
if (i < lines.numChildren)
{
sep = UIComponent(lines.getChildAt(i));
sepSkin = IFlexDisplayObject(sep.getChildAt(0));
}
else
{
var headerSeparatorClass:Class =
getStyle("headerSeparatorSkin");
sepSkin = new headerSeparatorClass();
if (sepSkin is ISimpleStyleClient)
ISimpleStyleClient(sepSkin).styleName = this;
sep = new UIComponent();
sep.addChild(DisplayObject(sepSkin));
lines.addChild(sep);
separators.push(sep);
}
// if not separator
if ( !(i == visibleColumns.length-1 && !needRightSeparatorEvents) )
{
DisplayObject(sep).addEventListener(
MouseEvent.MOUSE_OVER, columnResizeMouseOverHandler);
DisplayObject(sep).addEventListener(
MouseEvent.MOUSE_OUT, columnResizeMouseOutHandler);
DisplayObject(sep).addEventListener(
MouseEvent.MOUSE_DOWN, columnResizeMouseDownHandler);
}
else
{
// if not separator
if ( (i == visibleColumns.length-1 && !needRightSeparatorEvents) )
{
DisplayObject(sep).removeEventListener(
MouseEvent.MOUSE_OVER, columnResizeMouseOverHandler);
DisplayObject(sep).removeEventListener(
MouseEvent.MOUSE_OUT, columnResizeMouseOutHandler);
DisplayObject(sep).removeEventListener(
MouseEvent.MOUSE_DOWN, columnResizeMouseDownHandler);
}
}
var cols:Array = visibleColumns;
if (!(cols && cols.length > 0 || dataGrid.headerVisible))
{
sep.visible = false;
continue;
}
sep.visible = true;
sep.x = headerItems[i].x +
visibleColumns[i].width - Math.round(sepSkin.measuredWidth / 2);
if (i > 0)
{
sep.x = Math.max(sep.x,
separators[i - 1].x + Math.round(sepSkin.measuredWidth / 2));
}
sep.y = 0;
sepSkin.setActualSize(sepSkin.measuredWidth, Math.ceil(cachedHeaderHeight));
// Draw invisible background for separator affordance
sep.graphics.clear();
sep.graphics.beginFill(0xFFFFFF, 0);
sep.graphics.drawRect(-separatorAffordance, 0,
sepSkin.measuredWidth + separatorAffordance,
cachedHeaderHeight);
sep.graphics.endFill();
sep.mouseEnabled = true;
}
while (lines.numChildren > n)
{
lines.removeChildAt(lines.numChildren - 1);
separators.pop();
}
}
DataGridHeader의 drawSeparators()에서 headerSeparatorSkin 스타일을 사용하는 것을 찾아볼 수 있다. 개발자는 이 부분을 커스터마이징할 수 있는 것이다.
DataGrid나 DataGridHeader를 커스터마이징할 필요없이 스킨만 변경하고 싶다면 headerBackgroundSkin의 기본 스킨인 mx.skins.halo.DataGridHeaderSeparator를 커스터 마이징하거나 mx.skins.Programmatics를 확장해서 사용하면 되겠다. 아래코드는 DataGrid에서 headerBackgroundSkin이 Style로 정의된 것을 보여주고 있다.
/**
* The class to use as the skin that defines the appearance of the
* background of the column headers in a DataGrid control.
* @default mx.skins.halo.DataGridHeaderSeparator
*/
[Style(name="headerBackgroundSkin", type="Class", inherit="no")]
아래 코드는 mx.skins.halo.DataGridHeaderSeparator를 보여준다.
////////////////////////////////////////////////////////////////////////////////
//
// ADOBE SYSTEMS INCORPORATED
// Copyright 2005-2007 Adobe Systems Incorporated
// All Rights Reserved.
//
// NOTICE: Adobe permits you to use, modify, and distribute this file
// in accordance with the terms of the license agreement accompanying it.
//
////////////////////////////////////////////////////////////////////////////////
package mx.skins.halo
{
import flash.display.Graphics;
import mx.skins.ProgrammaticSkin;
/**
* The skin for the separator between column headers in a DataGrid.
*/
public class DataGridHeaderSeparator extends ProgrammaticSkin
{
include "../../core/Version.as";
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------
/**
* Constructor.
*/
public function DataGridHeaderSeparator()
{
super();
}
//--------------------------------------------------------------------------
//
// Overridden properties
//
//--------------------------------------------------------------------------
//----------------------------------
// measuredWidth
//----------------------------------
/**
* @private
*/
override public function get measuredWidth():Number
{
return 2;
}
//----------------------------------
// measuredHeight
//----------------------------------
/**
* @private
*/
override public function get measuredHeight():Number
{
return 10;
}
//--------------------------------------------------------------------------
//
// Overridden methods
//
//--------------------------------------------------------------------------
/**
* @private
*/
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
var g:Graphics = graphics;
g.clear();
// Highlight
g.lineStyle(1, 0xFFFFFF, 0.5);
g.moveTo(0, 0);
g.lineTo(0, h);
g.lineStyle(1, getStyle("borderColor"));
g.moveTo(1, 0);
g.lineTo(1, h);
}
}
}
이외로 단순해서 놀랬는가? 결국 이 스킨은 borderColor 스타일로 지정된 색으로 구분자 선만 그어준다. 나는 이것을 바꿔서 실선을 점선을 그리도록 해보겠다. 아래 코드는 이를 구현한 DataGridHeaderDotSeparator 클래스이다.
package
{
import flash.display.Graphics;
import mx.skins.halo.DataGridHeaderSeparator;
/**
* DataGrid Header에 점선을 그린다.
*/
public class DataGridHeaderDotSeparator extends DataGridHeaderSeparator
{
/**
* Constructor.
*/
public function DataGridHeaderDotSeparator()
{
super();
}
/**
* @private
*/
override protected function updateDisplayList(w:Number, h:Number):void
{
var g:Graphics = graphics;
g.clear();
g.lineStyle(1, getStyle("borderColor"), 1);
var i:int;
for( i = 0; i < h; i+=4 )
{
g.drawCircle( 1.5, i, 0.5 );
}
}
}
}
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.GraphicsTrianglePath;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.geom.Matrix3D;
import flash.geom.PerspectiveProjection;
import flash.geom.Utils3D;
import flash.geom.Vector3D;
import flash.utils.getTimer;
[SWF(frameRate=60, backgroundColor=0x000000)]
/**
* 3D Texture 예제.
* @author Yongho, Ji
* @since 2009.07.01
* @see http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/WSF24A5A75-38D6-4a44-BDC6-927A2B123E90.html
*/
public class Texture3D extends Sprite
{
[Embed(source="mybaby.png")]
private var ImageClass:Class;
// 투영된 Vertex 정보
private var projected:Vector.<Number>;
// 투영
private var projection:PerspectiveProjection = new PerspectiveProjection();
// World 변환 행렬
private var world:Matrix3D = new Matrix3D();
// Viewport (3D 렌더링 대상)
private var viewport:Shape = new Shape();
// Mesh 데이터
private var mesh:GraphicsTrianglePath
// Texture
private var texture:BitmapData = (new ImageClass() as Bitmap).bitmapData;
//triangle을 보여줄지 여부
private var visibleTriangle:Boolean = false;
//Texture를 보여줄지 여부
private var visibleTexture:Boolean = true;
//실린더 Mesh번호
private const MESH_CYLINDER:int = 1;
//원형체 Mesh번호
private const MESH_TORUS:int = 2;
//선택한 Mesh 번호
private var selectedMesh:int;
//Viewport의 Z축 위치
private var viewPortZAxis:Number = 300;
/**
* 생성자
*/
public function Texture3D()
{
super();
//화면 설정
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.quality = StageQuality.BEST;
//viewport를 화면의 중심으로
viewport.x = stage.stageWidth/2;
viewport.y = stage.stageHeight/2;
addChild(viewport);
//projection의 fieldOfView를 60으로 지정
projection.fieldOfView = 60;
//mesh 데이터 설정
selectMesh( MESH_CYLINDER );
//이벤트 처리
stage.addEventListener( Event.RESIZE, onResize );
addEventListener( Event.ENTER_FRAME, onEnterFrame );
stage.addEventListener( MouseEvent.CLICK, onMouseClick );
stage.addEventListener( KeyboardEvent.KEY_DOWN, onKey );
stage.addEventListener( MouseEvent.MOUSE_WHEEL, onMouseWheel );
}
/**
* Mesh를 선택한다.
*/
private function selectMesh( meshNumber:int ):void
{
if( selectedMesh == meshNumber ) return;
selectedMesh = meshNumber;
//투영결과 Vertex 데이타를 초기화시킨다.
//이것을 해야 Mesh데이터가 바뀔때마다 drawTriangle에서 에러 발생 안함
projected = new Vector.<Number>(0, false);
switch( selectedMesh )
{
//실린더
case MESH_CYLINDER:
mesh = createCylinderMesh( 50, 100, 20, 5 );
break;
//원형체
case MESH_TORUS:
mesh = createTorusMesh( 50, 25, 32, 16 );
break;
}
}
/**
* 사이즈 변경시 처리
*/
private function onResize( event:Event ):void
{
//viewport는 항상 화면의 중심에 위치하도록 처리
viewport.x = stage.stageWidth/2;
viewport.y = stage.stageHeight/2;
}
/**
* 프레임 마다 처리.
*/
private function onEnterFrame( event:Event ):void
{
world.identity(); //단위행렬로 전환
world.appendRotation( getTimer() * 0.027, Vector3D.X_AXIS ); //X축 회전
world.appendRotation( getTimer() * 0.061, Vector3D.Y_AXIS ); //Y축 회전
world.appendTranslation(0, 0, viewPortZAxis); //이동
world.append(projection.toMatrix3D()); //투영 변환 적용
// mesh 데이터를 투영하여 projected 생성
// uvtData도 갱신된다. 갱신되는 데이터는 T값이다.
Utils3D.projectVectors( world, mesh.vertices, projected, mesh.uvtData );
// texture를 이용해 렌더링
viewport.graphics.clear();
// Triangle 라인을 그림
if( visibleTriangle )
{
viewport.graphics.lineStyle( 1, 0xff0000, 1.0 );
}
//Texture 입힌다.
if( visibleTexture )
{
viewport.graphics.beginBitmapFill( texture, null, false, true );
viewport.graphics.drawTriangles( projected, getSortedIndices(mesh), mesh.uvtData, mesh.culling );
}
else
{
viewport.graphics.beginFill( 0x00ccff, 1.0 );
viewport.graphics.drawTriangles( projected, getSortedIndices(mesh), null, mesh.culling );
viewport.graphics.endFill();
}
}
/**
* 마우스 클릭 처리
*/
private function onMouseClick( event:MouseEvent ):void
{
//삼각형 선 Visible 바꿈
visibleTriangle = !visibleTriangle;
}
/**
* 키보드 이벤츠 처리
*/
private function onKey( event:KeyboardEvent ):void
{
if( event.charCode == 116 )
{
visibleTexture = !visibleTexture;
}
else
{
selectMesh( event.charCode - 48 ); //1,2...
}
}
/**
* 마우스 휠 처리
*/
private function onMouseWheel( event:MouseEvent ):void
{
viewPortZAxis += event.delta * 10;
}
}
}
import flash.display.GraphicsTrianglePath;
import flash.display.TriangleCulling;
/**
* GraphicsTrianglePath를 기반으로, Z축으로 sort된 인덱스를 돌려준다.
* 이 작업을 해주어야 z축 깊이에 따라 Triangle이 제대로 그려진다.
* @param mesh 정보
* @return sort된 index 데이터
*/
function getSortedIndices( mesh:GraphicsTrianglePath ):Vector.<int>
{
var triangles:Array = [];
var length:uint = mesh.indices.length;
//z축 sort를 위한 기반 제작
for ( var i:uint=0; i < length; i += 3 )
{
var i1:uint = mesh.indices[ i+0 ];
var i2:uint = mesh.indices[ i+1 ];
var i3:uint = mesh.indices[ i+2 ];
var z:Number = Math.min( mesh.uvtData[i1 * 3 + 2], mesh.uvtData[i2 * 3 + 2], mesh.uvtData[i3 * 3 + 2]);
if (z > 0)
{
triangles.push({i1:i1, i2:i2, i3:i3, z:z});
}
}
//z축으로 sort
triangles = triangles.sortOn("z", Array.NUMERIC);
//sort된 값을 이용해 Vector값 만듬
var sortedIndices:Vector.<int> = new Vector.<int>(0, false);
for each (var triangle:Object in triangles)
{
sortedIndices.push(triangle.i1, triangle.i2, triangle.i3);
}
return sortedIndices;
}
/**
* 원통모양의 Mesh 데이터 작성
* @param radius 원통의 반지름
* @param height 원통의 높이
* @param hDiv 반지름 방향으로 조각 수
* @param vDiv 높이 방향의 조각수
* @return mesh 데이터
*/
function createCylinderMesh( radius:Number, height:Number, hDiv:uint, vDiv:uint ):GraphicsTrianglePath
{
var vertices:Vector.<Number> = new Vector.<Number>( 0, false );
var indices:Vector.<int> = new Vector.<int>( 0, false );
var uvtData:Vector.<Number> = new Vector.<Number>( 0, false );
var mesh:GraphicsTrianglePath = new GraphicsTrianglePath( vertices, indices, uvtData, TriangleCulling.NONE );
for( var i:uint = 0; i <= hDiv; i++ )
{
var theta:Number = Math.PI * 2 * i / hDiv; //z축에서 y축으로 잰각
for( var j:uint = 0; j <= vDiv; j++ )
{
var x:Number = -height/2 + j * height/vDiv;
var y:Number = radius * Math.sin( theta );
var z:Number = radius * Math.cos( theta );
mesh.vertices.push( x, y, z ); //하나의 Vertex 데이타
mesh.uvtData.push( i / hDiv, j / vDiv, 1 ); //하나의 UVT 데이타 . Texture의 점과 Vectex를 일치시켜 Texture를 입히기 위한 데이타이다.
if( j < vDiv && i < hDiv )
{
var a:uint = i * (vDiv + 1) + j;
var b:uint = (i + 1) * (vDiv + 1) + j;
mesh.indices.push(a, a + 1, b, b + 1, b, a + 1); //삼각형의 index이다. culling방향 고려
}
}
}
return mesh;
}
/**
* 원환체(도너츠모양) Mesh 데이터 작성
* @param hRadius 원환체의 수평축 반지름
* @param vRadius 원환체의 수직축 반지름
* @param hDiv 수평 방향의 조각 수
* @param vDiv 높이 방향의 조각수
* @return mesh 데이터
*/
function createTorusMesh( hRadius:Number, vRadius:Number, hDiv:uint, vDiv:uint ):GraphicsTrianglePath
{
var vertices:Vector.<Number> = new Vector.<Number>( 0, false );
var indices:Vector.<int> = new Vector.<int>( 0, false );
var uvtData:Vector.<Number> = new Vector.<Number>( 0, false );
var mesh:GraphicsTrianglePath = new GraphicsTrianglePath( vertices, indices, uvtData, TriangleCulling.NONE );
for (var i:uint=0; i<=hDiv; i++)
{
var s1:Number = Math.PI * 2 * i / hDiv;
for (var j:uint=0; j<=vDiv; j++)
{
var s2:Number = Math.PI * 2 * j / vDiv;
var r:Number = Math.cos(s2) * vRadius + hRadius;
var x:Number = Math.cos(s1) * r;
var y:Number = Math.sin(s1) * r;
var z:Number = Math.sin(s2) * vRadius;
mesh.vertices.push( x, y, z );
mesh.uvtData.push(i / hDiv, j / vDiv, 1);
if (j < vDiv && i < hDiv) {
var a:uint = i * (vDiv + 1) + j;
var b:uint = (i + 1) * (vDiv + 1) + j;
mesh.indices.push(b, a + 1, a, a + 1, b, b + 1);
}
}
}
return mesh;
}
아래는 위 프로그램을 실행한 것이다. Flash Player 10이 브라우져에 설치되어야 제대로 볼 수 있겠다.
키 1, 2 - 형태바꾸기
키 T(영문) - Texture 입히기 여부
마우스 클릭 - 삼각형 보이기 여부
마우스 휠 - 확대/축소
위 프로그램에서 사용된 GraphicsTrianglePath는 2D 공간에 3D 기하 도형 렌더링을 지원하기 위해 사용되는 클래스이다. 특별한 기능은 없지만 3D 데이터를 다룰 때 index, vertex, uvt 등의 데이타를 모두 담을 수 있기 때문에 사용하면 유용하다.
위 프로그램에서 원뿔, 구에 대한 mesh 함수를 추가하면 더 좋은 예제가 될 것이라 생각한다. 또한 광원(light)처리까지 곁들이면 금상첨화일 것이다.
Flash Player 10부터 3D를 구현할 수 있는 일련의 Native API 코드가 추가되었다. Papervision3D나 Away3D 처럼 멋진 3D 효과를 만들기에는 부족하긴 하지만 여러가지 시도는 해볼 수 있겠다.
Adobe에서 제공하는 Flash용 ActionScript 3.0 프로그래밍 가이드를 살펴보면 3차원(3D)에서 작업에 대한 내용이 있다. 이 문서만 보아도 3D 표현을 하는데 큰 도움을 받을 수 있다. 문서에는 몇가지 예제가 있는데 예제중에 UV맵핑에 올라온 예제를 가지고 몇가지 테스트 코드를 만들었다.
테스트에 참가할 나의 딸, 예진이의 사진이다. ^^
T값을 이용한 원근표현
UV 맵핑은 텍스쳐(Texture) 맵핑이다. 텍스쳐는 일반적인 2D 사진을 의미하며 이 사진을 삼각형의 형태로 쪼개서 여러가지 3D 표현을 할 수 있다. 사진가지고 깃발처럼 펄럭거리게 할 수 있고, 구의 형태로 만들수도 있는 것이다.
UV맵핑은 사진의 어느부분을 버텍스(Vertex, 꼭지점)으로 삼을것인가 지정한다. UV맵핑에서 U는 사진의 가로축을 말하며 V는 사진의 세로축을 의미한다. 가로축/세로축 범위는 0~1까지다. 그러므로 U값이 0이면 사진의 좌측맨끝부분을 의미하며 1이면 사진의 우측맨끝을 말한다. V값도 마찬가지로 0이면 사진의 위끝부분, 1이면 맨아래 부분을 의미한다. UV값은 3D 버텍스와 1:1 대응되도록 한다. 그래서 지정된 1개의 버텍스는 UV좌표에 지정된 사진의 좌표에 대응되어 맵핑이 이뤄지도록 하는 것이다. 이러한 맵핑을 할 수 있도록 하는 함수가 Graphics의 drawTriangle()이다. 이 함수의 1번째 인자가 버텍스값이고 3번째 인자가 UV데이타 값이다.
사진의 경우 이미지 그대로 화면에 표현하기 위해 삼각형이 최소 2개가 필요하다. 사진에서 표현되는 실제 버텍스는 4개이지만 각각 삼각형의 버텍스는 6개가 된다. 이중에 2개의 버텍스는 중복이 된다. 이 중복을 제거하기 위해 사용하는 것이 인덱스이다. 인덱스를 이용하면 삼각형을 그리기 위한 버텍스의 순서를 정의함으로서 중복된 버텍스를 없앤다. 이 값은 drawTriangle()의 2번째 인자값으로 지정할 수 있다.
여기서 사용한 T값은 버텍스의 위치가 3D 형태로 변하면서 사진도 이에 맞게 크기를 조절할 필요가 있기 때문에 사용하는 값이다. 이를 이용해 원근표현을 할 수 있게 된 것이다.
아래 코드를 보면서 UV데이타와 T값을 이용한 3D 표현법에 대한 기초를 공부할 수 있다.
(소스를 복사할때는 이 소스를 직접복사하지 말고 소스 위에 마우스를 올려 소스보기 아이콘이 뜰때 그것을 눌러 새창이 뜨면 소스를 긁어다가 사용하면 되겠다.)
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.TriangleCulling;
import flash.events.Event;
import flash.utils.getTimer;
/**
* 3D 회전. T값을 이용해 원근 적용
* @author Yongho, Ji
* @since 2009.06.30
* @see http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/WS509D19BB-239B-4489-B965-844DDA611AE7.html
*/
public class Baby3D extends Sprite
{
[Embed(source="mybaby.png")]
private var ImageClass:Class;
//평면 버택스 좌표와 t값
private var x1:Number = -100, y1:Number = -100, z1:Number =0, t1:Number = 0;
private var x2:Number = 100, y2:Number = -100, z2:Number =0, t2:Number = 0;
private var x3:Number = 100, y3:Number = 100, z3:Number =0, t3:Number = 0;
private var x4:Number = -100, y4:Number = 100, z4:Number =0, t4:Number = 0;
//초점거리
private var focalLength:Number = 200;
//버텍스에 대한 인덱스
private var indices:Vector.<int>;
private var container:Sprite;
private var bitmapData:BitmapData;
public function Baby3D()
{
super();
this.stage.align = StageAlign.TOP_LEFT;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
//1평면당 2개의 삼각형을 가진다.
indices = new Vector.<int>;
indices.push( 0,1,3, 2,3,1 );
container = new Sprite();
container.x = 200;
container.y = 200;
addChild( container );
var bitmap:Bitmap = new ImageClass();
bitmapData = bitmap.bitmapData;
this.addEventListener( Event.ENTER_FRAME, rotatePlane );
}
private function rotatePlane( event:Event = null ):void
{
//버텍스 회전
var ticker:Number = getTimer() / 400;
z2 = z3 = -(z1 = z4 = 100 * Math.sin( ticker ) );
x2 = x3 = -(x1 = x4 = 100 * Math.cos( ticker ) );
//t값 계산
t1 = focalLength / ( focalLength + z1 );
t2 = focalLength / ( focalLength + z2 );
t3 = focalLength / ( focalLength + z3 );
t4 = focalLength / ( focalLength + z4 );
//삼각형 버택스
//t값을 이용해서 버텍스 좌표에 원근값을 주도록 한다.
var vertices:Vector.<Number> = new Vector.<Number>;
vertices.push(
x1*t1,y1*t1,
x2*t2,y2*t2,
x3*t3,y3*t3,
x4*t4,y4*t4
);
// UV 맵핑
// T값을 이용해 원근값이 적용된 맵핑이미지를 만들기 위해
var uvtData:Vector.<Number> = new Vector.<Number>;
uvtData.push(
0,0,t1,
1,0,t2,
1,1,t3,
0,1,t4
);
//그리기
container.graphics.clear();
container.graphics.lineStyle( 1, 0xff0000, 1.0 );
container.graphics.beginBitmapFill( bitmapData );
container.graphics.drawTriangles( vertices, indices, uvtData, TriangleCulling.NONE );
container.graphics.endFill();
}
}
}
위 코드는 Adobe에서 제공하는 예제를 약간 변형한 것이다. 실행결과는 다음과 같다.
소개한 코드는 그냥 실행하는데 그치는 것은 좋지 못하다. 값을 적절하게 변경해가면서 어떻게 변경되는가 알아보는 것도 좋은 학습법이라 생각한다.
DisplayObject의 Y축을 이용한 회전. 원근투영 이용
위 예제와 UV맵핑은 동일하지만 T값은 1로 고정한다. 그리고 Y축만 회전하고 원근표현은 T값 대신에 perspectiveProjection 속성을 이용한다.
T값을 1로 한다는 것은 T값을 가지고 원근표현을 하지 않겠다는 의미이다. 아래 예제를 보면 알겠지만 T값이 변하지 않기 때문에 EnterFrame 이벤트 발생시마다 그려주는 대신 생성자에서 한번만 그렸다.
원근투영(Perspective Projection)은 Flash Player 10에서 기본적으로 지원해준다. 가장 단순한 투영방식으로 하나의 소실점을 가지도록 하는 Linear한 투영방식이다. 만약 이 투영방식을 사용하지 않는다면 Matrix3D를 이용해 다른 방식의 원근투영방식을 적용해야 한다.
아래 코드에서 root.transform.perspectiveProjection.fieldOfView는 100으로 설정되어 있다. 이 값은 T값으로 원근표현할때와 비슷한 느낌을 주기 위한 값이다. fieldOfView 0~180까지 적용할 수 있다. 0은 말그대로 매우 먼곳에서 대상을 바라보는 것과 같다. 즉, 왜곡이 없는 원통투영이 된다. 하지만 180에 가까워 질 수록 대상과 가까이서 보는 느낌을 주게 된다. 한개의 소실점을 가지는 원근투영이 된다. 이 값을 적절하게 조절하면서 실행해보자 무슨 의미인지 알 수 있을 것이다.
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.TriangleCulling;
import flash.events.Event;
/**
* 3D 회전. 원근 투영을 이용
* @author Yongho, Ji
* @since 2009.06.30
* @see http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/WS36223081-8938-4b45-BB89-F1F8B1A52E4E.html
*/
public class Baby3D_2 extends Sprite
{
[Embed(source="mybaby.png")]
private var ImageClass:Class;
private var container:Sprite;
public function Baby3D_2()
{
super();
this.stage.align = StageAlign.TOP_LEFT;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
container = new Sprite();
container.x = 200;
container.y = 200;
addChild( container );
//원근투영의 FiendOfView 설정. 기본값은 55임
root.transform.perspectiveProjection.fieldOfView = 100;
//비트맵 데이타 생성 얻어오기
var bitmap:Bitmap = new ImageClass();
var bitmapData:BitmapData = bitmap.bitmapData;
//버텍스
var vertices:Vector.<Number> = new Vector.<Number>;
vertices.push(
-100,-100,
100,-100,
100,100,
-100,100
);
//위 베텍스에 대한 인덱스 , 1평면당 2개의 삼각형을 가지고 있다.
var indices:Vector.<int> = new Vector.<int>;
indices.push( 0,1,3, 2,3,1 );
//UV 맵핑 데이타
var uvtData:Vector.<Number> = new Vector.<Number>;
uvtData.push(
0,0,1,
1,0,1,
1,1,1,
0,1,1
);
//그리기
container.graphics.clear();
container.graphics.lineStyle( 1, 0xff0000, 1.0 );
container.graphics.beginBitmapFill( bitmapData );
container.graphics.drawTriangles( vertices, indices, uvtData, TriangleCulling.NONE );
container.graphics.endFill();
this.addEventListener( Event.ENTER_FRAME, rotatePlane );
}
private function rotatePlane( event:Event = null ):void
{
//컨테이너 회전
container.rotationY -= 5;
}
}
}
실행된 이미지가 조금 다르게 보일 것이다. T값을 이용한 원근표현 방식의 경우 렌더링을 계속하기 때문에 삼각형 선(빨간색)이 왜곡되지 않는다. 하지만 원근투영방식을 이용하면 한번 렌더링을 해주고 그것 자체를 회전시키는 방식이기 때문에 삼각형 선이 왜곡되어 보인다.
위 예제들은 쉬운 코드들이긴 하지만 UV맵핑, T값, 원근투영, 버텍스 등에 대한 이해가 없다면 어려울 수 밖에 없다. 3D 프로그래밍을 한번도 안한 분이라면 다른 서적이나 인터넷을 통해 학습자료를 찾아 공부하면 좋겠다는 생각이 든다.
Flash Player 10의 3D 기법은 아주 기초 수준이기 때문에 Papervision3D, Away3D처럼 화려한 3D를 만드는 것은 기대하기 어렵다. 하지만 Native수준에서 기능을 제공하므로 빠른 연산이 가능해서 간단한 3D 구현하겠다면 위 예제 처럼 만들자. 앞으로 Papervision3D, Away3D도 Flash Player 10 기반으로 제공한다고 하니깐 조금더 향상된 퍼포먼스를 가진 Flash 3D 애플리케이션을 기대해도 좋을 것 같다.
오버로드는 클래스안에 같은 이름의 함수를 중복해서 사용할 수 있는 기능이다. AS3에서는 Java나 C++에서 지원되는 이 오버로드 기능이 없기 때문에 개발시 아에 생각을 하지 않게 하는 장점도 있지만 정말 필요할때 다른 방법으로 대체해야하는 불편함이 생긴다. 아래글을 보자.
Java와 같은 abstract 키워드가 존재하지 않아 추상클래스를 만들 수 없다. 하지만 throw등을 이용해 컴파일시가 아닌 런타임에서 동작하는 추상클래스는 제작이 가능하다. 추상클래스는 AS3에도 클래스 설계시 꼭 필요하지만 아직 지원하지 않아 아쉬운 부분이다. 아래 글을 보자.
private 생성자는 외부에서 클래스 객체를 임의로 만드는 것을 금지시켜주는 역할을 한다. 하지만 AS3에서는 생성자에 public외에는 private, protected 를 쓸 수 없다. private 생성자가 필요한 단적인 예는 싱글턴 패턴을 구현할 때인데 AS3에서는 아래와 같이 다른 방법으로 싱글턴 패턴을 구현한다.
초보자가 Java, C++에서 느끼지 못하는 AS3의 재미는 처음 만드는 애플리케이션이 시각화된 결과물이라는 점일 것이다. 이 게시판에 앞어 간단한 AS3프로젝트를 통해 3D를 단 몇줄도 안되는 코드로 구현했던 것을 보면 그 의미를 알 것이다. 또한 AS3를 하다보면 매우쉽게 데이터통신, 데이터제어, 각종 미디어 기술지원, Flex, AIR로의 개발확장성등으로 인해 C++, Java와는 또 다른 재미를 느끼게 될 것이다.
아래 글에 오해하시는 분들이 많으신 것 같아요. 아래 제 댓글을 보시고 제가 보는 관점에서 아래 글을 판단해주셨으면 합니다. ^^
C++, Java하시던 분(기초수준 및 서버개발만 주로 한 분들)이 AS3나 Flex를 접할때 잘못된 태도가 있다. 내가 좀 언어좀 하는데 그냥 쉽게쉽게 할 수 있겠지라는 마인드이다. 또는 Flash인데 그것도 언어야?... 이런 마인드.. 금물이다.
AS3나 Flex도 그만의 독특한 구조와 기능이 있다. C++, Java만 했던 사람이 데이터 바인딩, 메타데이터태그, 이벤트 모델, 비디오제어, 음원제어, 마이크로폰 제어, 디스플레이객체 다루기, 응용애플리케이션구조,각종보안, XML 다루기등에 대해서 잘 알리가 없지 않은가? 그만큼 Flash 기술이 단순히 그래픽을 위한 기술이다라고 오해하는데서 비롯된다고 생각한다. Flash 기술은 이미 데스크탑에서 모바일, 각종운영체제, 각종 브라우져에 MS계열의 기술보다 더욱 빠르고 거대하게 확장되어 이미 우리 실생활에 적용되고 있다. 그러므로 AS3.0을 공부할때 너무 가벼운 마음으로만 공부한다는 생각은 버리자. 요즘 안드로이드 폰에 Flash 지원하고 앞으로 AIR로 각종 모바일 프로그램을 만들 수 있게 된다는 것을 생각하면 가벼운 기술은 아니구나라는 생각을 할 수 있을 것이다.(못믿겠으면 여기를 본다) Flash는 이미 클라이언트 기반을 넘어 서버기반의 기술도 지원해주어 진정한 RIA의 선봉장에 있다. 이러한 점을 잘 이해하고 Flex,AS3,AIR,Flash등을 공부하는 것이 좋겠다.
Vector은 점,선,면등의 단순한 수학적 정보만 이용하여 이미지를 표현한다. 그렇게 때문에 적은 용량으로 이미지를 표현할 수 있으며 특히 확대/축소에도 깨지지 않는 이미지를 표현하는데 탁월하다. 또한 곡선 및 각종 이펙트 표현력도 훌륭하다. 적은 용량으로 이미지를 표현할 수 있기 때문에 메모리 관리에 도움이 된다. 하지만 복잡한 이미지의 경우 도리어 퍼포먼스의 저하가 일어날 수 있으며 이 경우 이동과 같은 에니메이션을 줄 경우 CPU연산이 많아지는 단점이 있다.
Bitmap은 이미지를 표현하기 위해 Pixel정보를 이용한다. 하나의 Pixel정보에는 ARGB값을 가진다. Pixel 하나하나 정보를 가지고 다루므로 복잡한 이미지를 나타내는데 좋으며 Vector와 달리 이동 애니메이션을 주더라도 CPU연산이 적다. 하지만 이미지가 클수록 Pixel 정보량이 제곱단위로 커지기 때문에 확대/축소시에 메모리가 과다하게 사용될 여지가 있다. 잘못사용하면 너무 큰 이미지로 인해 Flash Player가 다운될 수도 있다.
아래는 필자가 다루고자 하는 Vector와 Bitmap 이미지의 장단점을 언급한다.(아래 장단점은 완벽한 것은 아니다. 가령 Vector라고 해도 객체수가 적으면 속도에 무리가 없기 때문이다. 적어도 필자가 하고 있는 프로젝트 내에서 이런 문제가 있다는 것을 미리 언급한다.)
Vector 이미지 - 메모리 효율이 좋다.(확대/축소시에도 메모리 점유율 변화 없음) - 이동 애니메이션 처리가 느리다.(CPU 연산이 커짐)
Bitmap 이미지 - 메모리 효율이 나쁘다.(확대시 메모리 점유율 커짐) - 이동 애니메이션 처리가 빠르다.(CPU 연산 적음)
Vector 이미지와 Bitmap 이미지를 연구하게된 배경은 필자가 스타플 서비스(http://starpl.com/)의 별지도를 만드는데 이 부분에 대한 정보가 필요했기 때문이다. 먼저 아래 글을 읽어보면 이해가 쉽겠다.
구글맵과 같은 일반 지도의 경우 타일(Tile)들의 구성요소는 Bitmap 이미지이다. 최적화된 Bitmap이미지이기 때문에 렌더링 시간도 짧고 이동도 빠르다. 필자가 작업한 별지도는 천체 데이터 및 사용자 별 데이터를 읽어와 Vector 이미지로 렌더링하는 방식이다. 따로 데이터 가공 및 렌더링 시간이 필요하고 Vector이미지는 일단 이동 애니메이션이 느리다. 별이 반짝거리므로 단순히 Bitmap으로 바꿔서 처리할 수 있는 것도 아니다. 결국 스타플 별지도는 기본적으로 Vector 이미지로 타일을 구성해야한다.
앞서 설명했듯이 Vector 이미지를 이용하면 메모리 문제는 발생하지 않는다. 문제는 이동시 속도가 느리다는 것이다. 마우스로 지도를 드래그해서 이동하는 경우 저사양 컴퓨터에서는 버벅거림이 발생한다. Vector 이미지 타일로 구성된 지도의 단점이다. 그래서 이것을 극복하기 위해 첫번째로 사용하려했던 기능이 flash.display.DisplayObject의 cacheAsBitmap 속성이였다. 이 속성을 true로 설정하면 타일이 Bitmap으로 캐싱되고 실제로 적용후 이동처리해보면 훨씬 부드러운 이동 애니메이션을 볼 수 있다.
하지만 cacheAsBitmap은 Bitmap 이미지를 만드는 것이므로 확대/축소에서 문제가 있다. 이 속성을 true로 설정하고 확대하면 메모리가 기하급수적으로 늘어난다. 그래서 간단하게 확대/축소전에 cacheAsBitmap을 false로 지정하면 되겠다고 생각했다. 하지만 이 속성이 false로 설정된 순간 캐싱된 Bitmap을 해제시켜주지 못했다. 결국 false로 지정하고 확대해도 여전히 메모리가 증가한다.
이를 극복하기 위해 BitmapData를 이용했다. 만들어진 타일(Tile) 클래스에 bitmapMode라는 속성을 정의하고 true이면 Bitmap이미지를 false이면 Vector이미지를 보일 수 있도록 만든다. 그렇게 해서 이동이 발생시에는 Bitmap이미지를 사용하고 평상시 또는 확대/축소시에는 Vector 이미지를 사용할 수 있도록 한다. 아래는 이것을 구현하는 간단한 코드이다.(완벽한 코드가 아니다. 단지 예시일 뿐이다.)
bitmapMode 속성을 구현할때 주의할 사항은 bitmapMode가 true일 때마다 BitmapData를 생성하는 일은 매우 비효율적이라는 것이다. 왜냐하면 이동할때마다 BitmapData를 만드는 것이기 때문이다. 그러므로 처음 이동이 발생할때만 BitmapData를 만들도록 하는게 중요하다. 또한 bitmapMode가 false라고 해서 기존에 만든 BitmapData를 삭제해서는 안된다. 삭제하면 언급한데로 다시 BitmapData를 만들어야하기 때문이다.
또 한가지 여기서 발생하는 가장 큰 문제는 적절한 메모리 관리이다. BitmapData를 잘 삭제해주어야 메모리 문제가 발생하지 않기 때문에다. 단순히 위에서 언급한 bitmapMode 변경으로는 BitmapData를 제대로 삭제할 수 없다. 그러므로 타일(Tile)클래스에 disposeBitmap() 함수를 만들어 bitmap.bitmapdata.dispose()를 호출하여 비트맵을 삭제하도록 하고 타일이 removeChild 될때 이 disposeBitmap()을 호출하여 BitmapData를 완벽하게 삭제하도록 해준다. removeChild가 되는 시점은 Event.REMOVED_FROM_STAGE 이벤트 처리를 하면 바로 알 수 있다.
삭제된다는 이야기는 메모리에서 바로 삭제된다는 것을 의미하지 않는다. Flash Player는 가비지 컬렉터가 작동한다. 즉 메모리에서 삭제될 대상을 모아두었다가 어느 시점에 한꺼번에 삭제한다. 이는 메모리 관리의 효율적인 방법중에 하나로서 개발자는 가비지 컬렉터 대상이 되도록 모든 참조를 없애주도록 해야한다. 가비지 컬렉터에 대해서는 아래 필자의 글을 참고한다.
cacheAsBitmap은 시각화된 객체를 Bitmap으로 캐싱해주는 역할을 하는 속성입니다. 이것이 true가 되면 DisplayObject는 Bitmap처럼 되는 것이지요. Flash에서 Bitmap과 상반되는 것이 Vector입니다. 일반적으로 Flash에서 그래픽적인 요소는 거의 Vector로 처리되지요. Bitmap과 Vector에 대한 차이점과 장단점을 굳이 설명안하겠습니다.
단지 제가 궁금하고 해결하고 싶은 문제는 cacheAsBitmap속성이 적용된 것을 확대/축소할때 입니다.
이 속성을 true로 하고 이동처리(마우스 Drag등)을 하는 것과 안한것은 엄청난(?)속도 차이를 보입니다. 복잡한 Graphic이 들어가고 이동이 필요한 경우 cacheAsBitmap을 true로 설정하여 애플리케이션의 퍼포먼스를 높힐 수 있지요. 하지만 cachAsBitmap은 메모리와는 적입니다. 가령 확대/축소할때 가장 큰 문제가 되는데 Bitmap이 확대/축소할때 이미지는 그 크기만큼 메모리를 잡아먹습니다. 아래 제가 쓴 글을 보시면 이해될 겁니다.
저는 이동시에는 cacheAsBitmap을 true로 설정하고 확대/축소할때는 false로 설정해서 퍼포먼스 개선을 하려고 합니다. 하지만 cacheASBitmap을 설정하더라도 적용되는 시점이 문제입니다. 확대/축소하기 전에 false로 지정하고 바로 확대/축소를 하면 메모리를 잡아먹는다는 것이지요. 다음 Render시점에서 확대/축소를 해야하는 것인가 생각이 드는데 아직 뾰족한 묘안이 없습니다.
혹시 저와 같은 경험을 하셨다던가 아니면 해결책을 알고 계신분 있다면 댓글 부탁드리겠습니다.
Tour de Flex에서는 Eclipse Plug-in을 제공하고 있습니다. 여러분은 쉽게 Tour de Flex에서 제공하는 200여가지의 Flex 샘플을 Flex Builder 3.x 또는 Eclipse 3.4를 통해 쉽게 검색해 볼 수 있습니다. 다음과 같은 순서로 설치해보십시오.
Flex Builder 3에서 Help > Software Updates > Find and Install 을 선택합니다.
새창이 뜨면 Search for new features to install 을 선택후 Next 버튼을 누릅니다.
Site to include in search 리스트 창에 Tour de Flex만 check하고 Finish 버튼을 누릅니다.
성공적으로 연결이 되면 Select the features to install 리스트 창에 Tour de Flex가 뜹니다. 이것을 선택하고 Next를 누릅니다.
Feature License에서 라이센스 동의를 선택후 Next 를 누릅니다.
Finish를 눌러 Plug-in을 다운로드 합니다.
다운로드가 완료되면 install이나 Install All을 눌러 설치합니다.
설치 완료 이후 자동으로 다시 Flex Builder 3를 구동해야 한다는 메시지가 뜨면 Yes버튼을 눌러 재시작합니다.
설치가 완료되고 Flex Builder 3가 다시 구동되면 메뉴에서 Windows > Other Views에 들어가 봅니다.
위 그림처럼 Tour de Flex가 설치되어 있고 이것을 선택하고 OK 버튼을 누릅니다.
아래와 같은 Updating 메시지가 뜨면 Download now를 눌러 설치하세요. 이런 메시지가 뜨는 것으로 보아 Plug-in이 Tour de Flex AIR 프로그램을 자동으로 설치 및 업데이트를 해주는 것으로 보입니다.
Flex Builder에 아래와 같은 창이 나오면 Serach Components를 통해 해당 컴포넌트를 검색할 수 있습니다. 필자는 아래 화면과 같이 Button으로 검색해봤습니다. 결과가 나오면 보고 싶은 항목을 선택하여 더블클릭하도록 합니다. 그러면 설치형 Tour de Flex를 실행시켜 해당 컴포넌트의 사용 예제를 보여주도록 되어 있습니다.
아래는 Button Loader Skin을 더블클릭으로 선택해서 나온 결과입니다.
아쉽게도 약간의 버그가 있는 것 같고 Flash Builder 4에는 아직 제대로 동작이 안되는 것을 확인했습니다. 이 부분에 대해서는 업데이트 될 때까지 기다려야할 것 같습니다. 개발 하면서 궁금한 사항이 있다면 이 Tour de Flex Eclipse Plug-in을 적극 활용하면 도움이 될 것이라 생각합니다.
Flash Builder 4와 더불어 Flash Catalyst Beta 버전이 배포되었습니다. 이것도 여전히 공식배포 버전은 아니며 테스트 버전이라고 볼 수 있지만 거의 완성단계가 아닌가 판단이 됩니다.
Flash Catalyst(이하 FC)는 개발자와 디자이너가 협업의 도구입니다. 지금까지 Flex Builder의 디자인 모드 및 CSS를 통해 어느정도 디자인이 가능했지만 디자이너가 접근하기에는 너무나도 불편한 구조였습니다. 또한 디자이너가 MXML, ActionScript 3.0 코드까지 알아야하는 경우도 발생해서 더욱 다루기 어렵고 개발자와의 협업이 어려웠던 것이 사실입니다.
FC는 디자이너가 프로그래밍 코드를 전혀 알것없이 PhotoShop 또는 Illustrator 와 같은 디자인 툴로 작업한 PDS나 AI파일을 카탈리스트로 불러와 레이아웃, State등을 잡고 각종 Effect도 잡을 수 있도록 만들 수 있습니다. 그 결과물(MXML코드)을 개발자에게 넘겨주면 개발자가 MXML에 비지니스 로직을 추가하는 방법으로 진행이 됩니다. 완벽한 디자인 분리가 될 것이라는 것은 해봐야 알겠지만 아무튼 이런 툴이 만들어진 것은 분명 반가운 일입니다.
FC는 기존 Flash를 사용해본 디자이너라면 쉽게 접근해서 사용할 수 있는 구조로 되어 있습니다. 그러므로 학습하는데도 큰 무리가 없을 것으로 보입니다.
FC로 작업한 결과물은 Flex뿐 아니라 AIR로도 개발이 가능해집니다. 이것 또한 큰 매력이라고 할 수 있습니다.
FC는 아래 링크에서 다운로드 받을 수 있으며 30일 Trial버전으로 테스트해볼 수 있습니다.(Adobe 가입/로그인을 해야합니다.)
시리얼 번호를 입력하라는 창이 나옵니다. 배포 페이지에서 Serial Numbers를 함께 제공하므로 그것을 입력해서 사용합니다.
사용권 계약입니다. 당연히 동의해야 설치가 가능하겠죠?
옵션 설정인데… 뭐 선택할 것이 없네요. 그냥 설치합니다.
아래 화면처럼 설치 진행률을 보여줍니다.
2. Flash Catalyst 사용해보기
필자도 처음 해보는 것이라 자세한 기능 설명은 해드릴 수 없습니다. 엉성하게 나마 소개해 드리겠습니다.
설치가 완료되면 실행해보시길 바랍니다. BETA 1이 선명하게 표시되어 있군요.
아래는 실행화면입니다. 한글버전이 지원되는군요. 매우 좋습니다.
잘 보시면 Adobe Illustrator AI파일에서, Adobe Photoshop PSD 파일에서, 마지막으로 FXG 파일에서 작업을 시작할 수 있음을 알 수 있습니다. 아직 이런 작업물이 없으므로 그냥 새로운 프로젝트를 만들어보겠습니다.
아래와 같은 창이 나옵니다. 프로젝트 이름과 폭,높이,색상을 정합니다. 이름에 한글입력은 전혀 안됩니다. 프로젝트 명이니 당연한 것인지도..
프로젝트를 만들어봤습니다. 매우 단순해보입니다. 아래 그림의 상단에 Page1은 Flex의 State(상태)를 의미합니다.
즉, 화면전환을 위한 것이지요. 오른쪽에 간단한 도구와 Flex Component도 볼 수 있습니다.
맨 아래 타임라인을 클릭해보면 아래처럼 볼 수 있습니다. 이것은 State 전환을 위한 설정입니다. FC로 State 및 각종 Effect도 줄 수 있다는 것을 예상 할 수 있습니다.
버튼을 올려봤습니다. 버튼이 선택되어 있는 상태에서 버튼 설정을 쉽게 할 수 있도록 만들어져 있습니다. 필자는 개발자라 오히려 한글로 표현된 것이 어색하네요.
단추모양편집을 눌러보겠습니다.
아래처럼 버튼의 상태모양을 편집할 수 있습니다. 버튼의 State를 변경할 수 있도록 되어 있군요. 되돌아 가려면 검정색으로 보이는 바에 프로젝트명을 클릭하면 됩니다.(아래 그림에서는 jidolstar를 클릭합니다.)
응용프로그램 상호작용의 +버튼을 눌러보면 Flex 컴포넌트의 CreationComplete 이벤트가 발생했을때 처리를 설정할 수 있도록 되어 있습니다. 가령 상태 변환 및 동작시퀀스 제작등입니다.
그 아래 사용자 정의 상호 작용을 누르면 마우스 이벤트에 대한 다음 동작을 정의할 수 있습니다.
다른 주제로 넘어가서…
FC의 화면의 페이지 상태 밑에 중복상태, 비어있는 상태 버튼이 있는 것을 볼 수 있습니다. 차이점은 선택되어 있는 상태를 중복해서 상태를 만들것이냐 아니면 새로 상태를 만들것이냐 차이입니다. 확실한 것은 눌러보면 알 수 있다는 ^^
아래처럼 상태를 만들어 봤습니다. 타임라인 부분도 변경된 것을 확인할 수 있습니다.
각 상태 변화를 보기 위해 다른 컴포넌트를 올려보겠습니다.
아래는 2번째 상태입니다. 기존 상태를 중복한 겁니다. 확인(CheckBox)를 추가했습니다.
아래는 가로 스크롤 막대(HScrollBar)를 넣어봤습니다.
이제 이것을 저장해보겠습니다. 확장자가 FXP이군요. 기억해야겠네요.
3. Flash Builder 4에서 로드해보기
Flash Builder 4를 실행해보시고 방금 만들 FC파일을 로드합니다.
아래처럼 Flex 프로젝트가 만들어지고 MXML 코드가 들어가 있습니다. 상태 및 각 컴포넌트 배치, Transition 설정까지 모두 다 있습니다. 또한 components에는 만든 컴포넌트의 스킨도 포함되어 있는 것을 확인 할 수 있습니다. 개발자는 이제 FC에서 만들어진 결과물을 가지고 비지니스 로직만 구축하면 됩니다.
4. 정리하기
Flash Catalyst는 필자도 처음 사용해본 것입니다. 그러기 때문에 더 자세한 내용은 전달 할 수 없었습니다. 앞으로 필자도 이와 관련된 연구를 계속해서 함께 정보공유를 할 수 있는 분위기가 만들어졌으면 합니다. 기존 Flex 개발자는 Flash Builder 4 및 Flex 4 SDK를 공부해야할 것이고 디자이너는 Flash Caalyst를 익혀야 할 것입니다. Flash Builder와 Flash Caalyst는 Adobe RIA 개발/디자인 최초(?)의 협업도구 입니다. 첫번째 버전이라 아마도 부족한 점이 있을 것이지만 앞으로의 발전을 기대해봅니다.
Adobe Flash Builder 4 Beta가 배포되었습니다. 공식판은 아니고요. Flash Builder 4는 Flex Builder 3의 차기버전으로 Flex SDK 4(Flex Gumbo)를 기본 SDK로 설정되어 있습니다. Flex SDK 4로 만들어진 애플리케이션은 기본적으로 Flash Player 10 버전에서 동작이 가능합니다. 물론 기존 Flex SDK 3도 사용할 수 있습니다.
아래 링크에서 언제든지 다운로드 받을 수 있습니다.(회원가입하셔야 합니다.) 윈도우, 맥 버전이 있으니 자신의 운영체제에 맞게 다운로드 받으시면 됩니다.
C:/Program Files/Adobe/Flash Builder Beta 경로에 기본 설치되는군요.
설치중인 화면입니다.
이름도 Gumbo입니다. ㅎㅎ 아직 Beta라는 것이겠죠.
실행해 보겠습니다.
30일 Trial버전으로 사용해봅니다.
첫 실행 화면입니다. FB 문자가 선명하네요. FB는 Flex Builder가 아니라 Flash Builder 입니다.
2. 사용해보기
메뉴 구성 변화
FXP 임포트도 되고 Test Case Class, Test Suit Class도 만들 수 있도록 되어 있네요. Flex Builder로 테스트 주도형 제작이 가능해지겠군요.
Data 메뉴가 상당히 직관적으로 바뀌었네요. 또한 더욱 많은 서비스도 지원하도록 만들어졌고요. 진정한 RIA를 구축하기 위한 서버측 기술 지원을 배려한 기능이군요.
이전에 없었던 Data/Services, ASDoc, Network Monitor 등이 지원되네요.
아래는 네트워크 모니터툴입니다. RPC 통신등을 할 때 서버와 통신이 어떻게 되는지 확인하는데 요긴하게 사용할 수 있을 것 같습니다. 이제 Http Watcher가 필요 없겠군요!!!!!
Flex 코딩해보기
Flex Project를 만들어보겠습니다. SDK를 Flex SDK 3.4와 Flex 4.0을 사용할 수 있도록 되어 있네요. Flex 4.0 기반에서 작업해 보겠습니다.
FDT(Flash Development Tools)에서 보이는 구조와 비슷하네요. 프로젝트에 사용하고 있는 Flex 4.0 SDK 라이브러리들도 보이고 각각의 (+)버튼을 누르면 정의된 클래스도 한눈에 볼 수 있습니다. 이거 정말 편해졌군요. SWC도 못봤던 netmone.swc, sparksins.swc등이 있습니다.
재미있는 것은 Flex Gumbo가 Fx이니셜로 컴포넌트가 만들어진 것으로 알고 있었는데 FxApplication이 아닌 그냥 Application입니다.
그리고 몇가지 namespace(fx, s, mx)로 구분 되었네요. ComboBox가 DropDownList로 이름이 바뀐 것 같습니다.
ACC는 Adobe Community Champion의 약어로 글로벌 정책으로 Adobe 각 제품군(Flash/Flex/AIR등)별 전문가들을 말합니다. ACC 뉴스레터는 1개월에 한번씩 정기적으로 회원들에게 이메일을 통해 전송되며 한국 Adobe RIA 공식사이트에 가입하시면 받으실 수 있습니다.
ACC는 단순히 전문가만을 의미하지 않습니다. 또한 ACC라서 최상의 기술을 가지고 있는 것 또한 아닙니다. ACC가 아니더라도 드러내지 않는 실력 가지신 분들도 많답니다. 그럼 ACC는 어떤 사람들일까요?
제가 생각하는 ACC는 바로 Adobe 기술의 전도사입니다.
처음 Adobe 기술을 접하시거나 Adobe의 새로운 기술을 알고 싶고 때로는 토론하고 싶다면 ACC 분들과 적극적으로 커뮤니케이션을 유지하시면 좋겠다는 생각을 합니다.
한가지 조언드릴 것은 Adobe 기술도 나름 분야가 방대합니다. Flash, Flash Lite, Flex, ColdFusion, AIR, LiveCycle, BlazeDS 등등.. 아무리 ACC더라도 자신이 잘알고 해본 분야는 제한되어 있고요. 다 아는 것이 아닙니다. 그러므로 각각의 ACC의 전문분야를 잘아시고 목적에 맞게 대화를 하시는 것이 좋을 것 같습니다.
저의 경우 스타플(http://starpl.com)에 Adobe Flex/Flash 기술을 도입하면서 얻은 지식을 공유할 수 있습니다. Java분야나 ColdFusion, Flash Lite는 저도 잘 모릅니다. 그러므로 스타플에서 사용된 별지도, 별꾸미기, 위젯, 이미지에디터 등 Adobe RIA 기술에 국한되어 답변할 수 있을 것 같습니다. 같은 ACC지만 저도 다른 ACC의 도움을 받습니다. 그러므로 이 글을 보시는 여러분도 ACC와 소통하실때 그 부분을 잘 참고하시길 바랍니다.
또 한가지!
소통의 도구로 가장 좋은 것은 블로그입니다. 글 쓰는게 어려우신 분은 어쩔 수 없다지만 제가 생각할 때 블로그만큼 좋은 소통의 도구가 없습니다. 제가 ACC가 된 것도 블로그를 통해 기술을 공유하고 또한 소통하면서 얻은 타이틀입니다. 제가 잘해서 또는 이쪽에 탁월한 전문가이기 때문은 아니라는겁니다. ACC는 기술의 전도사라는 말을 기억하시면 이를 쉽게 이해할 수 있을겁니다.
제가 블로그를 강조하는 이유는 가령 이렇습니다. 일전에 제가 [ActionScript 3.0] Stage.invalidate()를 호출해도 Event.RENDER 이벤트가 발생하지 않는 문제 해결 글을 올렸습니다. 이 글을 올린데에는 단순히 지식전달 수준이 아닙니다. 지식전달만 목적이라면 블로그 할 필요없죠. 댓글을 보시면 답이 나옵니다. 서로 지식이 공유되고 있지요. 이게 파격적인 겁니다. 잘 모르더라도 잘 정리해서 글을 적으면 함께 고민하는 사람과 이야기할 수 있고 서로 알아갈 수 있습니다. 블로그는 댓글 기능만 있는 것이 아니라 블로그의 글끼리 묶어주는 트랙백(엮인글)이 됩니다. 또한 RSS발행을 통해 관심분야 사람들 유입경로를 만들어줍니다. 아직도 개발자인데 블로그 안하시나요? 공부하고 싶고 인맥을 구축하고 싶은데 블로그를 안하시나요? 실력이 없어서 또는 잘 모르는 지식 때문에 괜히 악플달릴까 고민하는 것은 좋지 않는 생각입니다. 틀리는 것을 부끄럽다고 생각하지 말아야 발전이 있는 것이니깐요. 블로그 하시는 것이 여러분의 실력을 키우는데 큰 도움이 되는 것을 강조하고 싶습니다. 적어도 저는 블로그의 혜택을 톡톡히 보는 사람중에 한사람이라 자신있게 강조합니다. ^^
ACC는 앞으로도 Adobe RIA 기술의 전도사로서 여러 활동을 할겁니다. 기대해주시고 기억해주세요. ^^
Adobe Flex가 아닌 Flash CS3, CS4, ActionScript 3.0로 개발해본 사람이면 Stage를 자주 접하게 된다. 하나의 ActionScript 3.0 애플리케이션은 Stage 하나를 가지고 있다. 이것은 모든 DisplayObject 계열의 객체가 addChild()를 통해 시각화 과정이 완료후에 그 객체의 stage속성을 통해 접근이 가능하다. 모든 DisplayObject 계열의 객체에서 stage속성에 접근할 수 있다는 것은 stage가 매우 중요하다는 것을 암시하고 있다. 그러므로 잘 알고 활용해야 삽질을 방지할 수 있지 않을까?
1. Stage.invalidate()와 Event.RENDER 이벤트의 이해
Stage 클래스에는 invalidate() 메소드가 있다. 이것을 호출하면 다음 렌더링 시점에 Event.RENDER 이벤트를 발생시킨다. 모든 DisplayObject 객체는 stage에 접근이 가능하므로 Event.RENDER 이벤트를 청취할 수 있다. 이는 애플리케이션 퍼포먼스를 향상시키고자 하는 개발자들이 반드시 알고 있어야할 사항이라고 생각한다. Stage의 invalidate()와 Event.RENDER 이벤트를 이용해 쓸데없는 렌더링을 예방함으로써 퍼포먼스를 향상시킬 수 있기 때문이다. 그 이유를 명확하게 알기 위해 다음 예제를 보자.
필자는 일반 ActionScript 3.0 프로젝트를 만들고 Sprite기반에서 애플리케이션을 만들고자 한다. 이때 두개의 클래스를 만드는데 하나는 Stage.invalidate()를 사용한 클래스이고 하나는 사용하지 않는것이다. 이 두개를 비교하면 Stage.invalidate()의 유용성을 확연히 알 수 있다.
InvalidateTest.as
package {
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
/**
* Stage.invalidate() 테스트 메인
* @author Yongho, Ji (jidolstar@gmail.com)
* @since 2009.6.1
*/
public class InvalidateTest extends Sprite
{
public function InvalidateTest()
{
super();
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var button1:NotUseInvalidateButton = new NotUseInvalidateButton();
button1.setWidth( 100 );
button1.setHeight( 100 );
button1.backColor = 0xff0000;
button1.lineColor = 0x00ff00;
button1.x = 20;
button1.y = 20;
addChild( button1 );
var button2:UseInvalidateButton = new UseInvalidateButton();
button2.setWidth( 100 );
button2.setHeight( 100 );
button2.backColor = 0xff00ff;
button2.lineColor = 0x0000ff;
button2.x = 130;
button2.y = 20;
addChild( button2 );
}
}
}
위처럼 두개의 버튼 클래스를 만들었다. 2개 모두 폭, 높이, 배경색, 선색을 지정하도록 되어 있다. 결과는 비슷하다. 하지만 내부적으로 NotUseInvalidateButton은 내부에 Stage.invalidate()를 사용하지 않았고 UseInvalidateButton은 사용했다. 소스를 보자.
NotUseInvalidateButton.as
package
{
import flash.display.Sprite;
/**
* Stage.invalidate()를 사용하지 않는 Button
* @author Yongho, Ji (jidolstar@gmail.com)
* @since 2009.6.1
*/
public class NotUseInvalidateButton extends Sprite
{
private var _height:Number = 50;
private var _width:Number = 50;
private var _backColor:Number = 0xffffff;
private var _lineColor:Number = 0x000000;
public function NotUseInvalidateButton()
{
super();
}
public function get backColor():Number
{
return _backColor;
}
public function set backColor( value:Number ):void
{
_backColor = value;
drawNow();
}
public function get lineColor():Number
{
return _lineColor;
}
public function set lineColor( value:Number ):void
{
_lineColor = value;
drawNow();
}
public function getWidth():Number
{
return _width;
}
public function setWidth( value:Number ):void
{
_width = value;
drawNow();
}
public function getHeight():Number
{
return _height;
}
public function setHeight( value:Number ):void
{
_height = value;
drawNow();
}
public function drawNow():void
{
trace( "[NotUseInvalidateButton] drawNow" );
graphics.clear();
graphics.beginFill( backColor, 1 );
graphics.lineStyle( 1, lineColor, 1 );
graphics.drawRect( 0, 0, getWidth(), getHeight() );
graphics.endFill();
}
}
}
UseInvalidateButton.as
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* Stage.invalidate()를 사용하는 Button
* @author Yongho, Ji (jidolstar@gmail.com)
* @since 2009.6.1
*/
public class UseInvalidateButton extends Sprite
{
private var _height:Number = 50;
private var _width:Number = 50;
private var _backColor:Number = 0xffffff;
private var _lineColor:Number = 0x000000;
private var isDrawNow:Boolean = false;
private var isInvalidated:Boolean = false;
public function UseInvalidateButton()
{
super();
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage( event:Event ):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
if( isInvalidated )
{
isInvalidated = false;
this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
this.stage.invalidate();
}
}
private function onRender(event:Event):void
{
if( this.stage )
{
this.stage.removeEventListener( Event.RENDER, onRender, false );
}
if( isDrawNow )
{
isDrawNow = false;
drawNow();
}
}
private function invalidate():void
{
if( this.stage )
{
this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
this.stage.invalidate();
}
else
{
isInvalidated = true;
}
}
public function get backColor():Number
{
return _backColor;
}
public function set backColor( value:Number ):void
{
_backColor = value;
isDrawNow = true;
invalidate();
}
public function get lineColor():Number
{
return _lineColor;
}
public function set lineColor( value:Number ):void
{
_lineColor = value;
isDrawNow = true;
invalidate();
}
public function getWidth():Number
{
return _width;
}
public function setWidth( value:Number ):void
{
_width = value;
isDrawNow = true;
invalidate();
}
public function getHeight():Number
{
return _height;
}
public function setHeight( value:Number ):void
{
_height = value;
isDrawNow = true;
invalidate();
}
public function drawNow():void
{
trace( "[UseInvalidateButton] drawNow" );
graphics.clear();
graphics.beginFill( backColor, 1 );
graphics.lineStyle( 1, lineColor, 1 );
graphics.drawRect( 0, 0, getWidth(), getHeight() );
graphics.endFill();
}
}
}
디버깅 모드로 프로그램을 실행해보면 콘솔창에 다음과 같이 출력된다.
[NotUseInvalidateButton] drawNow
[NotUseInvalidateButton] drawNow
[NotUseInvalidateButton] drawNow
[NotUseInvalidateButton] drawNow
[UseInvalidateButton] drawNow
NotUseInvalidateButton은 drawNow()메소드가 4번 호출되고 UseInvalidateButton은 1번만 호출된다. 이것만 보더라도 쓸데없는 렌더링을 줄여준 UseInvalidateButton 클래스가 더 잘 설계되었다는 것을 확인할 수 있다.
NotUseInvalidateButton를 잘 살펴보면 setWidth(), setHeight(), set backColor, set lineColor 를 호출할 때마다 drawNow() 메소드를 호출한다. 개발자라면 이 4가지 속성이 모두 적용된 다음에 drawNow()를 호출하여 한번만 그려주고 싶어질 것이다. 이때 유용하게 사용할 수 있는 것이 Stage.invalidate() 이다.
UseInvalidateButton을 보자 NotUseInvalidateButton보다 약간 복잡해보이지만 잘 따라가보면 어렵지 않게 분석이 가능할 것이다. 결국 4개의 속성이 설정되면 invalidate() 메소드가 호출되고 Event.RENDER 이벤트를 받는 onRender()에서 drawNow()가 호출되도록 한다. 이렇게 되면 4개든 여러개든 할 것 없이 렌더링에 영향을 주는 다중 속성을 설정할 때마다 drawNow()를 호출하여 그림을 그려주는 부담을 줄일 수 있다.
그림을 그리는 행위는 일반 속성을 설정하는 것보다 더 비싼 비용을 가진다. 그러므로 그림을 그리는 것은 되도록 한번에 처리할 수 있도록 하는 것이 애플리케이션 퍼포먼스 향상의 중요한 요소가 될 수 있는 것이다.
2. Stage.invalidate()의 버그와 해결방법
하지만 이렇게 좋은 Stage.invalidate() 가 있음에도 불구하고 실제로 이 메소드를 호출해도Event.RENDER 이벤트가 발생하지 않아 당황스러운 경우가 필자에게 있었다. 그래서 어떤 것은 drawNow()가 호출되고 또 어떤 것은 호출안되는 상황이 발생한 것이다. 너무도 어이가 없지만 Flash Player 10으로 넘어오면서도 이 버그는 아직까지도 Fix가 되지 않은 모양이다.
위 링크는 모두 Adobe Bugs 관리 시스템에 등록된 것이다.(여러분도 가입해서 투표하길 바란다. 버그 시스템을 잘 이용하면 해결하지 못하는 문제도 쉽게 해결할 수 있을지 모른다. ^^)
Event.RENDER가 발생한 중간에 stage.invalidate()가 호출되면 이게 무시가 되나보다. 그래서 동작상으로는 문제없지만 개발자에게는 버그처럼 느껴질 수 있을지 모르겠다. 어쨌든 필자도 이 문제로 고민을 하다가 한가지 해결방법을 찾았는데 그것은 Event.ENTER_FRAME 이벤트를 이용하는 방법이다.
Event.ENTER_FRAME을 이용해서 stage.invalidate()의 버그를 말끔히 해결할 수 있다. 다음 코드는NotUseInvalidateButton을 Event.ENTER_FRAME을 이용하는 것으로 바꿔본 것이다.
NotUseInvalidateButton.as
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* Stage.invalidate()를 사용하는 Button.
* Event.ENTER_FRAME 로 Stage.invalidate() 버그 우회
* @author Yongho, Ji (jidolstar@gmail.com)
* @since 2009.6.1
*/
public class UseInvalidateButton extends Sprite
{
private var _height:Number = 50;
private var _width:Number = 50;
private var _backColor:Number = 0xffffff;
private var _lineColor:Number = 0x000000;
private var isDrawNow:Boolean = false;
private var isInvalidated:Boolean = false;
public function UseInvalidateButton()
{
super();
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage( event:Event ):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
if( isInvalidated )
{
isInvalidated = false;
this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
this.stage.addEventListener(Event.ENTER_FRAME, onRender, false, 0, true );
this.stage.invalidate();
}
}
private function onRender(event:Event):void
{
if( this.stage )
{
this.stage.removeEventListener( Event.RENDER, onRender, false );
this.stage.removeEventListener( Event.ENTER_FRAME, onRender, false );
}
if( isDrawNow )
{
isDrawNow = false;
drawNow();
}
}
private function invalidate():void
{
if( this.stage )
{
this.stage.addEventListener(Event.RENDER, onRender, false, 0, true );
this.stage.addEventListener(Event.ENTER_FRAME, onRender, false, 0, true );
this.stage.invalidate();
}
else
{
isInvalidated = true;
}
}
public function get backColor():Number
{
return _backColor;
}
public function set backColor( value:Number ):void
{
_backColor = value;
isDrawNow = true;
invalidate();
}
public function get lineColor():Number
{
return _lineColor;
}
public function set lineColor( value:Number ):void
{
_lineColor = value;
isDrawNow = true;
invalidate();
}
public function getWidth():Number
{
return _width;
}
public function setWidth( value:Number ):void
{
_width = value;
isDrawNow = true;
invalidate();
}
public function getHeight():Number
{
return _height;
}
public function setHeight( value:Number ):void
{
_height = value;
isDrawNow = true;
invalidate();
}
public function drawNow():void
{
trace( "[UseInvalidateButton] drawNow" );
graphics.clear();
graphics.beginFill( backColor, 1 );
graphics.lineStyle( 1, lineColor, 1 );
graphics.drawRect( 0, 0, getWidth(), getHeight() );
graphics.endFill();
}
}
}
위에서 stage.addEventListener( Event.ENTER_FRAME )과 stage.removeEventListener( Event.ENTER_FRAME ) 이 추가된 것을 확인하자. 무작정 이벤트를 청취하고 있으면 안되므로 적절하게 삭제도 하고 있다.
이렇게 처리함으로써 stage.invalidate()가 제대로 작동안하더라도 drawNow()메소드가 호출이 안되는 경우는 없게 된다.
3. fl.core.UIComponent 수정하기
Flash의 UIComponent 를 보면 이것 stage.invalidate() 때문에 렌더링이 안되는 경우가 종종 발생한다고 한다. 필자는 Flash는 해본적이 없기 때문에 확실하게 모르지만 이것도 Event.ENTER_FRAME 을 이용해 해결할 수 있다. 그 방법은 다음 링크를 참고한다.
UIComponent의 callLater()가 어떻게 동작하는 것인지 이것을 보고 감을 잡을 수 있을 것이다. 결국 Event.RENDER, Event.ENTER_FRAME 으로 한다!
4. mx.core.UIComponent의 무효화 메소드들
Flex의 UIComponent에는 invalidateDisplayList(), invalidateProperties(), invalidateSize()와 같은 invalidate() 메소드가 존재한다. 이는 앞선 메소드들의 호출에 대해 각각 updateDisplayList(), commitProperties(), measure() 메소드가 다음 렌더링 시점에 호출되도록 하고 있다. 이는 invalidate/validate 패턴이다.
재미있게도 Flex에서는 Stage.invalidate()에서 처럼 동작하지 않는 버그는 존재하지 않는다. 어떻게 된 것일까?
사실 Flex 내부를 살펴보면 Stage.invalidate() 와 Event.ENTER_FRAME을 이용해 invalidate 계열의 메소드를 처리하도록 되어 있다. UIComponent 부터, LayoutManager, SystemManager 를 들춰보면 Event.RENDER와 Event.ENTER_FRAME을 가지고 invalidate/validate 패턴을 구현하고 있다. (Flex 개발자도 어쩔 수 없었나보다. ㅡㅡ;;)
Flex만 접해보고 ActionScript 3.0 학습에 소홀히 했다면 절대 이런 문제를 발견할 수 없었을 것이다.
정리하며
Stage.invalidate()가 호출할 때 때떄로 Event.RENDER가 호출되지 않는 문제는 버그가 아닐 수 있다. 원래 그렇게 만들어졌을지도 모른다. 하지만 개발자는 이것을 버그로 여긴다. 왜냐하면 보통 개발할때는 그런 것은 생각안하고 메뉴얼만 보고 당연히 그러겠지 생각하기 때문이다. 좀 황당하지만 버그 아닌 버그로 Flex 까지 다 까보게 되었다 ㅡㅡ;
var service:Service=new Service("HelloRemoting", "http://localhost:8001/amfphp/gateway.php");
var pendingCall:PendingCall=service.sayHello("remoting"); pendingCall.addEventListener(ResultEvent.RESULT,onResult); pendingCall.addEventListener(FaultEvent.FAULT,onFault);
function onResult(e:ResultEvent):void{ trace(e.result); }
function onFault(e:FaultEvent):void{ trace(e.fault); }
사용법은 위처럼 너무 간단하다. AMFPHP, OpenAMF등으로 Remoting 서비스를 위한 서버를 구축하고 클라이언트는 Flash를 통해 개발하려는 사람에게 매우 유용할 듯 싶다. 또는 Flex가 아닌 순수 ActionScript 3.0 으로만 개발하려는 사람에게도 괜찮을 것 같다.
CompositionPlayer.zip
invalid-file
