전 강좌에서는 무비클립과 비슷한 역할을 하는 UserControl을 해보았고, 편리한 바인딩 기능이 있는 버튼까지 만들어 보았습니다 :-0
이번 강좌에서는 애니메이션에 대해서 다루어봅니다.
일단 전 강좌에서 유저컨트롤로 만들었던 스마일을 가져와서 스마일에 애니메이션을 넣어보겠습니다.
(유저컨트롤로 만드는 방법은 이미 강좌로 올라와 있으니 확인하세요)
1) 자산라이브러리 > 사용자 지정 컨트롤 에서 자신이 만든 유저컨트롤을 화면으로 가져 옵니다.
그리고 사각형으로 바닥을 하나 그려서 레이어를 맨 위로 올려줍니다. (배경을 그리기 위한 작업) 그리고 스마일을 바닥위에 얹어줍니다.
2) 인터렉션 창에서 + 버튼을 클릭하면 [스토리보드 만들기] 라는 창이 뜹니다. 자신이 원하는 애니메이션의 이름을 쓰고 확인 버튼을 누릅니다.
확인 버튼을 누르면 화면창 전체에 빨갛게 테두리가 나타납니다. 바로 녹화를 하고 있다는 뜻인데요. 지금 내가 하고 있는 작업들을 다 녹화하겠다고 생각하시면 됩니다. (그러면 녹화버튼이 빨갛게 되지 않은 상태에서 아무리 작업해도 다 소용없다는 뜻이겠죠? :0 )
3) 인터렉션 창도 변하는데요, 눈금과 숫자가 보이고, 위에 시간처럼 보이는 것도 있습니다. 이것이 바로 타임라인 창입니다.
여기서 키 프레임을 찍으면서 애니메이션을 작업하게 됩니다. 위 아래로 통통 튀기는 움직임을 하겠습니다.
4) 스마일 레이어가 선택된 상태에서
0초, 맨 앞에 녹색+로 되어있는 버튼을 누릅니다. 그러면 하얀 키가 타임라인에 찍힙니다. 그리고 노란 그리드 처럼 생긴 것을 1초에 갖다둡니다.
5) 그리고 현재의 위치에서 위쪽으로 이동시켜봅니다. 그러면 저절로 또 키가 1초에 찍히게 됩니다.
노란 그리드를 2초에 갖다두고 이번에는 바닥에 가까이 아래로 이동시켜 봅니다. 방금전과 같이 또 키가 찍히게 됩니다.
키가 찍혔다는 것은 애니메이션이 적용 된 것 입니다. 이 과정을 6초까지 반복해 봅니다.
(1초-위/2초-아래/3초-위/4초-아래/5초-위/6초-아래)
위에 비디오 처럼 재생버튼이 있는데요. 한번 재생해 보겠습니다.
6) 스마일이 위에서 아래로 왔다갔다 하는 애니메이션이 생성되었습니다. 쉽죠? :-)
그런데 튕긴다는 느낌보다는 그냥 위 아래로 왔다갔다하는 것 처럼 보입니다. 튕기기 위해서는 가속과 감속이 있어야 합니다.
공처럼 진짜 튕기기 위해서는 밑의 그림과 같은 현상이 필요합니다. 집에서 한번 공을 튕겨보세요.
물렁한 탱탱볼을 튕길 때 바닥에 닿으면 찌그러지고, 공이 처음에 세게 튀길 때보다 높이가 점점 줄어듭니다.
(이건 만화 애니메이션 강좌나 다름없는;)
다음강좌에서 이어 가겠습니다. :)
