사이트를 돌아다니다 보면 에니메이션 된 페이지를 많이 볼 수 있다.. 이 에니메이션을 페이지에 적용하는 방법은 여러가지가 있다.. 많이 들어서 잘 알겠지만, 매크로 미디어사의 플래시를 이용하면 쉽게 에니메이션을 적용할 수 있다..

그리고 또 다른 방법은 요즘 많이 사용하는 드림위버나 기타 웹 제작도구에 있는 타임라인이라는 것을 이용하는 것이다.. 물론 드림위버에서도 타임라인을 이용하여 이미지나 레이어에 에니메이션 효과를 주는 기능이 있다..

그럼 지금부터 드림위버의 타임라인을 이용하여 웹문서에 에니메이션 효과를 어떻게 주는지 알아 보도록 하자.. 우선 아래의 그림이 바로 타임라인 윈도우이다.. 타임라인 윈도우를 오픈 하려면 메뉴에서 Window => Timelines를 클릭하면 된다.. 물론 더 간단하게 단축키 Ctrl + F9 를 클릭하면 된다..

	Timeline List : 현재의 타임라인을 표시한다.. 타임라인이 여럿인 경우 역삼각형 모양을 클릭하고 선택을 할 수 있다..
	Rewind : 타임라인의 헤드를 첫번째 프래임으로 옮겨놓는다..
	Back & Play : 화살표 버튼을 클릭할 때마다 한 프레임씩 이동을 한다.. 물론 객체가 선택된 상태여야한다..
	Fps(Frame per second) : 타임라인의 속도를 지정한다.. 타임라인은 프레임의 진행 속도에 따라 이루어지는데 이는 초당 진행될 프레임 수를 지정한다..
	Auotplay : 이는 브라이저가 로딩과 동시에 타임라인 에니메이션이 자동으로 실행되게 할 것인지에 대한 설정이다..
	Loop : 이는 타임라인 에니메이션의 반복에 대한 설정이다.. 체크를 하지 않으면 한번만 실행이되고, 체크를 하면 무한정 반복이 되는 것이다..
	Behavior channel : 이벤트를 적용할 프래임에 삽입이 가능하다.. 자세한 설명은 아래에서 하도록 하겠다..
	Playback head : 현재 프래임이 위치한 곳을 지정한다.. 타임라인이 진행되면 함께 움직인다..
	Frame : 타임라인의 프레임을 표시하는데, 이 프레임이 타임라인이 진행되는데 있어 기본이 되는 시간이다..
	Animation Channel : 이미지와 레이어 같은 오브젝트 프래임의 진행에 따라 에니메이션이 이루어 지는 곳이다..

자 우선 위에서 타임라인의 구성에 대해서 알아 보았다.. 그러면 우선 예제를 보면서 설명을 하면 더 편할 것을 판단하고 일단 한번 만들어 보겠다... 예의 결과는 아래와 같다..

# 타임라인을 이용한 에니메이션 효과주지(Autoplay)

예제를 잘 보았을 것을 생각한다.. 이 예제는 레이어를 이용한 간단한 에니메이션 효과이다.. 우선은 새로운 도큐먼트 윈도우(작업창)를 띄우자.. (Ctrl + N)

그리고 레이어를 조그만하게 그려보자.. 뭐 레이어를 그리는 방법을 모르시는 분은 드림위버에서 레이어 이해하기를 참고하기 바란다..

아래의 그림은 도큐먼트 윈도우에 레이어를 만든 화면이다..

레이어를 만들고 나서 타임라인 윈도우를 오픈한다.. 단축키 Ctrl + F9 혹은 메뉴에서 Window => Timelines 를 클릭하자.. 그럼 타임라인 윈도우가 드는데 방금전에 만든 레이어를 선택한 상태에서 Animation Channel에 마우스를 대고 오른쪽 클릭을 하면 아래와 같은 그림이 나온다..

여기서 Add Object를 클릭하면 자동으로 타임라인에 아래 그림처럼 Layer1이라는 막대가 생긴다.. 그러면 선택한 레이어가 타임라인에 등록이 된것이다.. 플래시에 대해서 조금이라도 아시는 분들은 쉽게 이해가 될 것이라고 생각이 되구요.. 이젠 에니메이션 시키는 방법에 대해서 알아 보도록 하자.. 우선 1프레임에 Playback head를 둔 상태에서 레이어를 이동하여 최초 위치에 가져다 둡니다.. 즉 에니메이션 시작위치에 가져다 두시면 되겠죠.. 그리고 난 다음 아래의 그림과 같이 Playback head를 마지막 프래임(15)에 가져다 둡니다.. 그리고 레이어를 선택한 다음 에니메이션의 마지막 위치로 이동을 시킵니다..그러면 아래의 그림과 같이 최초 위치에서 마지막 위치로 이동을 했다는 표시(선)가 나타날 것입니다..

그리고 난 후 저장을 하고 브라우저로 확인을 해보기 바란다.. 그러면 에니메이션 되는 것을 볼 수 있을 것이다.. 간단하게 사용하면 위 설명대로 하면 된다.. 자 그럼 여기서 약간의 응용을 해 보도록 하겠다.. 직선으로만 움직이는 것이 아니라 위 예제처럼 곡선으로 움직이도록 해 보겠다..

우선 Keyframe이란 등록된 요소(위에서는 레이어겠죠)의 위치를 나타낸다.. 예를 들어 첫 프래임과 마지막프레임이 같으면 아무런 움직임이 없는 것이고 Keyframe값이 다를 경우 다른만큼 에니메이션이 되는 것이다..

간단하다.. 프래임 중간에 KeyFrame을 삽입한 후에 레이어의 위치만 수정해 주면 된다.. 자 그럼 아래의 그림과 같이 Layer 1의 8프레임에 KeyFrame을 삽한한 그림이다..

방법은 8프레임에 마우스를 가져간 상태에서 오른쪽 버튼을 클릭하면 선택할 수 있는 항목이 나오는데 여기서 Add Keyfame을 선택하면 아래와 같은 그림으로 변한다..

그리고 난 후 레이어를 선택하여 원하는 위치로 이동을 시키면 도큐먼트 윈도우의 화면이 아래와 같이 변한다.. 그러면 끝난 것이다..

저장하고 브라우저로 확인해 보면 처음에 직선으로 에니메이션 되던 것이 지금은 곡선으로 에니메이션 되는 것을 확인 할 수 있다..

물론 여기서 Autoplay와 Loop를 선택하느냐 안하느냐에 따라서 조금씩 차이가 있겠지만, 지금은 Auotplay 와 Loop를 선택하고 저장하는게 확인하는데 더 편할 것이다..

이상으로 예제를 하나 만들어 보면서 타임라인에 대해서 알아 보았다.. 물론 위에서는 레이어 안에 텍스트를 넣었지만, 레이어에 이미지를 넣으면 이미지도 가능하다.. 즉 레이어 안에 넣을 수 있는 모든 객체는 이렇게 에니메이션이 가능하다..

이젠 위에서 그냥 넘어간 프레임에서의 마우스 오른쪽 클릭시 나타나는 항목들에 대해서 알아보겠다..

Cut	선택된 요소를 잘라낸다..
Copy	선택된 요소를 복사한다..
Paste	선택된 요소를 붙여넣는다..
Delete	선택된 요소를 삭제한다..
Add Keyframe	선택된 프래임에 키프래임을 추가한다..
Remove Keyframe	선택된 키프래임을 삭제한다..
Change Object	타임라인에 추가된 개체를 바꾼다.. 이 항목을 선택하면 아래와 같은 그림이 나온다.. 단 개체는 속성이 같은 것 끼리만 바뀐다.. 즉 이미지는 이미지끼리, 레이어는 레이어끼리 바뀐다..
Add Object	타임라인에 개체를 추가한다..
Remove Object	타임라인에 개체를 삭제한다..
Record Path of Layer	자동으로 레이어의 경로를 기록한다.. 즉 레이어를 선택한 상태에서 이 항목을 선택하고 레이어를 드래그 하면 자동으로 키프레임이 생기고 자동으로 설정이 된다.. 매우 간단하게 에니메이션 할 수 있다..
Add Behavior	선택된 프래임에 비헤비어를 추가한다..
Remove Behavior	선택된 프래임의 비헤비어를 삭제한다..
Add Frame	프레임을 추가한다..
Remove Frame	프레임을 삭제한다..
Add Timeline	타임라인을 추가한다..
Remove Timeline	타임라인을 삭제한다..
Rename Timeline	타임라인의 이름을 바꾼다..

# 마우스 이벤트를 이용한 Timeline 제어하기...

자 지금까지는 브라우저가 자동으로 로드 되면서 에니메이션이 실행되도록 하였는데 에니메이션을 실행하는 또 다른 방법인 비헤비어를 이용하는 방법에 대해서 알아 보도록 하겠다.. 비헤비어에 대한 자세한 설명은 드림위버의 비헤비어 이용하기를 참고하기 바란다..

우선 예제를 보고 설명을 하도록 하겠다..

타임라인에 관계된 비헤비어는 3가지 비헤비어가 있다.. 아래을 보자..

비헤비어 이름	설 명
Go to Timeline Frame	타임라인의 지정된 위치로 이동하는 기능
Play Timeline	타임라인을 실행시키는 기능
Stop Timeline	실행된 타임라인을 멈추게 하는 기능

위의 예제에서 타임라인을 보면 아래와 같다..

위 그림은 타임라인의 경로를 나타내는 화면이다..

우선 마우스 클릭 혹은 이벤트로 조작을 하기 위해서 Autoplay 와 Loop를 해지한 상태이다.. 물론 역서는 타임라인을 만드는 것은 위에서 설명을 했으므로 생략을 하고 그 이후 버튼 조작이 되는 부분부터 설명을 하도록 하겠다..

우선 위의 예제를 보면 테이블로 Play Timeline, Stop Timeline, Go to Timeline 10, Go to Timeline 30이라는 항목을 만든다.. 그리고 난 후에 비헤비어 윈도우를 오픈한다.. 비헤비어에 대한 자세한 설명은 드림위버의 비헤비어 이용하기를 참고하기 바란다..

비헤비어 윈도우를 띄우기 위해서는 단축키 F8 혹은 메뉴에서 Window => Behavior를 클릭하면 된다.. 그럼 아래와 같은 창이 뜬다..

비헤비어 윈도우에 대한 상세한 설명은 다음으로 미루고 일단 이벤트를 걸 문구를 선택(예를 들어 Go to Timeline 10)한 후에 플러스 기호를 클릭하면 항목들이 많이 있는데 그중에 Timeline을 선택하면 위에서 쓰인 항목 3가지가 모두 나온다..

첫번째 Go to Timeline Frame 항목을 클릭하면 아래와 같은 그림이 나오는데..

여기서 Timeline에는 방금 작업했던 타임라인(타임라인이 많을 경우 조정을 하고자 하는 타임라인)을 선택하면 된다.. 그리고 Go to Frame에 가고자 하는 Frame 위치값을 적으면 된다.. 위의 예 에서 Go to Timeline 10 이라면 그 값을 10으로 주면 된다..

■ 여기서 잠깐 : 비헤비어에서 플러스 버튼을 눌러서 Timeline을 클릭했는데 위의 항목들이 활성화되지 않을 경우에는 비헤비어 창을 보면 Event For란이 있는데 여기서 위 그림과 같이 IE 4.0으로 바꾸면 된다.. 나중에 자세히 설명을 하겠지만, 여기서 간단하게 설명을 하면 비헤비어가 실행되는 브라우저를 설정하는 것이다..

그리고 작업을 하고나면 Event가 onMouseOver로 되어 있을 것이다.. 그것은 아래의 그림처럼 역삼각형을 클릭한 후 onClick 으로 바꾸어주면 된다..

그리고 두번째 Play Timeline 을 항목을 선택하면

위와 같은 창이 드고 위에서 Play 할 타임라인을 선택하면 된다..

마지막 세번째 Stop Timeline 항목을 선택하면

위 그림과 같은 창이 뜨는데 여기서 Stop 시킬 타임라인을 선택하면 된다..

■ 여기서 또 한가지의 참고 사항은 저장을 하고 난 후 실행을 시켜보면 잘 실행은 되는데 마우스가 클릭을 하러 갔을 때 마우스의 모양이 손 모양으로 바뀌지 않을 것이다.. 이 문제는 링크 Tag를 사용하면 간단하게 해결된다.. <a href="#">Play Timeline</a>형태로 만들어 주면 된다..

자 이제 어느정도 이해가 되었는지 모르겠다.. 쉽게 쓴다는 것이 너무 장황하지나 않을까 걱정이 되기도 하는데... 혹 잘못된 부분이나 궁금한 사항이 있으시면 언제든지 Q & A에 글 올려 주시기 바랍니다..

이제 타임라인의 마지막 과제인 타임라인 비헤비어 채널 사용하기를 하도록 하겠다..

# 타임라인 비헤비어 채널 사용하기

타임라인에는 비헤비어 채널이라는 것을 사용하여 적당한 시간이 지나서는 특정한 비헤비어나 다른 움직임을 만들어 낼 수 있는 기능이 있다.. 이것이 바로 비헤비어 채널이다..

맨 처음에 설명을 했는데, 부분이다.. 우선 이것도 예제를 들어 설명을 하겠다..

우선 위의 예제를 보면 10프레임에 도착했을때 비헤비어 채널을 이용하여 팝업윈도우를 오픈을 한다.. 그리고 프레임이 다시 진행이 되다가 30프레임에 도착해서 또 다시 팝업 윈도우가 오픈되면서 동시에 브라우저 윈도우(새로운 창)을 오픈하는 이벤트도 동시에 실행되는 예제이다..

자 그럼 하나하나 설명을 하도록 하자.. 아래의 그림은 위의 예제에 대한 타임라인이다..

예제의 타임라인에서 앞의 예제와 다른 부분은 브라우저 로딩과 동시에 Autoplay 시킨점과 비해비어 채널 10프레임과 30프레임에 표시가 있다는 것이다.. 이것이 바로 비헤비어 채널 표시라고나 할까.. 그럼 순차적으로 설명을 하도록 하겠다..

우선 위의 예제와 같은 타임라인에 에니메이션 효과를 준다.. 물론 위에서 설명한 것이므로 생략한다.. 그리고 나서 10프레임과 30프레임에 키프레임을 주고 원하는 위치로 이동을 시킨다..

그런 다음 비헤비어 채널을 이용해 보자.. 우선 비헤비어 채널 10프레임에 마우스를 가져가서 클릭을 한후 마우스 오른쪽 버튼을 누른다.. 그럼 여러가지 항목들이 나오는데 여기서 Add Behavior 를 클릭한다.. 그러면 비헤비어 플러스 기호를 이용하여 추가하라는 아래와 같은 창이 나온다..

Ok 버튼을 클릭한 후 비헤비어 윈도우의 플러스 기호를 클릭한 후 원하는 비헤비어 액션을 추가하면 된다.. 여기서는 Popup Message를 클릭하였다.. 그러면 아래와 같은 창이 뜬다..

위 창의 Message에 팝업윈도우가 오픈 되었을때 나타날 문구를 쓰면 된다.. 그러면 타임라인의 10프레임에 도착했을때 팝업 윈도우가 뜬다..

자 .. 다음은 30프레임이 되었으때 실행할 비헤비어 채널에 대해서 알아보겠다.. 물론 방법은 위와 비슷하다.. 우선 비헤비어 채널 30프레임에 마우스 왼쪽 클릭을 한후 다시 마우스 오른쪽 클릭을 하고 Add Behavior을 선택한다.. 그리고 나면 다시 위에서 본 비헤비어 윈도우의 플러기 버튼을 클릭하여 enent를 추가하면 된다.. 처음에는 30프레임에 도착했다는 팝업 윈도우를 띄운다.. 물론 방법은 위와 똑같다..

그리고 다시 플러스 기호를 누른 후 Open Borwser Window를 클릭한다.. 그러면 아래와 같은 창이 뜬다..

URL to Display	새롭게 오픈 할 파일이나 URL을 적어주면 된다.. 물론 옆에 있는 Browse 버튼을 클릭하여 파일을 선택하면 된다..
Window Width	새롭게 오픈 할 윈도우의 넓이
Window Height	새롭게 오픈 할 윈도우의 높이
Attributes	Navigation Toolbar : 웹 브라우저의 도구모음을 표시한다.. Menu Bar : 웹 브라우저의 메뉴 표시줄을 표시한다.. Location Toolbar : 웹 브라우저의 주소 입력창을 표시한다.. Scrollbars as Needed : 스크롤바를 나타낸다.. Status Bar : 웹 브라우저 하단의 상태표시줄을 나타낸다.. Resize Handles : 브라우저의 크기를 조정할 수 있도록 한다..
Window Name	제목 표시줄에 윈도우의 이름을 지정한다.. 물론 안해도 상관 없다..

여기서 옵션을 선택한 후 확인을 하면 끝이다.. 그러면 위와 같은 예를 구할 수 있다.. 그리고 비헤비어 채널에는 이 외에도 여러가지 효과를 줄 수 있는데 그것에 대해서는 다음 드림위버 비헤비어 이해하기를 참고 하기 바란다..

이상으로 타임라인에 대해서 모두 알아 보았다.. 이정도만 이해해도 타임라인에 대한 모든 사항을 이해했다고 해도 과언이 아니다.. 휴.. 이번 강좌는 내용이 정말 많았던것 같다.. 이 강좌를 쓴는데도 거의 하루가 걸렸으니 이걸 이해하는데는 더 많은 시간이 걸리지 않을까 생각한다.. 아님.. 이때까지의 강좌를 모두 이해 했다면 쉽게 이해가 될는지도...

혹 궁금한 사항이나 잘못된 부분이 있으면 언제든지 Q & A에 글 남겨 주기 바란다.. 오늘 강의는 여기까지...