Flash/Flex AS3 - Timeline 코딩과 Flash 객체의 의미 Part.4

  지금 까지 Flash프로그래밍에서의 타임 라인의 역할과 함께 Timline이 움직이는 흐름에 대해 이야기 해 보았습니다. 이제 타임라인이 어떻게 동작하는지에 대한 기초적인 개념을 파악 하셨을 것입니다. 지금 까지 다룬 내용은 Timeline의 프레임 순서에 따른 실행 순서 였습니다. 프레임 1에 있는 코드는 프레임 2에 있는 코드 보다 먼저 실행이 되고, 여러 메소드를 이용하여 재생헤드의 위치를 조작하므로 실행 순서를 조작 할 수 있었습니다. 그렇다면 같은 레이어에 존재 하지 않는 다른 레이어에 존재하는 코드의 경우에는 어떤 순서로 실행되게 될까요? 가장 상위에 있는 레이어에 있는 코드부터 실행되게 됩니다. 아무것도 아닌 것 같이 보여도 이 개념에 대해 알지 못하고 툴 작업을 하는 분들이 많이 있습니다. 예를 들어 circle_mc라는 객체를 만들고, circle_mc가 존재 하는 레이어 바로 위에 새로운 레이어를 만든 후에 trace(circle_mc)라는 코드를 입력하여 실행해 보면 다음 과 같은 결과가 나옵니다.

실행 결과

[object MovieClip]

 예상했던 대로 trace문은 circle_mc를 인식하고 결과를 나타내 줍니다. 그럼 action 레이어와 circle_mc 레이어의 위아래를 바꾸면 어떻게 될까요? 레이어를 클릭한 후 드레그해서 action 레이어를 circle_mc레이어 아래로 이동시킨 후 다시 실행 시킨 결과는 다음과 같습니다.

 

실행 결과

[object MovieClip]

 레이어 위치에 상관없이 똑같은 결과가 나옵니다. 이는 Timeline 에 만들어진 circle_mc의 참조를 어느 레이어에서나 상위, 하위에 상관없이 접근이 가능하다는 의미입니다. 하지만 코드로 생성되어 지는 객체에 대해서는 다른 결과를 나타냅니다. 예를 들어 2개의 레이어를 가지고 있는 Timeline이 있습니다. 위에 있는 create 레이어에는 trace(circle_mc); 라고 코드를 입력하고 아래 있는 trace 레이어에는 var circle_mc:MovieClip = new MovieClip(); 라고 코드를 입력 한 후 Ctrl+Enter를 눌러 실행 시킵니다.

실행 결과

[object MovieClip]

레이어의 코드 실행 순서는 상위에 있는 레이어부터 시작하기 때문에 [object MovieClip] 이라는 결과를 나타냅니다. 하지만 위아래 레이어의 위치를 바꾼 후에 실행하면 어떤 결과가 나타날까요?

실행 결과

null

 null 객체가 존재 하지 않는 다는 의미를 가지고 있는 null을 나타냅니다. 이렇게 코드의 작성 위치에 따라 코드가 길어질 경우 복잡한 에러를 발생시키는 요인이 되기도 합니다. 이러한 코드의 실행 관계는 프레임에 작성하는 코딩뿐만 아니라, 클래스 코딩에서 중요한 부분입니다. 여러 분들은 앞으로 이 에러를 자주 보게 될 것입니다.

 실행결과

TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.

at 1_fla::MainTimeline/frame1()

 해당 에러를 줄이기 위해서는 코드가 실행되는 전후 관계를 확실하게 파악해야 한다는 점을 다시 한 번 강조 합니다. 정리하면, 프레임1부터 프레임 20까지 모든 프레임에 AS 코드가 작성 되어 있을 경우 재생 헤드의 움직임에 따라 모든 코드가 실행될 것입니다. 어떤 분들은 꼭 stop() 메소드로 재생 헤드를 정지 시켜야만 해당 프레임에 있는 코드가 실행되는 것이라고 잘못 이해하고 있습니다. 재생 헤드가 위치한 순간 코드는 실행되는 것입니다. 이 말은 재생 헤드가 지나가지 않은 프레임에 있는 코드는 실행되지 않는다는 의미입니다. 따라서 실행되고 있는 프레임보다 뒷 프레임에 정의된 코드에 포함된 변수를 아무리 참조해 봤자 null 값이 나오는 것은 당연한 것입니다.

 Flash 에서의 레이어

  레이어는 투명한 도와지 입니다. 애니메이션 작업을 할 때, 등장인물과 배경을 따로 그린 후에 합치는 작업을 하는 것처럼, Flash 에서도 레이어 개념을 가지고 각각의 레이어에 만들어 지는 객체들은 도와지에 그려지게 되는 것입니다. 하지만 이 도와지 들은 하나의 객체(MainTimeline 이나 MovieClip)에 속해 있고 위, 아래 개념을 가지고 있습니다. 그림과 같이 A 도와지에 파란 원을 그리고 B도와지에 빨간 원을 그린다면, A 에서의 파란 원의 좌표와, B 에서의 빨간 원의 영역이 겹치지 않는 한, 두 원 모두 보이는 객체로 처리가 됩니다. 하지만 A에 있는 파란 원이 B의 빨간 원과 영역이 겹친다면 파란원은 빨간 원에 가려서 안 보이게 됩니다. 만약 빨간 원과 파란원의 영역이 완전히 겹쳐서 파란원이 안 보인다고 해서 파란원이 사라진 것은 아닙니다. 단지 B 레이어가 A 레이어 보다 아래 존재하기 때문에 가려진 것입니다. 이 개념은 뒤에서 다룰 Index 개념과 비슷한 특징을 가지고 있습니다. Index 역시 위, 아래 개념을 가지고 있지만 레이어와는 다른 것입니다. 레이어는 Flash 툴 상에서 Timeline을 가지고 있는 객체 즉 MainTimeline 이나 MovieClip 등이 가지고 있는 그래픽 작업을 도와주기 위한 방법으로서 제공 되는 기능입니다. 이 개념은 에 다룰 Index 개념과 혼동 될 수 있으니 확실하게 알고 넘어가시기 바랍니다.

Depth 와 Index 에 대해 자세히 알고 싶다면 이 포스팅을 읽어 보세요.