ZZANGMYON BLOG♡

짜잔..블로그가 옷을 갈아입었어요..!!

짱묜 — Wed, 20 Aug 2008 18:02:06 +0900

블로그 개설한지 1년이 다 되어가는데..
드디어 짱묜 블로그가 옷을 갈아입었어요..ㅋㅋ
물론..제가 디자인 안했습니다 -_-티스토리 스킨에 CSS만 살짝쿵..고쳤죠..
희한하게 제꺼는 잘 안만지게 되더라구요...
최근 개인명함 하나 파는것도 아주 -_-일이었어요;; ㅋㅋ 귀차니즘..흑흑..
아, 한번 보여드릴까요? 허접하지만..-_-

뭐 쫌 그래요...명함 디자이너는 아니라서..아쉬운데로..-_-디자인비를 굳히고자 ㅋㅋ

그래도 블로그가 좀 산뜻해진것 같지 않나요 하하하하!!!
파스텔톤이 썩 맘에 드네요..+_+

오늘은 훈스닷넷 시삽모임이 있는 수요일이군요..
그리고 내일이랑 모레는..아기다리고기다리던!! 휴가입니다..흐흣..
간만에 인천에 있는 집에가서 뒤굴뒤굴(아 이러면 안되는데;;)할 생각이에요.

요즘들어 아침저녁으로 서늘한 것이..무더운 여름도 다 지나갔나봅니다.
어서어서 크리스마스가 왔으면 좋겠어요..ㅋㄷ
뜬금없이 왠 크리스마스냐 하겠지만..제가 크리스마스만 되면
상태가 메롱해지면서 미쳐갑니다..그냥 들떠서..--ㅋㅋ
애인이 있건 없건 말이죠..ㅎㅎ

아무튼~ 저의 공간에 오시는 모든 분들 오늘도 행복한 하루 되세요..^^

[Expression Blend 2.5 활용강좌] 텍스트에 그라데이션 흐르기 2탄

짱묜 — Tue, 19 Aug 2008 16:45:20 +0900

11. 다시 Brush Transform 툴을 선택하여 그라데이션의 중심을 뒤로 이동시킵니다.

12. 이제는 애니메이션을 만들어 줄 차례에요. 먼저 스토리보드를 생성하도록 하겠습니다.

13. 스토리보드의 키프레임을 0초, 1초, 2초에 삽입해 주도록 합니다.

14. 1초가 되는 키프레임에서 그라데이션의 중심을 이동시킵니다.

15. CS 파일에서 다음과 같이 코드를 추가해줍니다.

다됐습니다!! 실행하면 다음과 같이 실행됩니다 ^_^ 여러분의 감각으로 ~ 여러가지 색을 적용해보세요.

TextAnimation1.zip

소스 첨부할께요.

[Expression Blend 2.5 활용강좌] 텍스트에 그라데이션 흐르기 1탄

짱묜 — Tue, 19 Aug 2008 16:36:17 +0900

안녕하세요. 짱묜입니다!! 드디어 부활했어요~! ㅎㅎ

오늘은 텍스트에 그라데이션이 흐르도록 해보겠습니다.

1. 먼저 Expression Design 에서 텍스트를 한 줄 써주고 Object 메뉴의 Convert Object to Path 를
사용하여 텍스트를 패스로 변환시킵니다.
2. 그리고, XAML 로 Export 한 후 Blend에서 불러들입니다. (이 부분은 전에도 자주 다루어서 넘어갈께요)
위의 작업까지 마치면 블렌드의 비주얼 트리에 다음과 같이 패스가 나타나게 됩니다.

3. 이 텍스트를 이루는 패스들은 낱개로 쓰일 일이 없기 때문에 패스를 묶어서 하나로 합쳐주도록 하겠습니다.
패스를 모두 선택하여 아래의 그림처럼 합쳐줍니다.

4. 위의 작업을 마치면 다음과 같이 패스가 하나로 합쳐져 있는것을 확인할 수 있습니다.

5. 그리고 텍스트 패스가 들어있는 캔버스 안에 사각형을 하나 그려줍니다.

6. 이 사각형의 Stroke를 없애고 Fill을 그라데이션으로 채워줍니다.

7. Brush Transform 툴을 선택하면 그라데이션의 방향을 조절할 수 있어요.

8. 화살표를 이용하여 그라데이션의 방향을 바꾸고 드래그하여 길이를 늘려줍니다. 그런 다음, 포인트를 생성
하여 여러가지 색을 넣어줍니다.

9. 색을 다 넣었다면, 사각형과 텍스트 패스를 선택하여 Clipping 시켜줍니다.

10. 그러면 다음처럼 텍스트와 그라데이션만 보여지게 됩니다.

자, 여기까지 잘 따라오셨나요? ^^ 다음장으로 이어서 하도록 하겠습니다.

참으로 오랜만이군요..-_-;

짱묜 — Thu, 7 Aug 2008 23:15:28 +0900

ㅠㅠ 마지막 포스팅을 한지가 벌써 한달이라니;;;;

으~ 너무 놀았나 ㅋㅋ;;

뭐, 이일 저일 많았던것 같긴 한데 정확히 기억은 잘.......-.-;;

헬스를 끊었는데..........개발자(정확히 개발자는 아니지만..)도

헬스를 꾸준히 다닐 수 있다는 것을 기필코 보여주리라 다짐했는데..

3일 나갔네요 ㅡㅡ;; 아.. 아직 보름정도 남았으니;; 열심히 가야겠어요..

포스팅도 슬슬 시작하려고 합니다~ ^_^

게을러졌엉 ㅠㅠ 그래서 요즘 살이 급 피둥피둥...-.-;;

아직 제대로 된 휴가를 못가서리...쓰읍..!!

반성하고 조만간 포스팅 시작하겠습니다!! - -;;

이상.............블로그 주인이 살아있음을 알려드리는 바입니다..........ㄷㄷ.....

[Expression Blend 2.5 활용강좌] 컨트롤 템플릿 안의 이미지 소스 변경하기

짱묜 — Wed, 9 Jul 2008 01:04:50 +0900

뜨하~~ 참으로 오랜만인것 같은 기분이!! ㅋㅋ
1차 프로젝트가 어느정도 마무리 되면서..긴장이 풀어져서..며칠동안 늘어졌네요..-ㅅ-;;
그래도..좀 쉬는 동안..간만에 친구도 만나고..훈쓰 식구들도 만나공~ 태오닷넷 쑈미나도 다녀오고..
ㅡㅡㅋ 여기저기 잘돌아다녔네요..히히
오늘 쓰기로 한 강좌 예제도..ㅡ.ㅡ 만들어둔지는 좀 됐는데..이제서야 쓰는군여..

오늘은 컨트롤 템플릿 안에 들어있는 이미지 소스를 변경해보도록 하겠습니다.
단, 이미지 소스의 경로를 직접 넣는 것이 아니라 C#코드에서도 변경이 가능하도록 만들꺼에요.

먼저 위와 같이 캔버스를 하나 만들어주고 그 안에 버튼 컨트롤을 넣었습니다.
이미지 변경을 보여주기 위해서 토글버튼을 썼어요.

그런 다음에는 버튼의 스타일을 만들어 주어야합니다. 오늘은 이미지를 넣은 버튼을 써야겠죠?
저는 ㅡㅡ; 작업하면서 눈이 즐겁도록 제가 좋아하는 공유 사진을 넣었습니다 하하핫!!

버튼 컨트롤 템플릿을 생성한 후(이전 강좌 참고) Images 폴더 안의 이미지를 불러 넣고,
하트모양 패스를 그려준 후 Cliping 하였습니다. Cliping에 대해서는 다음에 다루도록 하고 일단 진행합니다.
그리하여 아래와 같이 하트모양의 이미지가 버튼이 되었습니다.

그리고 버튼의 상태에 따라 효과를 주었습니다. 역시나..귀차니즘의 압박으로..오버효과만 -_-;;

이러한 작업들을 마친 XAML 코드는 다음과 같습니다.

여기서 중요한 것은 빨간 네모를 친 부분입니다. 버튼 컨트롤 템플릿의 디자인을 이루고 있는 이미지 소스를
직접 경로를 입력해 주지 않고 TemplateBinding을 사용했습니다.
Tag 속성을 이용하여 이미지개체를 가져옵니다. <ToggleButton.Tag></ToggleButton.Tag> 사이에 들어간
이미지 경로가 버튼 컨트롤 템플릿 안의 이미지 소스로 들어가게 되는것이죠..
그리고 템플릿 안이 아닌 화면 XAML에서 제어가 가능하다는 것은 C# 코드로도 제어할 수 있다는 소리입니다.
토글버튼을 이용하여 이미지변경을 해보도록 하겠습니다. 이부분은 C#으로 만들어야 합니다.

버튼을 클릭할때마다 이미지가 번갈아가면서 나오게 됩니다. 물론 오버 상태가 적용되어있구요. ^^
소스를 첨부할테니 받아서 실행해보시기 바랍니다.

ButtonImageBinding.zip

[Expression Blend 2.5 활용강좌] 비트맵 이미지를 활용한 버튼 만들기 2

짱묜 — Thu, 26 Jun 2008 22:11:11 +0900

버튼 템플릿 안에 이미지를 두개 넣었다면, 이제 남은일은 버튼 상태에 따른 스토리보드를 만드는 일입니다.
Base 즉 평소상태의 흑백톤 버튼 이미지의 Opacity 값을 100으로 하고 오버상태의 파란 버튼이미지
Opacity 값을 0으로 해줍니다.

Normal 상태는 따로 작업을 하지 않아도 되니, Over 일 경우의 스토리보드를 만들어 주겠습니다.

위와같이 타임라인의 0초 지점에서 흑백 버튼 이미지의 Opacity 값을 0으로 오버될 파란 버튼 이미지의
Opacity 값을 100으로 해줍니다.

자 F5 버튼을 눌러서 실행해봅니다. 그러면 오버했을 경우 파랗게 변하는 버튼을 확인할 수 있습니다.

코드를 따로 올려볼께요.

이렇게 비트맵 이미지를 활용한 버튼 템플릿 만들기를 해보았습니다.
좀 더 자연스러운 애니메이션 처리를 위해서는 여러장의 이미지가 필요할 것 같습니다.
샘플소스를 첨부할테니 필요하신 분은 받아가세요.

BitmapButton.zip

궁금하신 부분은 글을 남겨주세요.

[Expression Blend 2.5 활용강좌] 비트맵 이미지를 활용한 버튼 만들기 1

짱묜 — Thu, 26 Jun 2008 22:06:26 +0900

안녕하세요. 오랜만에 글을 쓰네요. ^^; 폭풍전야같던 프로젝트 마감이 거의 끝나갑니다..
한달을 어떻게 보냈는지도 모르겠어요..ㅠ_ㅠㅋㅋ 3주동안 3년은 늙은것 같습니다;; 하핫;;

오늘은 벡터가 아닌 비트맵 이미지를 활용한 버튼 만들기를 해볼께요.
물론 벡터타입 버튼과 만드는 방법은 비슷합니다. 그러나 될 수 있는 한 벡터방식이 좋다고 봅니다.
일단, 확대/축소시에 깨짐현상이 없습니다. 그리고 유지보수가 편리하기 때문입니다.
비트맵 타입의 버튼을 만든다면, 이미지나 텍스트 수정시에 재작업을 해야하니까요.
간단하게 텍스트를 고치는 정도라면, 디자이너가 없을경우에 개발자가 수정이 가능하지만,
비트맵방식은 개발자가 포토샵을 켜서 고치기는 좀 힘들겠죠? 원본도 있어야하구요. ^^
물론 유지보수가 필요하지 않고, 비트맵 효과를 내야하는 경우라면 이미지 처리를 해야겠죠.

그럼 본격적으로 시작해보겠습니다.
먼저 바탕이 투명한 PNG 파일(비트맵방식)로 만든 버튼 이미지 2개를 만듭니다.

저는 다음과 같이 Normal 상태와 Over 되었을때 상태를 준비했습니다.

디자인이 다 되었다면 블렌드에서 프로젝트를 열도록 합니다.
그리고 프로젝트를 선택하여 Add Existing Item 메뉴로 제작한 이미지를 불러옵니다.
참고로 저는 Images라는 폴더를 프로젝트 내에 생성하여 그 안으로 불러왔습니다.

이렇게 이미지가 추가되었다면 버튼을 생성하도록 합니다.

참고로 이번에 블렌드에서 코드에 직접 추가하지 않고, 툴에서 템플릿을 생성할 수 있도록 업데이트 되었습니다.
자세한 기능 설명은 차후에 하도록 하고 버튼 만들기를 일단 진행하도록 할께요.

페이지에 버튼 컨트롤을 하나 얹어줍니다. 그리고 비주얼 트리에서 버튼 컨트롤을 선택한 후
마우스 오른쪽을 클릭하여 템플릿을 생성합니다. 아래의 그림처럼요.

그리고 스타일 이름을 지어줍니다. 리소스가 생성될 곳은 현재 문서로 합니다.

그럼 템플릿이 생성됩니다. 왼쪽은 기본으로 생성되는 템플릿이고 오른쪽은 제가 사용할 부분만 남겨놓은
템플릿입니다. 모든 기능을 다 사용하지 않기 때문에, 불필요한 부분은 지워주는것이 좋겠죠?
아래의 비주얼 트리 또한 다릅니다. 블렌드에서 기본적으로 생성되는 버튼 컨트롤의 디자인을 다 지우고
이미지 두개를 넣어주었습니다. Grid 안에 이미지를 넣는것은 프로젝트 파일에서 이미지를 선택한 후
더블 클릭 하는것만으로도 가능합니다.

다음장에 이어서 하도록 할께요.

Silverlight 2 Beta2 Released & Expression Blend 2.5 June Preview

짱묜 — Wed, 18 Jun 2008 23:16:12 +0900

Silverlight Beta 2 (Click) 가 릴리즈 되었습니다.

더불어Expression Blend 2.5 June Preview(Click)

스캇아자뛰 블로그에 자세히 나와있네요. 디자이너가 작업하기 더욱 좋아진것 같습니다.
ScottGu's Blog (Click)

시간나면 바로 블렌드의 새로운 기능에 대해서 다루도록 하겠습니다. ^^

복권(?)같은 효과내기

짱묜 — Tue, 17 Jun 2008 01:53:01 +0900

오늘은 묜이가..디자인이 아닌, C#에 도전을 하였습니다.
하하하 C#이라고 하기엔 너무 부끄러운.......-.-.....ㅋㅋ
마우스를 슥슥 긁으시면~ 사진이 나타납니다. ^^
사진은 훈스닷넷 UX 캠프때 단체사진입니당 ㅋㄷㅋㄷ~

[Expression Blend 2.5 기초강좌] Layout Panel < StackPanel >

짱묜 — Sat, 14 Jun 2008 22:03:16 +0900

오늘은 Stack 패널에 대해서 알아볼께요.

Stack패널은 자신만의 첨부 프로퍼티를 가지지 않고 자식 엘리먼트가 추가되는 순서대로 누적됩니다.
오직 Orientation 프로퍼티만을 가지고 있는데요. Horizontal 과 Vertical로 설정할 수 있고
기본값은 Vertical입니다. 예제에서 자주 볼 수 있는 편리한 패널이에요.

그림을 보면 사각형이 5개 나열되어 있습니다. 코드를 보면 아주 간단합니다.
Stack패널 안의 오브젝트들에는 어떠한 프로퍼티도 들어있지 않지만 자식개체가 생성되는 순서대로
자동 배치됩니다.

마진값으로 각 개체간에 공백을 줄 수 있습니다. 그러나 Grid나 Canvas와 같은 패널과 달리
마진값을 주게 되면 다음 객체들의 위치가 밀리게 됩니다. 즉 Grid나 Canvas에 들어있는 오브젝트는
다른 오브젝트의 마진값에 영향을 받지 않지만, Stack패널에 들어있는 오브젝트는 다른오브젝트의
마진값에 영향을 받게되는 것입니다.

^^ 어제 회식에서 무리를 좀 하는 바람에..오늘 종일 시체놀이 하다가 하루가 다 갔네요 ㅠ_ㅠ..ㅋㅋ
좋은 주말 되세요.