[실버라이트 강좌]사용자 스플래쉬 스크린

이번 강좌에서는 사용자가 직접 스플레쉬 스크린을 실버라이트로 만들어 볼 것이다. 이 내용은 Silverlight Document에 있는 예제를 중심으로 작성을 했다.

 

내용에 들어가기에 앞서 간단하게 썰을 풀어보자.

 

실버라이트를 실행시키면 다운로드 중이라는 화면이 잠깐 나타날 것이다. 인터넷 속도나 다운되는 XAP파일 사이즈에 따라서 조금은 다르겠지만 어쨌든 나타난다. 가운데 숫자가 몇 %정도 다운되었는지 표현되고 외부에는 작은 원들이 회전하는 애니메이션이 나타난다. 원문에서는 이 부분에서 표현하기 위한 애니메이션의 TimeDelay시간을 대략 0.5초로 설정하고 있다. (Default 값)

 

그리고 제일 중요한 속성이 3가지가 있다.

splashscreensource

onsourcedownloadprogresschanged

onsourcedownloadcomplete

 

splashscreensource : 기본 패키지(XAP)파일이 다운로드 되는 동안 표현할 URL이나 XAML파일을 할당한다.

Onsourcedownloadprogresschanged : 기본 패키지가 다운로드 되는 동안 연속적으로 호출되어질 자바스크립트 이벤트 핸들러를 참조한다.

Onsourcedownloadcomplete : 소스가 다운로드 완료된 후에 단 한번 호출되어 지는 자바스크립트 이벤트 핸들러를 참조한다. ( 이 부분에 대해서는 이번에 설명하지 않음 – 원문을 가능한 그대로 번역했어요~~!!)

 

프로젝트 파일을 만든다. 프로젝트 명은 아래의 그림과 같이 SplashScreenSource라고 입력한다.

 

일반적으로 컴파일 하면 XAP파일의 사이즈가 무척 작다. 게다가 압축까지 되어있기 때문에 더욱더 작다.

참고로 XAP파일은 컴파일 하면서 압축되는데 알집이나 여타의 압축프로그램을 이용해서 압축을 해제하면 2개의 파일이 나타나는데 이 부분에 대해서는 나중에 시간이 나면(?) 자세하게(?) 설명을 하겠다. 일단 함 해보면 알꼬예요.

 

그만큼 작은 사이즈로 압축되어 있기 때문에 컴파일한 후에 웹페이지에서 뭔가 볼려고 하면 벌써 XAP파일이 다운로드 되어 버리기 때문에 내가 만든 스플레쉬 윈도우를 당췌 볼 수가 없다. 그러면 어떻게 해야 할까? XAP파일의 사이즈를 크게 만들어야 하는데 방법은 아래와 같다.

SplashScreenSource (SplashScreenSource.Web이 아니다.)에 적당한 사이즈의 파일을 추가시키고 속성을 변경시켜주면 된다.

SplashScreenSource 프로젝트에서 오른쪽 마우스 버튼을 누르고 추가->기존 항목(G)…을 선택해서 적당한 사이즈의 파일을 선택한다. 나는 약 8메가 정도의 음악파일을 추가시켰다. 그리고 추가된 파일을 선택하고 속성창에서 빌드작업을 선택한다. 그러면 아래와 같은 내용들이 나타나는데 [포함 리소스]를 선택하자. 그러면 XAP파일 내부에 추가시킨 파일이 같이 압축되어서 들어간다. (MP3파일과 같은 음악프로그램을 압축해서 압축이 안된다. 원래 이런 파일들은 자체적으로 압축알고리즘을 가지고 제작이 되기 때문에 대부분의 압축알고리즘도 이와 비슷한 알고리즘을 가지고 있어서 거의 압축이 안된다.)

일단 여기까지 해보고 컴파일을 해서 실행시켜보자.

대략 5메가 이상의 사이즈면 잠깐 정말 잠깐 볼 수가 있다. 정말 잠깐 나왔다. 에궁… 그렇다고 자신이 만든 스플레쉬 파일 감상하려고 엄청나게 큰… (정확한 사이즈에 대해서 테스트 하지 않았지만..) 파일로 만들고 싶어도 XAP파일이 허용하는 한계가 있기 때문에 컴파일 할 때 에러가 발생한다. 궁금하시면 80메가 정도 되는 동영상 파일 리소스로 포함시켜서 컴파일 해 보세요 ^^;

너무 순식간에 지나가 버리니까 잼 없어서 비슷한 사이즈의 음악파일을 하나 더 추가해서 위에서 했던 방식대로 [리소스 포함]으로 설정해 둔다.

그러면 약 2초정도 수치가 변경되는 것을 볼 수가 있을 것이다.

그리고 정말 다운로드가 끝났는지 판단이 안될 때가 있을 것이다. 너무 빨리 끝나는 고성능의 PC들이 많기 때문에… Page.xaml파일에 간단하게 TextBlock을 올려놓고 내용을 Complete!!라고 입력하자.

IE화면에 Complete라는 글이 나타나면 다운되고 제대로 XAML파일이 실행된 것이다.

 

 

자 이제 사용자 스플래쉬 스크린을 추가해 보자.

SplashScreenSource에 사용할 스플래쉬 스크린을 추가해서는 안된다. 왜? 당연하쥐… SplashScreenSource는 컴파일을 하면 XAP파일로 압축을 하는데 여기에 스플래쉬 스크린을 추가하면 XAP파일 안에 압축되기 때문에 다운로드 되어야 만 압축을 풀 수 있을 것이 아닌가? 그럼 다운로드가 끝난다는 것은 스플래쉬 스크린도 벌써 사라지고 없다는 것이다.

따라서 SplashScreenSource.Web에 XAML파일을 추가하고 구현을 해야 한다.

SplashScreenSource.Web 프로젝트에서 마우스 오른쪽 버튼 클릭 -> 추가 -> 새 항목에서 새 항목 추가 창을 띄우서 Silverlight범주를 선택. 템플릿은 SilverLight Jscript 페이지를 선택하자. 파일명은 SplashScreen.xaml로 하자.

 

SplashScreen.xaml파일 내용

<Canvas

        xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        x:Name="parentCanvas"

        Width="850"

        Height="600"

        Background="OldLace"

        >

  <Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357" Height="31.379">

    <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">

      <Rectangle.RenderTransform>

        <TransformGroup>

          <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>

          <SkewTransform AngleX="0" AngleY="0"/>

          <RotateTransform Angle="270"/>

          <TranslateTransform X="0" Y="0"/>

        </TransformGroup>

      </Rectangle.RenderTransform>

      <Rectangle.Fill>

        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

          <GradientStop Color="#FFFFFFFF" Offset="1"/>

          <GradientStop Color="#FFFFFFFF" Offset="0"/>

          <GradientStop Color="#FF2975D0" Offset="0.28"/>

          <GradientStop Color="#FF2975D0" Offset="0.72"/>

        </LinearGradientBrush>

      </Rectangle.Fill>

    </Rectangle>

 

    <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>

 

    <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>

    <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />

 

    <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>

    <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>

    <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>

    <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />

  </Canvas>

</Canvas>

 

다음으로 html파일의 내용을 수정해 보자.

<object data="data:application/x-silverlight-2," type= 으로 시작하는 태그 내부에 param 항목에 아래의 항목을 추가하자. 이 부분은 가장 위에서 설명한 내용에 해당한다.

<param name="splashscreensource" value="SplashScreen.xaml"/>

<param name=onSourceDownloadProgressChanged" value=onSourceDownloadProgressChanged" />

 

다음으로 SplashScreen.js파일이 있는데 파일은 지우지 말고(^^) 파일의 내부 내용을 다 지우고 아래의 내용을 붙여넣기 하자.

function onSourceDownloadProgressChanged(sender, eventArgs) {

    sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";

    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;

}

 

그리고 html파일 상단에 js파일에 대한 링크를 추가하자.

<script type="text/javascript" src="SplashScreen.js"></script>

 

마지막으로 SplashScreenSourceTestPage.html을 시작페이지로 설정 하자.

 

급한 마음에 실행버튼을 누를 것인데… 가능하면 F5보다는 Ctrl+F5를 눌러서 디버깅을 준비를 위해서 시스템이 느려지는 부분이 생기지 않도록 하자. 그리고 임시파일도 가능하면 삭제를 해서 처음 다운로드 되는 것처럼 하자.

참고로 XAP파일은 IE의 임시파일 보기로 XAP파일을 볼 수 있다.

 

아래는 실행결과에 대한 이미지 이다. 첨부파일은 내용이 그다지 어렵지 않기 때문에 올리지 않겠다.