Chris Georgenes


Team Macromedia 회원
www.mudbubble.com*
www.keyframer.com*
수많은 애니메이터가 Macromedia Flash를 사용하여 세부적인 벡터 기반의 애니메이션을 제작합니다. Flash의
강점 중 하나는 다용도 워크플로와 제작 프로세스입니다. 저는 복잡한 애니메이션 캐릭터의 다양한 움직임을 만들고 관리하는 데
도움이 될 수 있는 몇 가지 사용자 정의 기술을 개발했습니다. 이 문서에서는 한 가지 캐릭터로 구성된 Flash 애니메이션
만화를 만드는 과정을 스케치부터 자세히 설명하여 제가 개발한 최고의 Flash 비법 중 일부를 공개하겠습니다.
요구 사항


자습서 및 샘플 파일:

• mudbubble_boy.zip(ZIP, 106K)
  

사전 지식


필요 없습니다. 이 문서는 초보자뿐만 아니라 Flash를 사용한 경험이 있는 모든 사용자를 대상으로 합니다.
Flash에서 드로잉


Macromedia Flash에서 제공하는 다양한 드로잉 도구를 사용하여 멋진 캐릭터를 만들 수 있습니다. 각기 다른
특성을 가진 도구는 다양한 스타일을 만들어냅니다. 일부 도구는 크기가 큰 파일을 만들고 다른 도구는 크기가 작은 파일을
만듭니다. 이러한 도구에 좀 더 익숙해지면 원하는 예술적 스타일과 유지할 파일 크기에 가장 적합한 도구를 선택할 수 있게
됩니다. 이는 단순히 파일 크기, 다운로드 시간, 재생 성능 간의 문제입니다. 이 단원에서는 각 Flash 드로잉 도구를
살펴보고 장점과 단점에 대해 설명합니다.
브러시 도구


그림 1의 브러시 도구는 압력 감지 타블렛을 사용할 경우 도구 중에서 가장 유용하게 사용할 수 있는 도구입니다. [You must be registered and logged in to see this image.]

그림 1. 브러시 도구
브러시 도구로 그리는 것은 모양으로 그리는 것과 같습니다. 또한 압력 감지와 기울기 기능을 지원하므로 사용 시 느낌이 가장 자연스러운 도구입니다. Wacom은
스타일러스라는 배터리 없이 작동하는 무선 펜을 비롯하여 다양한 크기의 타블렛을 제작하며 이들 장치는 Flash 작업 시 상당히
유용하게 쓰입니다. Wacom 타블렛은 기존 마우스와 함께 사용하거나 마우스 대신 사용할 수 있으며 Flash 이외의 다양한
용도로도 사용할 수 있습니다. 많은 디지털 디자이너가 타블렛을 사용하여 Adobe Photoshop, Adobe
Illustrator, Macromedia FreeHand 등의 여러 애니메이션 프로그램 및 그래픽 편집기에서 작업합니다.
하지만 타블렛이 없다고 걱정하지 마십시오. 기울기와 압력 감지 기능만 사용할 수 없을 뿐이지 타블렛 없이도 브러시 도구를 사용할
수 있습니다.
압력 감지 타블렛이 설치되어 있는 경우 브러시 도구를 선택하면 선 품질에 영향을 주는 두 가지 세부 선택 사항이
제공됩니다. 도구 상자 맨 아래에 압력 감지 및 기울기 옵션이 있습니다(그림 2 참조). 이 옵션을 하나나 둘 다 선택하고
Flash에서 브러시 도구를 사용하면 다양한 결과를 얻을 수 있습니다. [You must be registered and logged in to see this image.]

그림 2. 압력 감지 및 기울기 옵션
그림 3에서는 브러시 도구로 그린 결과를 보여 줍니다. 왼쪽의 결과는 모양입니다. 즉, 모양의 모든 가장자리에 벡터
포인트가 있습니다. 객체에 포인트가 많을수록 파일 크기가 더 커집니다. 이 모양은 압력 감지 타블렛을 사용하여 그린 것입니다.
차츰 가늘어지는 끝과 일정하지 않은 선 두께는 획에 다양한 압력을 가하여 만든 것입니다. 오른쪽의 모양도 브러시 도구를 사용하여
그렸지만 이 경우에는 압력 감지 설정을 사용하지 않았습니다.[You must be registered and logged in to see this image.]

그림 3. 압력 감지 설정을 사용하고 그린 모양(왼쪽)과 사용하지 않고 그린 모양(오른쪽)
브러시 도구는 특정한 효과를 그리는 데 도움이 되는 몇 가지 세부 선택 사항을 제공합니다(그림 4 참조).

• 보통 페인트: 같은 레이어의 선과 채우기 위에 칠합니다.
  
• 채우기 페인트: 스테이지에서 채움 색상 내부와 모양 외부를 칠합니다.
  
• 뒤쪽 페인트: 기존 채우기와 획 뒤에 칠합니다.
  
• 선택 영역 페인트: 선택한 채우기 내부만 칠할 수 있습니다.
  
• 안쪽 페인트: 채우기 내부를 칠하기 시작하면 선 외부는 칠해지지 않습니다.
  

[You must be registered and logged in to see this image.]

그림 4. 브러시 도구 효과
객체 드로잉


객체 드로잉은 서로 독립된 개별 객체로 모양을 그릴 수 있는 Flash 8의 새로운 기능입니다. 한 모양이 다른 모양을
"자르지" 못하도록 개별 레이어에 각 모양을 그려야 했던 시대는 지났습니다. Flash 8에서는 옵션 아래에 있는 모든 드로잉
도구의 세부 선택 사항(브러시, 연필, 펜, 타원형, 사각형)으로 객체 드로잉을 간단히 설정하거나 해제할 수 있습니다(그림 5
참조). Macromedia FreeHand나 Adobe Illustrator에 익숙한 사용자라면 Flash도 익숙하게 사용할
수 있습니다.[You must be registered and logged in to see this image.]

그림 5. 객체 드로잉 세부 선택 버튼
그림 6에서 볼 수 있듯이 객체 드로잉을 사용하지 않고 기존 모양 위에 새 모양을 그리면 두 모양이 병합되어 한 모양이
잘립니다. 이것을 병합 드로잉 모드라고 합니다. 이 모드는 모양을 잘라내어 새로운 모양을 만들 경우 유용합니다.[You must be registered and logged in to see this image.]

그림 6. 병합 드로잉 모드
객체 드로잉 모드로 모양을 그릴 경우 자동으로 객체 드로잉이 되며 다른 모양과 병합되지 않습니다. 모양이 잘릴 염려 없이
객체 드로잉을 겹칠 수 있습니다(그림 7 참조). 이 모드는 객체의 위치를 바꾸거나 단순히 이러한 객체를 독립된 상태로 유지해야
하는 경우에 유용합니다.[You must be registered and logged in to see this image.]

그림 7. 객체 드로잉 모드
마우스와 사각형 및 타원형 도구만으로 그림 8의 소년 캐릭터를 만들었습니다. 브러시 도구와 함께 Wacom 타블렛은
사용하지 않았습니다. 손쉽게 브러시 도구를 선택했지만 모양 도구를 사용하니 원하던 선 품질이 상당히 깨끗하게 나왔습니다. 브러시
도구는 여러 개의 불필요한 포인트를 만들어 파일 크기를 늘리며 다음에 모양을 편집하기 어려울 수 있습니다. 소년 그래픽의 경우
단순한 모양으로 그리고 가능한 한 파일 크기를 작게 유지하려고 했습니다.[You must be registered and logged in to see this image.]

그림 8. 모양 도구를 사용하여 만든 캐릭터
연필 도구


그림 9의 연필 도구는 이미지의 전체 선 두께를 일정하게 유지하고 파일 크기를 최대한 작게 유지하려는 경우에 가장 적합한 도구입니다. [You must be registered and logged in to see this image.]

그림 9. 연필 도구
연필 도구로 그린 선은 보다 적은 벡터 포인트로 이루어집니다. 직선의 경우 양 끝에 하나씩, 두 개의 포인트만 있습니다. 곡선에는 굽은 모양의 수에 따라 세 개 이상의 포인트가 있습니다(그림 10 참조).[You must be registered and logged in to see this image.]

그림 10. 연필 도구를 사용하여 그린 선
연필 도구는 여러 선 품질 모드도 제공합니다(그림 11 참조).

• 곧게: 이 옵션은 자유롭게 직선을 그리려는 경우에 가장 적합합니다. 손이 약간 떨리더라도 획 그리기를 마친 후에는 직선이 그려집니다.
  
• 매끄럽게: 이 옵션을 사용하면 만들려는 기본 모양을 유지하면서 선이 자동으로 매끄러워집니다.
  
• 잉크: 이 옵션은 선 품질에는 영향을 주지 않습니다. 자유롭게 그리거나 스타일에 구애 받지 않는 드로잉에 가장 적합합니다.
  

[You must be registered and logged in to see this image.]

그림 11. 연필 도구의 품질 모드
모양 도구


타원형과 사각형의 모양 도구는 기본적인 채우기와 획을 만듭니다(그림 12 참조). Shift 키를 누른 채로 모양 도구를 사용하면 완벽한 원이나 사각형이 만들어집니다.[You must be registered and logged in to see this image.]

그림 12. 모양 도구: 타원형과 사각형
속성 관리자에서 채우기 및 획 색상을 선택할 수 있습니다(그림 13 참조). 견본을 선택하면 색상 패널이 열리고 획이나 색상 선택을 편집할 수 있습니다. [You must be registered and logged in to see this image.]

그림 13. 사각형 도구의 속성 관리자
안에 빨강 대각선이 있는 사각형을 선택하면 획 또는 채우기 색상을 지정할 수 없습니다(그림 14 참조).[You must be registered and logged in to see this image.]

그림 14. 색상 없이 그리려면 이 사각형 선택
펜 도구


직선이나 매끄럽게 흐르는 곡선과 같이 정확한 패스를 그리려면 펜 도구를 사용합니다(그림 15 참조). 직선 또는 곡선을 그리고 직선의 각도 및 길이와 곡선의 경사를 조절할 수 있습니다. [You must be registered and logged in to see this image.]

그림 15. 펜 도구
펜 도구를 사용하여 직선 위에 포인트를 만들려면 마우스를 클릭하고, 곡선 위에 포인트를 만들려면 마우스를 클릭한 채
드래그합니다. 선 위의 포인트를 조절하여 직선과 곡선을 조절합니다. 곡선을 직선으로 변환하거나 직선을 곡선으로 변환할 수
있습니다.
곡선을 만들 경우 각 앵커 포인트에 접선 핸들이 만들어집니다. 세부 선택 도구(흰색 화살표)로 앵커를 선택하고 접선 핸들을
드래그하여 선을 편집할 수 있습니다(그림 16 참조). 앵커 포인트를 기준으로 핸들을 움직이면 곡선의 모양이 바뀝니다.[You must be registered and logged in to see this image.]

그림 16. 연필 도구로 그린 선 및 세부 선택 도구를 사용하여 선을 편집하는 과정
어니언 스킨 도구


어니언 스킨 도구는 타임라인 패널의 아래쪽에 있습니다(그림 17 참조). [You must be registered and logged in to see this image.]

그림 17. 어니언 스킨 도구
어니언 스킨 도구를 선택하면 타임라인의 재생 헤드 표시기에 어니언 스킨 표시자가 추가됩니다(그림 18 참조). 이 표시자를 끌어 현재 프레임 전후의 프레임 수를 늘릴 수 있습니다. [You must be registered and logged in to see this image.]

그림 18. 어니언 스키닝 효과
Flash에서는 두 가지 어니언 스키닝을 제공합니다.

• 일반 어니언 스키닝: 현재 프레임은 전체 색상으로 표시되고 앞뒤 프레임은 점진적으로 흐리게 나타납니다. 이 기능은 반투명 용지에 일련의 드로잉을 만든 다음 각각을 위에 겹쳐 놓은 것 같은 효과를 냅니다(그림 18 참조).
  
• 외곽선 모드의 어니언 스킨: 현재 프레임은 전체 색상으로 표시되고 앞뒤 프레임은 외곽선으로 표시됩니다(그림 19 참조). 이 기능은 현재 프레임의 앞뒤에 여러 개의 다른 키프레임으로 작업해야 할 경우 보다 쉽게 알아볼 수 있습니다.
  

[You must be registered and logged in to see this image.]

그림 19. 외곽선 모드의 어니언 스키닝
심볼 작업


심볼은 Flash의 핵심 요소 중 하나입니다. 그리거나 가져온 모든 요소를 심볼로 만들 수 있으며 대부분의 경우 이렇게
하는 것이 좋습니다. 그 이유는 바로 다음과 같습니다. 심볼로 변환된 객체는 자동으로 Flash 문서 라이브러리의 항목이
됩니다. 모든 Flash 문서에는 스테이지로 드래그할 수 있는 심볼이 포함된 자체 라이브러리가 있습니다. 이제 스테이지의 객체는
인스턴스로 간주됩니다. 스테이지에 있는 심볼의 인스턴스 수에 관계없이 Flash는 심볼을 한 번만 로드해야 합니다.
이를 통해 파일 크기를 작게 유지하면서 애니메이션 스트림을 제공할 수 있습니다. 심볼을 가능한 한 많이 다시 사용하는 것이
효율입니다. 또한 인스턴스에 크기 조절, 농도, 알파, 밝기 등의 효과를 적용하고 하나 이상의 효과와 함께 모션 트윈을 적용할
수 있습니다.
자세한 내용을 설명하기 전에 먼저 심볼과 비헤이비어를 소개하겠습니다.
아무 객체나 만드십시오. 간단한 모양도 좋습니다. Ctrl+A를 눌러 이 객체를 선택한 후 수정 > 심볼로 변환을 선택하거나 F8 키를 눌러 심볼로 변환합니다. 이렇게 하면 심볼로 변환 대화 상자가 나타납니다(그림 20 참조).[You must be registered and logged in to see this image.]

그림 20. 심볼로 변환 대화 상자
심볼로 변환 대화 상자에서 심볼 이름을 입력하고 세 비헤이비어 중 하나를 선택하며 객체의 등록 포인트를 지정할 수 있습니다. 다음 목록에서는 각 비헤이비어의 개념과 의미를 설명합니다.

• 무비 클립: 무비 클립은 동적이므로 Flash 프로그래밍 언어인 ActionScript의
  대상이 될 수 있습니다. 여기에 많은 레이어와 프레임을 포함할 수 있지만 무비 클립의 타임라인은 다른 모든 타임라인으로부터
  독립적입니다. 이를 태양계에 비유하면 태양이 기본 타임라인이고 이 둘레를 끊임없이 독립적으로 도는 각 행성이 무비 클립입니다.
  
• 버튼: 버튼에는 오버, 업, 다운, 히트의 네 가지 상태가 있습니다. 이러한
  요소는 버튼 심볼의 키프레임으로 표현됩니다. 그래픽을 이러한 상태로 설정한 후 버튼 인스턴스에 ActionScript를 적용하여
  Flash 무비에 대화형 기능을 추가할 수 있습니다.
  
• 그래픽: 그래픽 심볼은 정적이며 ActionScript의 대상이 될 수 없다는
  점을 제외하면 무비 클립과 매우 유사합니다. 그러나 무비 클립 심볼 내부에 그래픽 심볼을 놓을 수 있으며 그래픽 심볼에 여러
  개의 프레임과 레이어를 포함할 수 있습니다. 가장 중요한 기능은 기본 타임라인 및 각각의 타임라인과 항상 동기화된다는 것입니다.
  이는 시간 기반의 애니메이션을 만들려는 경우에 매우 중요합니다.
  

이 애니메이션 자습 과정에서는 그래픽 비헤이비어를 사용할 것을 권장합니다. 이를 통해 타임라인을 스크럽하여
Flash 제작 환경에서 애니메이션이 어떻게 재생되는지 확인할 수 있습니다. 스크럽은 재생 헤드를 직접 앞뒤로 이동하여
타임라인의 내용을 재생하는 것을 말합니다. 무비 클립 심볼은 Flash 무비를 테스트(Ctrl+Enter)하거나 무비를 SWF
파일로 내보내는 경우가 아니면 프레임 1 이상의 내용을 재생하지 않습니다.
스케치 정리


오랜 경험에서 입증된 바와 같이 좋은 디자인은 연필과 종이에서 시작합니다. 길고 지루한 경영 세미나가 진행되는 동안 좋은
아이디어가 떠오른 적이 있으며 때로는 칵테일 냅킨 위에 그린 낙서에서 영감을 받아 멋진 캐릭터를 만들 수도 있습니다. 분명한
사실은 언제 어디서 영감을 받을지 알 수 없다는 것입니다. 그러므로 필요할 때 바로 사용할 수 있도록 연필을 항상 가까이
두십시오.
앞서 설명한 도구들을 사용하여 Flash에서 스케치할 수 있습니다. 종이 위에 그린 그림을 바탕으로 Flash 캐릭터를
만들려면 그림을 스캔하여 그래픽 파일로 저장해야 합니다. 대부분의 스캐너와 함께 제공되는 소프트웨어로 이러한 작업을 손쉽게
수행할 수 있습니다. Flash에서 가져올 수 있는 일반적인 그래픽 포맷으로는 PNG, GIF, JPEG, TGA, TIFF
등이 있습니다.
스케치를 Flash로 가져온 후 어떻게 개별 항목으로 분리할지 생각해 보십시오. 이 과정이 힘든 부분이며 결국 애니메이션 스타일과 캐릭터 스타일에 의해 좌우되는 매우 개념적인 과정입니다.
Volkswagen의 말을 빌리자면 모양은 기능을 따르며 이는 캐릭터 디자인에 있어 상당히 중요합니다. 캐릭터가 어떻게 움직일지 마음속으로 그려봐야 합니다. 궁극적으로는 이에 따라 전체적인 디자인이 결정됩니다.
그림 21에서는 스케치의 예와 Flash에서 다시 그려 완성한 작품을 보여 줍니다. 이 캐릭터는 타원형 도구와 사각형
도구로만 만들었습니다. Flash 드로잉 도구로 이미지를 미세하게 조정하여 약간의 변화를 주고 이 변화 과정을 추적하면서 원래
이미지를 어떻게 참조로 사용했는지 살펴보십시오.[You must be registered and logged in to see this image.]

그림 21. 스케치와 Flash로 만든 소년 캐릭터
스케치 옆에 빈 키프레임(F7)을 만든 후 어니언 스킨 기능을 사용하여 스케치의 흔적을 확인할 수 있습니다. 어니언
스킨으로 된 스케치에 따라 드로잉 도구를 사용하여 그릴 수 있습니다. 그림 22에서 볼 수 있듯이 타원형 도구를 사용하여 소년
캐릭터의 머리를 만들었습니다. 캐릭터의 신체 부분과 다양한 액세서리를 만들 때 전체 모양을 상상해 보고 그리십시오. 공간에
실제로 있는 3차원 객체인 것처럼 캐릭터를 마음속에 떠올려야 합니다. 이 그림은 2차원 포맷이지만 3차원으로 생각하면 특정
부분이 다른 부분들과 어떻게 연결되는지 상상하는 데 도움이 됩니다.[You must be registered and logged in to see this image.]

그림 22. 타원형 모양으로 정의된 캐릭터
캐릭터 객체를 그렸으면 이 객체를 복사하여 새 레이어에 붙여넣습니다. 이때 객체를 선택하고 심볼로 변환하는 것이 좋습니다. 또한 레이어 이름도 지정할 수 있습니다.
레이어에 심볼을 놓아 시간 절약


저는 항상 객체를 심볼로 변환하고 간단하지만 설명이 포함된 이름을 지정합니다. 예를 들면 head1, eye1,
mouth_wide 등입니다. 그러나 훨씬 쉽고 빠른 방법이 있기 때문에 여기서는 레이어 이름을 지정하지 않겠습니다. 심볼을
모두 만들고 이름을 적절히 지정한 후 심볼을 모두 선택하고(Ctrl+A) 복사합니다(Ctrl+C). 이제 새 레이어를 만들고
심볼을 제자리에 붙여넣습니다(Ctrl+Alt+V). 이렇게 하면 모든 심볼이 한 레이어에 위치하지만 서로 독립된 상태로
있습니다. 다른 모든 레이어를 삭제하면 캐릭터 심볼이 모두 포함된 레이어 하나만 남게 됩니다.
다음 단계는 가장 멋진 부분입니다. 모든 심볼을 다시 선택한 후 캐릭터를 마우스 오른쪽 버튼으로 클릭하고 레이어에 배포를 선택합니다(그림 23 참조). [You must be registered and logged in to see this image.]

그림 23. 모든 심볼을 선택한 후 캐릭터를 마우스 오른쪽 버튼으로 클릭하고 레이어에 배포 선택
자, 보십시오! Flash에서 각 심볼을 자체 레이어에 놓을 뿐 아니라 심볼 이름을 기초로 각 레이어의 이름까지 붙였습니다. 정말 멋지지 않습니까?
올바른 문서 관리로 시간 절약


그림 24는 캐릭터를 디자인하고 심볼로 변환한 후 애니메이션 효과를 적용할 준비가 된 타임라인의 모습입니다. 레이어 이름을
편집하려면 해당 레이어 이름을 두 번 클릭하고 새 이름을 입력합니다. 객체 종류를 기초로 레이어에 설명이 포함된 이름을 지정하는
것은 타임라인과 파일 관리에 있어 좋은 습관입니다. 이 방법은 여러 아티스트와 함께 작업할 경우 특히 중요하며 팀 환경에서
작업하는 경우 더욱 그러합니다. [You must be registered and logged in to see this image.]

그림 24. 타임라인에 표시된 소년 캐릭터의 각 신체 부위와 심볼
Flash MX(버전 6)부터 레이어 폴더를 만들 수 있는 옵션이 제공되었습니다. 레이어 폴더는 단순히 다른 레이어를
보관하는 폴더와 같은 역할을 하는 새로운 레이어로서, 확장 및 축소가 가능하며 다양한 캐릭터의 여러 레이어를 처리해야 할 경우
매우 유용합니다. 각 캐릭터에 대해 레이어 폴더를 만들고 모든 레이어를 이 폴더에 보관할 수 있으며 작업하고 있는 캐릭터를
제외한 모든 항목을 축소하는 옵션도 제공됩니다(그림 25 참조). 이를 통해 타임라인을 계속 스크롤하지 않아도 되며 시간이 많이
절약됩니다. [You must be registered and logged in to see this image.]

그림 25. 레이어 폴더를 사용하여 시간 절약
Flash 문서를 관리하는 또 다른 방법은 체계적으로 라이브러리를 작성하는 것입니다. 앞서 설명했듯이 어떤 항목을 심볼로 만들거나 변환하면 이 항목은 자동으로 무비 라이브러리의 객체가 됩니다. 라이브러리를 열려면 윈도우 > 라이브러리를
선택하거나 Ctrl+L을 누릅니다. 라이브러리(그림 26 참조)에는 포함된 각 심볼에 대한 다양한 정보와 옵션이 표시됩니다.
심볼 이름을 클릭하여 각 심볼을 하나씩 선택하고 라이브러리 미리 보기 윈도우에서 축소판을 볼 수 있습니다. [You must be registered and logged in to see this image.]

그림 26. 트레이드마크 캐릭터의 라이브러리
심볼에 애니메이션이 포함되어 있으면 미리 보기 윈도우의 오른쪽 상단 모서리에 중단 및 재생 버튼도 표시됩니다. 이 버튼을 사용하여 미리 보기 윈도우에서 애니메이션을 미리 볼 수 있습니다.
라이브러리의 오른쪽 상단 모서리에는 여러 옵션을 제공하는 팝업 메뉴가 있습니다(그림 27 참조). 이 팝업 메뉴를 사용하여
새 심볼 폴더, 글꼴 또는 비디오를 만들 수 있습니다. 또한 심볼 이름을 바꾸거나 심볼을 폴더로 이동하거나 심볼을 복제 또는
삭제할 수 있으며 심볼 속성을 편집하고 확인할 수 있습니다.[You must be registered and logged in to see this image.]

그림 27. 라이브러리 관리 옵션
"2.5차원" 소개


Flash에서 트위닝이 쉽다고 항상 이 기능으로 생동감 넘치는 애니메이션을 만들 수 있는 것은 아닙니다. 그러나
스테이지에서 움직이는 단순한 객체 정도만 필요한 작업의 경우에는 트위닝을 사용하면 충분하며 시간을 크게 단축할 수 있습니다.
그러나 트위닝 방식을 사용하여 캐릭터에 보다 사실감을 부여할 수 있다면 어떻게 하시겠습니까? 트위닝의 단순함을 이용하여
몇몇 Flash 사용자만이 생각해냈던 방식으로 작동하게 할 수 있다면 어떻게 하시겠습니까? 트위닝에 대해 알아야 할 모든 것을
배웠고 이 중 처음 10% 정도만 배웠을 때로 돌아가 다른 방식을 선택할 수 있다면 어떻게 하시겠습니까? 지금쯤 어떤 상황일까요?
이 학습 과정에서는 그럴듯한 3차원 효과를 내는 멋진 최고의 애니메이션 기술을 알려드리겠습니다. 무엇보다도 Flash 환경
내에서 모든 작업이 이루어지므로 2차원 영역에 있다는 장점이 있습니다. 지금은 중간 차원에 있습니다. 분명 2차원이지만
3차원처럼 보인다면 정확히 무엇일까요?
2.5차원 애니메이션의 세계에 오신 것을 환영합니다.
그렇습니다. 2.5차원 애니메이션입니다. 제가 그렇게 이름 지었습니다. 이 기술을 제가 개발했다고 주장하지는 않지만 2.5차원이라는 이름은 제가 지었습니다.
그림 28은 제 웹 사이트 www.mudbubble.com*의 로고 캐릭터입니다.[You must be registered and logged in to see this image.]

그림 28. 정말 귀엽지 않습니까?
그림 29에서는 해당 레이어에 각 심볼을 놓은 모양을 보여 줍니다. 외곽선 기능을 설정했으므로 캐릭터 신체의 각 부분이
어떻게 분리되어 있는지 확인할 수 있습니다. 트위닝 동안 모션 트윈에는 레이어당 한 심볼만 필요하므로 이렇게 분리하는 것이 매우
중요합니다. 같은 모션 트윈 내의 같은 레이어에 다른 두 개의 심볼을 놓으려고 하면 트윈이 분리됩니다.[You must be registered and logged in to see this image.]

그림 29. 각 심볼에는 고유의 레이어가 있습니다.
보시다시피 각 레이어의 이름까지 지정했습니다. 불필요해 보이지만 타임라인이 늘어날수록 결국에는 점점 더 많은 타임라인을
스크롤하게 되므로 레이어에 이름을 지정하는 것이 분명 도움이 되며 일반적으로 파일을 공유하는 팀 환경에서 작업할 경우에도
중요합니다. 아무리 체계적으로 구성한다 해도 지나치지 않습니다.
타임라인이 설정되면 캐릭터에 모션 트윈을 적용할 수 있습니다. 이 예제에서는 캐릭터 머리를 구성하는 심볼에만 애니메이션 효과를 적용했으므로 엉뚱한 레이어를 변경하지 못하도록 다른 모든 레이어를 잠갔습니다.
머리 돌리기—1부


먼저 머리를 돌리는 시작 지점과 종료 지점에 키프레임을 만들었습니다. 맨 위에서부터 맨 아래 레이어까지 수직으로 클릭하여
드래그하고 키프레임으로 변환합니다(F6). 키프레임 간격을 15에서 20 프레임 정도로 하여 이 작업을 두 번 수행합니다. 이
예제에서는 프레임 15와 30에 키프레임을 만들었습니다(그림 30 참조).[You must be registered and logged in to see this image.]

그림 30. 모션 트윈 적용 준비 완료
머리 돌리기를 중지하려는 프레임에 재생 헤드를 유지하고 자유 변형 도구를 사용하여 스테이지에서 각 심볼을 편집했습니다.
자, 따라해 보십시오. 한쪽 눈부터 시작합니다. 구 즉, 머리 주위를 둥글게 감싸는 눈을 상상해야 합니다. 이 객체가
실제로 3차원 객체라면 여러분 쪽으로 더 가까이 다가오는 한쪽 눈이 더 커지게 됩니다. 또한 눈은 달갈형이 아니므로 좌우로 더
넓게 하는 것이 좋습니다. 소년 캐릭터의 눈은 3개의 다른 심볼로 구성되어 있기 때문에 Shift 키를 누른 채 3개의 모든
심볼을 선택하여 한꺼번에 크기를 조정했습니다(그림 31 참조). 그런 다음 자유 변형 도구를 사용하여 동시에 모든 심볼의 크기를
조정합니다. 이 시점에서 너무 완벽하게 하려고 고민하지 마십시오. 나중에 언제라도 애니메이션을 세부적으로 수정할 수 있습니다.
모션 트윈을 적용하기 전까지는 어떤 모양일지 정확히 알지 못하므로 이 작업을 이해하기란 상당히 어렵습니다.[You must be registered and logged in to see this image.]

그림 31. 눈 심볼 선택
이제 코로 옮겨갑시다. 캐릭터가 우리쪽으로 돌고 있기 때문에 우리쪽에서 가장 가까운 부분은 오른쪽에서 왼쪽으로 움직여야
합니다. 코가 실제로 3차원 객체라면 머리에서 똑바로 튀어나와 있을 것입니다. 좀 더 생동감 있게 만들기 위해 코를 오른쪽에서
왼쪽으로 옮기면서 약간 아래쪽으로 향하게 했습니다(그림 32 참조). 코가 더 가까워 보이도록 크기를 약간 늘리는 것도 잊지
마십시오. [You must be registered and logged in to see this image.]

그림 32. 코 수정
다음으로 다른 쪽 눈의 크기를 조금 늘리고 가로로 좀 더 둥글게 만듭니다. 양쪽 눈썹의 크기도 늘리면서 이동한 후 약간 회전시킵니다(그림 33 참조).[You must be registered and logged in to see this image.]

그림 33. 다른 쪽 눈 수정
이 시점에서 편집한 각 레이어에 모션 트윈을 적용합니다. 이제 지금까지 한 작업을 실제로 보면서 더 조절할지 결정해야 합니다.
걱정하지 마십시오. 이 효과를 제대로 나타내려면 항상 많은 부분을 조정해야 합니다. 그림 34에서는 이 단계에서의 캐릭터 머리 돌리기를 보여 줍니다.[You must be registered and logged in to see this image.]

그림 34. 캐릭터 머리 돌리기
최종 애니메이션 효과를 보려면 mudbubble_boy.swf를 확인하십시오(그림 35 참조).

Private i, x, MM_FlashControlVersion
On Error Resume Next
x = null
MM_FlashControlVersion = 0
var Flashmode
FlashMode = False
var do_dw_var
var browser_flash_version

For i = 9 To 1 Step -1
Set x = CreateObject("ShockwaveFlash.ShockwaveFlash." & i)

MM_FlashControlInstalled = IsObject(x)

If MM_FlashControlInstalled Then
MM_FlashControlVersion = CStr(i)
Exit For
End If
Next
x = null
FlashMode = (MM_FlashControlVersion >= 6)
do_dw_var = FlashMode
browser_flash_version = MM_FlashControlVersion






src="/kr/devnet/flash/articles/design_character/boy.swf" quality="high"
bgcolor="#FFFFFF" menu="0" width="500" height="300"
pluginspage="/go/getflashplayer_kr">

&#65279

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp[You must be registered and logged in to see this image.]이 컨텐츠를
보려면 Flash 필요


&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp이 컨텐츠를 보려면 JavaScript를 사용할 수 있도록 설정되어 있어야 하며 최신 버전의 Macromedia Flash
Player가 필요합니다.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<p
class="caption">무료 Flash Player를 지금
다운로드하십시오! [You must be registered and logged in to see this image.]





그림 43. 머리를 돌리는 동안 귀가 보이는 최종 애니메이션 효과
맘에 들지 않는 부분이 있으면 언제라도 타임라인을 스크럽하고 심볼을 조절할 수 있습니다. 이는 여러분이 완벽을 추구하는
정도와 캐릭터의 복잡도에 따라 다릅니다. 이 예의 소년 캐릭터는 디자인 시 사용한 많은 객체가 지정되어 있어 꽤 복잡합니다.
사용자 정의 가속/감속 패널(Flash Professional 8에만 해당)


한 가지 기능을 더하여 머리 돌리기를 마무리하겠습니다. 아시다시피 모션 트윈은 일정한 속도 때문에 상당히 정적으로 보일 수
있으며 초기 상태에서 매우 부자연스러워 보일 수도 있습니다. 그러나 Flash Professional 8의 새로운 기능으로
"가속과 감속"을 추가하여 더욱 부드럽게 전환하도록 할 수 있습니다. 문제는 단일 트윈 내에서 가속 및 감속하는 방법입니다.
첫 번째 단계는 모션 트윈에 적용하는 것입니다. 다음 두 가지 방법 중 하나로 이 작업을 수행할 수 있습니다.

• 두 키프레임 사이에 있는 프레임을 마우스 오른쪽 버튼으로 클릭합니다. 팝업 메뉴에서 모션 트윈 생성을 선택합니다.
  
• 선택 도구로 클릭하고 드래그하여 모든 레이어를 선택합니다. 선택된 레이어는 모두 검정색으로 강조 표시됩니다. 속성 관리자의 트윈 드롭다운 메뉴에서 모션을 선택합니다.
  

속성 관리자에서 편집 버튼을 확인합니다(그림 44 참조). [You must be registered and logged in to see this image.]

그림 44. 사용자 정의 가속/감속 패널을 열려면 편집 버튼을 클릭합니다.
이 버튼을 클릭하면 사용자 정의 가속/감속 패널이 새로 열립니다(그림 45 참조).[You must be registered and logged in to see this image.]

그림 45. 새 사용자 정의 가속/감속 패널
새 사용자 정의 가속/감속 패널로 이전 버전보다 훨씬 더 세밀하게 속도를 제어할 수 있습니다. 사용자 정의 가속/감속 패널에는 시간 경과에 따른 모션 정도를 나타내는 그래프가 표시됩니다. 수평 축은 프레임을 나타내며 수직 축은 객체의 변경 정도를 나타냅니다.
그래프의 곡선은 객체 변경 정도를 지정합니다. 곡선이 수평(경사 없음)이면 속도가 0이고, 곡선이 수직이면 객체의 움직임에 여유나 지연이 없습니다.
모든 속성에 단일 설정 사용 체크 상자를 선택하면 현재 곡선이 위치, 회전, 크기, 색상, 필터 등의 모든 속성에 적용됩니다. 이 체크 상자를 선택 취소하면 다음과 같이 각 속성에 개별 곡선을 적용할 수 있습니다.

• 위치: 스테이지에서 애니메이션 객체의 위치에 대해 사용자 정의 속도 설정을 지정합니다.
  
• 회전: 애니메이션 객체의 회전에 대해 사용자 정의 속도 설정을 지정합니다. 예를 들어, 애니메이션 캐릭터가 스테이지에서 사용자를 마주 보도록 회전하는 속도를 세밀하게 조절할 수 있습니다.
  
• 크기 조절: 애니메이션 객체의 크기 조절에 대해 사용자 정의 속도 설정을
  지정합니다. 예를 들어, 객체의 크기를 보다 쉽게 사용자 정의할 수 있으므로 객체가 보는 사람으로부터 멀리 떨어져 보이게 한 후
  다시 가까이 오도록 하고 또 다시 멀리 떨어져 보이도록 할 수 있습니다.
  
• 색상: 애니메이션 객체에 적용된 색상 변화에 대해 사용자 정의 속도 설정을 지정합니다.
  
• 필터: 애니메이션 객체에 적용된 필터에 대해 사용자 정의 속도 설정을 지정합니다. 예를 들어, 광원 방향으로 변경 사항을 시뮬레이트하는 그림자의 속도 설정을 제어할 수 있습니다.
  
• 재생 및 중단 버튼: 사용자 정의 가속/감속 대화 상자에 정의된 현재의 모든 속도 곡선을 사용하여 스테이지의 애니메이션을 미리 볼 수 있습니다.
  
• 재설정 버튼: 속도 곡선을 기본값인 직선 상태로 재설정합니다.
  

새 제어 포인트를 추가하려면 대각선을 한 번 클릭합니다. 제어 포인트의 위치를 드래그하여 객체 모션을 정확하게 제어할 수 있습니다.
프레임 표시기(사각형 핸들로 표시됨)를 사용하여 객체의 속도를 늘리거나 줄일 지점을 클릭합니다. 제어 포인트 핸들(사각형
핸들)을 클릭하면 해당 제어 포인트가 선택되고 제어 포인트 양쪽의 접선 포인트(빈 원)가 표시됩니다. 마우스나 키보드 키를
사용하여 제어 또는 접선 포인트를 새 위치로 드래그할 수 있습니다.

팁: 기본적으로 제어 포인트는 격자에 물립니다. 제어 포인트를 드래그하면서 X 키를 눌러 일시적으로 이 기능을 해제할 수 있습니다.
제어 포인트에서 멀리 떨어진 곡선을 클릭하면 곡선에 새로운 제어 포인트가 만들어집니다. 곡선과 제어 포인트에서 멀리 떨어진 곳을 클릭하면 현재 선택되어 있는 제어 포인트 선택이 해제됩니다.
애니메이션이 점진적으로 시작하고 점진적으로 끝나게 하려면 그림 46과 비슷하게 곡선을 조정합니다. 제어 포인트와 접선을
만들어 편집하고 패널의 왼쪽 하단 모서리에 있는 중단 및 재생 버튼을 사용하여 애니메이션을 재생하는 것이 좋습니다. 이렇게 하면
곡선과 해당 애니메이션 효과의 관계를 빠르게 익힐 수 있을 것입니다.[You must be registered and logged in to see this image.]

그림 46. 가속/감속 경로 사용
이제 애니메이션을 재생합니다. 끝으로 갈 수록 머리를 돌리는 속도가 어떻게 빨라지고 느려지는지 확인합니다. 원래 위치로
머리를 다시 돌리도록 애니메이션 효과를 적용하려면 프레임 1에서 프레임을 복사하여 방금 만든 트윈 뒤에 붙여넣으면 됩니다. 모션
트윈을 추가하고 속도를 늘리고 줄이는 동일한 절차를 반복하면 자연스럽게 앞뒤로 머리를 돌리는 캐릭터를 만들 수 있습니다.
필터 적용


이제 Flash에서 불가능했던 작업이 가능해졌습니다. Flash 8에는 Flash 사용자가 오랫동안 기다려온 그래픽 필터와
블렌드 모드가 처음으로 도입되었습니다. 이제 모든 무비 클립 인스턴스에 그림자, 흐림 효과, 광선, 경사, 그래디언트 광선,
그래디언트 경사, 색상 조정과 같은 효과를 적용할 수 있습니다. 그림자를 적용하여 캐릭터를 더 실감나게 꾸미십시오.
맨 처음 할 일은 무비 클립 심볼에 캐릭터를 놓는 것입니다. 타임라인에서 모든 레이어에 있는 모든 프레임을 클릭하여
드래그합니다. (힌트: 상단 왼쪽 모서리의 프레임 1에서 시작하여 맨 아래 레이어의 마지막 프레임까지 대각선으로 드래그합니다.)
이렇게 하면 프레임과 레이어가 검정색으로 강조 표시됩니다. 클립보드에 전체 타임라인을 복사하려면 편집 > 타임라인 > 프레임 복사를 선택하거나 Ctrl+At+C를 누릅니다. 이때 강조 표시된 프레임의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 프레임 복사를 선택할 수 있습니다. 이제 다음 단계로 넘어가겠습니다.
라이브러리를 열고(Ctrl+L) 오른쪽 상단의 드롭다운 메뉴에서 새 심볼을 선택한 후 무비 클립 비헤이비어를 선택하고 확인을 클릭합니다. 이제 새 심볼의 편집 모드에 있습니다. 그림 47과 같이 타임라인의 첫 번째 프레임을 선택하고 편집 > 타임라인 > 프레임 붙여넣기를 선택하거나 Ctrl+Alt+V를 눌러 선택한 요소를 붙여넣습니다. 이때 프레임 1을 마우스 오른쪽 버튼으로 클릭하고 해당 컨텍스트 메뉴에서 프레임 붙여넣기를 선택할 수 있습니다.[You must be registered and logged in to see this image.]

그림 47. 프레임 1을 마우스 오른쪽 버튼으로 클릭하고 프레임 붙여넣기 선택
기본 스테이지로 되돌아가 새 레이어를 만듭니다. 라이브러리에서 방금 만든 무비 클립 심볼을 찾아 새 레이어의 스테이지로 드래그합니다(그림 48 참조). [You must be registered and logged in to see this image.]

그림 48. 스테이지로 무비 클립 드래그
원래 캐릭터가 있는 다른 레이어를 모두 삭제합니다. 이제 타임라인에 캐릭터 애니메이션이 들어 있는 무비 클립 심볼 하나와 레이어 하나만 있어야 합니다.
만들 수 있는 그림자는 두 종류가 있습니다. 표준 그림자는 원본 인스턴스에서 약간 오프셋되는 인스턴스 아래에 그림자를
만듭니다. 이 효과는 상당히 밋밋하며 벽이나 다른 편평한 표면에 그림자가 생기는 것과 비슷합니다. 땅에 그림자가 생기도록 하려는
경우에는 사실감이 많이 떨어집니다. 보다 사실감 나는 그림자 효과를 만들려면 몇 개의 간단한 단계를 추가해야 합니다.
무비 클립의 인스턴스를 복제해서 원본 인스턴스 뒤에 놓습니다. 이때 복제본을 동일한 레이어에서 원본 인스턴스 뒤로 정렬하거나, 원본 인스턴스 아래의 새 레이어에 붙여넣을 수 있습니다.
복제한 인스턴스를 선택하고 속성 관리자의 필터 탭에 있는 + 메뉴에서 그림자를 선택합니다(그림 49 참조). 그런 다음 강도 레벨을 45% 정도로 조절하고 객체 숨김을
선택합니다. 이렇게 하면 무비 클립 객체는 숨겨지지만 그림자 필터 속성은 나타납니다. 품질을 낮음, 중간, 높음으로 설정하거나
원본 그래픽에서 흐림 정도, 색상, 각도 또는 흐림 효과의 거리를 수정하는 등의 추가적인 조절도 가능합니다.[You must be registered and logged in to see this image.]

그림 49. 복제된 무비 클립 인스턴스에 적용된 그림자 필터
그림자가 원본 객체 뒤의 편평한 벽에 비친 그림자처럼 보이지 않게 하려면 자유 변형 도구를 사용하여 필터가
적용된 무비 클립 인스턴스를 기울입니다. 이 기술을 제대로 적용하려면 여러 번 시도해야 합니다. 바닥에 생긴 그림자처럼 보이도록
인스턴스를 아래로 내려서 기울여야 합니다(그림 50 참조). 이 그림자가 올바르게 보이도록 인스턴스 위치를 변경해야 할 수
있습니다.[You must be registered and logged in to see this image.]

그림 50. 자유 변형 도구로 기울인 복제된 무비 클립
무비를 테스트하여 진짜 그림자처럼 보이도록 효과가 잘 적용되었는지 확인합니다.
그림 51과 같이 Flash Player 8을 사용하여 반복되는 여러 다른 애니메이션을 결합하면 정교한 시각적인 효과를 얻을 수 있습니다.]