멀티미디어 기획제작 출석수업 대체자료

멀티미디어 기획제작은 실습 과제물을 제출해야 하는 실습과목입니다. 이번 학기에 여러분은 직접 멀티미디어 내용물을 1-10명으로 구성된 소그룹별로 제작해 볼 수 있을 것입니다. 강의 내용도 실습과 관련된 내용을 많이 다루게 됩니다. 따라서 과목의 내용을 제대로 이해하기 위해서 방송강의 청취는 필수입니다. 교과서나 통신내용 등을 이용한 공부에만 의존하지 않기 바랍니다.

하지만 실습 내용에 너무 두려움을 갖지 않아도 됩니다. 실습 내용 중에서 꼭 필요한 몇 몇 기본 과정만 익히면 어느 정도 훌륭한 내용물을 제작할 수 있을 것입니다. “드디어 나도 해 볼 수 있다”라는 기대로 이 과목 공부를 시작하기 바랍니다. 특히 교과서에서 다루고 있는 드림위버의 실습 내용은 기말고사 때 구체적으로 다루어질 것이므로 꼭 따라해 보아야 합니다.

<실습 과제 안내>

학 년	교 과 목 명	학 습 범 위	실 험 실 습 과 제 명	작성서식, 분량, 제출방법
3	멀티미디어 기획제작		디렉터를 이용한 멀티미디어 CD 또는 멀티미디어 홈페이지 제작   * 주제 : 방송대 소개    예시) 공부하는 방법, 방송대 학습시스템 소개, 스터디 소개 등의 학교, 학습에 관련된 내용 (전반적인 내용 소개 또는 특정 부분에 대한 소개)	- 반드시 주제와 관련된 내용이어야 함. - CD에 내용을 담아 내고 각각의 화면을 인쇄하여 제출 - 표지는 일반 과제물 표지를 이용할 것 - 최소 3 개의 다른 화면이 있어야 함 - 작품에는 화면 이동 버튼, 애니메이션, 배경 사운드가 포함되어야 함 - 작업 인원은 최대 2명까지 가능

< 목차 >

I. 멀티미디어 제작 개요

II. 멀티미디어 저작 환경

III. 멀티미디어 CD 타이틀과 멀티미디어 인터넷 홈페이지의 특징

IV. 디렉터에 대한 이해

V, 드림위버에 대한 이해

I. 멀티미디어 제작 개요

- 현대사회는 멀티미디어사회라 할 수 있을만큼 멀티미디어의 이용이 점점 늘고 있고 멀티미디어로 제공되는 내용도 다양해지고 있음.

- 제공하고자 하는 내용물이 아무리 좋아도 제공되는 형태에 따라서 정보의 가치가 달라짐.

- 이제는 멀티미디어 내용물을 기획하고 제작하는 것이 특수 전문가층의 전유물이 아님

- 이번 한 학기동안 같이 멀티미디어의 기본 개념부터 시작해서 최종 결과물을 만들어내기까지의 과정을 같이 살펴볼 것.

- 이번 학기에 다루게 될 실습 내용은 디렉터를 이용한 멀티미디어 타이틀 제작과 드림위버를 이용한 인터넷 멀티미디어 페이지 제작.

1. 멀티미디어 개요

가. 멀티미디어의 정의

* 멀티미디어의 정의

ㄱ) 텍스트, 그림, 사운드, 비디오, 애니메이션의 다섯 가지 미디어를

ㄴ) 디지털 형태로 변환하여

ㄷ) 컴퓨터의 처리기능을 이용하여 대화기능(interactivity)을 제공하는 것.

* 미디어 설명

- 정보의 표현 방법

- 각각의 미디어를 따로 따로 제작하고 이 내용물들을 컴퓨터 파일로 저장함

- 멀티미디어의 특징은 대화기능이 있다는 것

* 디지털 설명

- 숫자로 표현됨

- 사진 같은 아날로그 데이터와 구분됨

- 정보의 저장, 편집 등이 용이하다

* 대화기능

- 일종의 쌍방향성을 제공하는 메커니즘

- 사용자의 선택에 따라서 제공되는 내용이 달라진다는 것

- 내용 선택, 답 제공, 컴퓨터 속의 인물과의 상호작용 등

- 멀티미디어 내용물은 초기에는 주로 CD에 담겨진 CD-ROM의 형태로 보급되었지만 인터넷이 발전되면서 멀티미디어 내용물을 수용할 수 있게 되었고 이에 따라 인터넷을 통한 멀티미디어 보급이 확산되고 있는 추세임.

- CD로 보급되는 멀티미디어 타이틀은 하나의 완성된 내용물을 멀티미디어 형태로 제공하는 것으로 보통 CD-ROM에 담겨져 보급된다

- 인터넷으로 보급되는 멀티미디어 내용물은 인터넷용 압축 및 전송 기술을 이용해 제공하게 되고 이를 이용할 수 있는 인터넷 멀티미디어용 소프트웨어를 필요로 한다.

* CD-ROM

- 용량이 650 -700MB

- 저렴한 값에 다량의 데이터를 저장, 보급할 수 있다

나. 멀티미디어의 종류: 멀티미디어 타이틀 및 인터넷 멀티미디어

1) 멀티미디어 타이틀의 종류

- 교육용 프로그램

- 광고 및 홍보분야

- 프리젠테이션

- 키오스크

- 게임

- 가상현실

- 인터넷

2) 인터넷 멀티미디어의 종류

- 교육용 사이트

- 인터넷 방송사이트

- 인터넷 음악 사이트

2. 멀티미디어 저작의 이해

- 이러한 내용물을 제작하는 것을 “멀티미디어 저작”이라고 함

* 멀티미디어 저작

- 문자, 그림, 소리, 동영상 등의 파일을 각각 제작한 후에 이들을 하나의 완성된 내용물로 결합하는 것

-  최종적으로 내용물을 종합하는 것을 멀티미디어 저작이라 함.

* 멀티미디어 저작의 방법

- 프로그래밍 언어를 이용

- 멀티미디어 타이틀 저작도구를 이용

- 인터넷 저작도구를 이용

* 프로그래밍 언어

- 비주얼 베이직, 비주얼 C, 파스칼, 코볼

가. 멀티미디어 타이틀 저작 방법

* 저작도구

- 멀티미디어 타이틀 저작을 쉽게 하여주는 도구

- 복잡한 프로그래밍 언어를 모르더라도 각종 미디어를 결합할 수 있게 해 줌

- 스크립트를 이용하면 비교적 간단하게 상호작용 기능을 포함시킬 수 있음

* 저작도구의 종류

- 페이지 방식

- 아이콘 방식

- 시간축 방식

- 이번 학기에 다루게 될 첫 번째 실습 내용은 디렉터를 이용한 멀티미디어 타이틀 제작.

나. 인터넷 멀티미디어 저작 방법

- 멀티미디어 타이틀 저작 방법과 유사하나 인터넷의 웹 페이지로 저작을 해야 함

- 인터넷 웹페이지를 저작하기 위해서는 인터넷 홈페이지 저작 도구를 사용하면 됨.

* 인터넷 홈페이지 저작 도구

- 문서 저작 방법

- WYSIWIG 저작 방법 (What you see is what you get)

- 인터넷 홈페이지를 저작하기 위해서는 저작을 쉽게 해 주는 소프트웨어를 이용하는 것이 가장 손쉬운 방법이지만 홈페이지 저작 언어인 HTML에 대한 기본적인 이해는 있어야 함.

- 이번 학기에 다루게 될 두 번째 실습 내용은 홈페이지 저작 언어에 대한 기본적인 소개와 함께 드림위버를 이용한 멀티미디어 홈페이지 제작.

3. 디렉터 및 드림위버 소개

가. 디렉터

- 디렉터는 시간축 방식의 저작도구

- 초기에는 주로 프리젠테이션용으로 이용되었지만 스크립트를 이용한 대화기능이 강화되면서 다양한 멀티미디어 타이틀에 이용이 되기 시작함

- 정품 프로그램는 각 학습관 전산실에 있음. 정품을 이용하기 위해서는 하드웨어 키를 이용해야 함. 이 키는 각 학습관 전산실에 하나씩 비치되어 있음

- 이번 학기에는 이 디렉터를 이용하여 타이틀을 제작하는 기본 과정을 소개할 것.

나. 드림위버

- 인터넷 홈페이지 저작 도구.

- WYSIWIG 저작 방식을 이용함.

- 보통 문서 편집 하듯이 편집하면 됨.

- 하지만 HTML에 대한 기본적인 이해가 있어야 함.

II. 멀티미디어 저작환경

- 멀티미디어 내용물을 제작하기 위해서는 일반 컴퓨터에 추가적인 장치가 몇 가지 필요함.

1. 멀티미디어 저작 하드웨어

- 보통 멀티미디어 PC라 하는 것은 멀티미디어 내용물을 보고 들을 수 있는 PC.

- 멀티미디어 내용물을 제작하기 위해서 기본적으로 멀티미디어 재생용 기능 뿐만 아니라 그래픽, 소리, 동영상 내용물을 제작하는데 필요한 하드웨어를 갖춘 컴퓨터를 필요로 함.

가. 멀티미디어 재생용 하드웨어

* 멀티미디어 재생용 PC가 만족시켜야 할 기본 기능:

ㄱ) 멀티미디어 타이틀을 읽을 수 있는 기능: CD-ROM

ㄴ) 멀티미디어 정보를 처리할 수 있는 속도의 PC: 보통 586 이상

ㄷ) 화면과 소리를 재생할 수 있어야 한다: 기본적인 비디오 카드, 사운드 카드, 스피커

- 소프트웨어를 구입할 때 그 소프트웨어가 작동되는 하드웨어 환경에 대한 기준이 제시되어 있는 경우가 대부분.

* 멀티미디어 PC의 기본 요구 조건

1) CD-ROM 드라이브

2) 16비트 컬러 이상의 그래픽 기능

3) 사운드 카드 (16비트 디지털 입출력)

나. 멀티미디어 저작용 하드웨어

* 저작 시스템 하드웨어

- 그림 작업: 그래픽 카드, 스캐너, 디지털 카메라

- 소리 작업: 사운드 카드(미디 기능 포함)

- 동영상 작업: 비디오 캡처 보드, 디지털 비디오 수신카드

- 정보 저장 작업: CD-RW

2. 멀티미디어 저작 소프트웨어

- 멀티미디어 저작을 위해서는 다양한 종류의 미디어(문자, 소리, 그림, 동영상, 애니메이션)를 각각 제작할 수 있는 소프트웨어를 필요로 함

- 따라서 각각의 미디어를 제작하는데 필요한 소프트웨어를 다룰 줄 알아야 함

* 멀티미디어 저작 소프트웨어의 종류

a. 문서 제작 소프트웨어

- 문서 편집 소프트웨어는 많이 알려져 있음

* 문서 제작 소프트웨어

- 글

- 마이크로소프트 워드

b. 그림:

- 이미지 제작 소프트웨어는 크게 픽셀을 이용하여 그림을 표현하는 비트맵 방식과 이미지를 도형적으로 인식하여 제작하는 벡터방식이 있음

* 이미지 제작 소프트웨어의 종류

- 비트맵 방식: 그림판, 페인트숍 프로(Paint Shop Pro), 포토숍(Photoshop)

- 벡터 방식: 일러스트레이터(Illustrator), 코렐 드로우(Corel Draw)

- 멀티미디어 타이틀이나 인터넷 멀티미디어 내용에 이용되는 형식은 비트맵 방식임.

- 비트맵 형식으로 이미지를 저장해야 함

c. 소리

- 소리 제작 소프트웨어는 대표적인 소리 파일의 종류인 웨이브 파일을 다루는 소프트웨어와 여러 기기간의 호환성을 가진 미디 형식의 파일을 편집하는 소프트웨어로 나뉠 수 있음

* 소리 제작 소프트웨어의 종류

- 웨이브 파일 편집 소프트웨어: 녹음기, 사운드 에디트(Sound Edit), 웨이브 랩(Wave Lab)

- 미디 파일 편집 소프트웨어: 케이크워크(Cakewalk)

- 인터넷용 사운드 변환 프로그램

d. 애니메이션

- 애니메이션의 경우 2차원 애니메이션과 3차원 애니메이션으로 나뉠 수 있음

* 애니메이션 제작 소프트웨어

- 2차원 애니메이션 제작 소프트웨어: 애니메이터 프로(Animator Pro)

- 3차원 애니메이션 제작 소프트웨어: 3D 맥스(3D Max), 라이트웨이브 3D(Lightwave 3D)

e. 동영상

- 동영상을 디지털 파일로 변환, 압축해 주는 비디오 캡처 보드를 이용하여 편집을 할 수 있음

* 동영상 편집 프로그램

- 프리미어(Premiere)

- 인터넷용 동영상 변환 프로그램

f. 저작도구

- 문자, 그림, 소리, 동영상, 애니메이션을 각각 제작한 후에는 저작도구를 이용하여 통합하게 됨

* 멀티미디어 저작도구의 종류

- 아이콘 방식: 오서웨어 프로페셔널(Authorware Professional), 퀘스트(Quest)

- 페이지 방식: 멀티미디어 툴북(Multimedia Toolbook)

- 시간축 방식: 디렉터 (Director)

* 인터넷 저작도구

- 드림위버

- 나모 웹 에디터

III. 멀티미디어 CD 타이틀과 인터넷 홈페이지의 특징

1. 멀티미디어 CD의 특징 및 제작

- 멀티미디어 CD라 하는 것은 일반적으로 CD-ROM에 수록된 멀티미디어 내용물을 이야기 함.

가. CD-ROM의 특징

- 멀티미디어 발전 초기에는 주로 CD-ROM에 담긴 멀티미디어 내용물이 많이 유통되었음

- CD-ROM은 멀티미디어 발달 초기에 저장 공간의 문제를 해결해 주었기 때문에 많이 이용되었음.

* CD-ROM의 장점

1. 대용량의 데이터를 저장할 수 있다.

2. 다양한 형식의 멀티미디어 내용물을 저장할 수 있다.

3. 고화질 및 고음질의 멀티미디어 내용물 구현이 가능하다.

- 멀티미디어 발전 초기에는 배포가 가장 큰 문제 중 하나였음.

- 멀티미디어 내용물 배포에 큰 공헌을 한 것이 CD-ROM. Cd-ROM의 가장 큰 장점은 650-700MB라는 대용량의 데이터를 저장할 수 있다는 것.

- 또한 CD-ROM에는 텍스트, 사운드, 이미지, 동영상, 애니메이션 등의 내용물 등 다양한 형태의 고화질 및 고음질의 멀티미디어 내용물을 저장할 수 있다.

* CD-ROM의 단점

1. 일단 배포되면 내용을 수정할 수 없다.

2. 실행 속도는 자기 저장매체에 비해 느리다.

- 하지만 CD-ROM의 형태로 배포되는 내용물은 일단 배포가 되면 내용을 수정하거나 업데이트시킬 수 없다는 단점이 있다. CD-ROM은 독립적인 내용물로 제작되어 배포되고 이용되기 때문에 일단 이용자에게 배포된 후에 수정을 하려면 수정 내용물을 또 다시 개별 이용자에게 발송해야 하기 때문에 내용을 수정하는 것이 상당히 복잡하다.

- 또한 CD-ROM을 실행하는 시간이 자기매체에 비해 길다는 단점도 있다.

- 최근에는 CD-ROM 형태의 멀티미디어 내용물과 더불어 인터넷용 멀티미디어 내용물이 증가하고 있는 추세.

나. CD-ROM 기획

- CD-ROM 내용물을 제작하기 위해서는 설계 단계에서부터 철저한 준비가 필요하다.

* 기본적인 CD-ROM 제작 단계

- 설계단계:

- 요구사항 분석, 구조 디자인

- 스토리 보드, 미디어 소스 제작

- 저작

- 평가

- 배포 및 유지보수

- 설계 단계에서는 프로젝트의 목표를 비롯해서 전반적인 구성에 대한 계획을 한다.

- 구조 디자인에서는 필요한 하드웨어 및 소프트웨어에 대한 분석을 한다.

- 화면의 레이아웃 및 논리적인 흐름도를 계획하는 스토리보드를 작성한 후 각 미디어 소스의 제작에 들어가게 된다.

- 모든 미디어 소스가 준비되면 저작 단계로 들어간다

- 저작이 끝난 후에 내용의 연결이 잘 되었는가에 대한 평가를 한 후 배포를 하게된다.

다. 설계 및 스토리 보드 단계

- 전체적인 내용에 대한 구성 및 각 화면의 구성에 대한 계획을 한다.

라. 미디어 소스 제작 및 멀티미디어 저작

1. 텍스트 및 그래픽 소스 제작

- 텍스트 내용물은 멀티미디어 저작 단계에서 기본적으로 제작하는 것도 있고 특수 폰트 효과를 위해 그래픽 내용물 제작 단계에서 제작하는 것도 있다.

- 그래픽 소스는 기본적으로 사진, 화면 캡처, 클립아트를 이용하게 된다.

- 각 화면의 구성은 포토샵과 같은 그래픽 프로그램을 이용해서 하게 되고 화면의 일부를 구성하는 부분도 포토샵을 이용해서 하게 된다.

- 이렇게 작업된 내용은 각각 jpg나 gif 등의 비트맵 방식의 파일로 저장되어 준비된다.

2. 사운드 소스 제작

- 사운드 소스는 보통 wav 형태나 midi 형태로 저장되어 이용된다.

- 사운드 편집 프로그램을 이용해서 원하는 사운드 파일을 준비해 놓는다

3. 동영상 및 애니메이션 소스 제작

- 동영상 소스는 프리미어와 같은 동영상 편집 프로그램을 이용해서 작업을 하게 된다.

- 원하는 부분만 선택하거나 다른 동영상 소스와 합치거나 화면 전환 효과를 넣는 식으로 준비해 놓는다

4. 멀티미디어 저작

- 이렇게 준비된 소스를 가지고 멀티미디어 저작도구에서 최종 작업을 하게 된다.

- 이번 학기에는 다양한 멀티미디어 저작 도구 중에서 디렉터를 중점적으로 살펴볼 것.

2. 멀티미디어 홈페이지의 특징 및 제작

- 멀티미디어 내용물이 포함된 인터넷 홈페이지는 점차적으로 증가하는 추세

가. 인터넷의 특징

- 인터넷은 전 세계적으로 연결되어 있는 망을 사용한다.

* 인터넷 멀티미디어 홈페이지의 장점

1. 전세계에 연결되어 있어서 어디서나 이용이 가능하다

2. 새로운 내용물을 제작하고 배포하는 것이 용이하다.

3. 내용물을 수정하거나 업데이트 시키는 것이 용이하다.

4. 기술 개발로 인해 다양한 멀티미디어 컨텐트를 제공할 수 있다.

- 이처럼 인터넷은 언제 어디서나 다양한 멀티미디어 내용물을 편리하게 전달할 수 있다는 장점을 지니고 있지만 몇 가지 단점도 있다.

* 인터넷 멀티미디어 홈페이지의 단점

1. 플랫폼에 따라 내용물이 다르게 구현될 수 있다.

2. 인터넷 접속 속도에 제약을 받는다

- 인터넷 내용물을 이용하는 환경은 사용자마다 다르기 때문에 화면의 크기, 설치되어 있는 멀티미디어 이용 소프트웨어의 버전 등에 따라 멀티미디어 내용물이 제대로 구현되지 않을 수 있다.

- 또한 아직 전세계적으로 초고속 인터넷 보급률이 높지 않기 때문에 대용량의 멀티미디어 데이터를 전송하고 이용하는데 많은 제약이 따른다.

- 하지만 기술 개발과 더불어 점차적으로 이런 문제들이 해결되어가고 있기 때문에 점점 인터넷 멀티미디어가 널리 보급되고 있다.

나. 인터넷 멀티미디어 기획

- 인터넷 멀티미디어 내용물을 기획하는 것은 멀티미디어 CD-ROM을 기획하는 것과 유사하다.

* 멀티미디어 인터넷 홈페이지 제작 단계

1. 기획

2. 구성

3. 미디어 소스 제작

4. 홈페이지 제작

5. 인터넷에 내용물 올려놓기

- 기획 단계에서는 제작 목표와 방향을 설정하고 어떤 내요을 어떻게 제작할 것인가를 구체적으로 결정하는 과정

- 구성단게에서는 사이트 내용을 분류하여 체게구조를 설계하고 사이트의 내비게이션, 즉, 이동 경로를 작성하는 단계이다.

다. 미디어 소스 제작 및 홈페이지 저작

- 구체적인 텍스트, 이미지, 사운드, 동영상 소스 등을 제작하는 단계

라. 멀티미디어 저작

- 홈페이지 저작 도구를 이용하여 최종적인 홈페이지를 제작하는 단계

IV. 디렉터에 대한 이해

1. 디렉터 개요

- 이번 학기에 사용할 멀티미디어 저작도구 소프트웨어가 디렉터이다.

- 디렉터는 시간축 방식의 저작도구. 시간의 흐름에 따라서 한 프레임별로 구성 요소, 각 요소들의 특성 및 실행 방법 등을 정해주는 것.

- 디렉터의 기본적인 구성 요소는 무대, 캐스트 멤버, 스코어, 제어판 등이다. (그림 1)

- 디렉터는 “감독”이라는 뜻이다.

- 디렉터에 등장하는 각종 요소들은 “캐스트”라 한다.

- 멀티미디어 저작자가 감독이 되어서 무대에서 각 등장인물의 행동을 스코어에서 조절하는 것이라 생각하면 된다.

- 무대는 최종적인 결과물이 실행되는 화면이다.

<그림 1>

2. 캐스트 윈도

- 캐스트는 일종의 배우 대기실이다.

- “windows"에서 ”cast" 멤버 화면을 보거나 끌 수 있다.

- 캐스트 윈도에는 그림, 동영상, 소리, 화면전환효과, 특수 효과를 위한 스크립트, 색상 팔레트 등 다양한 개체들을 불러올 수 있다.

- 캐스트 멤버를 등록시킬 때 미리 제작해 놓은 개체 이용하거나 디렉터 내에서 제작하는 방법이 있다. 미리 제작해 놓은 개체는 “import” 명령을 이용하여 등록시키지만 디렉터 내에서 간단한 그림, 스크립트, 화면 전환 효과 등을 제작하면 자동적으로 캐스트 멤버로 등록된다.

- 캐스트를 무대에 등장시키는 기본적인 방법은 마우스를 이용하여 스코어 윈도에 끌어다 놓는 방법과 무대에 직접 끌어다 놓는 법이 있다.

- 캐스트가 등장하는 프레임의 수는 마우스를 이용하여 간단히 늘리거나 줄일 수 있다

- 오른쪽 마우스의 사용에 대하여 한 마디: 어떤 구성 요소건 여러 가지 환경을 설정해 줄 수 있는 명령들이 연결되어 있는데, 오른쪽 마우스를 이용하여 이 메뉴를 불러올 수 있다.

- 스코어 윈도에서는 이러한 기능을 이용하여 각각의 구성요소들을 편리하게 제어할 수 있다.

- 끌어다 놓은 다음에는 프레임이 진행됨에 따라서 위치를 변경시키거나 각종 애니메이션 효과를 줄 수도 있고 또한 스크립트를 이용하여 복잡한 상호작용을 추가시킬 수도 있다.

3. 스코어 윈도

* 스코어 윈도의 구성요소

- 효과 채널: 시간 조절 효과, 색상 팔레트, 화면 전환, 소리, 스크립트.

- 스프라이트 채널: 무대 위에 보여지는 각각의 구성 요소를 제어하는 곳.

- 각각의 구성 요소의 특징을 정해주고 나타내주는 곳

- 스코어 윈도의 스프라이트 채널에 이미지, 동영상, 텍스트 등의 캐스트가 배치될 때마다 각각의 스프라이트로 불리운다.

- 스코어 윈도는 사용할 여거 개체들을 배치하고 조절하는 윈도이다.

- 디렉터 저작시에 대부분의 작업들이 행해지는 곳이다.

- 작은 칸 하나 하나가 하나의 셀인데, 가장 작은 단위이다

- 가로의 기본 단위는 프레임이고

- 세로의 기본 단위는 채널이다.

<그림 2>

4. 페인트 윈도

- 페인트 윈도에서는 캐스트 멤버 이미지를 새롭게 제작하거나 변형시킬 수 있다.

- - 캐스트는 외부의 그래픽 프로그램을 이용해서 제작할 수도 있지만 간단한 캐스트는 디렉터 내에서 제작할 수 있다.

- 디렉터의 페인트 윈도에서는 기본 캐스트를 제작할 수 있다.

- 새로운 캐스트 멤버를 제작하려면 + 버튼을 누르는데 이 때 캐스트 윈도에서는 새로운 이미지 캐스트를 등록시킬 준비를 하게 된다.

- 새로운 캐스트 멤버를 제작하면 캐스트 창에 새로운 캐스트로 등록된다.

- 페인트 윈도의 기능을 보면, 기본 도형 그리기, 채색하기, 선택툴, 문자 입력, 오니언 스킨 등이 있다.

- 페인트 윈도의 오니언 스킨 (onion skin) 기능은 조금씩 변하는 캐스트를 제작할 때 아주 편리한 기능으로, 이전 그림의 틀을 이용하여 다음 그림을 그릴 수 있게 해 준다.

III. 디렉터의 애니메이션

* 디렉터에서 움직이는 장면을 삽입하는 방법

① 동영상으로 제작된 파일 이용하기

② 이미지 위치 이동하기: 스텝 레코딩, 키프레임 애니메이션

③ 조금씩 변하는 이미지를 연속적으로 삽입: 여러 이미지 이용, 필름 루프 이용

1. 스텝 레코딩

- 스텝 레코딩은 이미지를 캐스트 멤버로 불러와 프레임별로 위치를 조절해서 제작하는 애니메이션 기법이다.

- 이 캐스트 멤버를 한 프레임별로 움직이면서 애니메이션을 시키는 것을 말한다.

- 스텝 레코딩을 하기 위해서는 스텝 레코딩을 시킬 스프라이트를 선택한 상태에서 “Control” 메뉴의 “Step Recording” 명령을 실행시키고 “Window” 메뉴에서 “Control Panel” 윈도를 활성화 시킨 후 “Control Panel”의 “다음 프레임” 버튼을 이용하여 스프라이트의 위치를 하나하나 정해주게 된다.

2. 키프레임 애니메이션

- 디렉터에서는 하나의 캐스트 멤버가 등장하는 프레임의 수가 여럿일 때 중간 중간에 위치를 변경하거나 크기를 변경하는 키프레임을 정해놓는 방법으로 애니메이션을 제작할 수 있다.

- 키프레임을 삽입하는 가장 간단한 방법은 캐스트 멤버를 스코어에 옮겨놓은 후에 그 캐스트 멤버를 선택한 상태에서 오른쪽 마우스를 눌러 “insert keyframe" 명령을 실행시키는 것이다.

- 또는 오른쪽 마우스를 눌러 나오는 메뉴 중에서 “edit sprite frames"를 실행시키면 각각의 프레임별로 편집을 할 수 있다.

3. 다른 이미지를 연속적으로 배치하는 기본 애니메이션

- 기본적인 애니메이션의 경우에는 조금씩 변화하는 이미지들을 여럿 만들어 놓고 이것들을 한 프레임씩 배치하는 방법을 이용한다.

- 즉, 시간순으로 스코어에 스프라이트를 연속적으로 배열하여 애니메이션을 제작한다.

4. 필름 루프 애니메이션

- 사람이 걸어가는 동작 등 한 종류의 애니메이션이 반복되는 경우, 필름 루프(film loop) 명령을 이용하면 걸어가는 동작을 연결하는 모든 스프라이트를 연결하여 하나의 캐스트로 만들 수 있다.

- 디렉터 메뉴의 “insert”에서 “film loop”를 지정해 이용한다.

IV. 디렉터의 링고 스크립트

- 스크립트는 멀티미디어 내용물을 제작할 때 다양한 환경을 지정할 수 있는 일종의 컴퓨터 프로그래밍 언어이다.

- 디렉터의 경우에는 링고(Lingo)라는 스크립트를 이용한다.

- 스크립트를 이용하게 되면 다양한 멀티미디어 효과 및 상호작용 명령들을 첨가할 수 있다.

- 스크립트 작성 윈도가 뜨게 하는 방법으로는 보통 스코어 윈도나 무대에서 해당 스프라이트, 캐스트, 또는 프레임을 선택한 상태에서 오른쪽 마우스 버튼을 눌러 나오는 메뉴 중에서 “스크립트” 메뉴를 선택하면 된다.

- 스크립트에는 크게 다섯 종류의 스크립트가 있다

1. 디렉터 스크립트의 종류

(1) 프라이머리 이벤트 스크립트

- 디렉터 무비내에서 다른 스크립트 명령보다 우선 처리되는 스크립트이다.

- 주로 세 가지 경우에 사용된다

① 마우스 버튼을 누르고 있는 경우

② 마우스 버튼을 눌렀다가 뗀 경우

③ 일정 시간이 경과한 경우

(2) 캐스트 멤버 스크립트

- 각각의 캐스트 멤버마다 작성된 스크립트로, 캐스트 멤버가 무대위에서 마우스로 클릭되었을 때 효력을 발생한다.

- 스크립트 윈도에서 해당 캐스트 멤버를 선택하고 오른쪽 마우스 버튼을 눌러 스크립트 명령 실행하여 작성한다.

(3) 스프라이트 스크립트

- 각각의 해당 스프라이트를 선택하여 작성하는 스크립트이다.

- 캐스트 스크립트보다 우선적으로 명령이 실행된다.

- 스프라이트를 선택하고 오른쪽 마우스 버튼을 눌러 작성한다.

(4) 무비 스크립트

- 디렉터 무비가 시작될 때 각각의 디렉터 무비에 대한 스크립트를 작성한다.

(5) 프레임 스크립트

- 스코어 윈도의 스크립트 채널에 할당된 스크립트이다.

- 주로 exitFrame이나 enterFrame와 같이 재생 중에 지나가는 프레임에서 실행되는 스크립트이다.

- 스코어 윈도의 스크립트 채널의 셀을 클릭하여 작성한다.

<스크립트 작성 윈도의 예>

V. 드림위버에 대한 이해

1. 인터넷 홈페이지 구조 개요

- 인터넷 문서는 기본적으로 하이퍼링크 되어있는 문서. 즉, 다른 문서로의 연결이나 다른 이미지 파일 등으로의 연결이 되어있는 문서이다.

- 이렇게 연결 설정을 할 때 꼭 유의해야 할 것은 각각의 문서간의 연결을 어떻게 하느냐 하는 것이다.

- 즉, 인터넷 문서들이 저장되어 있는 구조에 따라서 연결할 때의 주소가 달라진다.

- 일반적으로 인터넷 홈페이지를 작성할 때에는 몇 개의 페이지를 만들게 되고 각각의 페이지에 여러 개의 이미지 혹은 멀티미디어 파일들을 사용하게 된다.

- 이러한 파일들을 제작할 때는 일반적으로 같은 폴더 내에 저장하거나 그 폴더에 하위 디렉토리를 만들어 같이 저장한다. 그리고 그 모든 파일들의 구조를 그대로 인터넷에 올려놓는다.

- 홈페이지에서 서로 연결되는 파일이나 이미지가 있으면 그 파일들의 위치를 미리 알아야 서로간의 연결을 정할 수 있다.

- 우리가 웹 문서들을 작성할 때에는 그 사이트가 어떤 구조로 되어 있고 각 문서들이 어떻게 저장될 것인지를 미리 정해놓아야 한다.

- 드림위버에서는 이런 사이트의 구조를 자동적으로 인식하고 각 파일의 위치 및 서로간의 링크를 자동적으로 수정해 주는 기능이 있다.

- 드림위버에서는 이렇게 복잡해 보이는 사이트 정의를 미리 해놓고 시작하게 된다.

- 뿐만 아니라 개인의 컴퓨터에서 제작한 사이트의 구조를 그대로 인터넷에 자동적으로 올려놓을 수 있는 기능까지 지니고 있다.

- 그 기능이 바로 드림위버의 “사이트 정의하기”이다.

- 드림위버로 웹 문서를 작성하기 이전에 사이트를 정의해 놓고 시작한다.

- 우리는 “samplesite"라는 이름의 사이트를 구축하고 여기에 이미지를 따로 저장할 수 있는 폴더를 만들고 기본 홈페이지인 index.htm 문서를 작성해 볼 것

- 그러기 위해서는 웹사이트에 사용할 이미지를 모두 모아놓은 이미지 폴더를 따로 준비해 놓아야 함.

- 우리가 이전에 제작한 이미지 파일들을 "Image"라는 이름의 폴더 안에 모두 저장해 놓고 시작한다.

- 그리고 드림위버에서 "samplesite"라는 이름의 사이트를 정의한다.

- 우리가 드림위버에서 관리할 사이트는 미리 폴더로 만들어 놓을 수도 있고 드림위버 내에서 새로 제작할 수도 있다.

2. 홈페이지 기본 구성 요소

- 이렇게 정의된 사이트에서 우리가 미리 기획한 대로 각 문서를 만들기도 하고 서로간 필요한 연결을 선택하기도 하여 웹 문서를 작성한다.

- 웹 문서를 작성할 때에는 기본적인 문서의 글꼴, 문단 등을 편집하고 필요한 이미지를 삽입하는 과정 등을 거치게 된다.

- 또한 필요한 부분에 다른 문서로 연결시키는 링크를 추가하기도 한다

- 웹 문서에서 주의할 것은 문서의 형식 및 정렬. 이를 위해 테이블 및 프레임 명령 등이 이용된다.

3. 멀티미디어 구성요소 추가하기

- 또한 플래시, 동영상, 사운드 등 다양한 멀티미디어 내용물을 추가하기도 하고 문서에 스크립트라는 프로그래밍 언어를 이용하여 특수한 기능을 추가하기도 한다.

4. HTML 문서 인터넷에 올려놓기

- 이렇게 정의된 사이트는 내가 미리 준비해 놓은 인터넷 홈페이지 저장 공간에 올려놓는다.

- 국내에 무료 계정을 받을 수 있는 곳을 소개하는 사이트 주소는 아래와 같다

- http://freehost.nararo.com

- 어떤 사이트를 이용하건 꼭 알아야 할 것은 FTP 접속 주소.

- 그리고 그 사이트에서 제공하는 자신의 홈페이지 주소

- FTP 주소를 이용하여 드림위버의 원격 접속

- 이렇게 작성된 파일을 인터넷 홈페이지용 컴퓨터에 올려놓으면 그 순간부터 인터넷 접속이 된다.

5. 드림위버 기본 기능 살펴보기 (교과서 Part 3 Chapter 1 참조)

- 드림위버의 기본 작업 인터페이스 살펴보기

- 인서트 바: 이미지, 테이블, 링크, 문단 편집 도구 등 각종 웹 문서 편집 요소, 즉 오브젝트를 추가.

- Properties Inspector: 각 오브젝트의 세부 속성을 편집

- Tool Bar: 작업 화면의 편집모드를 지정하고 문서의 제목, 뷰 옵션을 지정

- Menu: 다양한 기능을 관리

- 드림위버의 인서트 바, Properties Inspector, Tool Bar, Menu 살펴보고 작업 화면 보기

- 디자인 뷰 창 열고 정의된 사이트가 열려있는 사이트어놓 창 열고 Properties Inspector 열려있는 상태 보여주기

6. 텍스트 속성과 이미지 삽입 (교과서 Part 3 Chapter 2) 참조)

- File-New-HTML 문서를 선택, 새 문서 작성하는 것 보여주고 저장한 후 사이트 창에 생성된 문서 보기 (test1)

- 사이트 패널에서 직접 새 문서를 작성하기 (test2)

- 새 문서를 작성한 후에는 그 문서의 배경 및 기본 글꼴과 색상 등을 설정해 준다.

- 기본 문서의 속성을 설정하는 기능은 Modify - Page Properties 명령이다.

- 이처럼 page properties 명령을 이용하면 문서의 기본 글꼴, 배경 색, 연결되는 문자열의 색 등을 정의할 수 있다.

- 웹 문서를 제작할 때 기본적으로 문자의 크기 및 모양을 지정하고 문서에 이미지를 삽입한다.

* 드림위버에서 문서에 이미지 삽입하는 방법 세 가지:

1. Common 탭의 Image 버튼 클릭하기

2. Site 패널에 저장된 Image 폴더에서 문서로 끌어다 놓기

3. Assets 패널에서 Image 버튼을 클릭하여 원하는 이미지를 문서에 끌어다 놓기

7. 하이퍼텍스트 링크 (교과서 Part 3 Chapter 3 참조)

가. 텍스트에 링크 설정하기

- 위와 같이 기본적으로 구성된 문서의 일부분에 링크를 부여하면 다른 문서나 다른 파일, 또는 다른 사이트로 연결시킬 수 있다.

- 연결할 때에 같은 사이트에 있는 문서이면 문서의 폴더 위치와 문서의 이름만 지정해 주게 되고 다른 사이트의 문서이면 그 사이트의 주소를 입력시킨다.

- 또한 다른 문서나 이미지를 불러올 때 자체 창에서 뜨게 할 것인지 아니면 새로운 창에 뜨게 할 것인지를 정해주어야 한다.

- 보통 프레임이 없는 문서는 top이나 blank를 지정해 주게 된다.

나. 이미지에 링크 설정하기

- 링크는 텍스트 뿐만 아니라 이미지에도 연결시킬 수 있다. 가장 기본적인 것은 이미지 자체에 링크 주소를 연결시키는 것.

- 하지만 드림위버에서는 또한 텍스트 뿐만 아니라 Image Map 기능을 이용하여 이미지의 일부에 링크를 연결시킬 수도 있다.

- 이 기능은 아주 편리한 기능으로, 그래픽이 많이 사용된 사이트에서 아주 유용하게 쓰일 수 있다.

- 사용하는 방법은, 이미지를 선택한 상태에서 이미지의 Properties 창에서 이미지 맵 선택 영역을 지정하고 그 곳에 링크를 추가하면 된다.

다. 문서 안의 특정 위치로 이동시키기

- 한 문서의 내용이 길어지거나 문서가 여러 개의 목차로 구성되어 있다면 해당 주제로 손쉽게 이동할 수 있도록 만들어 줄 수 있다.

- 이 때 이용하는 것이 “앵커(Anchor)” 개념

- Anchor라는 것은 문서 내의 특정 부분에 책갈피를 끼워 놓듯이 마크를 정해놓는 것. 그리고 링크를 할 때 문서의 이름이나 인터넷 주소를 이용하는 것이 아니라 앵커의 이름과 # 표시를 이용해서 연결을 하면 된다.

8. 테이블 레이아웃 (교과서 Part 3 Chapter 4 참조)

- 테이블 기능이라는 것은 웹 문서 내에 테이블을 추가하는 것을 의미한다.

- 하지만 웹 문서의 내용을 가지런하게 정렬하기 위해서도 테이블 기능을 이용하게 된다.

- 웹 문서는 공백 하나라도 태그로 지정되기 때문에 문서를 정렬하는 것이 간단한 문제가 아니다.

- 웹 문서의 테이블 기능을 이용하면 가지런하게 정렬된 다양한 디자인의 웹 페이지를 제작할 수 있다.

- 이러한 디자인을 제작하기 위해서는 미리 제작할 웹 페이지에 대한 기획이 되어 있어야 한다.

가. 기본 테이블 제작하기

- 새로운 파일 만들기 (table.htm)

- 문서 안에 테이블 추가하기(Row 1, Col 2, width 100%)

- 테이블의 높이 조절하기 (100%)

(* 테이블 자체의 속성을 정하기 위해서는 테이블을 선택해야 하는데 주로 하단의 <table> 태그를 클릭하면 테이블 전체가 선택 된다)

- 셀의 크기 조정하기 (왼쪽, width 120) -> <td> 눌러서 셀 선택하기

(* 셀을 선택하는 방법은 세 가지: 화면 하단에 <table> 태그의 <td> 선택하기, ctrl + 셀 선택하기, 선택하고자 하는 셀 안에서 셀의 경계선을 드래그 하기)

- 셀 안에 배경 색상 적용하기 (왼쪽: 검정, 오른쪽: CCCC99)

- 셀 안의 align 속성 설정하기 (오른쪽: Vert -> top)

나. 테이블 내에 테이블 추가하기

- 테이블 기능은 “표”를 그리는 기능만 하는 것이 아니라 문서의 내용을 정렬하는데 이용하는 것을 볼 수 있다.

- 테이블 기능을 이용할 때에는 그 내용을 보는 이용자들의 환경을 생각해서 셀의 크기를 퍼센트로 정해줄 것인지 아니면 절대적인 픽셀의 수로 정해줄 것인지를 생각해야 함.

- 일단 첫 테이블을 제작한 후에 이 안에 추가로 테이블을 또 삽입하여 메뉴 등을 정렬하기도 하고 내용을 입력하기도 한다.

- 테이블 안에 테이블 삽입하기 (Row: 1 col: 4, Width: 100%)

- 셀 안에 배경 색상 적용하기(각각의 내용에 다른 색을 적용)

- 셀 안에 내용 입력하기(왼쪽셀 Top 정렬 후: Shift + Enter, Web Table Color 입력)

- 테이블 안의 모든 셀에 속성 동일하게 적용하기: (마우스로 드래그, align:center)

- 텍스트 입력하기 (메뉴 1, 메뉴 2, ...3, 4)

- 새로운 테이블 삽입하기(Shift + Enter, Rows: 2, Col: 1, 100%)

- 셀 패딩, 셀 스페이싱 속성 정하기 (Cell Pad: 10, Cell Space: 10)

- 셀 안에 배경색상 적용하고 텍스트 입력하기(<td>로 셀 선택)

        - Cell Padding: 셀 안의 내용들과의 여백

        - Cell Spacing: 셀과 셀 사이의 여백

- 이렇게 해서 기본적으로 만든 큰 틀 안에 테이블을 추가하여 추가 정렬을 하였음.

- 내용으로 “표”를 삽입하는 방법을 알아볼 것

- 새로운 테이블 삽입 (Row: 4, Col: 4, 600 pixel -> 테이블 생성 뒤 Height: 200px)

- 테이블에 배경색과 Border 나타내기(Border 색상 빨간색, Border "1")

- 셀 합치기(가로, 세로 합치기 보여주기 ->Merge, Split cell 아이콘 이용)

- 브라우저로 작업 내용 확인하기

- 테이블 기능을 이용하면 한 화면에 배치되는 내용을 가지런하게 정렬할 수 있다. 특히 항상 상단이나 좌측에 메뉴를 배치 하거나 같은 내용을 배치하는 경우가 있는데 이 때 사용할 수 있는 것이 테이블 기능.

- 하지만 테이블 기능 이외에도 프레임 기능을 이용해서 비슷한 디자인을 할 수 있다.

9. 레이아웃 테이블 (Part 3 Chapter 6 참조)

- 테이블 기능을 이용하면 정렬을 잘 할 수 있지만 복잡한 구도로 되어있는 페이지의 경우 복잡하게 구상을 할 필요 없이 그냥 보이는 대로 부분적인 구성 요소를 그려줄 수 있는 기능이 있다.

- 드림위버에서 테이블 도형 그리듯 쉽게 그릴 수 있는 도구가 있다.

- 그 도구가 바로 레이아웃 테이블 기능

- 이 것을 이용하기 위해서는 표준 뷰가 아닌 레이아웃 뷰 메뉴를 사용해야 함.

- 레이아웃 테이블 기능을 이용하면 다양한 구조로 테이블을 추가할 수 있다.

가. 트레이싱 이미지 적용하기

- 새로운 문서 만들기 (main.htm)

- 문서의 기본환경 설정하고 트레이싱 이미지 삽입하기 (Ch. 06, mainbackground.jpg, 40% transparency)

- 지금까지 한 것은 작성할 페이지의 디자인을 생각해서 미리 제작해 놓은 이미지를 배경에 놓는 작업을 한 것.

- 이 때 사용하는 것이 트레이싱 이미지, 즉, 밑그림이다. 트레이싱 이미지는 드림위버에서 작업할 때는 보이지만 웹 브라우저에서는 볼 수 없다.

나. 레이아웃 뷰 모드

- 레이아웃 뷰 모드로 전환하기

- 레이아웃 테이블 삽입하기 (Draw Layout Table 아이콘)

- 레이아웃 셀 삽입하기 (Draw Layout Cell 아이콘) -> 이미지 상단 셀, 왼쪽 하단 셀, 각 버튼 셀 (Ctrl 버튼 누르면 계속 추가할 수 있다)

- 테이블을 손쉽게 만드는 기능인 레이아웃을 사용하기 위해서는 레이아웃 뷰(Layout View) 모드로 전환을 해야만 한다.

- 그리고 일단 레이아웃 테이블을 하나 생성하고 그 안에 여러 개의 셀을 추가하는 방식으로 제작을 하게 된다.

- 이제 나머지 버튼들을 개별적인 레이아웃 셀로 추가하고 확인해 볼 것.

다. 레이아웃 셀에 이미지 삽입하기

- 레이아웃 셀 안에 이미지 삽입하기 (셀 안에 커서, Inset Image 아이콘, main01.jpg, main02.jpg, icon01.jpg, icon02.jpg, icon03.jpg, icon04.jpg, icon05.jpg)

- 표준 모드(Standard View)로 전환하기 -> 테이블로 전환됨

- 테이블에 배경색상 적용하기 (<table> 태그 클릭, 배경색상 스포이드로 선택)

- 이처럼 레이아웃 뷰는 테이블을 손쉽게 제작할 수 있게 해 준다.

10. 프레임 기능 (교과서 Part 3 Chapter 7 참조)

가. 프레임에 대한 이해

- 웹 문서를 정렬하기 위해서 많이 사용되는 테이블 태그 이외에 프레임을 이용할 수 있다.

- 이는 같은 메뉴가 항상 상단 혹은 왼쪽에 놓이게 될 때 페이지 전체를 다시 불러오지 않고 변하는 부분만 불러올 때 이용한다.

- 문서의 디자인 자체는 테이블을 이용하는 것과 크게 다르지 않지만 제작하는 방법은 아주 다르다.

- 테이블 기능은 문서 전체가 하나의 문서로 제작이 되지만 프레임은 여러 개의 문서가 합쳐져서 하나의 문서를 이루게 된다.

- 프레임은 메뉴와 같이 항상 등장하는 부분을 따로 제작하여 별개의 구성 요소를 이루게 하는 기능. 이러한 기능을 이용하게 되면 새로운 내용을 불러올 때 항상 전체 페이지가 새롭게 불러지는 것이 아니라 변하는 내용만 불러지게 된다.

- 프레임을 만들 때에는 모든 프레임을 통괄하는 프레임셋(frameset), 그리고 개별 프레임을 구성하는 각각의 문서를 제작해야 한다.

나. 프레임셋 만들기

- 새로운 파일 만들기 (frameset.htm)

- 프레임 추가하기 (프레임 탭을 보여주고 상하로 나뉘어진 프레임 구조 선택하기)

- 프레임셋에 관련된 속성창 보기 (Windows-> Others-> Frames)

- 각 프레임 선택하기 (Top Frame, Main Frame, Frameset)

- 프레임을 선택하는 방법에는 프레임셋을 나타내는 외곽의 두꺼운 선을 클릭하거나 작업하면에서 프레임을 구분하는 선을 클릭한다.

- 페레임을 선택하기 위해서는 프레임 패널에서 원하는 프레임을 선택하거나 ALT를 누르고 작업 화면에서 선택하려는 프레임을 클릭한다.

다. 프레임 속성 변경하기

- 프레임 크기 변경하기 (<frameset> 태그 이용, 프레임 패널의 외곽 테두리 선택, Rows 120)

- 프레임 Border 나타내기 (Border Width = 0, Border = Yes, Color=black)

- 상단 프레임의 배경 색상 설정하기

- 문서 안에 메뉴 텍스트 입력하기 (Favorite Sites, Jireumgil | Daum | Naver | Yahoo)

- 텍스트 속성 변경하기

- 이렇게 각 프레임을 한 화면에서 편집한다.

- 하지만 이 문서는 여러 개의 문서로 구성된 하나의 프레임셋이다.

라. 프레임셋 저장하기

- 이 문서는 각각의 프레임을 개별적인 문서로 저장해 놓아야만 내용이 제대로 보인다.

- 저장할 때는 프레임셋과 각각의 프레임을 별도로 선택해서 저장하는 방법이 있고 “File -> Save All"을 선택하는 방법이 있다.

- 프레임셋을 선택한 상태에서 File 메뉴 불러오기 -> Save Frameset 보여주기

- 프레임 하나를 선택한 상태에서 File 메뉴 불러오기 -> Save Frame 보여주기

- 프레임셋 저장하기 (File -> Save All)

- 프레임 윈도에 저장될 문서가 선택되어 나타난다. (Frameset, Main, Top 지정해 주고 저장)

- 윈도에서 확인하기

마. 프레임에 링크 설정하기 (Target Frame)

- 이렇게 설정하고 저장한 프레임의 내용을 편집한다.

- 특히 텍스트에 링크를 설정하는데 이 때 주의해야 할 것은 불러올 때 어느 프레임에 불러올 것인가를 정하는 것.

- 즉, 목표 프레임, (target frame)을 지정해 주어야 한다.

- 여기서는 상단의 메뉴 부분을 클릭하면 본문 안에 내용이 보이도록 한다. 즉, target frame을 main frame으로 정해준다.

- 각 내용에 주소 정해주고 Target으로 Main을 선택하기

- 브라우저에서 확인하기

바. 프레임셋 내에 프레임셋 추가하기

- 한 프레임셋 내에 또 하나의 프레임셋을 추가할 수 있다.

- 하나의 프레임을 다시 나누게 되면 새로운 프레임셋을 추가하는 것

- 새로운 프레임을 추가하는 방법은 프레임 메뉴를 이용할 수도 있지만 외곽선에서 끌어오는 방법도 있다

- 프레임셋 전체가 선택되었을 때에는 그 프레임만 추가되지만 한 프레임 내에서 추가하면 새로운 프레임셋이 만들어지는 것이다.

- 프레임셋 선택한 상태에서 아래 프레임 추가하기 -> 프레임셋 하나 보여주기

- 프레임 선택한 상태에서 아래 프레임 추가하기(bottom Frame) -> 프레임셋이 추가된 것 보여주기

- 프레임 문서 저장하기

- 새로운 프레임 나누기 -> 본문에 커서, ctrl + 드래그

- 새 문서의 배경색 정하기 (검정)

- 프레임 작업을 할 때에는 화면을 어떻게 분할할 것인가, 그리고 각 화면의 링크를 선택했을 때 내용이 어떤 프레임에 보여지게 될 것인가, 즉 target frame 어느 프레임인가를 미리 잘 구성해서 작성해야 된다.

11. 레이어 활용 (교과서 Part 4 Chapter 4 참조)

가. 레이어 개요

- 레이어를 사용하면 문서 안에 여러 구성 요소를 다양하게 배치할 수도 있고 레이어를 이용해서 다양한 효과를 만들 수 있다.

- 드림위버에서 사용하는 레이어의 개념은 포토샵의 레이어와 유사한 것으로 레이어를 이용하여 내용을 보여지게 하거나 안보여지게 할 수도 있고 여러 가지 동적인 효과를 줄 수도 있다.

- 일반적으로 레이어는 특수 효과를 줄 때 많이 이용한다.

- 새로운 문서 추가하고 배경 이미지 설정하기(4.4., background.gif)

- 문서 안에 레이어 삽입하기 (Common 텝에서 Draw Layer 이용)

- 레이어 패널 불러와서 확인하기 (Visible, 레이어 이름, 레이어 번호)

- 이렇게 만들어진 레이어 내에 이미지를 삽입하기도 하고 본문의 내용을 삽입하기도 한다.

- 레이어를 추가할 때에는 서로 겹치는 것을 허용할 수도 있고 겹치는 것을 허용하지 않을 수도 있다.

- 배경을 구성할 때는 겹쳐지지 않는 것이 좋다.

- 이 이미지들은 겹치는 속성을 없앴기 때문에 서로 겹쳐지지 않는 것을 볼 수 있다.

나. 레이어 편집하기

- 레이어 안에 이미지 삽입하기 (main01.gif)

- 속성창에서 레이어의 위치 조정하기(좌표, 0, 0)

- 새로운 레이어 삽입하고 이미지 넣기 (오른쪽, main02.gif, 아래, main01.gif)

- 소스 보기

- 작업 내용 확인하기

다. 겹치는 레이어 추가하기

- 하지만 레이어 위에 추가적인 레이어를 생성해서 특수 효과를 주려면 서로 겹치는 기능을 이용하기도 한다.

- 새로운 레이어 만들고 배경 색상 변경하기 (4 번, 사각형 4 개)

- 레이어 두 개를 선택해서 Align으로 정렬하기 (shift 눌러 레이어 추가, Modify-align-left

- 레이어 안에 메뉴 텍스트 입력하기(Menu01, Menu02, Menu03, Menu04, align=center)

- 새로운 레이어 안에 이미지 입력하기 (glass.gif)

- 소스 보기

- 작업 내용 확인하기

12. 타임라인 활용 (교과서 Part 4 Chapter 5 참조)

가. 타임라인 개요

- 위와 같이 레이어를 활용해 만들어진 문서는 드림위버의 “타임라인”기능을 이용해 특수 효과를 줄 수 있다.

- 물론 플래시나 쇽웨이브 등 별도의 동적인 내용물로 만들어진 기능을 이용하기도 하지만 드림위버 내에서도 간단한 동적인 효과를 부여할 수 있는 몇 가지 기능이 있다.

- 드림위버에서 동적인 효과를 줄 수 있는 기능은 타임라인.

- 작업할 화면 보기

- 순차적으로 레이어를 보이도록 하는 기능 설명하기

- 작업한 문서 불러오기

나. 타임라인에 레이어 등록하기

- 이 문서의 레이어를 순차적으로 불러올 것

- 새로운 레이어에 이미지 삽입하기 (girl.gif)

- 타임라인 패널 열기 (Window->Others->Timeline)

- 타임라인에 레이어를 등록하고 각각의 레이어가 등장하는 순서를 정해주게 된다. (순차적으로 Layer 1, 2, 3 등록하기, 레이어 4,5,6,7 순차적으로 짧게 등록하기, 레이어 8 등록하기)

- 소스 보기

- 작업 내용 확인하기

* 타임라인에 레이어 등록하는 방법:

1. 레이어를 선택해서 나오는 이동 핸들을 타임라인의 원하는 채널로 드래그 한다

2. 레이어를 선택하고 타임라인의 단축메뉴를 클릭해서 나오는 팝업 메뉴에서 Add Object를 선택한다.

3. 레이어를 선택하고 Modify->Timeline->Add Object to timeline을 실행한다

다. 키프레임을 이용한 애니메이션 효과

- 이렇게 타임라인에 등록된 레이어에 애니메이션 효과를 주기 위해서는 “키프레임” 개념을 이용한다. 키프레임은 주요 변화를 주는 포인트를 정해주는 프레임으로, 시작과 끝 지점의 키프레임만 정해주게 되면 그 사이의 변화는 드림위버가 자동적으로 생성해 주게 된다.

- 변화를 줄 수 있는 키프레임의 속성으로는 위치, 보여지기 등이 있다.

- 위의 화면에서는 각 이미지의 위치를 순차적으로 변형시키고 메뉴 부분은 사라졌다 나타나는 효과를 만들어 내고 있다.

- 최종 결과 화면 다시 보기

- 레이어 1 위치 -300, 레이어 2 위치 -450, 레이어 3 위치 -800

- 레이어 4,5,6,7은 처음에 visible을 hidden으로 설정

- 레이어 10을 이용하여 듀오톤 이미지 변형시키기 (처음에 visible을 hidden으로 설정)

- 이와 같이 타임라인을 이용하면 드림위버에서도 어느 정도의 동적인 내용을 구성할 수 있다.

13. 멀티미디어 컨텐츠 추가하기 (교과서 Part 4 Chapter 8 참조)

- 플래시, 동영상, 사운드 등 미리 만들어진 멀티미디어 컨텐츠가 있을 경우, 드림위버를 이용해서 사운드를 추가할 수 있다.

- 멀티미디어 컨텐츠를 추가하는 방법은 인서트 바에서 “media"를 선택하면 된다.

- 이 때 선택하는 멀티미디어 내용이 어디에 저장되어 있는가를 인식하는 것이 중요하다.

- 예제 문서 불러오기

- 플래시 무비 삽입하기 (end.swf)

- 동영상 삽입하기 (subway.mov)

- 배경 음악 삽입하기 (testsnd.mid)

- 소스 보기

- 최종 내용 확인하기

14. 비헤이비어 활용하기 (교과서 Part 5 Chapter 2 참조)

가. 비헤이비어 개요

- 비헤이비어를 이용하면 메뉴 위에 마우스가 놓여졌을 때 이미지가 바뀌게 하는 롤오버 효과를 주거나 페이지의 일부에 놓여졌던 레이어가 나타나게 하는 효과, 그리고 점프 메뉴나 팝업 창이 뜨게 하는 등의 복잡한 스크립트가 요구되는 기능을 추가할 수 있다.

- 비헤이비어를 잘 사용하려면 각 기능에 대한 이해가 우선 있어야 한다.

나. 롤오버 이미지 효과

- 롤오버 이미지, show hide layers 효과, 팝업 메뉴, 점프 메뉴, 팝업 창 뜨는 것 등을 보기

- 롤오버 이미지는 원래 놓여있던 이미지 위에 마우스가 놓여지게 되면 다른 이미지로 변경되는 것을 의미한다.

- 이를 위해서는 두 개의 이미지가 준비되어야 하고 마우스가 놓여졌을 때 이미지가 바뀌게 해야 한다.

- 롤오버 이미지를 잘 활용하면 같은 내용만 뜨게 하는 것이 아니라 부속 메뉴가 뜨게 하거나 전혀 다른 이미지가 뜨도록 해서 애니메이션 효과를 줄 수도 있다.

- 이렇게 많이 사용하는 롤오버 이미지 기능만 잘 이용해도 복잡한 스크립트가 요구되는 기능을 손쉽게 제작할 수 있다.

- 기능의 개념을 아는 것이 중요하다.

나. Show Hide Layers 비헤이비어

- 롤오버 효과는 같은 장소에 서로 다른 이미지를 보여주는 기능

- 레이어 기능과 비헤이비어를 같이 이용하면 더욱 흥미로운 효과를 줄 수 있다.

- 각 레이어를 만들어 놓았지만 일단 화면에서는 안 보이도록 hidden 속성을 주었음.

- 이제 마우스가 특정 부분에 놓이게 되면 안 보이던 레이어가 visible로 변경되도록 설정해 주어야 함.

- 그런데, 보이게 하는 것만 중요한 것이 아니라 마우스가 그 영역을 벗어나면 다시 안 보이게 해 주어야 함.

- 이처럼 마우스가 특정 부분에 놓였을 때 레이어가 보이게 하는 기능을 추가하는 것은 세 단계의 작업을 요구한다. 레이어 보이게 하기, 마우스 속성 변경하기, 마우스가 영역을 벗어나면 레이어 다시 감추기.

- 복잡해 보이지만 개념을 알고 있으면 쉽게 작업이 가능하다.

- 이와 같이 롤오버 이미지 효과와 레이어 기능을 이용하게 되면 이용자의 인터페이스를 아주 다양하고 흥미롭게 만들 수 있다.

다. 점프 메뉴

- 점프 메뉴는 다른 문서로 링크시키는 기능을 목록식으로 제공하는 것.

- 많이 사용되는 기능이므로 Insert 패널의 Forms라는 기능에 포함되어 있음.

- 우선 점프 메뉴를 추가할 수 있는 공간을 테이블 기능으로 만들고 Jump Menu 아이콘을 이용하여 추가한다.

- 점프 메뉴를 만들기 위해서는 일단 링크를 시키고자 하는 목록이 있어야 하고 또한 링크할 주소 혹은 파일 이름을 설정해야 한다.

라. 팝업창

- 팝업창은 이벤트나 공지사항을 앙리고자 할 때 많이 사용됨.

- Open Browser Window 비헤이비어 기능을 이용하면 간단하게 설정이 된다.

- 팝업창을 이용하기 위해서는 팝업창에 띄울 내용을 미리 웹페이지로 만들어 놓아야 한다.

- 이미지가 놓여있는 화면 보여주기

- 본문 문서(index.htm)를 선택, <body> 태그를 클릭하고 behavior, +, Open Browser Window 선택

- 팝업창에 띄울 파일 선택, W: 320, H: 420 (이미지 크기에 맞게 창 조절)

- 소스 보기

- 브라우저로 확인하기

- 기타 홈페이지의 통일성을 위해 사용하는 기능인 스타일 시트와 템플릿이 있다. 이 기능들을 이용하면 문서 작성할 때 사용하는 글꼴, 디자인 등을 일정하게 설정해 놓고 사용할 수 있다.