Tool Technic Pratice : 1탄 눈물의 에드워드와 벨라

 

지난해말과 올해초에 걸쳐 디자인 정글 아카데미에서 툴테크닉 워크샵을 8강과정과 3일 과정- 해서 총 4번 진행했었는데요~
실습부분자료요청도 있고 해서-
실습내용 몇가지를  강좌로 공유할께요.

먼저
1탄 : 눈물의 에드워드와 벨라!
나의 롸버트와 그의 여자의 사진을 향한 저의 마음을 표현해보는 실습을 통하여-
Blend와 친숙해지는 실습을 해보도록 하겠어요 ㅠㅠ

Mytears.zip

사용한 이미지를 첨부합니다.
롸버트와 그녀의 다정한 폴라로이드 사진위에 눈물이 떨어지고 사진이 번지는 ...
(어쩌다가 이런 예제를 생각해 냈는지?)
예제를 만들어 볼께요.

학습목표
1. Effect
2. Transform
3. Storyboard
4. Behavior
사용해보기.

1. Silverlight 3 Application + Website 프로젝트를 하나 만들어 줍니다.

2. Add Existing Item... 을 선택해 프로젝트에 사용할 이미지를 추가해 보겠습니다. 
(상단에 압축파일로 추가 해 두었어요!)

3. 압축파일안의 sample01~03.png를 아트보드위에 드래그 앤 드롭해서 꺼내 줍니다.
sample.png파일은 grid의 배경으로 쓸것이므로 잠시 내버려 두고!

4. 세 이미지의 이름을 적당히 정해 준다음에 세 이미지를 Group into > Grid로 잡아 넣어줍니다.
이제 이부분이 사진 부분이 될 거에요.

5. 4번에서 묶은 Grid의 제목을 Photo로 정해 주었습니다.
Photo grid의 프로 퍼티를 설정해보겠어요.

1) Background를 선택하고 4번째 탭 Image Brush를 선택합니다.
2) Strech 속성은 Grid의 크기와 상관없이 이미지 원본 크기 그대로 뿌려지는 None 선택
3) Image Source는 배경으로 쓸 Sample.png선택
4) Layout에서 이미지 원본 사이즈로 Width와 Height를 잡아주고
5) Alignment를 중앙 정렬로 잡아 줍니다.

6. FaceBel과 FaceEd는 눈물이 Blur Effect를 줄 부분입니다.
두 이미지를 위 그림과 같이 정확한 위치로 잡아 줍니다.

7. 그리고 두이미지가 같이 번지고 보이고- 할 수 있게  Grid로 묶어 줍시다.
(묶으면서 위치가 좀 틀어질 수도있으니 잘 살펴 봅시다~)

8. 7에서 묶은 Grid의 제목을 BlurPhoto로 정해 주었습니다. 요 BlurPhoto를 선택하고,

1)  Appearanc > Effect > New 버튼을 선택해줍니다.
2) Effect선택창이 뜨면  Blur를 선택하고 OK를 눌르면 Effect 속성에 옵션이 생깁니다. 적당한 수치로 조절해줍시다.
3) 그리고 평소에는 보이지 않아야 하므로 Opacity를 0%로 바꿔서 숨겨둡시다.

9. 이제 추가한 물방울 모양 이미지!(나의 눈물!!!)를 좀 자연스러운 모양으로 만들기 위해 opacity mask 를 적용해 보겠어요.
Drop의 뾰족한 부분이 0% - 둥근아래부분이 100%이 되게 설정 해줍니다.

Tip) OpacityMask는 컬러와 상관없이 Opacity만큼 대상을 보이게 해줍니다.
100%이면 다보이고 0%면 안보이는 식.
때문에 Gradient Brush 로 대상을 점점 안보이거나 점점 보이게 만들때 사용하기 적합합니다.

10. 그리고 Drop의 위치를 UserControl밖으로 빼버려서 평소에는 안보이게 해둡니다.

11. 이제 폴라로이드 모양의 포토의 프레임부분을 만들어 볼께요.
Photo Grid를 Group into > Border 로 묶어 줍니다.

12. 11에서 묶은 Border의 제목을 Polaroid로 정해주고 Photo의 Width와 Height를 다시 확인해주세요.
Border로 묶으면서 마음대로 변했지도 모릅니다!

13. 이제 Polaroid의 속성을 정해줍니다.

1) 먼저 Background를 Gradient Brush로 색을 그럴싸하게 정해주고-

2) BorderBrush의 색을 지정해주고
3) BorderThickness로 테두리 굵기를 지정합니다.
4) CornerRadius로 테두리의 둥글기를 지정합니다.
5) Effect의 New버튼을 클릭해서 Effect선택창에서 DropShadow를 선택해줍니다.

Effect - DropShadowEffect 관련 상세 속성들이 등장합니다.
순서대로
블러의 크기 - 색 - 위치 - 투명도 - 거리

6) Layout 에서 Width와 Height를 Auto로 만들어주고
7) 폴라로이드 프레임부분처럼 보이게 Padding을 상좌우 25, 하 50정도 지정해줍니다.

8) 폴라로이드가 약간 기울어져 보이게 만들어 줄겁니다.

Transform > Scale > y Scale을 조금 줄여주고,
Projection 에서 X Scale을 조금 돌려서 기울어져있는 듯한 폴라로이드로 만들어 줍니다.
아트보드를 보면서 그럴싸한 값으로 만들어 주면 되겠죠~

이제 눈물이 떨어지고 사진이 번지는 애니메이션을 만들어 보겠어요.

14. Objects and Timeline 패널에서 New... 버튼을 클릭해 새 스토리보드를 추가 합니다.

SbDrop이라고 간단하게 제목을 지어 줬어요!

15. Objects 에서 Drop을 선택하고 Keyframe 추가하여 Drop의 Animation을 만들어 줍니다.
0초에 keyframe을 하나 추가하고, 0.3초로 노란 시크바를 옮겨 keyframe을 추가 합니다.

0.0 ~ 0.3초 동안 일어날 animation을 추가 하는것이죠.
노란바가 0.3초에 있고 Drop이 선택되어있는지 확인을 한 뒤 바뀔 속성들을 설정해봅시다.

16. Drop이 거의 떨어졌을 때, opacity 를 30% 설정해주고, Y좌표를 옮겨 사진위로 적당히 떨어지게 설정합니다.

17. 0.4초 지점에 keyframe을 하나 더 추가하고 이제 Drop이 완전히 없어지게 만들겁니다.

Opacity는 0%
그리고 Scale은 바닥에 떨어지면 물방울이 번지는 효과가 조금 그럴싸하게- x  scale은 약간 키워주고,  Y scale은 약간 줄여줍니다.

Tip) keyframe조절
Animation을 실행해보기 위해 타임라인의 플레이 버튼을 눌러봅시다.
현재 Drop의 Animation이 매우 빠르게 움직입니다.
이렇게 전체 비율에 맞게 Animation을 만들었으나 - 더 천천히 진행되게 하기위해서는

위 그림과 같이 keyframe전체중의 끝부분 파란 핸들을 잡고 Drag해주면
현재 만들어 둔 Animation의 타임 비율이 유지된채 전체 시간이 늘어나게 됩니다.

한 keyframe의 시간만 조절하기위해선 한 keyframe을 선택해서 옮겨주고,
다중 keyframe을 선택해서 조절할 때는 Ctrl + keyframe 각각 선택으로 다중선택이 가능합니다.
Ctrl 누른채로 Drag 하여 다중 선택을 할 수도 있습니다.

19. 이제 Drop이 바닥으로 떨어졌으니, 사진이 번질 차례입니다.
위 그림과 같이 BlurPhoto를 선택하고 0.0, 0.9, 1.3초 부분에 Keyframe을 추가해줍니다.
그림의 A구간(0.9~1.3) 동안 BlurPhoto의 Animation이 동작하게 할거에요. 
BlurPhoto의 1.3초 구간이 선택되어 있는지 확인을 하고,

Opcity를 100%로 변경해 줍니다.

20. StoryBoard가 다 만들어 졌으면, Objects and Timeline 패널의 SbDrop 스토리보드 제목옆의 X (Close StroryBoard) 버튼을 클릭하여, StoryBoard Recording을 끝냅니다.


StoryBoard를 생성했으니,
이제 StoryBoard를 실행할 이벤트를 설정해줍니다.

21. Asset Library를 열어 Behavior > ControlStoryboard Action 을 Drag 하여 이벤트가 일어날 대상에게 Drop해 줍니다.

Polaroid를 클릭하면 스토리보드를 실행하게 할 것이므로 Polaroid에 붙여줍시다.

22. Objects 패널에서 ControlStoryboardAction  이 선택한뒤 속성을 설정해줍니다.
SourcName은 Polaloid에 붙였기 때문에 자동적으로 Polaroid가 선택되어있고,
EventName도 기본으로 MousLeftButtonDown이 선택되어 있습니다.

Common Properties의
ControlStoryboardOption 도 기본으로 Play가 선택되어져 있고
Storyboard 속성에서 어떤 Storyboard를 실행할지만 정해주면 끝!
SbDrop을 선택해 줍시다.

자- 이제 Run Project를 눌러 실행 해 볼까요?

말로하는 것보다 글로 쓰니까 훨씬 어렵네요- 휴으으-
만든 파일 첨부합니다!

다음은 Behavior 설명하면서 만들었던 예제 올려드리겠습니다.

MyTears.zip