본문 바로가기

silverlight

New Deepzoom Composer in Silverlight 3

 안녕하세요.

 지난 10일 Silverlight 3 RTW (정식버전)이 런칭 되면서, Deepzoom Composer 도 함께 새 버전이 나왔는데요. 새로운 Deepzoom Composer 를 열심히 분석 해 본 결과, 놀라운 기능(Sildershow, Navigation, Hyperlink)이 추가 된 것 처럼 보이지만, 실상 Export 해 보면 지난 버전과 크게 차이나는 게 없고, scene.xml 이란 파일이 생성되는데 도통 어떻게 써먹는 것인지도 모르겠더라고요. 그래서 미 완성된 버전이라 생각하고 차후 버전을 기다려 왔습니다.
 헌데, 지난 22일 차후 버전이 드디어 나왔더군요!! +_+

New Deepzoom 다운로드

 우선, 놀랍고 쉽게 구현 할 수 있는 Sildershow, Menu, Hyperlink 세 가지 기능에 관해 설명 드리겠습니다.
 

 새 버전의 Deepzoom Composer에서 Compose 메뉴를 가보시면, Laysers 좌측에 새로 생긴 Slidershow, Menu, Internal Links, External Links 메뉴가 생겼습니다. 각각은 Slidershow, Menu, Hyperlink 를 디자인 할 수 있도록 지원합니다. :D

Slidershow

 Slidershow 의 경우에는,
Layers 에서 Image를 선택해서 Slidershow에 Drag and Drop으로 추가를 하시는데요, 이 때 순서를 정하시는 대로 Slidershow 를 실행하게 됩니다.

 물론, Slidershow 내에서 추가 된 Image의 순서를 마찬가지로 Drag and Drop으로 변경 하실 수 있습니다.

 나중에 Export 하게 되면, Slidershow가 기능이 추가 됩니다. +_+




















Menu

 Menu 도 Slidershow와 마찬가지로 Layers 에서 메뉴가 될.. (정확히는 메뉴를 Click시 보여지게 될 Image) Image를 Drag and Drop으로 추가 하실 수 있습니다.























 또,  Menu 를 디자인 하기 위해 상단에 7가지 기능을 제공 하는 버튼이 있습니다.
 마우스 우클릭을 통해서, 메뉴 이름을 수정할 수도 있습니다.

 저는 이 기능들을 이용해서 메뉴를 이렇게 수정하였습니다.

Hyperlink
Internal Links
Internal Links 는 MultiScaleImage 내에서 SubImage를 선택했을 경우, 다른 SubImage로 이동할 수 있도록 하는 기능을 디자인 할 수 있게 합니다.

 Layers 에서 Internal link 될 이미지를 선택 하신 후, Drag and Drop을 통해 Internal links 에 추가 하시면, Direct Link 팝업 창이 뜨는데요, 여기서 Link 될 이미지를 선택하시면 됩니다.

Internal link를 디자인 하게 되면, 좌측의 이미지처럼, Hyperlink 이미지와 Hyperlink 이미지를 선택 시, Link 될 이미지가 보이게 됩니다.

우클릭을 통해서 Link를 수정하시거나 삭제하실 수 있습니다.












External Links

External Links 는 MultiScaleImage 내에서 SubImage를 선택했을 경우, 새 브라우저를 띄워 지정된 URL로 이동하거나 하는 기능을 디자인 할 수 있게 합니다.

 Layers 에서 External link 될 이미지를 선택 하신 후, Drag and Drop을 통해 External links 에 추가 하시면, External Links Management 팝업 창이 뜨는데요, 여기서 Name, URL, Description을 입력하시면 됩니다.
Name : External link 명
URL : External link 될 사이트 URL
Description : 입력 시 External Image에서 Tooltip 표시

모든 디자인이 완료 되셨다면, Export 하셔서 결과물을 확인 하실 수 있습니다.
 Export 에서도 몇가지 추가 된 사항이 있는데요, Templates 를 보시면, Deep Zoom Navigation (Default) 가 있습니다. 이것을 선택 하신 후, 하단에 추가된 Preview 버튼을 클릭 하시면 바로 결과물을 확인 하실 수도 있습니다 :D

샘플
  • Favicon of http://steelmic.tistory.com Tank™ 2009.07.30 09:04 신고

    포스팅을 이용한 은근한 자식자랑..멋지다!

  • Favicon of http://www.sudesign.net 위기의아가씨 2009.08.05 16:36

    우왕 애기 귀엽다 +_+ ㅋㅋㅋㅋ

  • Favicon of http://thismoments.tistory.com rachael 2009.08.21 09:44

    오 좋은 참고가 되었습니다. 딥줌을 다시한번 써봐야겠네요

  • 마샬 2009.08.25 03:42

    안녕하세요. 딥줌나온진 꽤됐지만 이번에 처음 다루게되었습니다.

    백약님께서 리뷰하신글을 오늘 읽어보면서 많은것을 배우게되었는데요.

    Sildershow, Navigation, Hyperlink을 적용한다음 딥줌에서 프리뷰하면 모두 잘 나옵니다.


    그리고 비쥬얼에 이를 가져다 붙이고 마우스휠 컨트롤러 까지 적용다하고 디버깅하면


    저부분이 빠져있습니다. 아마도 scene.xml이 저 부분에 대한 정보를 담고있는거같고


    scene.xml을 어디서 어떻게 추가시켜야 하는지 궁금합니다.


    아니면 원래(2시절) 비주얼에서 돌릴때는 원래 안되었었는지(가령 풀스크린->esc)도


    궁금하기만할 따름입니다. 비주얼에서는 안되고 단지 웹에서 서비스할때(맨마지막에 샘플처럼)

    그때 비로소 구현이 되는건지 알고싶습니다^^

    • Favicon of https://mingu.kr Min-gu, Kim 2009.08.27 14:34 신고

      아 저도 프리뷰에서 나온 걸로 포스팅 했는데요~ 딥줌 컴포저를 이용해서 생성 된 코드를 잘 써보지 않아서 VS 코드를 띄워보진 않았습니다. 말씀하신데로, scene.xml 에 숨겨진 비밀이 있을 것 같아요 :)