Saladin’s Blog

Posts Tagged ‘Flash

고대하던 FITC 행사를 다녀왔습니다. 벌써 약 한달전부터 공짜 티켓을 얻으려고 자원봉사자 신청을 했었습니다. 에릭 나츠케, 조슈아 데이빗, 카일 쿠퍼등 세계적인 아티스트들이 전부 오는 행사이니 만큼 기대는 말로 다 하지 못하였습니다. 행사를 참가하기 전부터 두근 거렸고, 그 두근거림 만큼 많은 것을 얻어 돌아왔습니다. FITC행사에 대한 구구절절한 설명도 생략하겠습니다. FITC가 무엇인지, 또 에릭 나츠케등이 뭐하는 사람들인지 궁금 하신 분들은 여기를 클릭해주시고, 이제 부터 진행될 후기를 읽으실 분들은 포스트를 활짝 펼쳐주세요.

더 많은 사진 보기

이 엔트리의 나머지 읽기 »

 360 Flex 행사 동영상. Rich Experence에 대해 이야기하며, Adobe의 차기 RIA기술인 Flex 4, Thermo, Flash 10 and Degrafa에 대해 발표한 것이다. Degrafa는 Declarative Graphics Framework이라고 설명되어 있다. (직역하자면 선언형 그래픽 프레임워크)

태그: , ,

http://www.fitcseoul.com/index_kr.html

 

에릭나츠케, 조슈아 데이비스 다 온다.

이정도면 말 다 한거다.

입장료가 좀 비싸지만 꼭 가봐야겠다.

캡쳐와 버블의 순환순서에 따라 이벤트 호출 순서가 뒤바뀐다는 사실은 이미 아는 사실이다. 여튼 자바 엔진이 기반인 ActionScript3.0은 이벤트 구조의 개편만으로도 상당히 풍부한 디자인패턴을 제공하게되었다.하지만 2.0을 쓰던 나같은 기존의 사용자들이 이에 익숙해지는데는 일말의 노력이 필요함은 물론이다.

개체 포함관계에 따라, 또한 이벤트 적재 테이블을 캡쳐를 사용하느냐, 버블링을 사용하느냐에 따라 이벤트 절차가 다르게 된다는 것을 알았다. 그런데 한가지 문제가 남아있다.뭐냐하면 그러한 개념만으로 이벤트 흐름을 끊거나 풀거나 하는 본격적인 제어를 능숙하게 할수는 없다는 것이다. 요는 이벤트를 제공하는 메쏘드를 익혀야 한다는 것이다.

 

예를 들어 스테이지에 버튼을 하나 만들고 이런 코드를 적었다고 한다. 일반적인 경우다.

this.addEventListener(MouseEvent.CLICK, fnThis); //C
btn.addEventListener(MouseEvent.CLICK, fnBtn); // A
btn.addEventListener(MouseEvent.CLICK, fnBtn2); // B


function fnThis(e:Event):void{

 trace(“C”);
}

function fnBtn(e:Event):void{

 trace(“A”);
}

function fnBtn2(e:Event):void{

 trace(“B”);
}

btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
디스패치를 시켰으니 버튼을 안눌러도 클릭효과가 날것이다. 이를 실행시켰을 경우 아웃풋 창에는

A
B
C

그러니까 A-B는 동레벨이고, C는 상위레벨인 this이므로 물에서 잠수했다 빠져나오는 것을 상상하면 이해가 간다. 이건 여태껏 했던 부분이다.

 

이제 본격적인 문제가 시작된다. 코드를 이렇게 적었다면 어떻게 될까.

this.addEventListener(MouseEvent.CLICK, fnThis); //C
btn.addEventListener(MouseEvent.CLICK, fnBtn); // A
btn.addEventListener(MouseEvent.CLICK, fnBtn2); // B


function fnThis(e:Event):void{
 trace(“C”);
}

function fnBtn(e:Event):void{
 trace(“A”);

 e.stopImmediatePropagation(); 
}

function fnBtn2(e:Event):void{
 trace(“B”);
}

btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));

 

stopImmediatePropagation 이란 메쏘드를 썼다. 이건 뭐하는 것이냐하면 캡쳐 -> 타겟 -> 버블링 의 이벤트 흐름중에서

그 메쏘드를 호출한 현재 이벤트(즉 여기서는 fnBtn)까지만 이벤트를 흐르게 하고 이 다음 부터는 흐르게 하지 않겠다는 것이다.

 

결과는

A

놀라운 결과다. 그런데 this의 이벤트를 캡쳐테이블로 선언 했다고 하자.

 

this.addEventListener(MouseEvent.CLICK, fnThis, true); //C

이렇게 선언하면 캡쳐 -> 타겟 – > 버블링의 공식에 따라

 

출력결과는

C

A

가 된다. 스탑이미디에이트프러포게이션을 써도 C는 캡쳐이므로 (즉, 이벤트 흐름이 중지되기 전이므로)실행이된다. 다시 적지만 A에 할당된 함수에 스탑을 걸었다고 했다. AS3.0이 이전까지의 프레임 코딩이 필요없다는 이유가 바로 이때문이다. 이벤트 제어구조가 풍부하게 바뀌었다는 것이다. 위의 stopImmediatePropagation()대신 stopPropagation()을 써주면 현재 객체에 포함된 노드의 흐름만 실행하고 그 다음으로 (수면위로 올라와서 다시 아래로 들어가는 동작) 넘어가지 않는다.

 

위의 코드에선 btn 이란 객체 아래에 fnBtn 과  fnBtn2가 있으므로

두 함수가 호출되고 this로 넘어가지 않으므로

 

출력결과는

A

B

마지막으로 한가지 헷갈리는 경우가 있다. 이런 코드가 있다고 한다.

 

this.addEventListener(MouseEvent.CLICK, fnThis);
btn.addEventListener(MouseEvent.CLICK, fnBtn);
btn.addEventListener(MouseEvent.CLICK, fnBtn2);


function fnThis(e:Event):void{
 trace(“C”);
}

function fnBtn(e:Event):void{
 trace(“A”);
 
btn.removeEventListener(MouseEvent.CLICK, fnBtn2);

 // fnBtn 다음에 실행되기로 예정된 fnBtn2가 참조하는 이벤트를 삭제해버렸다. 어떻게 될까?

}

function fnBtn2(e:Event):void{
 trace(“B”);
}

btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));

 

이것의 실행결과는 간단하지 않다. 예상되는 결과는 B의 이벤트를 메모리에서 삭제했으므로

A

C

가 되어야 하거늘,

 

최초이벤트시엔

 

A

B

C

 

로 동작하고, 다시 클릭을 하면

 

A

C

 

가 출력된다.

 

이것은 Flash Player9의 저레벨 동작 메커니즘에 연관되는 문제이다. Flash Player9는 이벤트 리스트를 메모리에 적재할때,

 

0. 가장 먼저 디스플레이 객체들의 리스트를 조사하고.

1. 빈 이벤트 객체에 AS로 부터 받은 이벤트를 복사한다.

2. 그 복사한 객체를 리스트의 길이만큼 테이블에 적재해나가기 시작한다.

3. 각종 옵션(캡쳐 버블링) 설정에 따라 루프문을 break로 빠져나가든지, 아니면 다음 노드로 넘어갈지를 판단한다.

.

,

바로 위의 빨간색 단계에서 이미 메모리에 이벤트 객체를 복사한 후이기 때문에, 전체 런타임보다 순서가 뒤인 removeEventListener는 제 역할이 드러나지 않는다.

재차 이벤트가 날라갈때야 비로소 새로고침 되어있는 전달객체의 참조값을 새로 받게된다. 따라서 B는 두번째 실행때야 지워지는 것 처럼 보여지게 된다.

이것은 아주 중요한 대목이다.

태그: ,

음. 일단 AS3의 xml 모델을 접해본 결과 첫느낌은 이렇다: 

1. xml파싱이 대단히 간편하고 효율적이게 변했다.

 -> 굳이 xPath API를 안써도 됨. childNode같은 특정 메쏘드나 에트리뷰트로 접근했던 것이 노드의 localName과 ‘.’연산자로 바로 접근가능하고, 심지어는 path를 다 쓰기 귀찮으면 xml객체 뒤에 ‘..’연산자를 쓰고 원하는 노드의 locaName을 적으면 아예 검색도 해주면서 자동참조까지 해준다. 거기다 표현식에 직접조건문을 삽입할 수 있으므로 코드 줄수도 줄어들게된다. 

2. E4X를 지원한다. 다른 언어(Java,Javascript,C#등)와 스펙이 완벽호환된다. 첨부파일로 ECMAscript for XML의 상세한 사양서를 넣어둔다.

3. 그런데 nameSpace쪽이 좀 직관적이 못하고, 경직되고, 답답한 느낌이 있다. 예를 들어 2.0에서는 네임스페이스가 있더라도 무시하고 xPathAPI를 써서 localName으로 바로 접근하면 값이 튀어나왔지만 3.0에서는 참조 할때마다 prefix를 명시해야한다.

 예를 들면 이런 namespace xml문서가 있다고 치면

 <a xmlns=http://vdesire.com/wpf/2.0” xmlns:soap=”블라블라”>

     <soap: b>

          <xx:b1/>

          <xx:b1/>

     </b>

<soap:c></c>

</a> 

써본지 오래된지라 기억이 가물가물하지만 아마도 b1에 접근하기 위해선 2.0에서는 이러면 되었다.

xPathAPI를 써서 var qq:Array = seletNode(“/a/b/b1”); 해서 배열에 싹 저장하고 이걸 qq.firstChild.childNode[0] 뭐 이런식으로 하면 참조가 되었다.

 그런데 3.0에서는 xmlObj 객체에 저장한후, xmlObj.soap::b[0].xx::b1 으로 해야한다.

 

물론 이걸 이렇게 간편화 할 수 있긴하다.

xmlObj..xx::b1 

하지만 좀 복잡하고 거대한 xml문서를 만났을때는 .과 ::의 혼돈속에서 보기에도 불편한 path를 정의해줘야 한다. 간편화 할 수 있는 클래스를 만들던가 XMLList를 써서 간접 참조를 하든가 해야 이로부터 비롯된 짜증을 좀 만회 할 수 있을 듯 하다.

 

알아낸 사실  뭐냐하면 xml문서의 네임스페이스를 런타임에 “”로 공백화 시켜버리는 것이다.

 xSheet = new XML(loader.data); 

if (xSheet.namespace(“”) != undefined){
      default xml namespace = xSheet.namespace(“”);
}

이렇게 하면 참조시 접두어를 쓸 필요가 없다. 그러나 xml노드의 로컬네임 자체에 접두어가 있는 경우는 여전히 출력이 되지 않는다. 네임스페이스가 정의되어 있지만, 실제 엘레먼트 로컬네임이나 어트리뷰트에 접두어가 없다면 편리하게 사용가능 할 것이다.

태그: ,

“Where is my onRelease !!! 😦 “

 
AS3.0을 접하고 어떤 외국개발자가 했던 절규다. 무비클립 이름뒤에 간편하게 걸수 있었던 on 이벤트가 완전히 사라진것을 두고 하는 말인것이다. as2에서 AS3로 개정되면서 가장 눈에 띄게 달라진 부분은 바로 이벤트처리에 관련된 메커니즘이다. 그 중심에 있는 것이 바로 EventDispatcher 클래스이고, 거의 모든 클래스들이 그 클래스로 부터 상속을 받음으로서 이벤트모델이 구현된다. 3.0에서는 onRelease나 onPress은 완전히 없어지고 모든 이벤트를 Event, MouseEvent 등에 있는 이벤트를 사용한다.
 
외형상으로 자바하고 똑같다. 물론 동작방식은 좀 차이가 있다.
Flash에서 이벤트라는 것은 Capture와 Bubble이라는 서로 다른 성격의 해시테이블에 호출함수가 미리 적재되어 이벤트 발생때마다 불러쓰는 방식을 사용한다. 마치 물안에 있는 물건을 집을때 물에 손을 집어 넣어 끄집어 내는 것을 상상하면된다.
 
이러한 개념을 Event Stream 이라고 하는데 흐름을 잘 이용하면 다른 이벤트까지 싸잡아 활성화시킬수 있으므로 AS2.0에 비해 무척 강력해졌다고 할 수 있을 것이다.
 
두 그림이 핵심적인 것들을 모두 설명하고 있다.
 
플래시에서 사각형A 그려 그것을 클릭하게 되면 가장 먼저 stage클래스가 반응하고, 가장 하위 단계의 DisplayOject인 _root가 반응을 한다음, 최종적으로 target object인 사각형A가 전달 받게 되고,
이벤트 함수가 호출되는데, 여기에서 사각형A의 리턴되는 모든 것들은 다시 역순으로 바깥으로 나오게 되는 식이다.
 
그러니까, 이런 코드가 있다고 가정한다. 
 
rectA.addEventListener(MouseEvent.CLICK, fnA, false(생략));
 
// 세번제 인자는 Capture를 사용하는냐의 여부이고, Boolean으로 정의하는데 여기서는 생략되었다. 기본값은 false다. 그러니까 디폴트로 버블링을 사용한다는 말.
rectA.rectB.addEventListener(MouseEvent.CLICK, fnB);
stage.addEventListener(MouseEvent.CLICK, fnC);
 
function fnA(e:MouseEvent):void{
    trace(“A”);
}
function fnB(e:MouseEvent):void{
    trace(“B”);
}
 
function fnC(e:MouseEvent):void{
    trace(“C”)
}
 
무비클립인 사각형 B가 사각형 A에 포함된 구조일때 B를 클릭했다고 치면 함수의 실행 순서는
 
fnB -> fnA -> fnC 의 순서이고 아웃풋창에는
 
B
A
C
 
가 출력된다.
기본값이 버블링 구조라고 했다. 버블링이라는 말은 클릭한 주체를 선두로 B와 가장 가까운 부모객체들부터 차례대로 따라오는 것이다.
 
그런데 이번에는 이벤트를 다르게 줘본다.
 
rectA.addEventListener(MouseEvent.CLICK, fnA, true);  
// A만 캡쳐모드 사용
rectA.rectB.addEventListener(MouseEvent.CLICK, fnB);
//버블링
stage.addEventListener(MouseEvent.CLICK, fnC);
//버블링
 
이렇게 되면 B를 클릭하더라도, B는 버블링이므로 이벤트가 아웃풋될때 발생하므로 Capture 모드를 활성화한 rectA가 먼저 반응하게 된다.
 
그러므로 결과는
 
A  – 캡쳐
B – 버블링
C – 버블링
 
만약 stage의 모드를 캡쳐로 놓게 된다고 하면.
stage는 잠수부에게 수면의 역할을 하게 되므로
똑같이 캡쳐를 쓴 A보다 먼저 반응하게 된다.
 
그러므로 결과는
 
C  – stage 캡쳐 //클릭시 가장 먼저 접하는 오브젝트.
A  – 캡쳐
B  – 버블링
 
모두 캡쳐로 주었을때는 먼저 선언한 순으로 실행된다
그러므로
 
C
A
B
 
만일 이벤트 모드 뒤에오는 인자값 prority가 B를 더 높게 준다면
C
B
A
가 된다.
 
이것이 바로 As3.0 이벤트의 가장 기초적인 메커니즘이다.

adobe_flash_ACE

어차피 갑을병정 문제푸는능력이 아닌 ‘내가 당신들 회사에 들어가면 이정도 아웃풋을 낼수 있소’ 이렇게 말할 수 있는 실무능력을 프로젝트 결과물로서 바로 물증으로 증명하면 될 것을, 취업을 위해 관행적으로 딴다는 흔히 보이는 된장IT기술 자격증엔 관심이 없었지만, 근래에 직접적인 실무스킬을 드러낼 수 있는 괜찮은 자격증이 눈안으로 들어오고 있다. 메모.

어도비 국제공인 자격증 중에 ACE라는 것이 있고 ACA라는 것이 있다.

ACE는 예전부터 알고는 있었지만 쳐다보지도 못했던 자격증이다. Adobe certified Expert 라는 것으로 각 부문의 전문적인 실력을 검증해 인증을 해주는 자격증 위의 자격증이고, 현재까지 국내 취득자가 100명을 약간 넘는 수준이라고 하니 도전해볼 만한 가치가 있는 자격증인 듯 하다. 

 

Microsoft의 MCP나 MCAD나 MCSD 같은 자격증이라고 보면된다.


위에 있는 것 처럼 ACE를 취득하면 자신의 저작물이나 명함에 어도비 로고와 함께 ‘어도비 공인 전문가’란 서브 타이틀을 공개적으로 사용할 수 있다고 한다. 음. 요거 참 끌리는 요소. ^^ 

첨부파일에는 매크로미디어 합병이전까지 Flash의 최종 버전이자, AS3이전까지 AS의 최종인 AS2 개발을 중심으로 한 Flash8 엑스퍼트 인증 자격증에 관한 정보와 예제 문제들이 있다. 아직 CS3기반 AS3의 자격증은 개설이 안되있는 상태인 것 같음. 

시험내용은 컨텐츠 제작에 관한 건 없고, 주로 코드디버깅이나 로직아니면 개발패턴에 관한 물음이다. 풀어보니 대강 절반정도는 어렵지않게 풀수 있었다. 시간잡고 공부하면 못할것도 없을 것 같다. 다만, 뻔한 문제들이란 없고, 레퍼런스들을 상당히 깊게 파야 할 듯 하다. Flash고유의 동작구조를 제대로 알아야 풀수 있다.(일반적인 개발작업에서 쓰이는 빈도가 적은 클래스들에 대한 문제도 상당히 많이 나옴) 더구나 맘만먹으면 한없이 헷갈리는 문제를 제출할 수 있는 부분이 바로  OOP다. 

ACA는 끝의 A가 어소시에이션이라고 해서, 활용능력시험인게다. 올해 7월부터 나온 새로운 거라고 하는데. 요건 정보가 아직 별로 없으므로 알아보겠지만, ACE보다 수준은 훨 낮을 것이다. 일반 유저를 대상으로 하니까

태그: , , ,

일자별 보기

8월 2017
« 4월    
 123456
78910111213
14151617181920
21222324252627
28293031  

최근 사진