3-12. 다이나믹한 버튼 만들기(1)

제3장 애니메이션 기초

12. 다이나믹한 버튼 만들기(1)

심볼 안에 심볼이 포함될 수 있다는 사실을 상기하면 버튼 심볼 안에 그래픽 혹은 무비클립 심볼을, 혹은 무비클립 안에 버튼 심볼을 넣어 보다 다이나믹한(동적인) 심볼을 만들 수 있을 것입니다.

여기서는 이러한 예제를 다루어보도록 하겠습니다.

1. 춤추는 버튼

이 버튼은 음표가 움직이고 있습니다. 마우스를 버튼 위에 올리면 더욱 빠른 속도로 움직이지요?
누르면 색과 크기가 달라집니다.

1) 동그라미를 그리고, 그래디언트 색상으로 채웁니다.






2) 가장자리를 부드럽게 처리하기 위해서
테두리선을 지우고(획 선택 후 Delete키 누름),
원을 선택한 상태에서 메뉴의 [수정 > 모양 > 채우기 가장자리 부드럽게]를 실행합니다.

이 기능은 가장자리를 지정해준 거리만큼 객체 안으로 혹은 밖으로, 정해준 단계만큼을 투명성 그래디언트 처리를 하므로써 시각적으로 부드럽게 해줍니다.




3) 객체 크기의 20%(1/5) 정도 픽셀 수를 지정해주고, 단계는 지정해준 픽셀의 크기를 감안하여 설정해줍니다.
[방향]은 객체의 안쪽으로 해주기 위해 [축소]로 지정해줍니다.
 




4) 객체를 선택한 후 F8키를 눌러 다음과 같이 심볼로 변환해줍니다.
 




5) 더블클릭해서 버튼 심볼 편집창으로 들어갑니다.
버튼 심볼 편집창은 프레임이 [업, 오버, 다운, 히트] 등 4개로 되어 있습니다.
각 프레임의 의미는 다음과 같습니다.

업 : 마우스와 상관 없을 때
오버 : 마우스를 버튼 위에 올렸을 때
다운 : 마우스 버튼을 눌렀을 때
히트 : 마우스의 인식 영역


먼저 업 상태를 편집해보겠습니다.
다음 그림과 같이 '레이어1'을 '동그라미'로 변경시켜놓고 F6키를 연속으로 눌러 히트 프레임까지 키프레임을 넣어줍니다.
 




6) 레이어를 하나 추가한 후 이름을 음표로 변경하고, 이 레이어에 음표를 입력하도록 하겠습니다.
ㅁ키를 누르고 한자 키를 누르면 윈도 화면 하단 오른쪽에 특수 문자표가 나타납니다. 그 중에서 다음 그림과 같은 음표를 골라 입력합니다.

이 음표를 선택한 후 위 그림과 같이 무비클립 심볼로 변환합니다.




7) '음표1'을 더블클릭하여 편집창을 열어서 음표가 좌우로 흔들리도록 트윈을 만들어줍니다.


* Ctrl + Enter키를 눌러 확인해보십시오.




8) 스테이지 상단에 있는 '춤추는버튼'을 눌러 '춤추는버튼'의 '오버' 상태를 편집해보겠습니다.
먼저 라이브러리에서 '음표1'을 선택하고, 마우스 오른쪽 버튼을 눌러 아래 그림과 같이 [복제]를 실행합니다.
 




9) 이름을 '음표2'로 바꾸고, 라이브러리의 '음표2' 미리보기를 더블클릭해서 다음과 같이 편집합니다.
4 프레임에서 스테이지에 있는 음표를 [자유 변형 도구]를 이용하여 크기를 약간 줄입니다.
 




10) '춤추는버튼' 편집창의 [오버' 프레임을 선택하고 F7키를 눌러 빈 키프레임을 넣은 후,
라이브러리의 '음표2' 무비클립을 드래그하여 스테이지에 가져다 놓습니다.(중심점에 정확하게 맞추어주십시오)
 
* Ctrl + Enter키를 눌러 확인해보십시오.




11) [다운] 프레임에서는 동그라미의 크기를 약간 작게 하고, 음표 레이어의 다운 프레임에서 F6키를 눌러 '오버' 프레임의 음표를 그대로 사용하도록 합니다.
 

2. 완성된 작품