[엉뚱한실험5] Silverlight객체와 Html엘리먼트 Overlap

Silverlight Old/Experiment 2007.12.20 09:58

이번 실험은 이런 생각에서 출발합니다.

createSilverlight 함수의 isWindowless 파라미터를 "true"로 설정한 후,
실버라이트 Page의 Opacity값이나 Background 색상의 Alpha 값을 조정하면,
뒤에 놓인 HTML 엘리먼트들을 배경으로 보이면서 작동이 가능할 것인가?


(구체적으로는 HTML형태로 결과물을 보여주는 이런저런 매쉬업들을 활용하여,
실버라이트만 그 위에 살짜쿵 올려서, 뭔가를 만들 수 있지 않을까...? 하는 생각에서 출발했습니다.)

일단, Silverlight의 isWindowless 파라미터에 대해서는 공도님이 친절하게
정리해 놓은 포스트가 있으니 참고하시면 되겠습니다.

공도님이 정리한 포스트

Page.xaml은 Blend에서 아래와 같이 사이즈 400x300 짜리 디자인으로 준비하였습니다.

사용자 삽입 이미지

Page.xaml.cs에 myButton에 대해 아래 역할을 하는 이벤트를 추가해 주었습니다.

MouseEnter 이벤트에서 Page Canvas의 Opacity를 0으로 변경.
MouseLeave 이벤트에서 Page Canvas의 Opacity를 1로 복원.

TestPage.html은 아래와 같이 준비하였습니다.
Body에는 배경을 깔았습니다. z-index를 통해 div객체를 겹쳐보기 위해서
Hugeflow Logo를 2개 준비하였습니다.

<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Trying to overlap Divs using CSS (when isWindowless is true)</title>
   
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <style type="text/css">
        img { border:1px solid #000000;}
        body { margin:10px 10px 10px 10px; background-image:url(bg_main.png);}

        .silverlightHost { width:400px;height:300px;}
       
        #Logo1 { position:absolute;left:15px;top:15px;z-index:1;}
        #Logo2 { position:absolute;left:150px;top:15px;z-index:3;}
       
    </style>
</head>

<body>
        <div id="Logo1">
            <a href="
http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
        </div>
        <div id="Logo2">
            <a href="
http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
        </div>

        <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            //createSilverlight(); // 살짝 주석처리
        </script>
        </div>   
</body>
</html>

일단 이해를 돕는 그림을 만들기 위해 createSilverlight를 살짝 주석으로 막고 실행시켜 캡쳐하였습니다.

사용자 삽입 이미지

z-index가 효험을 보여 Huge Flow 로고가 2개 겹쳐있는 것을 확인하실 수 있습니다.
여기서 createSilverlight의 주석봉인을 풀어주면 다음과 같이 됩니다.

사용자 삽입 이미지

그럼 이제 TestPage.html.js (실버라이트를 호스트하는 html페이지의 비하인드 코드)에서
isWindowless: "true"를 추가해 줍니다.


function createSilverlight()
{
 Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "1.1",
   isWindowless: "true",
   enableHtmlAccess: "true"
  },
  events: {}
 });
   
 // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }

}

그럼 이렇게 됩니다.

사용자 삽입 이미지

여기서 Silverlight 객체를 호스트 하기 위한 Div의 z-index를 2로 주면,
Silverlight 객체가 과연 Hugeflow의 로고 두 개 사이 계층에 껴서,
하나의 로고(z-index = 1)는 Silverlight 객체 아래로 가서 안보이게되고,
다른 하나(z-index = 3)의 Silverlight 객체 위에 그대로 보이게 될까요?

여러분 궁금하지 않으십니까?
그래서 일단 CSS를 수정하였습니다.

<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Trying to overlap Divs using CSS (when isWindowless is true)</title>
   
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <style type="text/css">
        img { border:1px solid #000000;}
        body { margin:10px 10px 10px 10px; background-image:url(bg_main.png);}
        .silverlightHost { width:400px;height:300px;position:absolute;z-index:2;}
       
        #Logo1 { position:absolute;left:15px;top:15px;z-index:1;}
        #Logo2 { position:absolute;left:150px;top:15px;z-index:3;}       
    </style>
</head>

<body>
        <div id="Logo1">
            <a href="http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
        </div>
        <div id="Logo2">
            <a href="http://hugeflow.com"><img src="HFLogo_snow.jpg" border="0" /></a>
        </div>
        <div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
        </div>   
</body>
</html>

겹치게 하기 위해서 position은 absolute로 설정하고, z-index를 2로 설정하였습니다.
결과 보시죠!

사용자 삽입 이미지

무리없이 잘됩니다. ^^;;

그럼 오늘 시험의 하이라이트 Silverlight Page의 Opacity나 Background의 Alpha값을
조정해서 Silverlight 객체 뒤로 숨어버린 Logo 이미지나, 배경을 볼 수 있을까요?
자, 아까부터 출연해서 기다리고 있던 저 크고 검은 버튼에 손을 대보겠습니다.

사용자 삽입 이미지

이런 실망하셨죠?
혹시나 해서 Page.xaml에 가서 Background 물을 빼보고 다시 해보았습니다만,
마찬가지 결과를 보여줍니다.

그럼 방법이 전혀 없느냐?

boxmile이 Silverlight 공식포럼에서 발견하고 저에게 알려준 방법이 있습니다.

포럼원문 : http://silverlight.net/forums/t/6267.aspx

방법이 다음과 같이 간단합니다.

TestPage.html.js의 createSilverlight 함수에 다음 파라미터를 추가하라.
   
isWindowless : "true"
background : "#00FFFFFF"


(각 파라미터 끝에 , 빼먹지 않도록 조심하세요.)

실제 코드에 적용

function createSilverlight()
{
 Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "1.1",
   isWindowless: "true",
   
background: "#00FFFFFF",
   enableHtmlAccess: "true"
  },
  events: {}
 });
   
 // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }

}

이런 처방을 한 이후에 Page의 배경색이나 Opacity를 조정해보면,
원하는 대로 동작하는 것을 확인해 보실 수 있습니다.

첫번째로, Page의 배경색이 없는 경우

사용자 삽입 이미지

로고 사이에 찡긴 버튼을 확인하실 수 있습니다.
(좀더 극적인 효과를 위하여, 버튼의 모양/크기/위치를 조정하였습니다.)

두번째로, 배경색을 주고 Alpha 값을 반 정도(128) 감소시킨 경우,

사용자 삽입 이미지

반투명으로 잘 보이는 것을 확인할 수 있었습니다.


부록 1. 한편 Flash에는?

Flash에 보면 유사한 개념으로 wmode 파라미터가 있습니다.
wmode

- opaque : 불투명
- transparent : 투명

opaque로 설정 시 HTML 객체가 Flash 위에 올라올 수 없습니다. 한편, transparent로
설정 시에는 HTML 객체가 Flash 위에 올라오게 할 수도 있고, 배경이 없는 경우 아래에 있는 HTML 객체를 그대로 투과하여 보여 줄 수 있습니다.

공신닷컴 메인페이지를 작업하면서 적용해보니 FireFox 2.x에서 제대로 작동을 안하는 등,
아직 Cross Browsing 문제가 남아있는 것을 확인하였습니다.


긴 실험결과 봐 주셔서 감사합니다.

설정

트랙백

댓글

  • BlogIcon 길버트 2007.12.20 20:32 신고 ADDR 수정/삭제 답글

    티스토리 에디터 자동링크 이상하네요. @_@

  • onseed 2008.01.24 19:38 신고 ADDR 수정/삭제 답글

    상세하고 이해하기 쉬운 정리..감사합니다..블로그에 담아갈께요..허락해주세요..

    • BlogIcon 길버트 2008.01.24 20:29 신고 수정/삭제

      물론 허락해 드리겠습니다.
      좋은 하루 되세요.

  • 이진석 2008.02.17 00:42 신고 ADDR 수정/삭제 답글

    잘 읽었습니다. :)