'템플릿'에 해당되는 글 2건
- 2008/06/26
- 2008/06/26
버튼 템플릿 안에 이미지를 두개 넣었다면, 이제 남은일은 버튼 상태에 따른 스토리보드를 만드는 일입니다.
Base 즉 평소상태의 흑백톤 버튼 이미지의 Opacity 값을 100으로 하고 오버상태의 파란 버튼이미지
Opacity 값을 0으로 해줍니다.
Normal 상태는 따로 작업을 하지 않아도 되니, Over 일 경우의 스토리보드를 만들어 주겠습니다.
위와같이 타임라인의 0초 지점에서 흑백 버튼 이미지의 Opacity 값을 0으로 오버될 파란 버튼 이미지의
Opacity 값을 100으로 해줍니다.
자 F5 버튼을 눌러서 실행해봅니다. 그러면 오버했을 경우 파랗게 변하는 버튼을 확인할 수 있습니다.
코드를 따로 올려볼께요.
이렇게 비트맵 이미지를 활용한 버튼 템플릿 만들기를 해보았습니다.
좀 더 자연스러운 애니메이션 처리를 위해서는 여러장의 이미지가 필요할 것 같습니다.
샘플소스를 첨부할테니 필요하신 분은 받아가세요.
BitmapButton.zip
TRACKBACK 0 AND
COMMENT 0
TRACKBACK http://zzangmyon.tistory.com/trackback/98
안녕하세요. 오랜만에 글을 쓰네요. ^^; 폭풍전야같던 프로젝트 마감이 거의 끝나갑니다..
한달을 어떻게 보냈는지도 모르겠어요..ㅠ_ㅠㅋㅋ 3주동안 3년은 늙은것 같습니다;; 하핫;;
오늘은 벡터가 아닌 비트맵 이미지를 활용한 버튼 만들기를 해볼께요.
물론 벡터타입 버튼과 만드는 방법은 비슷합니다. 그러나 될 수 있는 한 벡터방식이 좋다고 봅니다.
일단, 확대/축소시에 깨짐현상이 없습니다. 그리고 유지보수가 편리하기 때문입니다.
비트맵 타입의 버튼을 만든다면, 이미지나 텍스트 수정시에 재작업을 해야하니까요.
간단하게 텍스트를 고치는 정도라면, 디자이너가 없을경우에 개발자가 수정이 가능하지만,
비트맵방식은 개발자가 포토샵을 켜서 고치기는 좀 힘들겠죠? 원본도 있어야하구요. ^^
물론 유지보수가 필요하지 않고, 비트맵 효과를 내야하는 경우라면 이미지 처리를 해야겠죠.
그럼 본격적으로 시작해보겠습니다.
먼저 바탕이 투명한 PNG 파일(비트맵방식)로 만든 버튼 이미지 2개를 만듭니다.
저는 다음과 같이 Normal 상태와 Over 되었을때 상태를 준비했습니다.
디자인이 다 되었다면 블렌드에서 프로젝트를 열도록 합니다.
그리고 프로젝트를 선택하여 Add Existing Item 메뉴로 제작한 이미지를 불러옵니다.
참고로 저는 Images라는 폴더를 프로젝트 내에 생성하여 그 안으로 불러왔습니다.
이렇게 이미지가 추가되었다면 버튼을 생성하도록 합니다.
참고로 이번에 블렌드에서 코드에 직접 추가하지 않고, 툴에서 템플릿을 생성할 수 있도록 업데이트 되었습니다.
자세한 기능 설명은 차후에 하도록 하고 버튼 만들기를 일단 진행하도록 할께요.
페이지에 버튼 컨트롤을 하나 얹어줍니다. 그리고 비주얼 트리에서 버튼 컨트롤을 선택한 후
마우스 오른쪽을 클릭하여 템플릿을 생성합니다. 아래의 그림처럼요.
그리고 스타일 이름을 지어줍니다. 리소스가 생성될 곳은 현재 문서로 합니다.
그럼 템플릿이 생성됩니다. 왼쪽은 기본으로 생성되는 템플릿이고 오른쪽은 제가 사용할 부분만 남겨놓은
템플릿입니다. 모든 기능을 다 사용하지 않기 때문에, 불필요한 부분은 지워주는것이 좋겠죠?
아래의 비주얼 트리 또한 다릅니다. 블렌드에서 기본적으로 생성되는 버튼 컨트롤의 디자인을 다 지우고
이미지 두개를 넣어주었습니다. Grid 안에 이미지를 넣는것은 프로젝트 파일에서 이미지를 선택한 후
더블 클릭 하는것만으로도 가능합니다.
다음장에 이어서 하도록 할께요.
한달을 어떻게 보냈는지도 모르겠어요..ㅠ_ㅠㅋㅋ 3주동안 3년은 늙은것 같습니다;; 하핫;;
오늘은 벡터가 아닌 비트맵 이미지를 활용한 버튼 만들기를 해볼께요.
물론 벡터타입 버튼과 만드는 방법은 비슷합니다. 그러나 될 수 있는 한 벡터방식이 좋다고 봅니다.
일단, 확대/축소시에 깨짐현상이 없습니다. 그리고 유지보수가 편리하기 때문입니다.
비트맵 타입의 버튼을 만든다면, 이미지나 텍스트 수정시에 재작업을 해야하니까요.
간단하게 텍스트를 고치는 정도라면, 디자이너가 없을경우에 개발자가 수정이 가능하지만,
비트맵방식은 개발자가 포토샵을 켜서 고치기는 좀 힘들겠죠? 원본도 있어야하구요. ^^
물론 유지보수가 필요하지 않고, 비트맵 효과를 내야하는 경우라면 이미지 처리를 해야겠죠.
그럼 본격적으로 시작해보겠습니다.
먼저 바탕이 투명한 PNG 파일(비트맵방식)로 만든 버튼 이미지 2개를 만듭니다.
저는 다음과 같이 Normal 상태와 Over 되었을때 상태를 준비했습니다.
디자인이 다 되었다면 블렌드에서 프로젝트를 열도록 합니다.
그리고 프로젝트를 선택하여 Add Existing Item 메뉴로 제작한 이미지를 불러옵니다.
참고로 저는 Images라는 폴더를 프로젝트 내에 생성하여 그 안으로 불러왔습니다.
이렇게 이미지가 추가되었다면 버튼을 생성하도록 합니다.
참고로 이번에 블렌드에서 코드에 직접 추가하지 않고, 툴에서 템플릿을 생성할 수 있도록 업데이트 되었습니다.
자세한 기능 설명은 차후에 하도록 하고 버튼 만들기를 일단 진행하도록 할께요.
페이지에 버튼 컨트롤을 하나 얹어줍니다. 그리고 비주얼 트리에서 버튼 컨트롤을 선택한 후
마우스 오른쪽을 클릭하여 템플릿을 생성합니다. 아래의 그림처럼요.
그리고 스타일 이름을 지어줍니다. 리소스가 생성될 곳은 현재 문서로 합니다.
그럼 템플릿이 생성됩니다. 왼쪽은 기본으로 생성되는 템플릿이고 오른쪽은 제가 사용할 부분만 남겨놓은
템플릿입니다. 모든 기능을 다 사용하지 않기 때문에, 불필요한 부분은 지워주는것이 좋겠죠?
아래의 비주얼 트리 또한 다릅니다. 블렌드에서 기본적으로 생성되는 버튼 컨트롤의 디자인을 다 지우고
이미지 두개를 넣어주었습니다. Grid 안에 이미지를 넣는것은 프로젝트 파일에서 이미지를 선택한 후
더블 클릭 하는것만으로도 가능합니다.
다음장에 이어서 하도록 할께요.
TRACKBACK 0 AND
COMMENT 4
PREV
