3.21. 애니메이션 만들기(1)

3.21. 애니메이션 만들기

파이어웍스에서는 움직이는 GIF 그림을 쉽게 만들 수 있습니다.
이를 활용하여 배너 광고라든지, 움직이는 로고 등을 구현할 수 있습니다.

가장 간단한 애니메이션은 여러 개의 프레임을 만들고 각 프레임마다 다른 혹은 약간 변형된 그림을 배치시킨 다음 Animated GIF 형식으로 내보내기를 하는 겁니다.

그러나 이 방법은 많은 시간과 노력이 필요한 작업입니다.

웹 애니메이션 저작 도구의 최강자인 매크로미디어 플래시를 다루어본 분은 잘 아시겠지만 심볼이라고 하는 것이 있어서 시작 프레임에 가져다 두고 프레임을 늘린 다음 마침 프레임에서 심볼의 위치와 크기, 형태 등을 변경한 다음 트위닝(Tweening)을 하는 식으로 간단하게 애니메이션을 구현하였을 것입니다.

파이어웍스에도 플래시와 비슷한 애니메이션 기법이 도입되었습니다.

3.21.1. 애니메이션을 위한 개체

애니메이션에 있어 움직이는 개체는 영화로 치면 배역(Cast Member)과 같은 것입니다. 등장인물이라고 해도 관계 없을 것 같습니다.

아래 그림에서 날아서 움직이고 있는 기러기가 바로 배역입니다.

이러한 배역은 직접 그리든지 다른 프로그램에서 만든 것을 가져올 수도 있습니다. 
하지만 이것을 심볼(Symbol)로 변형시켜 라이브러리에 등록해 주는 작업이 필요합니다. 
이렇게 하면 각 프레임마다 개체를 그려서 배치하는 것보다 훨씬 시간과 노력이 절감됩니다.

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

3.21.2. 애니메이션 만들어보기

1) 위 그림을 파이어웍스에서 불러오기 해보면 왼쪽 아래쪽에 기러기가 분리되어 있음을 확인할 수 있을 것입니다.
이 기러기를 포인터 도구로 선택하고, 메뉴의 [수정 > 심볼 > 심볼로 변환(F8)]을 실행합니다.

2) [심볼 속성] 대화 상자가 나타나면 [이름]을 적당히 주시고, [유형]을 '애니메이션'으로 설정한 후 [확인] 단추를 누릅니다.

3) [애니메이션] 대화 상자에서 
[프레임]에는 기러기가 이동해갈 거리를 생각해서 수치를 넣어줍니다.
[이동]은 이동 거리를 가리키는 수치인데 적당히 넣어주십시오.(편집창에서 수정하는 것이 편리합니다.)
[방향]은 기러기가 나아갈 방향이므로 오른 쪽 위가 되어야겠지요.
[크기 조절]은 개체가 점점 커지게 혹은 작아지게 합니다. 일단 100으로 설정해주고 만든 다음 각 프레임에서 크기를 조절할 수 있습니다.
[불투명도] 역시 개체가 투명에서 불투명(0에서 100) 혹은 그 반대(100에서 0)로 설정해주는 등 개체의 속성이나 원하는 대로 설정해줍니다.
[회전] 역시 필요하면 시계방향(CW) 혹은 반시계 방향(CCW)로 설정해줍니다.





[확인] 단추를 누르면 다음과 같이 프레임 자동 추가 문답 상자가 나옵니다.
이때 [확인] 단추를 누릅니다.
 

3) 다음과 같이 애니메이션의 기준점과 거리를 나타내는 선이 나타납니다.





4) [프레임 패널]을 보면 다음 그림과 같이 프레임 수가 늘어나 있고 각 프레임을 선택해보면 기러기의 위치가 프레임마다 조금씩 달라지고 있음을 알 수 있을 것입니다.





5) 녹색 동그라미는 출발점을, 빨강색 동그라미는 이동의 끝점을 나타냅니다.
동그라미의 수는 프레임의 수와 같습니다.
이동 거리를 늘리려면 빨강색 동그라미를 드래그해 줍니다.

 

6) 캔버스의 아래 쪽에 있는 재생 단추()눌러보면 기러기가 이동하는 애니메이션이 보일 것입니다.

7) 그런데 1프레임에만 배경 그림이 나오고 나머지 프레임에는 배경이 사라져 버리는 문제점이 발생합니다.
이 문제는 다음과 같은 방법으로 해결합니다.
[프레임] 패널에서 '프레임1'을 선택하고, 배경 그림을 포인터 도구로 선택한 상에서 프레임 메뉴를 불러냅니다.
[프레임에 복사]를 실행합니다.
 

8) [범위]를 선택하면 자동으로 이후 프레임들이 입력됩니다.

[확인] 단추를 눌러주면 이후 마지막 프레임까지 배경 그림이 삽입되게 됩니다.

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

10) 완성된 애니메이션 작품