Barn filter


Barn Filter

Barn filter는 문이 양쪽으로 열렸다 닫혔다 하는 것과 같은 Animation 효과를 주는 filter 입니다. Barn 이라는 단어는 , 외양간, 헛간, 창고 등의 뜻을 가진 단어인데, 아마도 우리가 Cowboy 영화에서 보았던 그런 외양간 문을 상상하면 되겠습니다. Motion, Orientation, Duration 등 3개의 property를 가진 filter로서 자세한 내용은 표를 참고하세요.

Barn filter
Property 설 명
Motion
문이 열리는 동작(out)과 닫히는 동작(in)을 지정 또는 return.
out Default. 문이 열리는 동작.
in 문이 닫히는 동작.
Orientation
문이 열리거나 닫히는 방향을 지정 또는 return.
vertical Default. 수직으로 열리거나 닫힘.
horizontal 수평으로 열리거나 닫힘.
Duration Transition이 지속되는 시간의 초 단위. 예) Duration='1.0000' 이면 1초 지속.
html syntax <ELEMENT STYLE =
"filter:progid:DXImageTransform.Microsoft.Barn(sProperties)">
scripting object.style.filter =
"progid:DXImageTransform.Microsoft.Barn(sProperties)"
적용 대상 All block level elements.
Note




Transition filter의 scripting

Barn filter는 transition filter 중에서 처음으로 다루어 보는 filter인데, 앞 페이지의 Introduction to filter 에서도 언급했지만, transition filter는 scripting 없이는 절대로 작동되지 않습니다. Gradient filter 같은 static filter의 경우 CSS로 지정하므로써 간단히 filter를 적용 시킬 수 있지만 transition 의 경우 움직임을 주기 위해 stop(), apply(), play() 의 3 가지 method를 사용한다고 했습니다. 이 페이지에서 배우는 barn filter를 통해 자세히 알아 보도록 하겠습니다.

* Filter에서의 Image란 그림 파일 뿐만이 아니라 화면에 보이는 모든 block level element 들을 총칭합니다. 가장 단순한 방법(1개의 이미지 만을 transition 할 경우)
<html>
    <head>
        <title>가장 간단한 방법으로 scripting 하기</title>
    <script type="text/javascript">
    <!--
    function barnIt(obj) {
    obj.filters[0].apply()
    obj.style.visibility = "visible"
    obj.filters[0].play();
    }    
    // -->
    </script>
    <style type="text/css">
    <!-- 
    .barn{
    visibility:hidden; 
    filter:progid:DXImageTransform.Microsoft.Barn(duration=1);
    padding:10px;
    text-align:center;
    font:bold 18px verdana;
    width:200px; 
    height:200px;
    background-color:gold;
    }
    -->
    </style>
    </head>
    <body>
    <div id="transBarn" class="barn">Barn Transition Filter</div>
    <button onclick="barnIt(transBarn)">Barn it!</button>
    <button onclick="transBarn.style.visibility='hidden';">Reset</button>
    </body>
</html>

코드 실행 하기

위의 소스에 대해 설명을 하겠습니다. 에~ 위의 소스로 말 할 것 같으면...

  1. .barn 으로 class selector를 정의하고 transBarn 이라는 id를 가진 div tag에 class로 지정했습니다.
  2. CSS Property 중에서 다른 것은 별로 중요할 게 없고, 중요한 것은 visibilityfilter 가 되겠습니다.
  3. obj 라는 대입변수를 가진 function을 만들어서 적용(apply)시키고, visibility를 visible로 보이게 하고, play 시킵니다. 이 때 filter[0] 이라는 번호가 나오는데, 이 번호는 web design > JavaScript > DHTML D.O.M > Striped Table 의 Element indexing 에서 설명한 것과 같은 개념으로서 어떤 Tag에 지정된 첫 번째 filter라는 뜻입니다. 예를 들어서 2 번째 지정된 filter 라면 obj.filter[1].apply() 와 같이 되겠군요.

이 방법이 가장 간단한 방법이긴 한데 별로 쓸모는 없을 것 같군요. 물론 이 것도 분명 transition 이긴 하지만 이런 식으로 button을 눌러서 한 번 보고 끝난다는 건 아무래도 좀 뭔가 모자라는 구석이 있는 느낌이네요. 여러분들도 쩜 아쉽지 않습니까? 그래서 일반적으로 사용되는 2개의 이미지를 반복해서 transition 하는 방법에 대해 알아 보도록 하겠습니다.

Transition filter에 사용되는 그림 2개

아래의 그림 2장은 앞으로 transition filter에서 사용될 그림인데, Midnight Club II 라는 animation 에 등장하는 character 들 이라는군요. 우클릭 후에 '다른 이름으로 그림 저장'으로 저장하고 연습해 보시져.

twins (7K) mc2_dice (6K)



2개의 Image를 반복적으로 Transition 할 경우.


1 단계 : Object 의 준비
<body>

<div id="topContainer" style="position:relative;filter: progid:DXImageTransform.Microsoft.Barn(Duration=0.5);width:200px;height:200px;top:50px;left:50px;background-color:#ffffcc;border:1px solid tomato;font:bold 18px verdana;padding:10px;">

<img id="img_1" style="position:absolute" src="../images/twins.gif" width="136" height="136" alt="mc2_dice (6K)" />

<img id="img_2" style="visibility:hidden;position:absolute" src="../images/mc2_dice.gif" width="136" height="136" alt="twins (7K)" />

</div>

</body>
  1. 우선 2개의 image를 담을 div (위에서는 id를 topContainer 라고 지정함) 를 만들고 문서의 흐름에 따라 유동적으로 움직일 수 있도록 position:relative로 positionng 한다.
  2. 만들어진 div(topContainer)속에 2개의 그림을 넣고 2개 다 position:absolute 로 positioning 하여 같은 위치에 그림 2개가 포개어 지도록 한다.
  3. 첫 번째로 보여질 그림은 그대로 두고 2번째 나올 그림은 visibility:hidden 으로 감추어 놓는다. 이상으로 object 준비 끝...

Boolean의 scripting 처리 기법
Scripting을 처음 접하는 초보자에게 script를 작성해 보라 그럴 때 가장 당황하는 부분중에 하나가 boolean의 처리입니다. 아시다시피 boolean은 true, false 둘 중에 한 가지 조건을 선택하는 것인데, 그 조건이라는 것을 어떻게 설정하느냐가 가장 고민 거리라 할 수 있습니다. 그렇지만 아래와 같은 기법을 알면 의외로 간단하죠. 값이 true, false 중에 하나이기 때문에 변수를 지정하고 변수에 0 또는 1을 대입한 다음 if 조건문으로 처리하는 방법입니다. 즉, 자기가 설정한 상황을 물어보는 거죠. 작성자인 스스로는 이미 알고 있으면서 말이죠.


2 단계 : Scripting
<script type="text/javascript">
<!--
var bState = 0; // bState 변수에 0을 저장한다.
function fnToggle(obj, obj1, obj2) { // 그림 1과 2에 사용될 대입변수 지정
obj.filters[0].Apply(); // topContaniner에 barn filter 적용
if (bState == 0) { // bState 가 '0' 이면 즉, 조건에 만족하면. 지금은 조건에 만족
bState = 1; // 다음 transition에서 조건을 만족시키지 않아야 else 이후를 실행하므로 bState 에 1을 저장하여 조건에 맞지않게 만든다.
obj.style.backgroundColor="royalblue"
obj.style.color = "#FFFFFF"
obj2.style.visibility="visible";
obj1.style.visibility="hidden";
}
else {
bState = 0; // 반대로 다음 transition에서 조건을 만족시켜야 else 이전을 실행하므로 bState 에 0을 저장하여 조건에 맞춘다.
obj.style.backgroundColor="#ffffcc"
obj.style.color = "#000000"
obj2.style.visibility="hidden";
obj1.style.visibility="visible";
}

obj.filters[0].Play(); // 위에서 조건문으로 판별한 image play...
}
// -->
</script>



통합 예제
<html>
<head>
<title>2개 의 image를 transition 할 경우</title>
<script type="text/javascript">
<!--
var bState = 0;
function fnToggle(obj, obj1, obj2) {
obj.filters[0].Apply();
if (bState == 0) {
bState = 1;
obj.style.backgroundColor="royalblue"
obj.style.color = "#FFFFFF"
obj2.style.visibility="visible";
obj1.style.visibility="hidden";
}
else {
bState = 0;
obj.style.backgroundColor="#ffffcc"
obj.style.color = "#000000"
obj2.style.visibility="hidden";
obj1.style.visibility="visible";
}

obj.filters[0].Play();
}
// -->
</script>
<style type="text/css">
<!--
.container{
width:200px;
height:200px;
position:relative;
top:50px;
left:50px;
background-color:#ffffcc;
border:1px solid tomato;
font:bold 18px verdana;
padding:10px;
filter: progid:DXImageTransform.Microsoft.Barn( Duration=1);
}
-->
</style>
</head>
<body>

<button type="button" onclick="fnToggle(topContainer, img_1, img_2)">Play Barn Filter</button>

<div class="container" id="topContainer">

<img id="img_1" style="position:absolute" src="images/twins.gif" width="136" height="136" alt="mc2_dice (6K)" />

<img id="img_2" style="visibility:hidden;position:absolute" src="images/mc2_dice.gif" width="136" height="136" alt="twins (7K)" />

<span style="position:absolute;bottom:10px;">Barn Transition</span>

</div>

</body>
</html>


코드 실행 하기

위의 예제에서는 topContainer div 에 inline style로 지정한 CSS property 들을 style block 속에 class selector로 정리해서 class="container" 로 지정했고, image file 경로는 편의상(그림이 보여야 되므로) 이 사이트의 경로로 지정했으므로 참고하세요. 또 코드 실행기 실행 후에 Motion, Orientation 등의 값을 바꿔서 보다 실감하는 실습을 하시기 바랍니다...^^





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색