Silverlight2009.07.28 11:39

 안녕하세요.

 지난 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

샘플
Posted by Min-gu, Kim
Silverlight2009.06.30 10:57
 이전 포스팅에서와 마찬가지로 Deepzoom Composer에서 추출 된 이미지 피라미드와 MultiScaleImage 엘리먼트의 화면 비율에 관한 이야기를 이어 보겠습니다.

2009/06/30 - [Image/Deepzoom] - Deepzoom Composer에서 Single Image와 MultiScaleImage 엘리먼트의 화면 비율

 이전 포스팅에서는 Single Image를 다뤘는데요, 이번에는 Multiple Images를 다뤄보겠습니다.

 Single Image에서는, Deepzoom Composer에서 추출 된 이미지 피라미드를 MultiScaleImage 엘리먼트의 소스에 할당 했을 경우, Single Image의 가로 : 세로 비율에 알맞는 MultiScaleImage 엘리먼트의 Size를 조정해야만 처음 로드시 MutliScaleImage에 꽉차게 로드 되게 됩니다.
 Multiple Images 일 경우는 어떨까요?
 Multiple Images 경우에는, 가로는 Compose에서 배치 된 Images 중, 최좌측에 배치 된 이미지 부터 최우측에 배치 된 이미지까지의 Size가 Multiple Image의 가로 Size가 됩니다. 마찬가지로, 세로는 Compose에서 배치 된 Images 중, 최상단에 배치 된 이미지부터 최하단에 배치 된 이미지까지의 Size가 Multiple Image의 세로 Size가 됩니다.
 이렇게 정해진, 가로 : 세로의 비율이 MutliScaleImage 엘리먼트 Size와 일치해야만 Deepzoom Composer에서 추출된 이미지를 MultiScaleImage 엘리먼트의 소스에 할당 했을 경우 첫 로드시 개발자가 원하는 화면이 로드 되게 되는 것이죠.

 그럼, 1024 : 768 사이즈의 이미지 3개로 실습 해 보겠습니다.

 1024 : 768 사이즈의 이미지를 다음과 같이 배치 한 뒤, Export 했습니다.

 화살표에서 보시는 바와 같이, 1024 : 768 이미지를 위와 같이 배치 했을 경우, Multiple image의 전체 비율이 2048 : 1536 가 되는 것을 확인 할 수 있습니다.

 그럼 2048 : 1536 비율의 Size를 갖는 MultiScaleImage 엘리먼트에 할당 해 보죠.

(간단한 수학 식이지만 2048 : 1536 = 400 : 300 입니다 ^^;)

 보시는 바와 같이, Deepzoom Composer 에서 추출 된 이미지가 MutliScaleImage에 꽉 맞게 로드 되는 것을 확인 할 수 있습니다. 이전 포스팅에서 보여드렸던 것과 마찬가지로 Mutiple Image의 가로 : 세로 비율과 MutliScaleImage 엘리먼트의 가로 : 세로 비율이 맞지 않게 된다면 이미지의 아랫 부분이 잘리거나, MultiScaleImage 엘리먼트의 하단에 공백이 생기게 되는 것입니다.

 이런 원리를 조금 더 응용해 본다면, 2개의 이미지로 화면 비율을 설정 해 두고, 나머지 이미지를 자유롭게 배치하여, 첫 로드시 정확히는 ViewportWidth가 1일 경우 MutiScaleImage 엘리먼트에 보여지는 모습을 지정하고, MultiScaleImage의 화면 비율까지도 미리 지정 해 둘 수 있겠죠 ^^

 빨간색 화살표로 표시 된, 두 이미지를 통해서, 전체 Multiple images 의 화면 비율을 맞춘 후 (여기서는 4:3 비율로 맞췄습니다.) 녹색 테두리의 두 이미지를 배치했습니다. 이렇게 해서 생성 된 이미지 피라미드를 MultiScaleImage의 Source에 할당 한 뒤, 로드시 화면 비율을 맞추기 위해서 사용 된 두 이미지를 감추게 되면, MultiScaleImage의 비율이 4:3이고, ViewportWidth가 1인 경우 어떤 해상도에서든 항상 다음과 같은 모양으로 보여지게 됩니다.
<이미지를 감추는 부분>

<MutliScaleImage의 Width="400", Height="300" 인 경우>

<MutliScaleImage의 Width="800", Height="600" 인 경우>

Posted by Min-gu, Kim
Silverlight2009.06.30 10:17
 Deepzoom Project를 위해서는 MultiScaleImage의 Source를 위해 이미지 피라미드와 XML 파일이 필요한데요, 바로 이 이미지 피라미드와 XML파일을 Seadragon의 Deepzoom Composer를 사용하여 추출해 낼 수 있습니다.

 이미 많은 분들이 Deepzoom Composer를 이용하여 이미지 피라미드와 XML파일을 추출해 내고 있으실 텐데요, Deepzoom Composer를 사용하여 Export 된 컬렉션 이미지들의 배치와 화면 비율에 관한 이야기를 해 보려고 합니다.


1024x768 사이즈의 이미지 한 장으로 이미지 피라미드를 구성하였습니다. 이 경우, 가로 : 세로 = 1024 : 768 의 비율로 Export 되기 때문에 위와 같이 Export 된 이미지 피라미드를 MultiScaleImage의 Soucre에 할당 할 경우, 처음 로드시 ViewportWidth 가 기본 1로 로드 되기 때문에 MultiScaleImage 엘리먼트의 사이즈가 1024: 768의 비율이라면 엘리먼트 내 꽉 차게 로드 되게 됩니다.

코드에서 처럼, MultiScaleImage 엘리먼트의 Width와 Height를 1024 : 768 의 비율로 해서 각각 400, 300 씩 지정하였습니다.


만일, 1024 : 768의 비율이 아니라면, 어떻게 될까요? 정답은, ViewportWidth 가 기본으로 1로 셋팅 된 상태로 로드된다는 점에 있습니다. 1024 : 768의 비율보다 세로의 비율이 더 적어진다면, 이미지의 아랫 부분이 짤리게 나오고, 세로의 비율이 더 커진다면 전체 이미지가 보이고, MultiScaleImage의 아랫 부분에 공백이 생기게 됩니다.
<MultiScaleImage Width = "400" Height="200" 인 경우>

<MultiScaleImage Width = "400" Height="400" 인 경우>


정리하자면, MultiScaleImage는 처음 로드시 ViewportWidth = 1, ViewportOrigin = (0, 0) 으로 할당 되 있기 때문에 Source 이미지는 가로(Width)로는 모두 표시 되지만, 세로는 해당 이미지의 가로:세로 비율과 해당 MultiScaleImage 엘리먼트의 Size에 따라서, 짤릴 수도 있고, 여백이 생길 수도 있게 되는 겁니다. (물론, 비율이 딱 맞게 조정 되 있다면, 화면에 꽉 차게 로드 되겠죠)
Posted by Min-gu, Kim

티스토리 툴바