3.22. 애니메이션 만들기(2)

제3장 웹 그래픽 기능 익히기 > 3.22. 애니메이션 만들기(2)




이번에는 앞서의 예제를 좀더 원론적인 방법으로 구현해 보도록 하겠습니다.
여기서 작업해볼 방법은 Frame by Frame 방식, 즉 개체를 한 프레임, 한 프레임씩 조금씩 위치나 크기를 달리해 배치하는 애니메이션의 가장 원시적인 제작 방법입니다.

다음 그림(PNG 형식임)을 마우스 오른쪽 단추로 클릭하고 다른 이름으로 저장하기를 한 후 실습하십시오.

1) 위 그림을 파이어웍스에서 불러보면 왼쪽 아래쪽에 날개를 편 모양과 날개를 접은 모양 등 두 마리로 분리되어 있음을 확인할 수 있을 것입니다.
포인터 도구로 선택을 해보거나 [레이어] 패널을 보면 확인할 수 있습니다.

2) 기러기를 심볼로 등록합니다. 포인터 도구로 한 마리를 선택하고 F8키(심볼로 변환)를 눌러서 다음과 같이 그래픽 심볼로 등록합니다.

3) [라이브러리] 패널을 열어 등록된 심볼을 확인하십시오.
 

4) 캔버스에서 기러기 들을 지워 버리고(지우더라도 라이브러리에 남아 있습니다), [프레임] 패널에서 [프레임 복제]를 합니다.
개수는 '15' 정도, '현재 프레임 이후'를 선택한 후 [확인] 단추를 누릅니다. 
 

5) 프레임 패널을 보면 모두 16개의 프레임이 만들어진 것을 확인할 수 있을 것입니다.
프레임은 영화에서 연속되는 필름 중 한 장에 해당됩니다.

4) [프레임 및 작업 내역] 패널의 하단에 있는 [어니언 스키닝] 단추를 눌러서, [전과 후] 혹은 [모든 프레임 표시]를 체크합니다.
이렇게 하면 이전과 뒤 프레임의 기러기 이동을 쉽게 파악하고 위치를 옮길 수 있습니다. 
 




5) 이제 각 프레임을 눌러서 선택하고, 라이브러리에 있는 심볼을 번갈아 가져다 놓으면서 날아갈 방향으로 배치합니다.
 
어니언 스키닝을 켜놓은 상태에서 편집을 하면 해당 프레임의 개체가 잘 선택되지 않는 문제점이 있군요.
이럴 때는 스키닝을 꺼고 작업하십시오.

6) [어니언 스키닝]을 [모든 프레임 표시]로 해두고 기러기의 움직임을 확인해보십시오.

 

7) [최적화] 패널에서 [애니메이션 GIF]를 선택한 후 [내보내기]를 합니다.
 

8) 완성된 작품


 

보다 쉽게, 멋지게 애니메이션을 제작하려면 파이어웍스보다는 어도비 플래시를 이용하는 것이 좋습니다.