앞의 강좌에서 배경과 모션패스 부분은 다 만들었으니, 이제 반짝이는 빛을 만들어보도록 하겠습니다. 
유저컨트롤을 하나 생성합니다.



아마 사이즈가 굉장히 크게 생성이 되었을텐데요, 다음과 같이 유저컨트롤 레이어를 클릭하여 HeightWidth값을 35, 35 정도로 맞추어줍니다.



그런다음, 익스프레션 디자인 툴을 이용하여 빛을 그리도록 하겠습니다. 물론 디자인툴이 없는 분들은 블렌드로 그리셔도 무방합니다. (다만 ㅜㅜ 디테일하게 그리기가 쉽지않지요 ^^;;) 디자인툴을 열어 다각형을 그려주도록 합니다.

 


꼭지점이 7개이고, 내부로 깊이가 70% 파이게 만들어 주세요. :) 뭐! 원하시는대로 만드셔도 됩니다.



위와같이 2개의 별을 만들어 준 다음에 포갠 후, 작은 별을 살짝 회전해줍니다.

이렇게 만들어진 두개의 객체를 선택하여 복사한 후 블렌드에 가서 그리드 안에 붙여넣습니다. Export메뉴로 내보내도 되지만 Ctrl+C, Ctrl+V만으로도 붙여집니다. 단 좌표값을 잘 확인하세요 ^0^ 그리고 사이즈는 적절하게 맞추어줍니다.



이제 별이 빛나게 보이게 하기 위하여 스토리보드를 하나 만들어주도록 하겠습니다.



그리고 큰별과 작은별의 1.2초 되는 지점에서 키프레임을 생성하여 각각 360도, -360도 회전해 줍니다.



마지막으로 스토리보드를 계속 반복시켜 주도록 합니다~



이러게 완성되어진 유저컨트롤은 프로젝트 파일을 선택하여 빌드를 해주어야 메인 Window에 추가할 수 있습니다.



그리고 AssetLibrary에서 Custom Controls 탭을 선택하면 만들어진 유저컨트롤을 확인할 수 있을거에요.



자 이렇게 만들어진 유저컨트롤을 더블클릭하여 아까 만들어 둔 텍스트라인 패스 위에 놓은 다음 유저컨트롤과 패스를 동시에 선택하여 모션패스를 생성하여 줍니다.



이제 F5를 눌러 실행해 보면 다음과 같이 텍스트를 따라 빛나는 애니메이션을 확인할 수 있습니다. 


소스 첨부할께요. ^^ 잘 안되는 부분은 글을 남겨주시기 바랍니다. 


 

Posted by 짱묜


안녕하세요~ 부쩍 날씨가 따뜻해졌네요.. 워낙에 추운것을 싫어라하는 묜이지만, 따뜻해진 겨울에..지구온난화의 기상이변이 마구 다가오는것 같아서..이러다가 지구가 멸망하지는 않을까 걱정됩니다..ㅠㅠ;;

프로젝트 타입 : WPF

오늘은 텍스트를 따라 빛이 움직이는 애니메이션을 만들어 보도록 하겠습니다. 어제의 모션패스를 한단계 더 응용한 애니메이션인데요. 먼저, WPF 프로젝트를 생성합니다. 프로젝트 만드는 이미지는 생략할께요.^^

그리고 텍스트블럭(or 텍스트박스)에 원하는 텍스트를 써준 후 마우스 오른쪽을 클릭하여 텍스트를 패스로 변환해 줍니다.





위와 같이 텍스트가 패스로 전환 되었다면, Fill 부분은 없애주고 Stroke만 남겨서 글자의 테두리만 보여지도록 하겠습니다.



이제, 테두리만 남은 텍스트의 패스를 하나 더 복사해서 아래에 놓아줍니다.



그리고 Filp을 이용하여 Y축으로 텍스트의 방향을 뒤집습니다.



패스를 하나 더 복사한 것은 반사효과를 내기 위함이었거든요~ ^^  OpacityMask를 이용하여 효과를 내어보겠습니다. 아래에 놓인 복사된 패스를 선택하고 다음과 같이 OpacityMask그라데이션을 넣어줍니다. OpacityMask의 그라데이션에 들어가는 값은 어떤 색이던 상관없이 알파값의 영향을 받게 됩니다. 따라서 반사되어 비치는 효과를 위해서 제일 마지막 지점의 알파값만 70%로 맞추어주고 나머지 부분은 0%로 처리해줍니다.



자~ 텍스트의 라인과 반사효과가 잘 만들어졌나요? 다 되었다면 다음강좌에 이어서 하도록 하겠습니다.

Posted by 짱묜

와..한때 잠깐 여름 날씨더니 다시 쌀쌀해졌어요..ㅠㅠ
간만에 바람쐰다고 한강을 다녀왔는데..강바람이 ㄷㄷ.. 그래도 마음이 시원해졌어요 ^_^

오늘은 지난 시간에 내보낸 버튼 디자인의 XAML 파일을 블렌드에서 불러와 모션을 줘보겠습니다.

1. 먼저 프로젝트 파일을 하나 생성하도록 합니다.
프로젝트 타입은 Silverlight 2 Application 을 선택하고 이름은 알맞은 것으로 지어주세요.
경로를 지정한 후 개발언어는 Visual C#을 선택하도록 합니다.



2. 파일을 생성한 후 오른쪽 패널을 살펴보면 프로젝트 파일에 대한 정보가 나오는 탭이 있습니다.
프로젝트 파일의 구성에 대한 설명은 차후에 하도록 하겠습니다.



3. C# 파일을 선택한 후 마우스 오른쪽 버튼을 눌러 Add Existing Item 메뉴를 선택합니다.
우리는 이곳에 만들어 둔 XAML 파일을 추가할 거예요. 대화창이 열리면 XAML 파일을 저장한
경로를 찾아 파일을 추가합니다.



4. 아래와 같이 추가된 것을 확인할 수 있어요..



5. 더블클릭 하여 파일을 열면 아트보드 영역에 디자인된 개체들이 나타납니다. 짠~



6. 왼쪽의 Interaction panel을 살펴보면 우리가 만들었던 디자인의 Viusal tree가 보여집니다.
디자인된 오브젝트를 감싸고 있는 Layer_1Canvas 이름을 MarkButton로 바꿔줍니다.
그리고 아래의 레이어도 다음과 같이 이름을 바꿔줍니다. 제가 다음과 같이 이름을 준 것은
디자인 오브젝트에 따라 편하게 관리하기 위해 임의로 지어준거에요.



7. Doucment 캔버스와 MarkButton 캔버스의 사이즈를 버튼의 크기만큼 줄여주도록 합니다.
디자인에서 XAML 파일을 불러오면 디자인의 아트보드 영역이 레이어로 넘어오기때문에 사이즈 조절이
필요합니다.



9. 그리고 mark1mark2Opacity 값을 0으로 해주어 초기상태에는 항상 보여지지 않도록 합니다.



10. 이제 마우스가 오버되었을때 효과를 주기 위해 스토리보드를 생성하도록 할께요. 아래 표시한 곳의 "+"
누르면 스토리보드 생성 대화창이 뜹니다. 스토리보드 이름을 주고 확인합니다.



11. 스토리보드가 생성되면 이제 애니메이션을 만들 수 있어요.



스토리보드가 생성되면 Timeline recording is on 이 되어 녹화모드가 시작됩니다.
기본 상태에서 보이지 않는 mark1mark2를 선택하여 빨간 표시된 부분을 눌러 Keyframe를 삽입하도록
합니다.

12. Keyframe를 삽입한 후 표시된 부분의 PlayHead를 움직여 0.2초가 지난 시점에 Keyframe를 한번 더
넣도록 합니다. 그리고 마우스가 오버되었을때 사라진 부분이 다시 나타나게 하기 위하여 Appearance 패널의
Opacity 값을 다시 100으로 변경해줍니다.



13. 자! 이제 재생 버튼을 누르면 숨겨졌던 영역이 다시 나타나는 애니메이션을 확인할 수 있습니다.



^^ 하하 너무 쉬운 내용을 쓴 것 같아요..여러분께 이정도는 껌(?)~ 인데 말이죠;; ㅋㅋ
블렌드에서 애니메이션은 이렇게 만들어진답니다. 플래시와 비슷하죠?
오늘 한 작업은 효과를 주기위한 스토리보드를 만드는 단계였구요, 실제로 버튼이 된것은 아닙니다.
다음 단계에서 버튼으로 만드는 과정을 다루도록 하겠습니다.

그리고 활용강좌라 작업 단계에 대한 설명만 했는데 인터렉션 패널이나 타임라인의 구조에 대한 강좌도
곧 올리도록 하겠습니다.

Posted by 짱묜