Roaming from the Earth

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

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 설명하면서 만들었던 예제 올려드리겠습니다.

 

Expression Blend3 preview - 1.인터페이스 에 이어서 Photoshop import - 테스트를 해봤습니다.

이슈는 Photoshop ans Illustrator import였는데,
illustrator랑은 친하지도 않고 라이센스도 없으며 있어도 거의 사용하지 않기 때문에~
(쓸 일 있으면, 요즘은 왠지 간단한 Expression Design으로 해결!)

저와 친한 Photoshop만 ~ (사이좋게 지내자 - ㅠ_ㅠ)



Photoshop은 *.psd, Illustrator는 *.ai 파일이 import가능하군요.

1. PSD파일을 하나 import 해봤습니다.
먼저, 어디에서든 import해도 문제가 많이 생길것만 같은 레이어 많은 psd를 선택해 보겠습니다.



원본은 이런모습의 ! (CodeSafe 홈페이지 시안입니다! _ 어어;; 이거 맘대로 썼다고 혼나면....? ;;)
layer가 100개이상 들어있고 group도 10개 이상, Mask, Layer style, path까지 들어있는 10MB가 넘는 덩치 큰 시안 입니다.
얼마나 어떻게 Import될지 두근두근합니다-



File 메뉴에서 Import Adobe Photoshop File 을 클릭하고 import할 파일을 선택하면,



오우- 노!!!!
이제, import를 어떤 경우에 쓸 수 있을지... 잘 살펴보겠습니다.



CodeSafe 시안이 엉망이 되어버렸군요!!
먼저 , 예상했듯..

1. 메인네비게이션 - clipping mask 가 사라졌군요.
2. 블랜딩이미지의 - 화살표는 opacity와 fill로 투명도를 조절해뒀는데 opacity는 잘 따라오는데, fill의 값은 import 못 했군요.
3. Hosting, ALM, TFS 색들이 짠- 나타난 것을 보니 Layer blanding 옵션도 안되는 군요.

4. 위의 세개는 예상했지만, Text들의 글자간격, 줄간격 값이 변했고,
5. 전체 포지션들도 어긋나는것을 볼 수 있습니다!

object패널을 보면-



group들도 적용이 되고 - 마스크등등으로 얽혀있던 레이어들을 깔!끔 - 하게 모조리 이미지로-
그리고 text들은 살려서 text block으로-
(이런 모습은 훌륭하군요!!)



그리고 생성된 이미지들은 (전부다 png ! - 다른 포맷으로 설정하는것은 안보이네요.)
import한 'psd파일이름_Images' 에 자동 저장되네요.

생성된 이미지 폴더의 속성을 보면 156개의 이미지가 생성되었고, 총 용량은 2.56MB 정도 되네요 - .

이번엔, 좀 간단한 psd파일을 import해보겠습니다.



얼마전 이미지 탭메뉴에서 사용했던 고양이들의 psd 입니다.
깔끔하게 불러왔습니다.
레이어도 그룹별로 나누어져 있습니다.
이런 기능이 전에도 있었으면 고양이들을 하나하나 따로 잘라내는 작업은 줄일 수 있었겠군요.

+ TIP :

Import 창에서 Compatibility Layer에 체크를 하시면 ~
레이어와 상관없이 -
PSD원본 그대로 View의 PNG 하나만 생성됩니다. 말그대로 합체!
(포토샵에서 디자인의 사본 이미지를 png로 저장해서 blend에 불러온것과 같은 느낌!)

결론 >>
프로젝트에 사용해야할 이미지들이 한가득이고, 라이브러리를 포토샵으로 이미지 작업 했을 경우 - 한번에 레이어 별로 프로젝트에 추가할 때는 유용하게 쓸 수 있겠군요.

image set를 psd로 만들어서 정리만 한 뒤, 프로젝트에 import한다던지...

아무튼 좋은 수단이 되어 주었으면 좋겠습니다. (뭐든 유용하게 쓰면 좋은 수단!)