티스토리 툴바


 버튼 을 하나 만들어 보겠습니다. 저는 정말 쉽지 않았습니다. ㅜ,ㅜ
새로운 프로젝트를 만듭니다. ^^

사용자 삽입 이미지

다음, 버튼을 만들어야 합니다. 기본적으로 블렌드에서 제공하는 버튼이 있습니다.

사용자 삽입 이미지
기본적으로다가이렇게 생긴것인데
Normal State (평소)      MouseOver State (마우스오버)
Pressed State (다운)    Disabled State (버튼의 활성화여부)

이러한 Storyboard 의 key 값이 들어가 있습니다.
(Storyboard는 이벤트나 모션을 지정한 것을 말하고요, key값은 MouseOver...같은 Storyboard를 가진것의 이름입니다.)

자, 그럼 Expression Design 이나 Illustrator에서 버튼 모양을 하나 만듭니다.
사용자 삽입 이미지

저는 위와같은 저질버튼 하나를 만들었습니다. 이것을 복사를 하고 Blend로 가져옵니다. 자, 그런데 한가지 문제가 있습니다. 저 버튼의 역할은 스타일로 정의 되어 쓰여질 막중한 임무가 있습니다. 후에 개발단에서 쉽게 사용하기 위해선 Grid로 묶어야 하는데요, 버튼은 보시는 바와 같이 백터 기반의 이미지로 초록색원, 검정색화살표, 빛, 이렇게  나눠져 있는데 각자의 width값과 margin값 등을 가지고 있습니다. 생각하지 않고 걍 수정에 들어가다간 ....
사용자 삽입 이미지
이런 거지같은 경우가 생긴답니다.  그렇다고 개발자분들이 수정할때 하나하나 다 조절할 순 없죠, 따라서  각 오브젝트들의 간격과 위치등을 %로 나눠야 합니다.
일단, Expression Design에서 가져온 저질버튼을 Grid로 한번 그룹핑 해줍니다.
 
사용자 삽입 이미지

1.Ctrl + G 를 이용하여 Grid로 묶고,

2.이하 Ellipse와 Path들을 선택하고

3.오른쪽버튼>Auto Size>Both선택
   각자의 위치값과 사이즈를 초기화
   해줍니다.

4.그 후 Layout을 이용하여 나누고
   도형을 맟춥니다.
   (하늘색라인에 마우스를 갖다대면 생겨납니다.)









사용자 삽입 이미지
자 그럼 사이즈를 줄여도 화살표가 갑자기 없어진다거나 하지 않습니다.
이제야 비로소 스타일로 등록할 준비를 하였군요, (으아, 어렵당 ㅜ,ㅜ)
오늘은 여기까정 하겠습니다. ^^

다음엔 Storyboard를 이용하여, 마우스 이벤트를 만들겁니다.
크기와 색상들이 자연스럽게 변하게 하는 작업등을 할 것입니다.
후에 Visual Studio를 이용하여 버튼스타일 등록을 합니다. ㅋㅋ "초큼 복잡합니까~?"

Posted by 피터씨
이전버튼 1 ... 32 33 34 35 36 37 38 이전버튼

블로그 이미지
디자이너 최형준입니다.
피터씨

공지사항

Yesterday9
Today2
Total12,225

달력

 « |  » 2012.05
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

최근에 받은 트랙백

글 보관함