대화형 기능이 있는 Silverlight 1.0 사이트 만들기

Microsoft Silverlight 1.0 응용 프로그램의 대화형 기능은 XAML 문서의 JavaScript 코드 숨김 파일에서 이벤트 처리기를 사용하여 만들어집니다. 작업자는 XAML 문서에서 자신의 사용자 인터페이스를 직접 디자인합니다. 다음 절차는 마우스 클릭에 대한 응답으로 응용 프로그램에서 애니메이션 스토리보드를 재생하게 만드는 방법을 보여 줍니다.

대화형 기능이 있는 Silverlight 1 사이트 만들기

1. Microsoft Expression Blend의 파일 메뉴에서 새 프로젝트를 클릭합니다.

   새 프로젝트 대화 상자가 나타납니다.

   

2. 프로젝트 형식 선택 아래에서 Silverlight 1.0 사이트를 클릭합니다. 프로젝트 이름과 위치의 기본값이 표시된 다른 필드는 모두 그대로 두고 확인을 클릭합니다.

   새 Silverlight 프로젝트가 만들어지고 편집할 수 있도록 시작 페이지(Page.xaml)가 열립니다.

3. 도구 상자에서 펜  도구를 선택합니다. 클릭하여 점을 만들고 마우스로 끌어 곡선을 만드는 방법으로 곡선으로 이루어진 도형을 그립니다. 첫 번째 점을 클릭하여 도형을 닫습니다.

   

   펜 및 직접 선택 사용에서 마우스로 패스를 수정하는 방법 목록을 참조하십시오.

4. 개체 및 타임라인에서 새로 만든 패스 개체를 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 클릭한 다음 MyPath라는 이름을 입력합니다.

   

   코드 숨김 파일에서 참조되는 개체에는 이름이 필요합니다. 이 개체는 코드에서 Click 이벤트 처리기를 연결하기 위해 참조됩니다.

5. 개체 및 타임라인에서 새로 만들기  단추를 클릭합니다. 스토리보드 만들기 대화 상자가 나타납니다. Storyboard1로 지정되어 있는 이름 필드와 선택되어 있는 리소스로 만들기 확인란을 그대로 두고 확인을 클릭합니다.

   

   새 스토리보드가 만들어지고 타임라인 기록이 설정됩니다.

6. 타임라인 플레이헤드 가 0초 표시에 있는 상태에서 키 프레임 기록 단추를 클릭하여 MyPath 개체의 현재 위치를 기록합니다.

   

7. 타임라인 플레이헤드 를 1초 표시로 이동한 다음 선택 도구를 사용하여 MyPath 개체를 이동합니다. 1초 표시에 키 프레임이 설정되어 MyPath 개체의 새 위치가 기록됩니다.

   

8. 프로젝트 패널에서 Page.xaml.js 파일을 두 번 클릭하여 편집할 수 있도록 엽니다.

9. // 문자를 제거하여 다음 코드 줄의 주석 처리를 제거합니다.

                   // this.control.content.findName("Storyboard1").Begin();
   

   

   Expression Blend 2에서 루트 요소에 대한 마우스 단추 클릭에 이벤트 처리기를 연결하는 방법을 보여 주는 초기 JavaScript 코드를 생성합니다. 이 이벤트 처리기는 Storyboard1에 대해 Begin 메서드를 호출하기 때문에 스토리보드를 만들 때 이름 필드를 변경하지 않은 것입니다. Silverlight 1.0 스크립팅에 대한 자세한 내용은 Silverlight 스크립팅 및 마우스 이벤트를 참조하십시오.

10. F5 키를 누르고 브라우저 창을 클릭하여 애니메이션 스토리보드를 트리거함으로써 Silverlight 1.0 사이트를 테스트합니다.

참조

개념

Silverlight 응용 프로그램에서 스토리보드를 제어하는 단추 만들기

스토리보드 만들기, 수정 또는 삭제

해당 주기가 끝나면 스토리보드가 반복 또는 반전하도록 수정