본문 바로가기
컴퓨터

나모 웹 에디터2006(플래시 무비 만들기)...(7)

by 해찬솔의 신학 2009. 11. 11.
   
  [나모웹에디터] 나모웹에디터 2006 - 7. 웹캔버스로 플래시 무비 만들기
나모 프리모션 2006은 플래시 애니메이션 저작 툴로 이전에 있었던 플래시 무비 저작 툴보다 쉽고 경제적으로 플래시 무비를 만들 수 있다.
이번 달에는 나모 프리모션 2006을 활용해 플래시 카드 만드는 방법에 대해서 살펴 보도록 하겠다.
 

01

  문서 속성 지정하기
 
먼저 새 파일을 만든 뒤 캔버스의 크기를 조정해보자.
 
01 나모 프리모션 2006을 실행한다.
 
02 ‘새 템플릿’ 대화상자에서 ‘빈 문서’를 선택한 뒤 ‘확인’을 누른다.
 
03 빈 문서가 열린다. 빈 문서는 기본으로 ‘레이어 1’이라는 레이어로만 구성된다.
 
04 레이어 이름을 바꾸기 위해 ‘레이어 1’을 선택한 뒤 바로가기 메뉴에서 ‘이름 바꾸기’를 선택한다.
 
05 ‘이름 바꾸기’ 대화 상자에 ‘background’라고 입력한 뒤 ‘확인’을 누른다.
 
06 130프레임을 선택한 뒤 F5 키를 눌러 프레임 길이를 늘린다.
 
07 이제 캔버스를 선택한 뒤 ‘속성’ 패널에서 캔버스 속성을 그림처럼 조정해보자.
 
 
 
 
 
 
 

02

  배경 만들기
 
먼저 새 파일을 만든 뒤 캔버스의 크기를 조정해보자.
 
01 ‘도구’ 패널에서 ‘사각형’ 도구를 선택한다.
 
02 캔버스의 한 점을 클릭한 뒤 드래그하여 문서 크기와 동일하게 사각형을 그린다.
 
03 선택 도구로 방금 그린 사각형을 선택한 뒤 ‘모양’의 ‘채우기 유형’에서 ‘원형’을 선택한다.
 
04 ‘원형’을 선택하면 선택한 개체에 ‘원형 그라디언트’가 적용된다. 그라디언트 색깔을 다음과 같이 바꾼다.
 
05 이번에는 그라디언트 방향과 크기를 수정한다. ‘도구’패널에서 ‘칠 변형’ 도구를 선택한 뒤 사각형 개체를 선택한다.
 
06 그라디언트 조절점을 클릭한 뒤 그라디언트 크기와 방향을 조절한다.
 
 
 
 
 
 
 

03

  무비 클립 만들기
 
이번에는 하트 모양의 무비 클립을 만들어보도록 하자.
 
01 ‘레이어 삽입’을 눌러 레이어를 추가한다.
 
02 새로 추가된 레이어의 이름을 ‘heart’로 바꾼다.
 
03 130프레임을 선택한 뒤 F5 키를 눌러 프레임 길이를 늘린다.
 
04 다른 레이어에 있는 개체와의 혼동을 피하기 위해 ‘background’ 옆의 눈 모양 버튼을 눌러 보이지 않는 상태로 만든다.
 
05 ‘heart’ 레이어의 1프레임을 선택한 후 ‘도구’ 패널에서 ‘펜’ 도구를 선택한다.
 
06 ‘선 두께’는 ‘1’, ‘채우기 유형’은 ‘단색’, 색깔은 ‘흰색’으로 선택한다.
 
07 캔버스 위의 한 점을 클릭한다. 또 다른 한 점을 클릭한 채 마우스를 드래그하여 곡선으로 된 패스를 그린다.
 
08 같은 방법으로 이어서 다음 그림과 같은 패스를 그린다. 패스 그리기를 마치려면 마우스 오른쪽 버튼을 누른다.
 
09 만약 패스를 그린 뒤 수정하려면 ‘도구’ 패널에서 ‘모양 고치기’ 도구를 선택한 뒤 개체를 선택한다.
 
 
 
 ① 만약 추가한 조절점을 삭제하려면 마우스 포인터 모양이 로 바뀌었을 때 조절점을 클릭하면 된다.
 ② 모양을 바꾸려면 마우스 포인터 모양이 로 바뀌었을 때 조절점을 클릭한 뒤 원하는 위치로 드래그하면 된다.
 ③ 조절점을 추가하려면 마우스 포인터의 모양이 로 되었을 때 패스의 한 부분을 클릭한다.
 
 
10 완성된 하트 개체를 선택한 뒤 바로가기 메뉴에서 ‘심벌 변환하기’를 선택한다.
 
11 ‘심벌 변환하기’ 대화상자에서 ‘무비 클립’을 선택한 뒤 ‘확인’을 누른다. 무비 클립은 아주 작은 무비를 말하는 것으로 메인 무비의 타임 라인과는 별개로 무비 클립에도 타임 라인이 있어 작은 무비를 만들어 메인 무비 안에서 쓸 수 있다.
 
12 ‘라이브러리’ 패널에 등록된 무비 클립 심벌을 더블 클릭한다.
 
13 무비 클립을 편집할 수 있도록 편집 창이 바뀐다. 캔버스에 있는 하트 개체를 선택한 뒤 ‘변형’ 패널에서 ‘너비’와 ‘높이’를 ‘9’로 지정한다.’
 
14 하트 개체를 선택한 채로 ‘색깔 변형’ 목록에서 ‘알파’를 선택한 뒤 아래 상자에 ‘40’이라고 입력한다. 알파값을 낮게 지정할수록 개체가 투명해진다.
 
15 이제 가이드를 따라 움직이는 무비를 만들어보자. ‘도구’ 패널에서 ‘연필 가이드’를 잠시 누르고 있으면 나타나는 하위 메뉴에서 ‘펜 가이드’를 선택한다.
 
16 캔버스의 한 점을 클릭한 뒤 그 위쪽으로 한 점을 클릭하고 마우스를 드래그하여 곡선이 되도록 만든다.
  
17 하트 개체의 중심점을 가이드 시작점과 겹쳐 놓는다. 하트 개체가 작아 작업이 불편하면 캔버스를 확대한다.
 
 
 
 
 
 
18 70프레임을 선택한 뒤 ‘F6’ 키를 눌러 키 프레임을 넣는다. 키 프레임은 무비에 수정 사항을 지정하거나 프레임 액션을 지정할 수 있는 프레임을 말한다. 키 프레임에는 검정색 원이 나타난다.
 
19 70프레임을 선택한 채로 하트 개체의 중심점을 가이드 끝점과 겹쳐 놓고 알파값은 ‘0’으로 지정한다.
 
20 1프레임을 선택한 뒤 바로가기 메뉴에서 ‘모션 트윈 만들기’를 선택한다. 이제 하트 개체가 가이드를 따라 움직이는 무비가 만들어진다.
 
21 다시 메인 무비로 돌아오려면 ‘장면 1’을 선택한다.
 
22 ‘heart’ 레이어의 1프레임을 선택한 뒤 캔버스에 있는 개체를 모두 지운다. ‘라이브러리’ 패널에서 ‘심벌 3’ 무비 클립을 드래그하여 아래쪽에 놓는다. 같은 방법으로 여러 개의 심벌을 드래그한다.
 
23 지금까지의 작업을 확인하려면 ‘Ctrl+Enter’ 키를 눌러 미리보기에서 무비를 확인한다. 하트 개체가 아래쪽에서부터 천천히 위로 올라가면서 사라지는 무비를 확인할 수 있다.
 
 

04

  텍스트 만들기
 
이제 무비에 텍스트를 입력한 뒤 효과를 지정해보자.
 
01 레이어를 새로 추가한 뒤 이름을 ‘text’로 바꾼다.
 
02 이미 만든 레이어 두 개는 보이지 않도록 해놓는다.
 
03 130프레임을 선택한 뒤 ‘F5’ 키를 눌러 프레임을 넣는다.
 
04 ‘도구’ 패널에서 ‘글자‘ 도구를 선택한다.
 
05 ‘속성‘ 패널에서 ‘글꼴’은 ‘Monotype Corsiva’로 선택한 후 ‘글꼴 크기’는 ‘30’으로 지정한다. 정렬은 ‘가운데’로 하고 글자 색깔은 ‘흰색’을 선택한다.
 
06 캔버스 한 지점을 클릭한 뒤 드래그하여 글상자를 만든다.
 
07 글상자에 ‘Happy Valentine‘s Day‘라는 문구를 입력한다. 입력한 글자에 맞춰 글상자 오른쪽 아래에 있는 흰 원을 드래그하여 글상자 크기를 조절한다.
 
08 입력을 끝내려면 글상자 바깥의 캔버스 부분을 클릭한다.
 
09 ‘선택’ 도구로 글자 개체를 선택한 뒤 가운데로 드래그한다.
 
10  ‘변형’ 패널의 ‘색깔 변형’에서 ‘알파‘를 선택한 뒤 알파값을 ‘80%‘로 지정한다.
 
11 글자에 효과를 지정하기 위해 글자 개체를 선택한 뒤 바로가기 메뉴에서 ‘효과 → 효과 만들기’를 선택한다.
 
12 ‘효과 선택하기’ 대화상자에서 ‘페이드 인 색깔 바꾸기’를 선택한다.
 
13 세부 항목 설정을 위해 대화상자 오른쪽 아래에 있는 ‘설정’을 누른다.
 
14 ‘효과 설정’ 대화상자에서 다음 항목을 지정한 뒤 ‘확인’을 누른다.
 
 
 
 
 
 
15 ‘Ctrl+Enter’ 키를 눌러 미리보기에서 지금까지의 결과를 확인한다
 
 

05

  액션 추가하기
 
이제 가장 마지막 프레임에서 무비가 정지되도록 액션을 추가하자.
 
01 레이어를 새로 추가한 뒤 이름을 ‘action‘으로 바꾼다.
 
02 130프레임을 선택한 뒤 F6 키를 눌러 키 프레임을 넣는다.
 
03 ‘action’ 레이어에는 아무런 개체가 들어가 있지 않기 때문에 빈 키 프레임이 만들어진다. 빈 키 프레임에는 작은 흰 원이 나타난다.
 
04 ‘action’ 레이어의 130프레임을 선택한 뒤 ‘액션’ 패널을 선택한다.
 
05 ‘액션 스크립트 마법사’ 버튼을 누른 뒤 ‘정지’를 선택한다.
 
06 ‘정지‘에 해당하는 스크립트가 자동으로 입력되고, 액션이 입력된 프레임에는 ‘a‘라는 표시가 나타난다.
 
 
 
 
 
 
07 이제 ‘text‘ 레이어의 130프레임을 선택한 뒤 F6 키를 눌러 키 프레임으로 바꾼다. 이렇게 하면 계속 반복되는 글자 개체의 페이드 인 색깔 바꾸기 효과가 130프레임에서 정지된다. 하트 개체는 무비 클립이기 때문에 하트 개체의 움직임을 액션으로 제어하려면 무비 클립을 열어 수정해야 한다.
 
08 ‘Ctrl+Enter’ 키를 눌러 미리보기에서 지금까지의 결과를 확인해본다.
 
 

06

  버튼 만들기
 
이번에는 무비의 끝부분에 ‘Replay‘ 버튼을 넣어서 이 버튼을 클릭할 때마다 시작 부분부터 무비가 재생되도록 설정해보자.
 
01 레이어를 새로 추가한 뒤 이름을 ‘button‘으로 바꾼다.
 
02 130프레임을 선택한 뒤 F5 키를 눌러 프레임을 삽입한다.
 
03 115프레임을 선택한 뒤 ‘도구’ 패널에서 ‘모서리가 둥근 사각형’을 선택한 뒤, ‘도구’패널 아래쪽에서 둥글기를 ‘20‘으로 지정한다. 1프레임이 아니라 115프레임에 개체를 삽입하는 이유는 처음에는 버튼이 보이지 않다가 무비 재생이 끝날 때쯤 버튼이 보이도록 하기 위해서다.
 
 
 
04 ‘모양’ 패널에서 ‘선 두께’는 ‘0’으로 지정하고 ‘채우기 유형’은 ‘원형’을 선택한 뒤 조절점의 색깔과 위치를 그림처럼 지정한다. 왼쪽부터 조절점 색깔은 #A90E0E, #8C6769, #A90E0E가 된다.
 
05 캔버스의 한 점을 클릭한 뒤 드래그하여 사각형을 그린다.
 
06 ‘도구’ 패널에서 ‘칠 변형’ 도구를 선택한 뒤 삽입한 버튼 개체를 선택한다.
 
07 그라디언트 조절점이 나타나면 드래그하여 그라디언트 방향을 조정한다.
 
08 이번에는 ‘도구’ 패널에서 ‘글자’ 도구를 선택한다.
 
09 ‘속성’ 패널에서 ‘글꼴’은 ‘Monotype Corsiva’, 크기는 ‘18’, 색깔은 ‘흰색’, 그리고 ‘굵게’와 ‘이탤릭’을 선택한다.
 
10 캔버스를 클릭한 채 드래그하여 글상자를 만든 뒤 ‘Replay’라고 입력한다.
 
11 ‘선택’ 도구로 입력한 글자 개체를 사각형 중앙에 오도록 조정한다.
 
12 이제 둥근 사각형과 글자 개체를 그룹 개체로 만들어 보자. ‘선택’ 도구를 선택한 뒤 두 개체가 모두 포함되도록 드래그한다.
 
13 바로가기 메뉴에서 ‘그룹 → 그룹’을 선택한다.
 
14 방금 전에 만든 그룹 개체를 선택한 뒤, 바로가기 메뉴에서 ‘심벌 변환하기’를 선택한다.
 
15 ‘심벌 변환하기’ 대화상자에서 ‘변환하기’ 유형을 ‘버튼’으로 선택한 뒤 ‘확인’을 누른다.
 
16 ‘선택’ 도구로 버튼의 위치를 오른쪽 아래쪽으로 이동한다.
 
17 버튼을 눌렀을 때 가장 첫 프레임부터 무비를 재생하도록 하기 위해 캔버스의 버튼을 선택하고 ‘액션’ 패널에 예의 스크립트를 입력한다.
 
 
 
예>
on (release)
{
              gotoAndPlay(1);
}
 
 
18 이제 버튼이 처음에는 보이지 않다가 무비 재생이 끝나갈 무렵 서서히 나타나도록 모션 트윈 기법을 써보자. 모션 트윈 기법은 첫 프레임과 끝 프레임의 개체 속성만 지정해주면 그 중간의 변화하는 과정은 자동으로 만들어 주는 애니메이션 기법이다.
 
 
 
 ① 115프레임을 선택한 뒤 버튼 개체를 선택한다. '변형' 패널의 '색깔 변형'에서 '알파'를 선택한 뒤 알파값을 '0'으로 지정한다. 알파 값을 '0'으로 지정하면 개체가 보이지 않는다.
 ② 130프레임을 선택한 뒤 F6 키를 눌러 키 프레임을 써 넣는다.
 ③ 130프레임을 선택한 뒤 캔버스의 개체를 선택하고 알파값을 '100'으로 지정한다.
 ④ 이제 115프레임을 선택한 뒤 바로가기 메뉴에서 '모션 트윈 만들기'를 선택한다. 보이지 않던 개체가 서서히 보이도록 하는 애니메이션을 만들 수 있다.
 
 
 
 
19 ‘Ctrl+Enter’ 키를 눌러 미리보기에서 지금까지의 결과를 확인해본다. ‘Replay’ 버튼을 누르면 다시 무비가 재생되는지 확인한다.
 
 

07

  SWF 파일 형식으로 내보내기
 
이제 완성된 파일을 SWF 형식 파일로 내보내는 방법에 대해 알아보자.
 
01 기본 도구 막대에서 ‘내보내기’ 옆의 작은 삼각형을 누른 뒤 하위 메뉴에서 ‘무비 내보내기(SWF)’를 선택한다.
 
02 ‘내보내기’ 대화 상자에서 파일 이름을 지정한 뒤 ‘저장’을 누른다.
 
03 SWF 파일이 생성된다.
 
지금까지 나모 프리모션 2006의 몇 가지 기능만을 활용해서 간단한 플래시 카드를 만들어보았다. 다음 시간에는 나모 웹캔버스 2006을 이용해 사진을 다른 느낌으로 꾸며 보는 방법에 대해서 알아보도록 하겠다.