타임라인의 성격

타임라인은 플래시의 타임라인, 디렉터의 스코어와 아주 흡사한 개념이다.
플레이백 헤드가 왼쪽에서 오른쪽으로 진행하면서 각 프레임이 가지는 서로 다른 개체의 정보를 화면에 뿌려주므로서 애니메이션를 만들어준다. 즉 1 프레임에서의 레이어 좌표와 2프레임에서의 레이어 좌표를 서로 다르게한 후 재생하면 플레이백 헤드가 1 프레임에서 2 프레임으로 이동하면서 애니메이션이 이루어진다. 타임라인에 추가할 수 있는 개체는 레이어와 이미지 뿐이다. 만약 테이블을 타임라인에 추가하여 애니메이션을 만들고 싶다면 레이어를 만들고 그 안에 테이블을 작성하면 된다.
타임라인은 그 어떠한 플러그인도 필요로 하지 않는다. 단지 DHTML을 지원하는 브라우저만 있다면 아주 빠른 속도로 재생되는 장점을 가지고 있다. 타임라인에 오브젝트를 추가하고 애니메이션을 만드는 작업을 하면 드림위버는 자동으로 해당하는 자바 스크립트를 생성해준다.

개체를 타임라인에 추가하기 위해서는 [Modify] 메뉴의 [Add Object to Timeline] 명령을
이용하거나 오브젝트를 드래그하여 타임라인에 가져다 놓으면 된다. 타임라인에 추가된 개체는 기본적으로 15 프레임에 걸쳐 등록되며 작은 점으로 표시되는 키프레임을 드래그하여 그 길이를 조절할 수 있다. 만약 첫번째 키프레임과 마지막 키프레임 등 단 2개의 키프레임으로 이루어져 있다면 직선 이동만이 가능할 것이다.
그러나 좀더 자유로운 양식의 애니메이션을 만들고자 한다면 마우스 오른쪽 버튼을 눌러 키프레임을 추가하고(Add Keyframe) 개체의 위치를 변경하면 된다.

타임라인을 활용한 애니메이션 구현

도구 모음에서 을 눌러 편집창에서 마우스로 드래그한다.
사각형의 틀이 생긴다.
그 틀안에 커서를 두고 도구모음에서 을 눌러 그림을 불러들인다. 그 결과가 왼쪽 그림이다. 

그림을 포함하고 있는 틀을 레이어라고 부른다.

레이어를 타임라인으로 끌고 가서 놓는다.

가져다놓으면 
기본적으로 15프레임의 애니메이션이 생성된다.

첫 프레임과 마지막 프레임에 표시되는 조그만 동그라미는 키프레임임을 표시한다.

키 프레임은 모종의 동작 변화가 일어남을 의미하는 것이다. 

 
마우스로 타임라인의 15 프레임을 클릭해준다.

편집창에서 그림 레이어를 마우스로 끌어서 위치를 바꾼다.

동작 안내선이 직선으로 나타난다. 

재생 버튼을 눌러 동작시켜 본다.

웹페이지가 로딩되면서 자동으로 애니메이션 재생이 되도록 하려면 를 체크한다.

애니메이션이 계속해서 반복되도록 하려면 를 체크한다. 

  이번에는 동작의 중간에 키프레임을 넣어 곡선 운동을 하도록 해보자.

타임라인의 10 프레임쯤에서 마우스 오른쪽 버튼을 누르고 [Add Keyframe]을 클릭한다. 그러면 10 프레임에 키프레임 표시(작은 원)가 나타난다.

편집창의 레이어 위치를 마우스 드래그를 통해 변경한다. 결과는 왼쪽 그림과 같이 경로가 곡선으로 바뀌어 표시된다.

재생 버튼을 눌러 확인해보자. 

같은 요령으로 레이어를 하나 더 만들고 그 안에 글을 입력해보자.(위 그림 참조)
레이어를 끌어서 타임라인 안에 끌고가서 놓는다. 위의 그림에서는 5프레임에 넣었음을 알 수 있다. 이렇게 하면 앞의 커피잔 그림이 움직이고 난후 잠시 후에 글이 움직이기 시작할 것이다. 
편집창에서 마우스 오른쪽 버튼을 눌러 [Page properties]를 선택한 다음 배경 그림을 넣어준다. 
최종적으로 [File] 메뉴에서 [Save]를 하면 웹페이지 제작이 완료된다.