'실버라이트3'에 해당되는 글 3건

  1. 2009.07.28 New Deepzoom Composer in Silverlight 3 (8)
  2. 2009.07.20 Behavior class in Blend 3 RC (2)
  3. 2009.07.10 Out of Browser in Silverlight 3 RTW
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.07.20 16:00

 최근에 업데이트 된 Blend 3 RC에는 기본적으로 Behavior class 8가지(ChangePropertyAction, ControlStoryboardAction, FluideBahavior, GoToStateAction, HyperlinkAction, MouseDragElementBehavior, PlaySoundAction, RemoveElementAction) 를 제공합니다.
 


  8가지 Behavior 는 정확히 표현하자면, Behavior와 Action으로 명명 되 있는데요. Behavior는 System.Windows.Interativity의 Behavior 클래스를 상속받아 구현 한 것이고, Action은 System.Windows.Interactivity의 TriggerAction이나 TargetedTriggerAction등을 상속받아 구현 된 것입니다.

 그럼 각각의 Behavior의 사용 방법을 간략하게 소개 하도록 하겠습니다.

TargetedTriggerAction
- Trigger에 의해서 실행 되는 Action을 지정. Action의 대상을 지정할 수 있습니다.

ChangePropertyAction - Trigger에 의해서 Target의 Property를 변경 하는 Action.
- TargetName :  Property가 변결 될 Target
- PropertyName : 변경 할 Property 선택
- Value : 변경 될 Property 값 설정
- Animation Properties : 1) Duration : Properties 의 값이 변경되는 시간을 설정
                                   2) Ease : Properties의 값이 변경 될 때의 Easing Animation 설정.

GoToStateAction - Trigger에 의해서 Target의 VisualState를 원하는 State로 변경하는 Action.
- TargetName : State가 변경 될 Target
- StateName : 변경 될 State 지정

RemoveElementAction - Trigger에 의해서 지정된 Dependency Object를 제거하는 Action.
- TargetName : 제거될 Dependency Object 선택.

TriggerAction
- Trigger에 의해서 실행 되는 Action을 지정.

ControlStoryboardAction - Trigger에 의해서 선택 된 Storyboard 를 컨트롤(Play, Pause, Stop 등) 하는 Action.
- ControlStoaryboardOption : 컨트롤 될 Storyboard의 기능을 지정합니다. ex) Play, Pause, Stop 등
- Storyboard1 : 컨트롤 될 Storyboard를 지정합니다.

HyperlinkAction - Trigger에 의해서 지정된 Uri 로 이동하는 Action.
- NavigateUri : 이동 될 Uri 지정
- TargetWindow : 새창(_blank)을 띄울 것인지 현재 페이지에서 바로 이동(_self)할 것인지 등을 선택.

PlaySoundAction - Trigger에 의해서 지정된 Audio를 재생하는 Action.
- Source : 재생 될 Audio 선택 (mp3, asf, asx, wma, wmv 지원)
- Volumn : 볼륨의 크기 지정.

Behavior
- Attached 된 Dependency object의 동작을 지정합니다.

FluidMoveBehavior - Attached 된 Dependency Object는 Silverlight App. 첫 로드시나, Resize 등에 의해서 Dependency Object가 위치하는 곳이 변경 됐을때 유동적으로 움직이게 됩니다.
- Duration : 움직이는 시간 설정
- EaseX : Dependency Object가 위치하는 X좌표로의 이동시 Easing Animation을 지정합니다.
- EaseY : Dependency Object가 위치하는 Y좌표로의 이동시 Easing Animation을 지정합니다.

MouseDragElementBehavior - Attached 된 Dependency Object는 마우스로 드래그 할 수 있는 동작을 하게 됩니다.

[Sample]
위 8가지 Behavior 직접 구현 된 Sample입니다.

[Sample Code]
위 예제의 샘플입니다. Behavior를 사용했으니, Blend에서만 열어보심 되겠네요 :D

Posted by Min-gu, Kim
Silverlight2009.07.10 13:04

 Silverlight 3 Beta 버전에서 새롭게 지원 가능해진 Out of Browser 기능이 생겼습니다. (Out of Browser 란 Browser 밖에서 Silverlight 를 실행 할 수 있도록 배포하는 기능을 말합니다.) Beta 때 Out of Browser 기능을 실행 해 보신 분은 아시겠지만, AppManifest.xml 파일의 주석부분을 제거하고, 몇 가지 설정 사항을 입력하면 됐었죠.

<AppManifest.xml>

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
    <Deployment.Parts>
    </Deployment.Parts>
    <!-- Uncomment the markup and update the fields below to make your application offline enabled
    <Deployment.ApplicationIdentity>
        <ApplicationIdentity
            ShortName="Out of Browser Silverlight Application"
            Title="Window Title of Your Silverlight Application">
            <ApplicationIdentity.Blurb>Description of your Silverlight application</ApplicationIdentity.Blurb>
        </ApplicationIdentity>
    </Deployment.ApplicationIdentity>
    -->
</Deployment>


 이번에 발표 된 Silverlight 3 RTM 에서는 Out of Browser 를 설정하는 방법이 조금 변경 됐습니다.

Out-of-Browser 설정
 우선, Browser 밖에서 실행 될 Silverlight App. 을 만듭니다. 그리고, Silverlight App. Project 의 Properties를 선택하시면, Silverlight build options 에 Enable running application out of the browser 체크 박스가 있고, 체크 하시면, Out-of-Browser Settings... 버튼이 활성으로 변경 됩니다.



Out-of-Browser 버튼을 클릭 후 Out-of_Browser의 속성을 입력하시면 됩니다.


Window Title : Out-of-Browser를 통해 인스톨 될 Silverlight App.(이하, Silverlight App.)의 Title
Width : Silverlight App.의 가로 Size(픽셀)
Height : Silverlight App.의 세로 Size(픽셀)
Shortcut name : 바탕화면의 Silverlight App. 단축 아이콘의 Name
Download description : Out-of-Browser를 통해 인스톨 시 Silverlight App.에 관한 설명.
Icon : 각 사이즈 별 아이콘을 선택하여 빠른실행, 바탕화면, Silverlight App. 아이콘 등을 설정.
User GPU Acceleration : GPU 가속을 사용할 것인지 선택

이렇게 설정 해 주시기만 하면, Out-of-Browser 가 준비 된 것입니다. 참고로, Out-of-Browser 설정을 입력하시게 되면, 프로젝트의 Properties 에 OutOfBrowserSettings.xml 파일이 추가 됩니다.

<OutOfBrowserSettings ShortName="Silverlight3Test Application" EnableGPUAcceleration="False" ShowInstallMenuItem="True">
  <OutOfBrowserSettings.Blurb>Silverlight3Test Application on your desktop; at home, at work or on the go.</OutOfBrowserSettings.Blurb>
  <OutOfBrowserSettings.WindowSettings>
    <WindowSettings Title="Silverlight3Test Application" Height="400" Width="600" />
  </OutOfBrowserSettings.WindowSettings>
  <OutOfBrowserSettings.Icons />
</OutOfBrowserSettings>



Out-of-Browser 설치
브라우저 상에서 마우스 우클릭시 유저의 PC 에 인스톨 할 것인지 선택 할 수 있는 메뉴가 나옵니다. 혹은, Browser 상에서 Button 등의 엘리먼트의 이벤트로 설치 할 수 있도록 하려면 이벤트가 구현 된 함수에 다음과 같은 코드를 입력하면 설치가 진행 됩니다.

this.btnInstall.Click += (s, e) =>
{
    Application.Current.Install();
};


<Out-of-Browser 미 설정시>



<Out-of-Browser 설정시>



그럼 Out-of-Browser를 통해 Silverligt App.를 설치 해 보겠습니다.
[이 컴퓨터에 Silverlight3Test Application 설치...]를 클릭하시면, 응용 프로그램 설치 창이 뜹니다.

그리고, 설치 될 Silverlight App. 를 실행 할 수 있는 바로 가기의 위치를 체크 하신 후 확인 하시면 됩니다.

<바탕 화면>



<시작 메뉴>



다음은, Silverlight App을 Web Browser에서 실행한 화면과 Out-of-Browser에서 실행 한 화면입니다.

<Browser>



<Out-of-Browser>




Out-of-Browser 를 통해 설치 된 Silverlight App.는 Web Browser와 Out-of-Browser 상에서 마우스 우클릭- 이 응용 프로그램 제거.. 메뉴를 통해서 삭제 하실 수 있습니다.

<Browser>



<Out-of-Browser>

Posted by Min-gu, Kim

티스토리 툴바