본문 바로가기

Programming44

Hello Phone 프로젝트 마무리. 이번 시간에는 지난 시간에 이어 키 프레임들 간의 보정을 변경해 애니메이션을 부드럽게 만들고, 전체 프로젝트를 최종완성해서 실행해 볼것이다. 1. 타임라인에서 회색 원 아이콘 내부를 클릭해 첫 번째 키 프레임을 선택 한다. 프레임을 선택할 때, 디자이너 뷰가 업데이트 되어 UI 요소의 상태를 보여주는데, 이 경우는 배너 텍스트가 거울에 비친것 처럼 표시된다. 이제, [Properties] 창에서, [Easing] 범주 아래 [EasingFunction]을 선택하고, 드롭 다운 목록을 확장해 가능한 기능 목록을 표시한 뒤, [Cubic Out] 기능을 선택한다. 이 특별한 감속/가속 기능은 전환시에 키 프레임에 가까워짐에 따라 감/가속율을 줄인다. [그림 69] 감속/가속 기능을 적용해 키 프레임간에 상호.. 2011. 1. 31.
Hello Phone 예제의 배너 텍스트용 애니메이션 생성하기 애니메이션은 부드러운 시각적 전환의 시작과 끝 위치를 정의하는 키 프레임을 기반으로 한다. 익스프레션 블렌드에서 애니메이션을 만들려면, 스토리 보드를 만들고, 그 스토리보드에서 타임라인에 키 프레임을 설정해 속성 변화를 표시한다. 예를 들면 0초 표시에 키 프레임을 설정해 아트보드의 왼편에서 사각형의 위치를 기록하고나서, 1초 표시에서 키 프레임을 설정해 아트 보드의 오른편에서 동일한 사각형의 위치를 기록한다. 결과로 나타나는 애니메이션은 초당 사각형의 X와 Y의 속성이 바뀌는 변환에 기반한다. 애니메이션 스토리보드를 실행할 때, 익스프레션 블렌드는 지정된 기간에 걸친 속성 변화에 중간값을 채우고 애플리케이션에 그 결과를 표시한다. 이런 방법으로 아트보드에서 객체가 속하는 모든 속성, 심지어 비 시각적 .. 2011. 1. 27.
커스텀 컨트롤에 시각적 상태 추가하기 지난 시간에 이어 이번에는 컨트롤 템플릿을 업데이트 해서 버튼이 포커스를 가질 때 아웃라인을 보여줄 수 있고 페이지에서 버튼이 눌러졌을 때 그 위치를 옮길 수 있는 다른 시각적 상태를 추가할 것이다. 1. [Objects and Timeline] 패널에서, [Border] 컨트롤을 선택한다. 2. 이제 [States] 패널로 전환해 해당 버튼 컨트롤에 대해 사용할 수 있는 시각적 상태를 검토해보자. [그림 57] 상태 패널은 선택된 Base를 보여준다 [States] 패널은 해당 컨트롤의 모든 시각적 상태를 표시한다. [Base] 상태는 모든 상태에 공통으로 존재하는 요소를 정의한다.이 상태에서 해당 컨트롤의 기본 모양을 정의하는 템플릿을 조정할 수 있다. 그 다음 다른 상태의 각각에 대해, 해당 상태의.. 2011. 1. 12.
익스프레션 블렌드에서 Hello Windows Phone 커스텀 버튼 만들기 대개 실버라이트 컨트롤은 템플릿을 사용해 시각적 모양과 로직을 분리한다. ControlTemplate은 컨트롤의 시각적 구조와 동작을 지정한다. 기본 ControlTemplate 설정을 수정해 컨트롤의 모양을 조정할 수 있다. 이것을 사용하면 컨트롤의 기능을 변경하지 않고도 모양을 변경할 수 있다. 예를 들면 애플리케이션에서 버튼을 기본 사각형 모양이 아니라 모서리를 둥글게 처리할 수 있지만, 이 버튼은 여전히 Click 이벤트를 일으킨다. 이번 시간에는 익스프레션 블렌드에서 이전에 작업한 비주얼 스튜디오 프로젝트를 열어서 버튼의 ControlTemplate을 대체해 룩앤필을 수정한다. XAML에서 ControlTemplate을 생성하기 때문에 코드를 작성할 필요 없이 컨트롤의 모양을 변경할 수 있다. .. 2011. 1. 10.

티스토리툴바