Myon & Rang2011/05/21 02:40

ZZANGMYON BLOG 카테고리 개편


안녕하세요? 짱묜입니다. 한동안 블로그 활동이 뜸했었는데 다시 본격적으로 시작하려고 합니다.
먼지가 쌓인 블로그를 다시 보니 지난 강의들의 툴 버전이 오래된 것도 있고 해서 정리를 해보았어요.

  • Myon & Rang : 저의 일상생활과 제가 키우는 랑이의 이야기들이 있습니다.
  • Blendːver.4 : 블렌드 4 이후 버전의 강좌 모음입니다. (세부목록 미정)
  • Blendːver.1 ~ ver.3 : 블렌드 버전 1부터 3까지의 강좌 모음입니다. (4버전도 작년에 작성한 것이 몇개 있을듯..)
  • C# & XAML : 블렌드를 이용하지 않고 C#과 XAML로 이루어진 강좌 모음입니다.
  • Expression Design&Web : 제가 예전에 작성했던 디자인툴과 웹툴의 강좌와 팁이 들어있습니다.
  • HTML5 : HTML5와 관련된 내용이며추후 업데이트 예정입니다.
  • UX/UI : UX/UI와 관련된 내용이며 추후 업데이트 예정입니다.
  • My Work : 저의 작업물들이 있는 곳입니다. 앞으로 배포할 오픈소스도 여기에 넣을 생각입니다.
  • Study & Commuinty : 진행하고 있는 스터디와 커뮤니티 활동에 대한 내용들입니다.
  • Info & Seminar : 블로그에 올라오는 기술 관련한 정보들과 세미나 정보안내 입니다.
  • Episode : 저의 잡동사니 모음이네요. 웃자고 넣는..ㅎㅎ


채워진 내용들은 얼마 없는것 같은데 목록은 많네요. ㅎㅎ;;
조만간 Expression Blend의 지난 강좌들을 업데이트하여 버전4에 맞는 내용으로 새로 포스팅 할 예정입니다.
원래 공부 시작하기전에 청소하는 버릇이 있는데, -_-웹에서도 이러다니......이래서 가끔 덕후소리 듣습니다..크크
자, 그럼 다시 달려볼까요~~~~~!

Posted by 짱묜
TAG ExpressionBlend, 장미연, 짱묜, 짱묜블로그, 카테고리개편
Trackback 0 Comment 0
Info & Seminar2011/05/19 21:14

Expression Blend4 책이 나왔네요!



Expression Blend MVP인 정진희씨가 쓴 책이 드디어 나왔습니다!
블렌드 책을 손꼽아 기다리시던 분들께는 아주 반가운 소식이죠??
저도 한번 사서 보아야겠네요!


책 구매 사이트 :

Yes24 책 구매  11번가 책 구매 인터파크 책 구매 

Posted by 짱묜
TAG ExpressionBlend, 블렌드책, 정진희
Trackback 0 Comment 0
Blend ver.1 ~ ver.3/WPF 활용2009/02/04 00:09

[Expression Blend 활용강좌] 텍스트를 따라 반짝이는 빛 2


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



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



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

 


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



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

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



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



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



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



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



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



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



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


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

MotionPath2.zip

 

Posted by 짱묜
TAG ExpressionBlend, WPF, 모션패스, 애니메이션, 익스프레션블렌드
Trackback 0 Comment 0
Blend ver.1 ~ ver.3/WPF 활용2009/02/04 00:09

[Expression Blend 활용강좌] 텍스트를 따라 반짝이는 빛 1


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

프로젝트 타입 : WPF

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

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





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



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



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



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



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

Posted by 짱묜
TAG ExpressionBlend, WPF, 모션패스, 애니메이션, 익스프레션블렌드
Trackback 0 Comment 0
Blend ver.1 ~ ver.3/WPF 활용2009/02/03 01:46

[Expression Blend 활용강좌] 날아가는 종이비행기


프로젝트 타입 : WPF

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

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



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



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



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



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



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



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



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

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

MotionPath1.zip

Posted by 짱묜
TAG ExpressionBlend, WPF, 모션패스, 종이비행기
Trackback 0 Comment 4
Info & Seminar2009/01/21 14:51

Designer's Blend 함께해요 :)



두둥~!! 제가 블렌드를 시작한 이래로~
최초로!! 디자이너 다섯명이 모여서 세미나를 하게 되었네요..하하핫!!!
개발자 세미나가 어려웠던 많은 디자이너분들!!!
꼭 오셔서 좋은 시간 되시기 바랍니다.

오실분들은 다음 페이지에서 신청을 해주세요..^^
http://cafe.naver.com/expressionstudio/321
Posted by 짱묜
TAG ExpressionBlend, 디자이너, 블렌드디자이너, 블렌드세미나, 익스프레션스튜디오
Trackback 0 Comment 0
My Work/Silverlight2008/12/02 11:55

실버라이트 슬라이드 효과 시계


제2회 훈스닷넷 실버라이트 컨퍼런스 기념입니다 후훗~~
제작 과정은 컨퍼런스를 위하여 남겨두죠 ^_^;
Posted by 짱묜
TAG ExpressionBlend, 실버라이트, 실버라이트시계, 컨퍼런스, 훈스닷넷
Trackback 0 Comment 6
Blend ver.1 ~ ver.3/Silverlight 기초2008/11/27 23:24

[Expression Blend 기초강좌] Opacity와 Alpha


안녕하세요. 오늘은 눈이 안오고 비가 오네요. 내일부터 엄청 추워진다고 하니 걱정입니다..ㅠㅠ하핫;; 집에서 이불 돌돌말기 신공이 나날이 늘어가고 있더라는;;

객체의 투명도를 조절하는 경우에는 두 가지 방법이 있습니다. Opacity와 Alpha값을 사용해서 바꿀 수 있는데요. 사람들은 흔히 "오빠~서티" 혹은 "알파값" 을 이용하여 투명도를 조절하기 때문에 혼동될 수가 있지만, 블렌드에서는 약간의 차이가 있습니다.

블렌드를 살펴보면 다음과 같은 부분이 있습니다.


RGBA는 Red, Green, Blue, Alpha를 나타냅니다. 총 32비트(4바이트)로 구성되어 있으며 16진수를 이용하여 예) #FFE07810 이렇게 표현합니다. 그리고 이 8자리수의 구성은 다음과 같습니다.


16진수의 제일 앞의 두 자리는 Alpha 값을 나타냅니다. Alpha 값에서 수치를 바꾸어주면 16진수의 제일 앞 두자리가 바뀌게 됩니다. 그렇다고 16진수의 앞 두자리에 수를 직접 입력한다고 해서 Alpha의 % 값과 동일하게 바뀌는 것은 아닙니다. :) 이렇게 Alpha 값을 조절하여 객체의 색을 투명하게 만들어 줄 수 있습니다.

그렇다면 다른 한가지는 Opacity를 이용한 방법입니다.


Appearance 패널에 보면 Opacity 항목이 있습니다. 이 항목에서도 %를 조절하여 객체를 투명하게 만들어 줄 수 있습니다.

두가지 방법 다 객체를 투명하게 처리할 수 있어요. 하지만, Alpha는 Fill과 Stroke에 들어가는 고유의 색상에 개별적으로 영향을 미치기 때문에 SolidBrush나 GradientBrush의 포인트마다 다르게 투명도를 줄 수 있습니다. 이에 반해 Opacity는 객체 전체에 투명도를 조절하기 때문에 Fill과 Stroke를 분리하여 투명도를 줄 수 없습니다.

다음 그림을 통해서 차이를 알아봅시다.



앞의 사각형의 Fill 부분에 Alpha 값을 50%로 해주었을 때에는 Stroke 부분이 전혀 영향을 받지 않은것 을 볼 수 있습니다. 그렇지만 두번째 사각형에 Opacity를 50%로 주니 Fill과 Stroke가 분리되지 않고 둘 다 영향을 받은것 을 확인할 수 있습니다.

이제 아시겠죠? ^_^ 헤헤헤~~~ 그럼 다음 시간에는 다른 팁으로 찾아오겠습니다!!
Posted by 짱묜
TAG Alpha, ExpressionBlend, Opacity, 투명도
Trackback 0 Comment 5