[예제로 배우는 Expression Blend] Chapter 3. 텍스트 모션
Expression Blend 2008/11/14 00:11 |
Chapter 3. 텍스트 모션
이번 강좌는 텍스트에 아름다운 효과를 주는 것을 해보겠습니다.
1. textMotion1이라는 이름으로 솔루션을 생성합니다.
2. UserControl 을 선택한 후
Layout속성을 Width : 400 / Height : 100으로 줍니다.
3. TextBlock을 선택한 후 WHITE COCO라고 글자를 넣은 후 아래와 같이 맑은고딕 / 60으로 설정합니다.
아래와 같이 되셨나요? (물론 다른 글자를 치셔도 되요~ ㅋ)
4. 입력한 글자를 선택후 마우스 우클릭 > Path > Convert to Path 를 합니다.
(글자를 Path로 다 바꿔서 면으로 만드는 거에요. )
5. 그리고 다시 마우스 우클릭 > Path > Release Compound Path를 합니다.
(여러개의 패스로 분리하는 부분입니다.)
6. 아래와 같은 모양이 됩니다.
7. 여기서 'COCO'의 앞의 "O"를 선택합니다. 패스 두개를 동시에 선택해야 합니다.
그리고 나서 Object > Combine > Exclude Overlap을 합니다.
아래와 같은 모양이 되었나요? (Exclude Overlap은 두개의 패스 중에 겹쳐진 곳을 없애줘요~)
8. 두번째 "O"도 Exclude Overlap을 시켜서 아래와 같이 만듭니다.
9."WHITE COCO" 패스를 모두 선택 한 후
아래와 같이 Fill속성을 #FFCCCCCC로 줍니다.
그리고 나서 바로 색상의 Alpha값을 0으로 줍니다.
10. 화면의 비율을 50프로로 만들고 글자패스를 모두 선택하여 화면의 오른쪽으로 빼놓습니다.
(나중에 오른쪽에서 날아오는것을 만들려구요~ ㅋ)
11. 이제 진짜 움직임을 줄 스토리보드를 만듭니다. (coco는 sb_txt라는 이름을 사용 했어요~)
12. F6도 누르고 아래 분홍상자처럼 비율을 조정하여 아래와 같은 화면상태로 만듭니다.
13. 모든 패스가 선택된 상태에서 바로 아래의 Record Keyframe 을 누릅니다.
그럼 아래와 같이 계란모양의 Keyframe이 생깁니다.
14. 타임라인을 0.4초의 위치로 이동시킵니다.
15. 글자패스 모두를 화면의 중앙으로 끌고 옵니다. (끌면서 Shift 누르는거 잊지 마세요~)
끌음과 동시에 0.4초 위치에 Keyframe이 추가되었습니다.
글자패스의 색상의 Alpha값을 0으로 줍니다.
16. 타임라인을 0.6초로 옮긴 후 분홍상자 안의 Record Keyframe을 눌러 Keyframe을 추가합니다.
다시한번 타임라인을 0.8초로 옮긴 후 분홍상자 안의 Record Keyframe을 눌러 Keyframe을 추가합니다.
17. 타임라인을 0.6초로 옮긴 후
글자 패스들의 Fill 속성을 #FF848484로 바꿔줍니다.
글자 패스들의 Transform 의 Y값을 -10으로 줍니다.
(혹시 -10으로 줬는데 -9.99512나 다른숫자로 변해도 당황하지 마세요..그냥 하시면 됩니다.)
이제 글자의 움직임을 분리 해 보겠습니다.
18. 맨윗줄을 제외한 모든 달걀모양의 Keyframe을 선택합니다 (Ctrl을 눌러 복수선택합니다)
모두 선택한 상태에서 오른쪽으로 0.1초 만큼 이동시킵니다.
19. 이동시킨 후 Ctrl을 누르고 있는 상태에서 아래 분홍 상자의 네군데의 Keyframe을 클릭합니다.
그러면 아래와 같이 해제가 됩니다.
다시한번 0.1초만큼 오른쪽으로 이동시킵니다.
20.계속 반복하여 아래와 같이 만듭니다.
21. 플레이를 하면 글자가 하나씩 시간간격을 두고 날아오는 것을 확인 할 수 있습니다.
22. 스토리 보드의 네임을 선택하고
RepeatBehavior를 Forever로 설정합니다.
23. 스토리 보드를 빠져나온 후 LayoutRoot를 선택하고
Loaded에 start라고 넣고 엔터 칩니다.
24. 비주얼 스튜디오가 열리면 아래와 같이 sb_txt스토리 보드를 시작하게 해줍니다.
25. 저장하고 비주얼스튜디오를 닫습니다.
26. 블랜드로 와서 F5를 눌러 실행합니다. (소스는 첨부하였습니다.)
이것으로 세번째 강좌를 마칩니다.
틀린 부분이 있으면 꼭 알려주세요~~
[ 활용예제 1 ]
[ 활용예제 2 ]
textMotion1.zip이번 강좌는 텍스트에 아름다운 효과를 주는 것을 해보겠습니다.
1. textMotion1이라는 이름으로 솔루션을 생성합니다.
2. UserControl 을 선택한 후
 |
Layout속성을 Width : 400 / Height : 100으로 줍니다.
 |
3. TextBlock을 선택한 후 WHITE COCO라고 글자를 넣은 후 아래와 같이 맑은고딕 / 60으로 설정합니다.
 |
아래와 같이 되셨나요? (물론 다른 글자를 치셔도 되요~ ㅋ)
 |
4. 입력한 글자를 선택후 마우스 우클릭 > Path > Convert to Path 를 합니다.
(글자를 Path로 다 바꿔서 면으로 만드는 거에요. )
 |
5. 그리고 다시 마우스 우클릭 > Path > Release Compound Path를 합니다.
(여러개의 패스로 분리하는 부분입니다.)
 |
6. 아래와 같은 모양이 됩니다.
 |
7. 여기서 'COCO'의 앞의 "O"를 선택합니다. 패스 두개를 동시에 선택해야 합니다.
 |
그리고 나서 Object > Combine > Exclude Overlap을 합니다.
 |
아래와 같은 모양이 되었나요? (Exclude Overlap은 두개의 패스 중에 겹쳐진 곳을 없애줘요~)
 |
8. 두번째 "O"도 Exclude Overlap을 시켜서 아래와 같이 만듭니다.
 |
9."WHITE COCO" 패스를 모두 선택 한 후
 |
아래와 같이 Fill속성을 #FFCCCCCC로 줍니다.
 |
그리고 나서 바로 색상의 Alpha값을 0으로 줍니다.
 |
10. 화면의 비율을 50프로로 만들고 글자패스를 모두 선택하여 화면의 오른쪽으로 빼놓습니다.
(나중에 오른쪽에서 날아오는것을 만들려구요~ ㅋ)
 |
11. 이제 진짜 움직임을 줄 스토리보드를 만듭니다. (coco는 sb_txt라는 이름을 사용 했어요~)
 |
12. F6도 누르고 아래 분홍상자처럼 비율을 조정하여 아래와 같은 화면상태로 만듭니다.
 |
13. 모든 패스가 선택된 상태에서 바로 아래의 Record Keyframe 을 누릅니다.
 |
그럼 아래와 같이 계란모양의 Keyframe이 생깁니다.
 |
14. 타임라인을 0.4초의 위치로 이동시킵니다.
 |
15. 글자패스 모두를 화면의 중앙으로 끌고 옵니다. (끌면서 Shift 누르는거 잊지 마세요~)
 |
끌음과 동시에 0.4초 위치에 Keyframe이 추가되었습니다.
 |
글자패스의 색상의 Alpha값을 0으로 줍니다.
 |
| 여기서 플레이를 해보면 글자가 투명했다가 오른쪽에서 날아오면서 회색으로 변하는 것을 볼수가 있어요~ |
16. 타임라인을 0.6초로 옮긴 후 분홍상자 안의 Record Keyframe을 눌러 Keyframe을 추가합니다.
 |
다시한번 타임라인을 0.8초로 옮긴 후 분홍상자 안의 Record Keyframe을 눌러 Keyframe을 추가합니다.
 |
17. 타임라인을 0.6초로 옮긴 후
 |
글자 패스들의 Fill 속성을 #FF848484로 바꿔줍니다.
 |
글자 패스들의 Transform 의 Y값을 -10으로 줍니다.
(혹시 -10으로 줬는데 -9.99512나 다른숫자로 변해도 당황하지 마세요..그냥 하시면 됩니다.)
 |
| 여기서 플레이를 해보면 글자가 날아 온 후 0.6초의 위치에서 색이 진해지면서 약간 위로 올라갔다가 0.8초의 위치에서 다시 흐려지면서 내려옵니다. |
이제 글자의 움직임을 분리 해 보겠습니다.
18. 맨윗줄을 제외한 모든 달걀모양의 Keyframe을 선택합니다 (Ctrl을 눌러 복수선택합니다)
 |
모두 선택한 상태에서 오른쪽으로 0.1초 만큼 이동시킵니다.
 |
19. 이동시킨 후 Ctrl을 누르고 있는 상태에서 아래 분홍 상자의 네군데의 Keyframe을 클릭합니다.
 |
그러면 아래와 같이 해제가 됩니다.
 |
다시한번 0.1초만큼 오른쪽으로 이동시킵니다.
 |
20.계속 반복하여 아래와 같이 만듭니다.
 |
21. 플레이를 하면 글자가 하나씩 시간간격을 두고 날아오는 것을 확인 할 수 있습니다.
22. 스토리 보드의 네임을 선택하고
 |
RepeatBehavior를 Forever로 설정합니다.
 |
23. 스토리 보드를 빠져나온 후 LayoutRoot를 선택하고
 |
Loaded에 start라고 넣고 엔터 칩니다.
 |
24. 비주얼 스튜디오가 열리면 아래와 같이 sb_txt스토리 보드를 시작하게 해줍니다.
| private void start(object sender, RoutedEventArgs e) { sb_txt.Begin(); } |
25. 저장하고 비주얼스튜디오를 닫습니다.
26. 블랜드로 와서 F5를 눌러 실행합니다. (소스는 첨부하였습니다.)
이것으로 세번째 강좌를 마칩니다.
틀린 부분이 있으면 꼭 알려주세요~~
[ 활용예제 1 ]
[ 활용예제 2 ]
댓글을 달아 주세요