예전에 후배가 물어봤던 내용인데, 겸사 겸사 여유도 있고 해서 튜터리얼을 제작해봅니다.
난이도는 초중급쯤 될 것 같습니다.
그럼.. 좋은 한 주 되시기 바랍니다.
1. 컴포지션을 하나 만들고(저는 720*480) 지도 파일을 불러옵니다.
저는 튜터리얼용인지라.. 용량을 줄이고자 솔리드 만들어서 마스크로 대충 만들었습니다.. ㅋㅋ
2. 컴포지션을 하나 더 만들고 화살표를 만듭니다.
흰색 solid를 하나 만들고 펜툴로 만들면 되겠습니다.
이때 그리드(격자:Ctrl+')를 보이게 하면 쉽게 만들 수 있습니다.
3. 컴포지션을 하나 만들고 통합이라고 이름 붙여줍니다.
지도 컴포지션을 타임라인으로 드래그&드롭해줍니다.
4. 솔리드를 하나 만들고 path라고 이름 지어줍니다.
메뉴에서 Effect > Stylize > Write-on 이펙트를 적용해줍니다.
** write-on 이펙트 설정 사항 **
- Paint Style 을 On Transparent로 설정
- Brush Size를 6 정도로 설정해줍니다.
- Brush Position 의 스톱와치를 클릭하여 애니메이션할 준비를 해 줍니다.
- 타임라인에서 1초 뒤로 이동한 뒤 brush position을 이동하고 싶은 곳으로 이동시켜줍니다. ^^;
이때 brush position 옆에 있는 십자표시 아이콘을 이용하면 쉽게 포지션을 이동시킬 수 있습니다.
5. 2번 과정에서 만든 화살표 컴포지션을 통합 컴포지션에 불러들입니다.
화살표 레이어의 position 속성을 선택하고 메뉴에서 Animation > Add Expression을 선택합니다.
적용된 익스프레션의 Expression pick whip(골뱅처럼 생긴 아이콘)을 클릭&드래그해서 path레이어의 Brush Position 속성을 지정해줍니다.
익스프레션 입력창에 직접 입력해줘도 상관없습니다만, 드래그해서 자동 입력하는 편이 오류도 줄이고 쉽겠죠? ㅎㅎ
익스프레션 입력창에는 아래와 같은 내용이 입력됩니다.
thisComp.layer("path").effect("Write-on")("Brush Position")
위에 첨부된 이미지를 참조하세요.. ^^;
이렇게 하면 경로의 이동과 동일하게 화살표가 움직이게 됩니다.
6. 화살표의 방향이 경로의 방향에 맞춰 자동으로 변경되게 해주기 위해,
Layer > Transform > Auto Orientation을 선택하고,
설정창에서 Orient Along Path를 선택하고 OK를 선택합니다.
그러면 경로에 따라 화살표의 방향도 자동으로 회전이 될 것입니다.
7. 최초의 화살표 방향이 진행방향과 다르다면 rotation툴을 선택하여 화살표 방향을 변경해줍니다.
키패드의 + 또는 - 를 눌러주면 1도씩 회전 시켜줄 수 있기도 합니다.
8. 필요하다면 화살표에 그림자 효과를 넣고, 카메라를 추가하여 애니메이션을 주셔도 좋을 것 같습니다.
** 이번 팁에서 중요한건 write-on 이펙트의 적용과 익스프레션의 적용.. 그리고 auto orientation의 적용.. 이렇게 3가지가 되겠습니다.
첨부한 이미지와 프로젝트 화일을 참조하세요.. ^^*
======================================================
soy님의 질문에 대한 답변을 추가합니다. 2006.05.21 PM 11:56
▲ 질문 : 화살표랑 write on으로 만든 선이 잘 안맞네요..잘 맞게 하는 방법 있을까요?? 그리고 기본은 선의 굵기가 일정하잖아요~ 좁다가 넓어지는 선은 표현이 가능한가요?^^ 초보라 한번에 풀리는것이 없네요~
1번 답변)
음.. 잘 안 맞는다는 말씀은.. 선이랑 화살표가 좀 떠 보인다.. 머.. 이런 말씀이신가요?
아님.. 라인의 방향에 따라 화살표가 방향을 제대로 못 바꾼다든가.. ^^;;
어떻게 안 맞는지를 증상을 상세히 적어주세요~ ㅎㅎ
프로젝트 파일을 올려주시면 답변을 수월히 드릴 수 있을 듯 싶군요~
안그러면 좀 애매하게 답변 드릴 수 밖에 없습니다.
• 화살표가 떨어져 움직이는거 같아요.. --->바짝 붙여보세요. ^^;;
• 화살표 방향이 라인의 방향과 다릅니다. --->최초의 화살표 방향이 진행방향과 다르다면
rotation툴을 선택하여 화살표 방향을 변경해줍니다.
키패드의 + 또는 - 를 눌러주면 1도씩 회전 시켜줄 수 있기도 합니다.
머.. 이 정도가 지금 상황에서 드릴 수 있는 답변의 한계입니다.. ^-^;;
2번 답변)
WRITE ON 이펙트의 옵션에 보면 SIZE가 있습니다.
SIZE를 애니메이션 시켜주면 굵기를 변화시킬 수 있습니다. ㅎㅎ
아래 이미지를 참조하세요.. 굵기도 변화시키고.. 덤으로 라인의 수명(길이..?)를 같이 조절해봤습니다.
렌더링 결과물.. ㅎㅎ
참고 단축키..
Ctrl+키패드의+ : 스케일을 1%씩 증가시켜줌
Ctrl+키패드의- : 스케일을 1%씩 감소시켜줌
키패드의+ : 시계방향으로 1도씩 회전시켜줌
키패드의- : 반시계방향으로 1도씩 회전시켜줌
너무 늦게 글을 확인했습니다. ㅎㅎ
*소이님의 말씀에 따르자면, 아마도.. write on이펙트가 제대로 동작을 안 하는듯 싶습니다.
화살표자체는 늘어나면서 움직이는게 아니고, write on 이펙트에 의해 만들어진 라인의 끝에 얹혀서 따라갈 뿐입니다.
일단 write on 이펙트로 움직이는 stroke를 만들어 주세요.. 그런다음에 익스프레션을 이용해서 화살표가 라인의 헤드를 따라 움직이게 해 주시면 됩니다.
이해가 안되는 부분이 있으시면, 다시 질문해주세요~
그럼.. 즐거운 주말 보내시길 바랍니다~ ^^)/
예제 처럼 화살표가 움직일려면 어찌 해야되는지요?? 답변 꼭 부탁드려요....