Flash/Flex AS3 - Flash Timeline 과 실행 순서 Part.2

• TimeLine



 시작부터 Timeline의 중요성에 대해 강조를 했습니다. 그 이유는 메인에 존재 하는 Timeline 이 실제로 MainTimeline 이라는 Flash 객체이기 때문입니다. 많은 사람들이 Timeline은 그냥 Flash툴에 속해 있는 도구로만 인식하는 경우가 많이 있습니다. 하지만 Timeline은 단지 도구로서의 의미보다 더 중요한 위치를 차지하고 있습니다. 왜냐 하면 Flash에서 생성되고 삭제되는 모든 객체들은 이 MainTimeline 위에 생성되고 삭제되기 때문 입니다. 모든 객체를 담는 그릇과 같은 역할을 하는 것입니다. 즉, 최상위에 있는 부모역할을 담당하고 있습니다. Actionscript 에서도 MainTimeline은 중요한 역할을 합니다. 최상위의 부모 역할 뿐만 아니라, 일반적으로 .as (클래스파일)로 작성되지 않은 AS 코딩은 타임라인 위에 작성되기 때문입니다.

Flash는 Timeline에 코드를 삽입 할 수 있는 특징을 가지고 있습니다. 아래 그림과 같이 자신이 원하는 프레임을 선택하고 F9또는 상단메뉴의 Window-Actions를 선택하면 코드를 입력할 수 있는 창이 뜨게 됩니다.

 각각의 프레임들은 코드를 입력 할 수 있는 공간을 가지고 있지만, 모든 프레임에 코드를 입력 할 수 있는 것은 아닙니다. 프레임은 빈 프레임과 키 프레임 두 가지 종류가 있는데, 오직 키 프레임에만 코드를 입력 할 수 있습니다. Timeline을 선택하고 마우스 오른쪽 버튼을 클릭 하였을 때 아래 그림과 같이 Insert Keyframe을 이용하여 삽입한 프레임이 키 프레임입니다. 

 빈 프레임은 프레임에 아무런 표시가 없지만 키 프레임은 아래쪽에 원이 표시 되어 구분 할 수 있습니다. Timeline에는 오직 키 프레임에만 코드를 입력할 수 있고, 타임라인 위에 작성 되어지는 AS는 키 프레임의 순서에 따라 실행 되게 됩니다. 1 프레임에 작성된 AS 가 먼저 실행이 되고 시간의 흐름에 따라 2,3,4 .... 순서대로 실행됩니다. 예를 들어 보겠습니다. 

 1. Flash CS를 실행시킨후, Flash File(Actionscript3.0) 로 새로운 파일을 생성 합니다.

2. 하단에 있는 Timeline의 1 프레임을 선택 한 후 F9를 눌러 Script를 입력 할 수 있는 창을 띄움니다.

3. Actions창에 다음 코드를 입력 합니다.

trace("프레임 1“);   // trace는 문자나 객체의 속성을 output창에 나타내 주는 메소드입니다. 

4. Timeline에서 15 프레임을 선택하고 F6 또는 마우스 오른쪽 버튼 - Insert keyframe을 선택 하여 15 프레임을 키 프레임으로 생성 합니다. 

5 . 위의 1~3 작업과 같이 F9를 눌러서 Actions창에 다음 코드를 입력 합니다.

trace("프레임 15“);

6. Crtl + Enter 또는 Control - Test Movie메뉴를 이용하여 지금까지 만든 작업을 실행 시킵니다. 

실행 결과

프레임 1

프레임 15

프레임 1

프레임 15

프레임 1

반복 ..... 

 

 결과에서 볼 수 있듯이 프레임의 순서에 따라 액션코드가 실행된다는 것과 마지막 프레임에 가서 멈추는 것이 아니라 계속 루프가 돈다는 것을 알 수 있습니다. 액션코드 및 애니메이션의 시작은 Timeline 위에 존재하는 재생헤드(빨간 라인)의 움직임에 따라 실행됩니다. fps를 조절 함에 따라 재생헤드의 움직임을 조작할 수 있는 것이고, 위의 예제와 같이 각각의 프레임에 입력된 코드가 순서에 따라 실행 되는 것처럼, 애니메이션도 각각의 프레임에서는 움직임이 없지만, 재생헤드가 이동함에 따라 움직이는 것처럼 보이게 되는 것입니다. 이렇게 Flash는 프레임을 이동하므로 액션과 이벤트가 실행되는 절차 기반 프로그래밍 구조를 가지고 있습니다.