ZZANGMYON BLOG♡

훗~! 달달이 컨퍼런스&세미나 연타 행진에 정신이 없네요.
저는 오일석님과 WPF무한삽질을 할 것 같습니다!! 오호호호~~!!! 많이 많이 오세요 ^_^)

세미나 신청 ☞

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

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



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

 

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

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

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

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



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



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



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



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



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



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

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

 

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

프로젝트 타입 : WPF

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

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

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



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



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

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

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

프로젝트 타입 : WPF

앞으로는 실버라이트 강좌와 WPF 강좌를 동시에 진행할 것 같아서 프로젝트를 분류해야 할 것 같습니다. 오늘은 앞서 말씀드린 시리즈중 첫번째, 모션패스를 이용한 애니메이션에 대해서 알려드릴께요.

WPF에서는 객체가 패스를 따라 애니메이션이 일어나는 모션패스를 지원합니다. 방법은 매우 간단해요. 먼저 WPF 프로젝트를 생성합니다.

그리고 프로젝트에 하늘 배경의 이미지를 추가합니다. (Add Existing Item 으로 추가)



이미지를 추가했다면 종이비행기를 그려줄 차례입니다. 종이비행기는 패스를 이용하여 그려주면 됩니다. :)



종이비행기를 하나의 레이아웃으로 묶어준 뒤 그리드 위에 놓아줍니다. 다 되었다면, 이번에는 펜툴을 이용하여 패스를 그려주도록 합니다. 이 패스는 종이비행기가 날아가는 곡선이니 예쁘게 그려주세요. ^^



그런 다음 다 그린 곡선모양의 패스는 투명하게 처리하기 위해서 Fill과 Stroke를 모두 No Brush로 처리합니다.



그리고 나서 스토리보드를 하나 생성한 후에 종이비행기와 패스를 모두 선택하고 마우스 오른쪽을 눌러 Path > Convert to Motion Path 항목을 선택하여 실행해보면 패스를 따라 움직이는 것을 확인할 수 있습니다.



그런데 속도가 굉장히 빠르게 움직이는 것을 느끼실거에요. 모션패스의 기본 타임라인 길이가 2초로 생성되기 때문입니다. 다음과 같이 모션패스를 선택하고 드래그하여 길이를 원하는 만큼 늘여주도록 합니다.



마지막으로 뭔가 이상한것을 눈치채신 분이라면 대단한 눈썰미!! 종이비행기가 자연스럽게 날아가야하는데 같은 각도를 유지한채로 이상하게 날아가는 것을 알아채셨을 거에요. 타임라인에 맞추어 적절한 키프레임을 생성하고 종이비행기의 앞부분이 날아가는 각도에 맞추어 회전하면서 날아가도록 해줍니다.(조금 노가다죠? ^^;)

자, 다 완성 되셨나요? ^^ 이로써~ 날아가는 종이비행기가 다 만들어졌습니다!! F5를 눌러 실행하면 종이비행기가 날아갈거에요. (아마 스토리보드를 만들었을 경우에 윈도우가 로드될 때 바로 실행되게끔 하는 트리거가 생성되었을 겁니다. 이 부분은 다음시간에 설명하겠습니다) 잘 안되시는 분들은 소스를 첨부하도록 할테니 참고하시기바래요. 벌써 밤이 깊었네요. 오늘도 이렇게 열정을 불태우시는 분들~! 화이팅!!

안녕하세요. 짱묜입니다. ^^ 굉장히 오랫만에 포스팅을 하는 것 같네요. 여차저차 오만가지 핑계를 대다가 드디어..T^T.. ㅋㅋ 반성하겠습니다.

지난주 금요일에 실버라이트와 WPF에 관심이 있는 디자이너와 기획자, 개발자를 대상으로 한 세미나가 열려습니다. 이름하야 "DESIGNER'S BLEND"!!

저는 5세션을 맡아서 WPF의 모션패스와 트리거 라는 주제를 발표하게 되었습니다. 생각보다 많은 분들이 오셔서 놀라웠어요. 여태까지 제가 참여한 세미나&교육 에서 제일 많은 디자이너를 보게 된것 같아서 기뻤습니다. ^^

저도 이번기회에 다른 강사분들의 강의를 통하여 더 많은 것을 배우게 되었습니다. 그 어느때보다도 많은 분들께, 디자이너의 역할을 보여드릴 수 있었던 것 같네요.. 다음기회에도 이와 같은 세미나가 많이 열렸으면 하는 바램입니다.

세미나 발표 자료를 요청하시는 분들이 계셔서 바로 소스만 올릴까 하다가, 강좌로 풀어드리는 것도 좋을 것 같아서 포스팅을 하려고 합니다. 내용은 세미나에서 했던 내용들을 텍스트 강좌 형식으로 진행할 것입니다.

1. 모션패스를 이용한 애니메이션
2. 텍스트 패스를 이용한 애니메이션
3. 속성 트리거를 이용한 컨트롤 상태 변경
4. 이벤트 트리거를 이용한 애니메이션 제어

자, 그럼 다시 한번 달려보아요~ ^^

인원이 모두 마감되었습니다... 당일날 교육장에서 뵙겠습니다..^_^

특강 개요 주최 한국 폴리텍 제1대학교(http://www.conso.co.kr) 교육시간 토요일 1주 8시간(09:00~18:00) 교육으로 총 3회 교육을 진행합니다. 11/15, 11/22, 11/29 중에 원하는 날짜를 선택하여 지원하면 됩니다. 모집기간 11/3 ~ 7일 (1회 교육당 선착순 20명씩 모집) 교육대상 고용보험에 가입되어 있는 직장인 실버라이트와 WPF에 관심이 있는 디자이너 디자인 워크플로우를 이해하고 싶은 개발자 접수방법 1. 02-6300-6300으로 전화하여 자리가 있는지 확인 2. 회사직인이 찍힌 교육 동의서와 함께 팩스로 보냄    교육동의서 다운로드, 팩스번호 02-6300-6304 3. 서류 작성시 주의사항  - 회사의 기본사항 명기  - 교육생의 기본사항 명기  - 과정명은 “Multimedia Contents Developer”로 명기  - 훈련희망직종란은 공란  - 직업능력개발사업개산보험료액, 훈련비용지원한도액은 공란  - 기타 기본사항외에 불명확한 사항은 공란으로 두어도 무방함. 교육장소 서울시 구로구 구로3동 188-5 키콕스벤처센터 901호(약도) 문의 02-6300-6300 * 교육용PC와 교육자료가 제공됩니다. 특강 커리큘럼 시간(교시) 내용 1 교시 실버라이트와 WPF 그리고 Expression Studio 2 교시 Expression Design 다루기           1.         Design 툴 구성의 이해와 사용하기 2.         디자인 실습 3 교시 4 교시 Expression Blend 다루기            1.         Blend 툴 구성의 이해와 사용하기            2.         레이아웃 패널과 컨트롤            3.         스타일과 템플릿            4.         스토리보드를 이용한 애니메이션 5 교시 6 교시 7 교시 Expression Blend와 Design의 실습 8 교시 강사소개 Expression MVP 장미연 현재 디지털교과서 WPF 프로젝트에서 플랫폼 개발중이며 Expression 툴을 다루는 인터렉티브 디자이너이다. Microsoft Expression MVP를 수상하였고 HOONS닷넷의 실버라이트 시삽을 맡고 있으며 블로그(http://zzangmyon.com) 운영과 세미나 등의 활동을 하고 있다.

안녕하세요. 짱묜입니다. ^^

"Expression Design 없는 Expression Blend는 단팥없는 붕어빵이다"

오늘은 익스프레션 디자인 툴의 한풀이(?)를 할까 합니다.

저는 처음에 디자인 툴부터 접했었습니다. 사실 블렌드 툴은 플래시와 헷갈릴 것 같기도 하고(플래시도 못합니다만;) 왠지 개발자와 협업한다는데에 알 수 없는 두려움이 있었구요. 디자인 툴은 일러스트랑 비슷한 것이 혼자서 작업하는 데도 무리가 없을 것 같았고..네.....그래요...-_-만만해 보였어요....하하하..;;

사실 나온지 얼마 안된 툴이었기 때문에 아쉬운 부분도 많았습니다. 기존 툴에 대한 경험이 지배하고 있어서인지 반감도 들고 해서 처음 툴을 소개해주신 공도님께 "이 기능은 어딨어요? 이건 왜 안돼요?" 툴툴거리고, 공도님은 -_-땀을 흘리며, 변명아닌 변명을(내가 MS직원도 아닌데 왜..T^T) 하셨던 기억이 나네요.. 그렇게 툴과 정(?)들다 보니 기능 개선에 대한 욕구도 커지고 그래서 또 한 번은 어느 술자리에서 MS 에반젤리스트이신 황xx 과장님께 꼬장을 부리며 왜 디자인 툴은 기능 업데이트가 소홀하냐고 떼를 썼던 기억도 납니다..이 포스팅을 빌어 다시 한번 죄송하다는 말씀을..--;;

디자인 툴 관련해서 포스팅을 시작하고 마무리가 되어갈 때 즈음, 블렌드에도 눈을 돌려 공부하고 쓰게 되었어요. 실버라이트와 WPF가 떠오르면서 디자인과 블렌드 툴에 대한 사람들의 인지도가 올라가고 배우려는 사람들도 많이 늘게 되었고, 저는 디자인+블렌드 를 섞어 강좌를 쓰게 되었지요.

그런데 실버라이트와 WPF가 아무래도 개발자들에게 더 열광적이었어서 그런지, 블렌드의 인기가 급부상하기 시작했습니다. 아무래도 코드 위주로 작업을 하시던 분들에게 모션과 애니매이션이라는 부분은 새로운 세상이었을테니까요. 그러나 개발자분들이 쓰시는 포스팅은 블렌드만을 다루고 있었습니다. 블렌드만으로도 기본적인 디자인은 가능했으니까요.. 그러다보니 저의 강좌나 세미나를 보는 분들중에는 "왜 디자인 툴에서 작업을 해야하느냐?" 는 질문들도 생겨나기 시작했습니다.

디자인 툴은 점점 블렌드의 부수적인 툴로만 인식이 되었고, 하물며 일러스트레이터 파일의 XAML 변환 도구로 쓰이기도 했습니다. 뭐, 일러스트에 XAML로 내보내주는 플러그인을 깔았을 경우에는..디자인 툴도 필요없지요. 디자이너들조차도 안쓰면 개발자들이야 쓸리가 없겠죠. 그러나!! 우리는 디자인 툴을 꼭 써야합니다. 이제부터 그 이유를 말씀드리죠.

1. 블렌드 만으로도 디자인은 가능하지만 오브젝트 관리에 불편함과 표현의 한계가 있다.

이 부분은 개발자들에게 저의 입장을 말씀드립니다. 블렌드로 디자인은 가능합니다. 사각형, 원, 간단한 패스와 같은 경우에는 블렌드만으로도 가능하지만 더 복잡한 패스를 그리기에는 적합하지 않습니다. 그리고 텍스트! 디자이너들은 특정 폰트를 패스로 변환하여 사용하는 경우가 많은데 블렌드에서는 폰트 목록이 나오지 않을 경우가 있습니다. 그리고 오브젝트 관리에 불편함이 있는데요. 여기서 관리란 프로그래밍적이 아닌 디자인 객체들을 그룹화 하고 해제하거나 이동,정렬 하는 경우를 말합니다. 아무래도 기존의 디자인 작업 툴에 익숙한 디자이너들에게는 디자인 툴이 편할 수 밖에 없어요. 그래서 저는 블렌드에서 디자인을 잘 하지 않습니다.

2. 꼭 디자인 툴로 작업을 해야하나요?

이 부분은 디자이너들에게 말씀드립니다. 알다시피 실버라이트와 WPF에서는 디자인 객체들이 XAML 이라는 언어로 표현됩니다. 디자인 툴에서 작업한 객체들은 XAML로 내보낼 수 있지요. 그리고 일러스트레이터의 .AI 파일도 불러와서 XAML로 내보낼 수 있습니다.  저조차도 한 세미나에서 .AI 파일도 좋은 품질로 호환이 된다고 한적이 있었으니..ㅠ_ㅠ 그리고 두 기술의 인기가 올라가서인지, Adobe사의 일러스트레이터 툴에도 XAML로 내보낼 수 있는 플러그인도 생겨났습니다.

그런데 왜 굳이 디자인툴로 그려야하느냐? 아주 당연한 것이겠지만, 다른 핏줄이 같은 핏줄만 하겠습니까? 일러스트 파일을 변환해서 블렌드에서 작업하는 것보다 디자인 툴에서 작업한 파일이 호환이 잘되는 것은 당연한 이치입니다. 저도 실무를 하다보니 다른 디자이너의 작업 파일을 받아서 하는 경우가 많이 있습니다. 그런데 아직 디자인 툴에 능숙하지 못하거나 다룰 줄 모르는 분들이 많이 계시기 때문에 일러스트레이터 파일을 받을때가 많은데요. 그나마 플러그인으로 내보낸 XAML로 받을 경우에는 상태가 낫지만  .AI 파일을 직접 열 경우 복잡한 패스는 다 깨집니다.

패스의 가장자리가 부드럽지 못하고, 그라데이션도 제대로 표현되지 않습니다. 많은 패스가 중첩되어 있을 경우에는 조각조각 나서 올 때도 있어요. 레이어도 제대로 호환이 되지 않습니다. 모양새도 모양새지만 이런 파일을 XAML로 내보낼 경우에는 코드도 불필요하게 길어지고 지저분해 집니다. 그래서 저는 디자인 툴로 직접 내보낸 XAML 파일이 아닐 경우 (플러그인으로 내보낸 XAML파일이거나 일러스트 파일) 에는 왠만하면 다시 보정을 다 합니다. 모르는 사람이 보기엔 똑같아 보일텐데 다시 작업해야하는 저의 심정은 참 괴롭죠 ㅠ_ㅠ

이런 저런 이유로 저는 디자인은 디자인 툴에서 하는 것을 제일 선호합니다. 새로운 영역을 개척하시려는 많은 디자이너분들도 어차피 어렵지 않으니 디자인 툴을 한번 배워서 해보시길 바랍니다. 두서없는 글이었네요. 디자인 툴에 대한 애착인지 모르겠습니다만 Silverlight, WPF를 구현하기에 디자인 툴도 좀 더 빛을 봤으면 하는 바램입니다.

- 일시 : 2008년 05월 28일(수) 18시 30분 - 장소 : 한국마이크로소프트 (포스코 센터 5층) - 참가비 : 무료 - 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx

세미나 Agenda

18:30~19:00 등 록 19:00-20:00 ASP.Net & C# Application Debugging  / 서동진 20:00~20:15 휴식 20:15~21:30 WPF 핵심 개념 이해하기 / 서금욱 21:30~ Q&A / 경품추첨

발표 내용 소개

ASP.Net & C# Application Debugging / 서동진 간단하게 효과적인 방법으로 ASP.Net 어플리케이션과 C# 어플리케이션을 디버깅하는 방법을 알아봅니다.손쉬운 중단점에서부터 몇가지의 팁까지를 알아보고 간단한 예제를 통해 실제로 벌레를 잡는 방법을 알아봅니다. WPF 핵심 개념 이해하기 / 서금욱 WPF가 발표된지 벌써 꽤 많은 시간이 흘렀다. WPF로 진행되는 프로젝트가 점점 많아짐에 따라 WPF개발자들도 상당히 많이 필요한 시점이다. 하지만 지금 이 시점에서 간과해서는 안되는것이 기존의 ASP에서 ASP.NET으로 전환될때 많은 개발자들이 범했던 오류중 하나인 ASP.NET의 기본 개념과 원리를 이해하지 못하고 ASP.NET을 ASP처럼 개발하는 것이었다. WPF의 경우 비록 기존의 윈폼이나 타 기술과 현격한 차이가 있어 그런 오류를 범하지는 않겠지만 적어도 WPF가 가지는 새로운 개념이나 특징에 대해서 좀더 명확히 하고 가야할 필요성이 있다. 이번 세미나에서는 쉽지만 꼭 알아두어야할 WPF의 여러 기본이되며 핵심이 되는 개념들에 대해서 알아보도록 하자.

진행자 소개

서동진  HOONS닷넷 ASP.Net 시삽 현) MySpace Developer Microsoft ASP.Net MVP MCAD / MCSD 서금욱  HOONS 닷넷 WPF 시삽 현) MySpace Developer 월간 마이크로소프트웨어 기사기고 해석모델 관리시스템(CAES) 개발 핼프데스크(Groupware) 개발 도면관리 시스템개발 시작차 작업 관리 시스템(PWMS 개발

세미나 장소

한국 마이크로소프트 - 포스코 센터 5층

경품안내

MMicrosoft 무선마우스 1개 HOONS 닷넷과함께하는 .NET Framework 3.0 1권 향후 추가 예정