드림위버로 홈페이지 만들기

17. Timeline 다루기

Timeline inspector를 열려면 Window> Timeline 명령을 선택함
. Playback head : 타임라인의 프레임 중 현재 어떤 프레임이 화면에 보여지고 있는지 알려줍니다.
. Animation bars : 각 오브젝트의 애니메이션 지속 시간을 나타냅니다.(보라색막대)
. Keyframes : 오브젝트의 속성을 지정할 수 있는 애니메이션 바 안에 들어 있는 프레임들 입니다(흰색 바탕의 동그란 원이 표시됩니다).
.Timeline pop-up menu : 현재 문서에서 어떤 타임라인이 선택되었는지 보여줍니다.
. Animation channels : 레이어와 이미지를 애니메이션시키는 바를 보여주는 채널입니다.
. Behavior channel : 타임라인의 특별한 프레임에서 실행될 behaviors를 삽입하기 위한 채널입니다.
. Frame numbers : 각각의 바가 차지하는 프레임의 숫자를 나타냅니다.
Back과 Play 버튼 사이의 숫자는 현재 프레임입니다. 애니메이션의 지속 시간을 제어하려면 프레임의 전체 수와 1초당의 프레임의 수를 조절하면 됩니다. 기본값은 초당 15프레임입니다.
. Rewind 버튼 : playback head를 타임라인의 첫번째 헤드로 이동시킵니다.
. Back 버튼 : playback head를 좌측으로 한 프레임 이동시킵니다. 계속 누르고 있으면 계속 좌측으로 프레임이 이동합니다.
. Autoplay : 이 옵션을 체크하면 웹 브라우저에서 현재 문서가 로드되자마자 타임라인이 자동으로 실행되도록 합니다.
. Loop : 웹 브라우저에서 현재 문서가 화면에 나타나면 타임라인이 반복해서 플레이 되도록 합니다. 반복되는 회수는 설정할 수 있습니다.

타임라인 만들기

타임라인을 만들려면
. Window> Timeline 명령을 선택하거나 Launcher에서 타임라인 버튼을 클릭하여 Timeline 창을 작업창에 나타냅니다.
. 먼저 애니메이션을 만들 재료로 레이어를 하나 만든 후 그 안에 적절한 이미지를 삽입시킵니다. 그리고 애니메이션이 시작될 곳에 레이어를 위치시킵니다.
. 레이어를 타임라인에 추가하기 위해 선택합니다(레이어를 선택하면 레이어 둘레에 사각형의 검은 점들이 나타나야 합니다).
. Modify> Add Object to Timeline 명령을 선택하거나, 선택한 레이어를 Timeline inspector 안으로 드래그합니다. 그러면 하나의 막대 바가 타임라인의 첫번째 채널에 나타납니다. 그리고 레이어 이름이 애니메이션 바에 나타납니다. 이제 애니메이션 바 끝에 있는 keyframe 표시기(동그란 흰색 원)를 마우스로 클릭하면 Timeline inspector의 모습이 보입니다.
. 문서 창에서 레이어를 선택한 후 애니메이션이 끝날 곳으로 이동시킵니다. 그러면 레이어가 이동한 경로를 따라 이동 경로(애니메이션 이동 경로)를 표시하는 실선이 나타납니다. 만일 레이어가 곡선으로 ㄹ이동하게 하려면 애니메이션바의 중간에 있는 프레임을 클릭합니다. 그리고 Modify>Timeline> Add Keyframe 명령을 선택합니다.
그런 다음 레이어를 선택한 후 적절히 이동하면 애니메이션 이동 경로를 나타내는 실선이 곡선으로 변하는 것을 볼 수 있습니다. 추가 keyframe을 만들려면 이와 같은 작업을 반복하면 됩니다.
.이제 애니메이션을 미리 살펴보기 위해 Timeline inspector의 상단에 있는 Play 버튼을 누릅니다. 그러면 레이어가 애니메이션 이동경로를 따라 움직이는 것을 볼 수 있을 것입니다.

패스를 드래그하여 타임라인 만들기
. 레이어를 만들기 위해서는 Insert> Layer 명령을 실행합니다.
. 애니메이션이 시작될 곳에 레이어를 위치시킵니다.
. Modify> Record Path of Layer 명령을 선택합니다.
. 패스를 만들기 위해 문서 내에서 레이어를 드래그합니다.
. 애니메이션을 끝낼 곳에서 드래그를 멈춥니다. 그러면 드림위버는 적절한 수의 키 프레임과 타임라인에 하나의 애니메이션바를 추가할 것입니다.
. Timeline inspector에서 되감기 버튼을 클릭한 후 플레이 버튼을 누르고 있으면 애니메이션의 결과를 볼 수 있을 것입니다.

타임라인 수정하기
애니메이션 상영 시간 조절
마지막 키 프레임 표시기(동그란 흰색 원)를 마우스로 클릭한 후 좌, 우측으로 드래그합니다. 좌측으로 드래그하면 상영 시간이 줄어드는 것이고, 우측으로 드래그하면 상영 시간이 늘어나게 됩니다.

애니메이션이 실행되는 시작 시간 변경
보라색의 애니메이션 바 전체를 선택하고, 좌우측으로 드래그하면 됩니다.

애니메이션 패스(이동 경로) 전체 변경
Timeline inspector에서 이동하고자 하는 애니메이션 바를 클릭한 후 문서 창에서 해당 레이어를 원하는 위치로 드래그하면 됩니다.

타임라인에서 프레임 추가/삭제
애니메이션을 선택하고 프레임을 추가하려면 Modify> Timeline> Add Frame 명령을 선택하고, 삭제하려면 Modify> Timeline> Remove Frame 명령을 선택합니다. 프레임을 추가하거나 삭제하여 애니메이션의 상영 시간을 조절할 수 있습니다.

자동 상영
타임라인이 들어 있는 문서가 웹 브라우저에서 열리자마자 자동으로 타임라인이 상영되도록 하려면 Timeline inspector에서 Autoplay를 선택합니다.

타임라인의 반복
타임라인이 계속 반복되도록 하려면 Timeline inspector에서 Loop를 클릭합니다.