Deep Zoom 강좌 : 1. Deep Zoom Composer를 이용하여 Image gallery 만들기
Silverlight & Expression 2008/03/11 15:24Deep Zoom 기능은 실버라이트 2를 지원하는 기능입니다.
이 기능을 사용하여 아주 환상적인 UI를 간단히 만들수 있습니다.
참고 사이트
- 공도소프트 : http://gongdo.tistory.com/251
- UX Factory : http://uxfactory.com/270
Tools 다운로드
- Visual Studio 2008
- Silverlight 2 Beta1 Runtime
- Silverlight Tools Beta 1 for Visual Studio 2008
- Deep Zoom Composer Preview
Deep Zoom 강좌 : 1. Deep Zoom Composer를 이용하여 Image gallery 만들기
1. 프로젝트 생성
- Deep Zoom Composer를 다운로드하여 설치 후 실행을 합니다.
위 이미지와 같이 [Project], [Help] 탭이 존재합니다. [Project] 탭에서 [New Project...]를 선택합니다.
Deep Zoom Project의 이름과 경로를 지정하고 [OK] 버튼을 눌러 프로젝트를 생성합니다.
2. 이미지 불러오기
- 새 프로젝트가 생성되면 프로그램의 레이아웃은 [Import], [Compose], [Export]로 나누어져 있습니다.
[Import] 탭의 화면구성은 오른쪽으로 이미지 목록이 있으며, 왼쪽으로는 미리보기 창이 있습니다.
[Add Image...] 버튼을 눌러 갤러리로 사용할 이미지를 선택합니다. 사용이 가능한 이미지 확장자는 png, jpg, bmp, tiff 입니다. gif는 아쉽게도 지원지 되지 않는거 같습니다.
(이미지는 기왕 보기 좋게 국내 여자 연예인들로.. ㅎㅎ^^)
3. 이미지 구성하기
- 화면 상단의 [Compose] 탭을 눌러 이미지 구성화면으로 이동을 합니다.
왼쪽 이미지 목록에서 마우스로 이미지를 끌어와 오른쪽 작업영역에 포함을 시킵니다. 그런후 선택된 이미지의 사이즈 조절 및 위치를 조절하여 원하는 이미지 구성을 하면 됩니다.
4. 이미지 갤러리 내보내기
- 화면 상단의 [Export] 탭을 눌러 이미지 갤러리 내보내기 화면으로 이동을 합니다.
왼쪽에는 이전에 구성한대로 미리보기가 나옵니다. 오른쪽에 보면 이미지 갤러리의 이름과 저장할 경로를 설정할 수 있습니다.
원하는 이미지 갤러리 이름과 저장할 위치를 선택한 후 [Export] 버튼을 누르면 됩니다.
5. 생성된 이미지 갤러리 확인
본인이 지정한 경로로 이동해보면 위 이미지와 같이 파일 및 폴더가 구성이 되어 있을것입니다.
이것으로 Deep Zoom Composer를 이용하여 Image gallery를 만들어 보았습니다.
다음은 비주얼스튜디오 2008을 이용하여 실버라이트 프로젝트를 생성하려 Deep Zoom 기능의 프로젝트를 만들어 보도록 하겠습니다. (바로가기)
작성자 : 상현넘™ [http://www.shblitz.net]
댓글을 달아 주세요
좋은 강좌 감사합니다. :)
잘보고 갑니다 ^_^
초보인 저에게 많은 도움이 되었습니다. 감사합니다~