Flash Programming 란?2010.03.07 15:05

 지금까지 Flash 에서의 Timeline 에 대해 알아보았습니다. Timeline 에 대한 개념이 정리가 되셨는지요? 보통 사람들은 아래 그림 A와 같이 흰 도화지 안에 Timeline이 존재 하는 줄 알고 있습니다. 하지만 실제로는 반대입니다.



그림 A

그림 B



 그림 B와 같이 Timeline 안에 희 도화지가 속해 있는 형식으로 구성되어 있습니다. Timeline의 한 프레임 당 하나의 흰 도화지를 가지고 있고, 코드를 입력 할 수 있는 공간을 가지고 있습니다. 그림 A와 B는 단순히 Timeline 이 흰 도화지 보다 크다 (Timeline > 흰 도화지) 라는 의미를 뜻하지만, Flash의 구조 안쪽으로 들어가면 Flash에서의 객체라는 것의 뿌리가 되는 개념입니다. 왜냐 하면 모든 객체들은 이 Timeline에 속하게 되므로서 사용자들에게 보일 수 있게 되는 것이기 때문입니다. 이번 장을 진행하면서 왜 Timeline이 Flash의 구조의 뿌리가 되는 이유에 대해 살짝 엿보고, Flash에서의 객체가 어떻게 정의 되어 있고, 생성 되었다가 소멸 되는 과정에 대해 이야기 해 볼 것입니다.


 Flash는 객체기반 툴입니다. Flash에서 사용되는 것들 중에 객체가 아닌 것은 없을 정도로 모두 객체로 이루어져 있습니다. 지금 말하고 있는 객체란, MovieClip과 Button 그리고 툴로 그릴 수 있는 모든 것들을 의미 합니다. 잠시 객체의 의미에 대해 잠깐 짚고 넘어가겠습니다. 사전에서는 객체를 이렇게 정의 하고 있습니다.



 객체 [客體, object]

객체 지향 프로그래밍(OOP)이나 설계에서, 데이터(실체)와 그 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념. 예를 들어 기차역에서 승차권을 발매하는 경우, 실체인 ‘손님’과 동작인 ‘승차권 주문’은 하나의 객체이다. 실체인 ‘역무원’과 동작인 ‘승차권 발매’도 하나의 객체이다.



백과 사전에서 정의한 것과 같이 동작의 주체가 되는 사람이나, 사람이 하는 동작 자체도 모두 객체라고 할 수 있습니다. 프로그래밍을 처음 접하는 사람들은 객체를 이해 할 때 사람과 같은 정해진 사물은 객체라고 이해 하지만, 동작이나 수학 공식을 처리해 주는 객체 같은 경우에는 객체가 아니라고 생각하는 경우가 많습니다. 객체는 보통 생각하는 것 보다 더 커다란 의미를 가지고 있습니다. 예를 들어 놀이터에 철수와 영희라는 객체가 놀고 있습니다. 놀이터에는 그네 객체, 미끄럼틀 객체가 있고 철수와 영희는 이들 놀이 기구 객체들을 사용할 수 있습니다. 이 경우는 모두 객체의 구분이 분명하기 때문에 이해하기에 어려움이 없을 것입니다. 하지만, 객체는 이러한 경우뿐만 아니라 우리가 행하는 동작이나, 기계들이 가지고 있는 기능들의 모음 또는 문서에 저장되는 데이터 모두 객체라고 할 수 있습니다. 이러한 객체들을 이용하는 툴을 객체 기반 툴이라고 하고, 객체 기반 언어라고 하는 것입니다. 그럼 Flash 에서의 객체는 어떤 것이 있을까요? 예를 들어 보겠습니다. Flash를 실행시키면 바로 보이는 것은 흰 도화지입니다. 그리고 그 아래 타임라인, 옆에는 Color패널과 Properties 와 라이브러리패널이 위치하고 있습니다. 이들 모두 객체입니다. 그리기 툴을 이용해서 사각형을 그린다고 하면, Color 패널을 사용하여 그리고 난 후에 사각형의 색상을 변화 시킬 수 있습니다. 왜 변화 시킬 수 있을까요? 그건 그려진 사각형에 color 라는 속성을 가지고 있기 때문에 변경을 할 수 있는 것입니다. 객체는 아무 것도 없는 빈 상태로 다른 객체를 담을 수 있는 역할도 하고, 속성과 메소드를 추가하여 그 자체로서 역할을 갖기도 합니다.

객체의 의미에 대해서 어느 정도 감이 왔을 것이라 생각이 듭니다. 그럼 본격적으로 Flash의 객체 구조에 대해서 다뤄 보도록 하겠습니다.


  • Flash 의 Display 구조

 Flash는 기본적으로 가지고 있는 구조가 있습니다. 과일을 담으려면 바구니가 필요하듯, Flash는 자체적으로 객체를 담을 그릇을 가지고 있습니다. 그 그릇이 바로 이전 포스팅에서 배웠던 Timeline입니다. 지금까지는 Timeline이라고 말했지만, 이 Timeline은 실제로 MainTimeline이라고 불리는 Flash에서 최상위 부모(바구니) 역할을 하는 객체입니다. 하지만 바구니가 있다고 해서 그 바구니가 가장 크기가 큰 개념은 아닙니다. MainTimeline 위에는 Stage 라는 객체가 더 존재하게 됩니다. 이러한 관계는 부모와 자식의 관계로 비유 하는 경우가 많으나, 여기에서는 바구니를 놓는 공간과 큰 바구니의 관계로 비유해 보겠습니다. Flash는 기본적으로 Stage 라는 공간 안에, MainTimeline 이라는 Timeline을 가지고 있는 바구니가 들어가게 됩니다. 그리고 그 MainTimeline 안에 모든 객체들이 만들어 지는 것입니다. 아래 그림을 보면 그러한 관계가 나타나 있습니다. 실제로 이러한 관계는 코드를 통해 확인해 볼 수 있습니다.





첫 번째 프레임에 아래 코드를 입력 합니다.

trace("this.parent : "+this.parent);

trace("this : "+this);


실행결과

this.parent : [object Stage]

this : [object MainTimeline]

 


실행 결과에서 볼 수 있듯이, 아무 것도 존재 하지 않은 상태의 this 는 MainTimeline을 가리키고 있습니다. 그리고 부모 객체를 알 수 있게 해 주는 parent 속성을 통해 MainTimeline의 부모를 보니 Stage 라고 나오는 것을 확인할 수 있습니다. 이와 같이 Flash는 사용자가 객체를 만들기 전에 그 객체가 담겨질 그릇에 해당하는 Stage와 MainTimeline을 준비해 놓고 객체가 만들어 지기만을 기다립니다.

Flash의 display 구조는 Stage-MainTimeline-만들어지는객체 로 이루어져 있습니다. 하지만 같은 객체를 나타내는 것이라도, 표현 방법은 여러 가지가 있습니다.



// 기본 display list

trace("this :"+this);

trace("this.parent :"+this.parent);

trace("this.stage :"+this.stage);

trace("-------------------------");


// root 에 관하여

trace("root : "+root);

trace("this.root :"+this.root);

trace("this.stage.root :"+this.stage.root);


//결과

this :[object MainTimeline]

this.parent :[object Stage]

this.stage :[object Stage]

-------------------------

root : [object MainTimeline]

this.root :[object MainTimeline]

this.stage.root :[object Stage]

 



이와 같이 같은 의미 이지만, 다르게 표현 될 수 있는 경우가 많이 있습니다. 또한 코드를 MainTimeline에 작성했을 경우에는 위와 같은 결과를 나타내지만, 빈 스테이지에 무비클립을 만든 후 그 안에 아래와 같은 코드를 입력할 경우에는 결과가 달라집니다.



 

// 기본 display list

trace("this :"+this);

trace("this.parent :"+this.parent);

trace("this.stage :"+this.stage);

trace("-------------------------");

// root 에 관하여

trace("root : "+root);

trace("this.root :"+this.root);

trace("this.stage.root :"+this.stage.root);

// 결과

this :[object Symbol1_1]

this.parent :[object MovieClip] // MainTimline이 나올 것이라 예상했을 것이다.

this.stage :[object Stage]

-------------------------

root : [object MovieClip]

this.root :[object MovieClip]

this.stage.root :[object Stage]



stage 관련 코드를 제외 하고는 모두 결과가 바뀌었습니다. 왜 그럴까요? 결과 분석에 앞서 root의 개념에 대해 짚고 넘어 가겠습니다. root 속성은 어떠한 객체가 포함되고 있는 최상위 부모객체를 나타내는 속성입니다. 예를 들어 보겠습니다. 빈 스테이지에 SuperMother이 있고, 그 안에 Mother, 또 그 안에 Child 라는 무비 클립 객체가 있습니다.




// 각각의 무비 클립은 포함 관계에 있으며 instanceName이 부여 되어 있다.

trace(_supermother.root);

trace(_supermother._mother.root);

trace(_supermother._mother._child.root);

// 결과

[object MainTimeline]

[object MainTimeline]

[object MainTimeline]

 


결과와 같이 root는 자기 자신이 존재하고 있는 최상위의 부모를 나타냅니다. MainTimeline 과 Stage는 자기 자신이 최상위이기 때문에 root 속성을 보아도 자신이 출력 되는 것입니다.

 

Adobe에서 제공하고 있는 as3.0 설명서에서 DisplayObject에 root 속성을 찾아보면 상황에 따라 root 가 어떻게 다르게 쓰이는가를 볼 수 있습니다. 아직 배우지 않은 개념들을 이용해서 설명해야 하므로 관련된 포스팅에서 더 자세히 알아보도록 하겠습니다.

 

 다시 이전 예제로 돌아가서, MainTimeline으로 나올 것이라 생각했던 값이 MovieClip으로 출력되었습니다. 그 이유는 스테이지 위에 생성된 무비클립에서는 자기 자신의 부모의 타입이 MovieClip 이라는 것은 알고 있지만, 정확한 이름을 알고 있지 못하기 때문에 MovieClip 이라고 출력해준 것입니다. 해결 방법은 간단합니다. Flash에 이름을 알려주면 되는 것이지요. 소스는 생성된 무비 클립 안에 작성 되었으니, trace(this.root); 코드를 MainTimeline에 입력해 봅시다.



 

// 기본 display list

trace("this :"+this);

trace("this.parent :"+this.parent);

trace("this.stage :"+this.stage);

trace("-------------------------");

// root 에 관하여

trace("root : "+root);

trace("this.root :"+this.root);

trace("this.stage.root :"+this.stage.root);

// 결과

[object MainTimeline]

this :[object Symbol1_1]

this.parent :[object MainTimeline]

this.stage :[object Stage]

-------------------------

root : [object MainTimeline]

this.root :[object MainTimeline]

this.stage.root :[object Stage]



MainTimeline 에서는 자신이 MainTimeline이라는 것을 알고 있었기 때문에, MainTimeline이라 출력해 주었고, Flash는 가장 먼저 실행되는 trace(this.root);를 통해서 정보를 알게 되었기 때문에 MovieClip 으로 출력해 주었던 것은 MainTimeline 으로 좀 더 객체를 명확하게 나타내 주었습니다. 이와 같이, 같은 키워드를 사용하는데도 불구하고 자신의 의도와는 다르게 나타나는 경우가 있습니다. 특히 this 와 root 그리고 parent의 개념을 잘 알고 사용해야 버그를 줄일 수 있습니다. 


 

this 의 의미 변화


AS2.0때까지만 해도 this가 의미 하는 것은 같은 코드 페이지에서 사용하여도 this를 사용하는 함수에 따라 달라졌습니다. AS2.0 코드에서는 아무것도 없는 스테이지상에서 trace(this);를 입력해 보면 _level0 이라는 최상위 표시객체를 나타내 줍니다. 하지만 스테이지 상에 mc 라는 무비 클립을 만든 후에 onRelease 이벤트를 걸어준 후에 나타나는 this는 _level0.mc입니다.


 이와 같이 같은 페이지(객체)에 코딩을 하고 있더라도, this의 의미는 어떤 이벤트에서 사용되는가에 따라 그 이벤트의 행위의 주체가 되는 객체로 의미가 바뀌면서 사용 됩니다. 아래의 코드를 보면 이벤트에 속해 있지 않았을 때의 this 는 _level0 은 나타내고 있지만, onRelease 라는 이벤트 안에서는 이벤트의 주체가 되는 _level0.mc를 가리키고 있는 것을 보면 이와 같이 동작하고 있다는 것을 알 수 있습니다. 하지만 as3.0 에서는 달라졌습니다.



trace(this);

mc.onRelease = function(){ // AS2.0 에서의 Click 이벤트입니다.

trace(this);

}

 

// 결과

_level0

_level0.mc // mc 라는 무비 클립을 클릭했을 때



 as3.0 의 경우 ‘같은 객체’ 안에서 사용되는 this의 의미는 항상 코드가 입력되고 있는 자기 자신을 나타냅니다. 우리가 지금 하고 있는 프레임 코딩 같은 경우에는 코드를 입력하는 장소가 MainTimeline 이기 때문에 최상위의 프레임일 경우 this는 항상 MainTimeline을 가리킵니다. 위에서 ‘같은 객체’ 라고 표현한 이유는 앞으로 우리들은 MainTimeline 뿐만 아니라, 새로운 객체(클래스)를 만들어서 그 안에 코딩 할 것이기 때문에 표현을 한정시킨 것입니다. 빈 스테이지에 무비 클립을 만든 후에 더블클릭으로 만들어진 무비클립의 타임라인에 trace(this); 라고 코딩해 보면 [object Symbol1_1] 라는 결과를 출력합니다. 무비 클립을 만들 당시에 객체 이름 즉, 클래스 이름을 정의 하지 않았기 때문에 Flash에서는 임의로 Symbol1_1 이라는 이름을 부여한 것입니다. 이 이름은 무비클립을 만들 때 입력했던 Name을 바탕으로 만들어 지는 것이나, 실제로 여기서 만든 무비 클립을 바로 동적으로 생성하여 사용할 수는 없습니다. Linkage 라는 클래스 연결 작업을 통해서 하나의 클래스 객체가 되는 것입니다. 다시 this의 의미로 돌아와서, as3.0 에서의 this는 항상 자기 자신을 가리킵니다. this를 통해서 자신의 부모객체인

this.parent 로 접근할 수 있으며, 자신의 자식 객체가 존재할 경우에는 this.자식객체이름 으로 접근 가능한 것입니다. 마지막 예로 AS2.0 에서는 이벤트에 포함했을 때 this의 의미가 바뀌었으니, as3.0 에서는 이벤트에 포함된 this 는 어떤 의미를 나타내는지 보겠습니다. 위의 예제와 같이 빈 스테이지에 무비 클립을 만든 후 이벤트를 걸어 줍니다.



trace(this);
mc.addEventListener(MouseEvent.CLICK, onClickHandler);  // as3.0의 Click이벤트
function onClickHandler(event:MouseEvent):void
{
trace(this);
}

// 결과
[object MainTimeline]
[object MainTimeline]     // mc 라는 무비 클립을 클릭했을 때



이와 같이 MainTimeline 에 작성된 this 는 모두 MainTimeline을 가리킵니다.


Posted by Flash 동강
Flash Programming 란?2010.02.15 11:52

  지금 까지 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 에 대해 자세히 알고 싶다면 이 포스팅을 읽어 보세요.





Posted by Flash 동강
Flash Programming 란?2010.01.30 15:34

  • Timeline 제어

 Flash의 Timeline이 그냥 시간에 따라 진행 되는 것만은 아닙니다. AS를 통해서 이를 제어하고 코드가 발생하는 순서를 정할 수 있습니다. 기본적으로 Timeline을 제어 하는데 사용하는 액션은 다음과 같습니다.


- stop() : Timeline에 있는 재생헤드를 정지합니다.

- play() : Timeline에 있는 재생헤드를 움직입니다.

- gotoAndPlay(frame, scene =null) : 해당 Scene 에 존재하는 frame으로 이동한 후 재생헤드를 움직입니다.

- gotoAndStop(frame, scene =null) : 해당 Scene 에 존재하는 frame으로 이동한 후 정지 합니다. (정지상태)



 gotoAndPlaygotoAndStop의 파라미터로 들어가는 scene 의 경우는 생략이 가능합니다. 위에서 =null 이라고 선언되어 있는 것은 해당 파라미터가 입력되지 않았을 때는 scene 값을 null 값으로 처리 하겠다는 의미입니다. Timeline에 여러개의 프레임이 존재 하고 있을 때 재생헤드는 현재 머물고 있는 프레임에 해당하는 일을 마친 뒤 다음 프레임이 존재 한다면 다음 프레임으로 자동으로 넘어가서 또 그 프레임에 있는 일을 처리 합니다. 하지만 이러한 동작은 사용자가 원하지 않는 것일 수도 있습니다. 평소에는 프레임 1에 있는 것을 보여 주다가 어떠한 이벤트가 발생 했을 때 다른 프레임으로 이동 시키고 싶은 경우 평소에는 재생 헤드가 항상 프레임 1에 존재해야 되기 때문에 stop() 함수를 사용하게 됩니다. Timeline을 제어 하는 액션은 아주 다양한 용도로 사용 되고, 많은 것을 만들 수 있게 도움을 주는 메소드입니다. 예를 들어, Flash에는 마우스가 오버, 다운, 업 일 때의 이벤트를 처리를 미리 구현해 놓은 SimpleButton이라는 객체가 있습니다. SimpleButton은 내부적으로 구현되어 있는 객체지만 위의 Timeline을 제어 하는 메소드만을 이용하여 만들 수 있습니다. 우선 SimpleButton이 어떻게 구성되어 있는지부터 알아보겠습니다. 



 1. Flash File(Actionscript3.0) 로 새로운 파일을 생성 한후, Rectangle Tool(R)을 이용하여 사각형을 만듭니다.



2. 사각형을 선택 한 후, F8 또는 Modify-Convert to Symbol...을 선택하고 Type을 MovieClip으로 선택 한 후 OK를 누릅니다. 




3. 만들어진 MovieClip 객체를 마우스로 클릭 한 후, 우측 상단에 있는 Properties에 Instance Name을 입력하는 곳에 rect_mc라고 이름을 입력합니다.

 


4. 사각형을 더블클릭하여 하위 객체의 Timeline으로 이동한 후 2,3 프레임에 마우스 오버일 때의 상황과 마우스 버튼을 클릭 했을 때의 상황을 정의 합니다. 이 예제에서는 3개의 프레임에 각각 아래와 같은 도형을 그려 넣었습니다. 그리고 프레임 1에 stop(); 메소드를 입력 합니다.


 




5. 다시 상단에 있는 네비게이션 버튼을 클릭하여 Scene1(상위객체)로 올라 와서 프레임 1에 아래의 코드를 입력 합니다.




// 코드

stop();                   // 재생헤드가 움직이지 않게 정지 시킨다.// 각각의 이벤트를 등록해 준다.rect_mc.addEventListener(MouseEvent.MOUSE_UP,onUphandler);rect_mc.addEventListener(MouseEvent.MOUSE_OVER,onOverhandler);rect_mc.addEventListener(MouseEvent.MOUSE_OUT, onOuthandler);rect_mc.addEventListener(MouseEvent.MOUSE_DOWN,onDownhandler); function onUphandler(event:MouseEvent):void{        rect_mc.gotoAndStop(1);}function onOverhandler(event:MouseEvent):void{         rect_mc.gotoAndStop(2);}function onOuthandler(event:MouseEvent):void{         rect_mc.gotoAndStop(1);}function onDownhandler(event:MouseEvent):void{         rect_mc.gotoAndStop(3);}



 위에서 만든 사각형에 rect_mc 라는 이름(Instance Name)을 적용하므로써 코드에서 접근을 할 수 있게 되었습니다. rect_mc 에 Flash가 정의하고 있는 4가지 마우스 이벤트를 정의하고, 이벤트에 종류에 따라 gotoAndStop 문을 써서 재생헤드의 위치를 변경 하였습니다. 이 예제에서는 마우스의 움직임에 따라 rect_mc안에 있는 Timeline을 조작하므로 SimpleButton와 같은 동작을 하게 됩니다. (객체에 마우스 이벤트가 발생하는 과정은 후에 자세히 다룰 것임으로 생략 합니다.) 이러한 원리를 이용하면, 사용자의 마우스 움직임에 따라 마우스 이벤트가 발생한 객체뿐만 아니라, Timeline을 가지고 있는 모든 객체의 Timeline 속성을 조절할 수 있습니다. 여러 웹 사이트를 돌아다니다 보면, 화려한 모션과 함께 사용자의 반응에 따라 액션이 일어나는 사이트들이 많이 존재 합니다. 이러한 사이트들의 대부분이 이러한 Timeline을 메소드를 사용하는 이벤트만으로도 쉽게 만들 수 있습니다. 다만 Adobe AfterEffect 와 같은 모션 툴에서 한 작업을 Flash 의 Timeline으로 가져와서 조절하기 때문에 가능해지는 것입니다. 물론 Flash로 작업한 애니메이션도 가능합니다. 이렇게 타임라인을 이용한 작업은 간단하게 멋진 결과물이 나올 수 있게 도와줍니다. 


 하지만, Timeline 의 프레임 번호만을 가지고 재생헤드를 이동시키는 것은 여간 번거로운 작업이 아닐 수 없습니다. 프레임 번호를 맞춰가면서 gotoAndPlay를 사용해 가며 인터렉션을 만들었다고 해도, 유지보수가 있을 때 Timeline의 길이가 변하거나, 효과가 변하는 일은 비일비재 하게 일어나는 일이기 때문에 또 다른 방법을 요구 하게 됩니다. 그래서 Flash는 이러한 번거로움을 줄이기 위해 Timeline에 label 속성을 제공해 주고 있습니다. label 속성이란, Timeline을 조절할 때 프레임 번호로 위치를 참조해야 하는 번거로움을 없애기 위해 해당 프레임에 이름을 부여 하는 기능입니다. 아래 그림과 같이 마우스로 프레임을 선택하면 Properties 창에 LABEL 속성이 나타나게 됩니다. Name 에 해당 프레임으로 지정하고 싶은 Name을 입력하게 되면 해당 프레임은 지정된 이름의 참조 값을 갖게 됩니다. 



이 그림에서는 프레임 1에 Out, 프레임 10에 Over, 프레임 20에, Down 이라는 이름을 지정하였습니다. 이렇게 LABEL 값이 정해지게 되고, 위에서 구현했던 소스를 다음과 같이 변경하면 같은 기능을 하게 됩니다.


// 코드

부록 CD: Example\1-4\1_4_3.fla// 이벤트 등록 부분이 동일함으로 생략하였습니다.// 바뀐 부분은 bold 처리 되었습니다.function onUphandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Out");}function onOverhandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Over");}function onOuthandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Out");}function onDownhandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Down");}


 이러한 간단한 구조의 Timeline 에서는 필요하다는 느낌을 받지 못할 수도 있습니다. 하지만, 언제 바뀔지 모르는 프레임 번호를 신경 쓰기보다는 label을 지정함으로서 예측 할 수 없는 유지 보수에 대해 대비 할 수 있고, 훨씬 유연하게 대처할 수 있는 작업 방법입니다.


 지금까지 Timeline을 제어 하는 방법에 대해 알아보았습니다. Timline을 어떻게 조절하고 어떤 효과를 삽입하느냐에 따라 gotoAndPlay 만으로도 멋진 Flash를 만들 수 있는 비결이 될 수 있습니다. 그만큼, Timeline을 기반으로 하고 있는 Flash 프로그래밍에서 Timeline 제어는 중요한 부분을 차지하고 있습니다. 

 

Posted by Flash 동강
Flash Programming 란?2010.01.24 09:33
  • 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는 프레임을 이동하므로 액션과 이벤트가 실행되는 절차 기반 프로그래밍 구조를 가지고 있습니다.




Posted by Flash 동강
Flash Programming 란?2010.01.16 23:58


  예전부터 간간히 써오던 문서를 블로그에 올리기 시작하였습니다. 문서의 내용이 Flash 프로그래밍의 기초를 다루고 있고 제가 예전에 썼던 "동강의 AS3.0 강좌" 의 내용을 자세히 풀어 썼다고 보시면 될것 같습니다. 처음 Flash 공부를 시작 하시는 분들에게 도움이 되었으면 하네요. 문서 내용에 대한 질문은 댓글로 달아 주세요.

 

  • Flash 프로그래밍이란 ?

 

 새롭게 Flash 를 배우려고 하시는 분들은 Flash 버젼은 뭐가 있고 언어는 뭘로 시작해야 하는지 막막 하실 겁니다. 우선은 Actionscript3.0 학습법을 읽고 본 문서를 보는 것을 추천 드립니다. 그러면 자연스레 AS3.0 과 Flash CS3 이상의 Flash IDE로 공부를 해야 겠다는 마음을 먹으실 겁니다. 본 문서는 Flash CS4 로 진행 됩니다.

 

 

 예전에 쓴 문서를 보면 왜 Actionscript3.0(이하 AS3.0) 을 사용해야만 하는가에 대해 다루고 있습니다. 하지만 AS2.0 보다 좋다는 것을 알았다고 해서 그동안 편리하게 사용해왔던 AS2.0에서 AS3.0으로 옮기기란 여간 힘든 일이 아닙니다. 저 또한 AS1.0, 2.0을 사용하여 Actionscript 프로그래밍을 시작해서, AS3.0으로 옮기기까지는 적지 않은 노력을 해야만 했습니다.

 

 Flash 프로그래밍은 이미 많은 개발자들이 사용하고 있는 C, C++, Java 보다 쉬워 보이면서 접근하기 어려운 면을 가지고 있습니다. 물론 개인적인 차이도 있겠지만, 제 주위에는 Java를 하던 C 를 하던 AS는 프로그래밍 언어 이면서 조금 다른 느낌이 난다고 어려워 하는 사람들을 보았습니다. 디자이너나 타언어의 개발자들이 Flash 프로그래밍을 어렵다고 생각하는 이유는 무엇일까요? 바로 Timeline 이 존재하기 때문입니다. 일반 언어와는 다르게 시간의 흐름에 따라 이벤트가 발생하고 애니메이션이 움직이는 Timeline 의 존재가 있기 때문에 다들 어렵다고 합니다. 하지만 이러한 Timeline 이 있기 때문에 Flash 프로그래밍이 가능해 지는 것이고, 모든 Actionscript(이하 AS)의 원리는 이 Timeline에서부터 시작하게 됩니다.

 

 Flash CS4를 실행 시키면 흰색 캔버스가 눈에 들어옵니다.

 

 

앞에서 Flash는 Timeline을 가지고 있다고 말 하였는데, 위 그림 하단에 보이는 것이 바로 Timeline입니다. 이곳에 애니메이션을 적용하거나, Flash CS4에서 제공하는 많은 툴 작업을 통해 간단하게 플래시 애니메이션을 적용시킬 수 있는 공간입니다. 이 공간은 단지, 애니메이션을 위한 공간으로서 존재 하는 것은 아닙니다. Timeline 이 존재 하므로 Actionscript를 사용하지 않아도 화려한 모션이라든지, 간단한 인터렉티브가 가능해 집니다. (타임 라인에 코드 삽입도 가능합니다 )

 

  • Frame rate

 

Flash에는 Timeline이 존재함과 더불어 FPS(framerate)를 통해서 Flash가 SWF로 컴파일 됐을 때 렌더링 속도를 조절하는 방법을 제공해 주고 있습니다. 아래 그림에서 오른쪽에 FPS : 24.00 부분에서 이 속성을 조절할 수 있습니다.

 

 FPS 가 24 라는 의미는 1초에 24 프레임이 이동하는 속도로 렌더링을 하겠다는 의미입니다. 애니메이션에서 그림을 24 프레임으로 처리 했다는 의미와 같습니다. 이 FPS 는 보통 24~36 frame 으로 조절하여 사용합니다. 숫자가 커질수록 처리에 사용하는 프레임을 많이 사용하겠다는 의미이고 컴파일 된 SWF 는 더욱 부드러운 느낌을 줍니다. 반대로 작아질수록 화면이 자연스럽지 않고 끈기는 느낌을 주게 됩니다. 이러한 FPS를 조절하는 것은 작업자의 몫입니다. 물론 FPS를 높게 하여 더욱 부드러운 느낌을 주면 좋겠지만, FPS를 높게 설정 할수록 단위시간당 처리해야 되는 프레임 수가 늘어나므로 SWF가 요구 하게 되는 CPU 사용량을 증가 하게 됩니다. 더욱이 SWF는 주로 html 에 올려 웹에서 보여 지는 경우가 많기 때문에 FPS를 잘 설정 하여 테스트 하는 것이 중요합니다. 이 속성은 작업자가 fla파일 자체에서 컨트롤 할 수도 있지만 AS를 이용하여 동적으로 조작하는 것도 가능합니다. frameRate라는 속성을 조작하여, SWF가 전반적으로 CPU를 적게 차지하고 있을 때는 frameRate(fps)를 높게 주어 부드럽게 동작 시키고, 데이터를 불러 오는 작업이나, 한번에 많은 모션이 동작할 때에는 CPU의 부담을 덜어 주기 위에 frameRate는 줄이는 방법을 사용하기도 합니다.

Posted by Flash 동강