안녕하세요? 세번째 시간입니다.
저번 시간에 전체적인 화면 구성을 그려보았습니다. 이번 시간에는 다음 강좌를 진행하겠습니다.
2. 블렌드에서 윈도우 폰 레이아웃 잡기
3. 화면 디자인 및 컨트롤 디자인 하기
4. (필요 시) 애니메이션 제작하기
5. 윈도우 폰의 시작 타일 및 페이지 전환 etc...
이번에는 컨텐트 영역에 들어가는 버튼들을 윈도우 폰에서 제공하는 디자인 외에 디자이너가 직접 나만의 버튼을 만들어 보겠습니다.
저번 시간에 이어 프로젝트를 진행하겠습니다.
1. 먼저 컨텐츠 전체에 적용 될 버튼을 디자인 해 보겠습니다.
블렌드에서 만들 수 있는 정도의 버튼 디자인이라면 포토샵에서 이미지를 가져오는 것 보다 직접 그려주는 것이 해상도나 활용면에 있어서 좋습니다. 그래서 저는 블렌드에서 버튼 디자인을 해보도록 하겠습니다. 밑의 이미지가 오늘 우리가 해야할 버튼 디자인입니다.
2. 툴에서 사각형을 선택하고 옆에 빈 공간에 그리도록 합니다. 속성에서 RadiusX와 Y값을 5 정도 설정합니다.
그리고 Fill을 그라데이션으로 지정합니다. 그라데이션의 포인트를 움직여 그라데이션의 위치를 옮겨주도록 합니다.
3. 글씨와 형태는 나중에 넣기로 하고 사각형을 선택 > 도구(Tools) > 컨트롤로 만들기 (Make a Control)를 선택합니다.
선택하면 팝업이 하나 뜨는데, 형식 중에서 버튼을 선택 후, 이름을 임의로 [Btn1] 작성하고 확인 버튼을 클릭합니다.
4. 컨트롤을 제작하자 텍스트가 자동으로 생성됩니다.
그리고 상태(States) 패널에는 버튼에 필요한 각 상태를 설정할 수 있도록 항목이 나열되어 있습니다.
5 일단 버튼에서 빠져나오기 위해 오브젝트 및 타임라인에 화살표를 선택하여 나옵니다. 방금 만든 버튼을 화면에서 삭제하도록 합니다.
6. 그리드에 나열되어 있는 버튼들을 하나씩 클릭하여 다음과 같이 설정합니다.
버튼 선택 후 우 클릭 > 템플릿 편집 > 리소스 >Btn1 을 선택하면 방금 지운 버튼이 리소스로 남아서 적용된 것을 볼 수 있습니다.
7. 버튼 적용을 다 한 모습은 다음과 같습니다.
각 버튼 간격을 주기 위해 버튼 9개를 모두 선택 후 마진 값을 7씩 주도록 합니다.
8. 터치했을 때 버튼 효과를 주기 위해 버튼 우 클릭 > Edit Template > Edit Current를 선택하여 버튼 템플릿을 수정하기 위해 컨트롤 안으로 들어갑니다.
9. State(상태)패널에서 버튼을 위한 효과들이 있습니다. 모바일에서는 Mouseover를 할 수 없고 단지 터치만 하기때문에
MouseOver효과는 주지 말고 Pressed 효과만 주도록 하겠습니다. Pressed 상태를 선택합니다.
10. Pressed 상태를 클릭하면 녹화상태가 됩니다. 오브젝트 및 타임라인 패널에서 버튼을 구성하고 있는 흰 사각형 레이어를 선택 후
속성(Properties) 패널에서 Fill 값을 다음과 같이 바꾸어줍니다.
이렇게 해서 간단하게 버튼에 효과를 주었습니다. 버튼 밖으로 빠져 나갑니다.
버튼의 효과까지 아주 간단한 단계의 효과만 주었습니다.
길어서 다음 강좌에서 이어하겠습니다~
