Introduction to Filters and Transitions


Home > Document > Web design > CSS > Filter > Introduction to filters

IE5.5 Up Level Static Filters

이 사이트의 CSS > Filter > Visual filters (Down Level Static Filters) 에서 보여 준 것 처럼 Filter 란 포토샵에서 사용하는 여러 가지 filter 중 몇 가지 filter의 효과를 그래픽 프로그램에 의존하지 않고 Windows 의 Direct-X 그래픽 가속기에 의해서 처리하는 Visual effect를 말 합니다. 이런 filter 들은 저를 포함한 많은 웹 페이지 디자이너들에게 엄청난(저는 '엄청난' 이라고 표현하고 싶습니다.) 혜택을 주는게 사실입니다. 복잡한 그래픽 작업이 없이도 똑 같은 효과를... 그 것도 아주 간단하게 표현해 낼 수 있다는 사실은 그래픽에 자신이 없거나 그래픽 작업을 귀찮아 하는 사람들에게도 훌륭한 그래픽적인 표현을 가능하게 해 주었으니까요. 물론 단점도 있습니다. 결정적인 단점은 Computer의 Resource를 잡아 먹는다는 것 입니다. 따라서 filter의 과도한 사용은 사양이 낮은 사용자의 C.P.U에 무리를 주므로 자제 할 필요도 있습니다.

그래서 이번 web design 메뉴의 filter 항목에서는 IE4.0 filter 보다 훨씬 강력해진 IE5.5 이상에서 사용하는 Up Level Filter 들을 다루어 보겠습니다. 방금 말한 것 처럼 이 Up Level Filter 들은 IE5.5 이상에서 작동하기 때문에 그 맛을 보고싶으면 여러분들 컴퓨터에는 당연히 그 이상의 IE version이 설치 되어 있어야 되겠습니다. 그렇지만 이 사이트의 web log 분석을 보면 대 부분이 브라우저 사양이 그 이상이더군요. 또한 얼만 전에 소스를 공개한 Gecko 계열에서도 당연히 IE5.5 filter 맛을 볼 수는 없겠죠...^^ Windows 에서 만 돌아 가니까요. 그럼 우선 간단하게 Up Level Filter에 대한 소개와 몇 가지 고려해야 만 하는 사항에 대해 설명 하겠습니다.

사실 Filters and Transitions 라는 한 분야 만 해도 작은 분량이 아니라서 많이 망설이다가 시작하게 되었습니다. 하지만 여러 회원님들이 많은 성원을 보내 주시리라 믿고 한 번 땡겨 보도록 하져. 걱정은 됩니다만...^^

  • Up Level Filter는 Down Level Filter를 전부 포함하고 있으며 비교할 수 없을 정도로 많은 효과가 추가되거나 보완 되었습니다. 또 어떤 것은 동일한 것도 있져...


  • HTML element 중 embed, applet, select, option, tr, tHead, tBody, and tFoot element 같이 실체가 없고 영역 만을 지정하는 element 에서는 사용할 수 없습니다. (시도해 보는 것은 무방하지만 헛수고...) 따라서 Body element 같이 면적을 가진 element 에도 물론 적용할 수 있습니다.


  • Layout이 지정되어 있어야 filter effect가 나타납니다. Layout 이란 Div, P, Span 등의 block Element 들이 가지는 면적을 뜻 합니다. 하지만 면적만 가진다고 되는 것이 아니라 얼마 만큼의 면적인지를 지정해야 됩니다. 즉, width 와 height 둘 다, 또는 둘 중에 하나 라도 지정되어 있어야 합니다. 단, Image file의 경우는 그 면적이 이미 정해져 있으므로 layout 을 지정 할 필요는 없습니다. IE4.0 filter 에서는 이 Layout 문제에 대해 말 하지 않았지만 Down Level Filter의 경우도 마찬가지져...


  • Filter의 종류에 따라 background-color 가 지정이 되어 있어야 되는 것도 있고, 어떤 것이 지정 되어 있으면 안 되는 것도 있습니다. 또 어떤 경우에는 background-color 를 transparent 로 지정해야 되는 것도 있습니다. 앞으로 하나 씩 filter 를 다루어 가면서 설명 하겠습니다.


  • 사용법만 알면 꽁짜로 쓸 수 있습니다.^^ 아래의 표는 4.0 filter가 5.5 filter에서는 어떻게 대체 되었는지를 비교한 표라죠 아마... 아래의 내용 중에 BlendTrans의 경우 다른 것과 비교했을 때 쩜 색다르게 놀고 있지 않습니까? 왜 그런가 하면 BlendTrans 의 경우 IE4.0 filter 인데 IE5.5 Version 이상에서 만 보인다고 MSDN Library에 표기 되어 있습니다. 이에 대한 다른 설명이 없는건지 못 찾는 건지는 몰라도 아마 Fade 라는 Transitional filter가 나오면서 대체 되었다는 뜻 같습니다. IE5.5 이하에서 확인해 본 바는 없지만 분명히 IE5.5 Version Browser 가문에서 축출 당한 듯...


IE4.0 과 5.5 Static Filter의 비교표
Static filter - IE4.0 vs IE5.5
IE4.0 IE5.5
alpha DXImageTransform.Microsoft.Alpha
BlendTrans DXImageTransform.Microsoft.Fade
blur DXImageTransform.Microsoft.MotionBlur
chroma DXImageTransform.Microsoft.Chroma
dropShadow DXImageTransform.Microsoft.DropShadow
FlipH DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
FlipV DXImageTransform.Microsoft.BasicImage(mirror=1)
Glow DXImageTransform.Microsoft.Glow
Gray DXImageTransform.Microsoft.BasicImage(grayscale=1)
Invert DXImageTransform.Microsoft.BasicImage(invert=1)
Light DXImageTransform.Microsoft.Light
Mask DXImageTransform.Microsoft.MaskFilter
Shadow DXImageTransform.Microsoft.Shadow
Wave DXImageTransform.Microsoft.Wave
Xray DXImageTransform.Microsoft.BasicImage(xray=1)




Static filter 사용법

Static filter의 사용법에는 단순히 HTML element 의 core attribute 중에 하나 인 STYLE attribute를 사용하여 image에 filter를 적용시키는 방법과 보다 동적으로 Static filter를 적용 시키기 위해 Dynamic style을 이용하여 scripting을 하는 2 가지 방법이 있습니다.

1. HTML Filter syntax
<ELEMENT style="filter:progid:DXImageTransform.Microsoft.Filtername(FilterProperties)">


위의 syntax 중 ELEMENT 는 HTML element 중 위에서 설명한 static filter를 사용 할 수 없는 element 들을 제외한 나머지 element 들이고, filter:progid:DXImageTransform.Microsoft. 부분은 IE5.5 Filter에 단 하나의 예외도 없이 공통적으로 반드시 적어 줘야 되는 부분입니다. Filtername은 위의 표에서 보는 것들과 같이 BasicImage, DropShadow 등의 사용하려고 하는 Filter 이름이며, (FilterProperties)는 각각의 filter가 가지고 있는 property(일종의 매개 변수) 를 뜻 하며 경우에 따라 property가 없는 filter도 있습니다. 또 한 대소문자 구분은 없습니다만, Scripting에서는 단어 사이를 space로 구분 할 수 없으므로 대소문자로 구분해 주는게 알아보기 좋습니다. 아직 배워 본 IE5.5 filter는 없지만 별로 어려운 내용이 아니니까 각 항목의 예제를 함 해보져... 잘 모르겠으면 Down Level Static Filters 를 참고 하시길...

예제
<html>
    <head>
        <title>HTML Filter syntax</title>
    <style type="text/css">
    <!-- 
    .alpha{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}    
    -->
    </style>
    </head>
    <body>
        <button class="alpha">Alpha Filter가 적용된 button</button>
        <button>Filter가 적용 안된 button</button><br />    
    </body>
</html>
코드 실행 하기


2. Scripting Filter syntax
object.style.filter = "progid:DXImageTransform.Microsoft.Filtername(FilterProperties)"


예제
<html>
    <head>
        <title>Scripting Filter syntax</title>
    <style type="text/css">
    <!-- 
    .alpha{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}    
    -->
    </style>
    </head>
    <body>
        <button id="b1" onclick="this.className='alpha';">Scripting filter</button>
        <button onclick="b1.className='';">Filter 끄기</button><br />    
    </body>
</html>
코드 실행 하기




IE5.5 Up Level Transitional filters

Transition 이란 화면상의 어떤 image(block element 포함) 가 다른 image로 전환하는 효과를 주는 것을 말 합니다. 이 것도 역시 Down Level Transition Filter 와 Up Level Transition Filter 가 있으며 위에서 설명한 static filter 와 마찬가지로 아래는 IE4.0과 IE5.5 Transitional filter 들을 비교한 표구요. Transitional filter를 사용하면 Image 뿐 만이 아니라 문서가 Loading 될 때 페이지 전체를 Transition 하는 것도 얼마든지 가능합니다. 즉, Canvas (브라우저의 문서창) 에 보이는 element 라면 뭐든지 transition 이 된다는 뜻 입니다. 백문이 불여일견이라고 일단 아래의 Sample을 한 번 보시죠. 혹시 자기 컴퓨터에 무리를 주는 것 같으면 알아서 멈추시구요...

Sample 보기

IE4.0 revealTrans.Transition value vs. IE5.5 Transitional Filters
IE4.0 IE5.5
0 - Box in DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='in')
1 - Box out DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='out')
2 - Circle in DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='in')
3 - Circle out DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='out')
4 - Wipe up DXImageTransform.Microsoft.Blinds(direction='up', bands=1)
5 - Wipe down DXImageTransform.Microsoft.Blinds(direction='down', bands=1)
6 - Wipe right DXImageTransform.Microsoft.Blinds(direction='right', bands=1)
7 - Wipe left DXImageTransform.Microsoft.Blinds(direction='left', bands=1)
8 - Vertical blinds DXImageTransform.Microsoft.Blinds(direction='right')
9 - Horizontal blinds DXImageTransform.Microsoft.Blinds(direction='down')
10 - Checkerboard across DXImageTransform.Microsoft.CheckerBoard(direction='right')
11 - Checkerboard down DXImageTransform.Microsoft.CheckerBoard(direction='down')
12 - Random dissolve DXImageTransform.Microsoft.RandomDissolve
13 - Split vertical in DXImageTransform.Microsoft.Barn(orientation='vertical', motion='in')
14 - Split vertical out DXImageTransform.Microsoft.Barn(orientation='vertical', motion='out')
15 - Split horizontal in DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='in')
16 - Split horizontal out DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='out')
17 - Strips left down DXImageTransform.Microsoft.Strips(motion='leftdown')
18 - Strips left up DXImageTransform.Microsoft.Strips(motion='leftup')
19 - Strips right down DXImageTransform.Microsoft.Strips(motion='rightdown')
20 - Strips right up DXImageTransform.Microsoft.Strips(motion='rightup')
21 - Random bars horizontal DXImageTransform.Microsoft.RandomBars(orientation='horizontal')
22 - Random bars vertical DXImageTransform.Microsoft.RandomBars(orientation='vertical')
23 - Random 위의 filter 들이 random하게 나타남

잘 보셨습니까? 위의 Sample을 보고 어떤 느낌을 받았는지 모르지만 Transitin filter는 웹 페이지 를 Dynamic 하게 만드는 강력한 도구라고 할 수 있습니다. 그야말로 DHTML의 게맛을 알게 된다고나 할까요... Transitional filter에 대해 대략적으로 이해 했으리라 믿고, Transitional filter 역시 각각의 문서로 만들어 설명하도록 하겠습니다.

그리고 Transitional filter의 경우 100 percent scripting을 사용하게 되는데, 워낙 그 방법이 다양하기 때문에 이 페이지에서 전부 다 소개 할 수는 없고 그 중 한 가지 방법을 가지고 간단한 예제를 해 보도록 하겠습니다. 이번 예제의 주인공은 바로 IE5.5 가문의 족보에서 파여 나간 불쌍한 BlendTrans가 되시겠습니다. 우리라도 이 불쌍한 녀석을 데리고 놀며 위로해 주자구요...



stop(), apply(), play() Method의 소개

stop, apply, play... 위론가 뭐시긴가 한다더니 갑자기 웬 딴 청이냐고 말하고 싶으시겠죠. 그렇다면 저는 이렇게 말하겠습니다. '어디들 한 번 데리고 놀아보슈! 데리고 놀아지나...' 라고 말이져. 제 말이 맞죠?. 데리고 노는 방법을 알아야 놀아도 주고 위로도 해 주겠죠. 이미 데리고 놀 줄 아신다구요? 윽!... 그렇다면 더 이상 여기서 유 하실 필요 없으십니다...

물론 blendTrans 만을 데리고 놀기 위함 이라면 구태여 시간을 들여 방법을 배울 필요가 없겠지만 위의 3 가지는 transition을 하기 위한 필수적인 요소랍니다. 단어의 뜻을 한 번 보시죠. Transition 이라는게 뭐겠습니까. 움직이는 동적인 화면을 만든다는 뜻인데, stop은 중지, apply... 현재로서는 설명할 방법 없음, play는 재생 아니겠습니까. 이 정도로 하고 본론으로 들어가죠. Apply에 대해서만 설명하겠습니다.

Apply는 우리가 알고 있는 CD Player나 Multimedia 재생 기기에는 없는 단어 입니다. Apply는 transition 될 내용의 첫 장면(Keyframe)을 capture 하여 다음 장면(Keyframe)까지의 연결 동작을 준비하고 대기 시키는 역할을 합니다. Apply를 사용 안하면 어떻게 되느냐? 되기는 됩니다. 그런데 어떻게 되느냐... Animation 을 예를 들어 설명하면 첫 번재 keyframe 과 두 번재 keyframe 만을, 즉, 중간에 있는 frame 들은 생략하고 딱 2 장의 그림만 play하고 끝 납니다. 뒤에 아무리 많은 keyframe이 있다고 해도 있으나 마나 합니다. Apply의 중요성 잊지 마세요...

이제 드디어 녀석을 위로 할 시간이 된 것 같습니다. 미리 말해 두지만 녀석이 의뭉스럽고 내숭을 잘 떠니까 녀석의 수작에 넘어가지 마세요. 반대로 말하는 버릇이 있어놔서... 아마 그래서 쫓겨났나 봅니다. 그리고 따로 주석은 붙이지 않았습니다. 여러 번 설명 될테니까 궁금해 하시라는 뜻에서 말이져...^^ 예제는 그림으로 하지 않고 그냥 text로 하겠습니다. 다음 강좌는 Static filter 중에서 Gradient filter로 하겠습니다. 그럼 최대한 빠른 시일 내에...

BlendTrans를 위한 Ballad
<html>
    <head>
        <title>BlendTrans의 노래</title>
    <script type="text/javascript">
    <!--
    function fadeOut(obj) {
        obj.style.filter="blendTrans(duration=2)";
        if (obj.filters.blendTrans.status != 2) {
            obj.filters.blendTrans.apply();
            obj.style.visibility="hidden";
            obj.filters.blendTrans.play();
        }
    }
    
    function fadeIn(obj) {
        obj.style.filter="blendTrans(duration=3)";
        if (obj.filters.blendTrans.status != 2) {
            obj.filters.blendTrans.apply();
            obj.style.visibility="visible";
            obj.filters.blendTrans.play();
        }
    }    
    // -->
    </script>
    </head>
    <body>
        <div id="oDiv" style="width: 100%; font:11px;color:tomato;">
        Royal family 에서 버려진 나...<br />
        더 이상 나의 존재 의미는 없다네...<br /><br />
        차라리 FadeOut button 으로 나를 보내주오...<br />
        그러나 FadeIn button 으로 나를 불렀다가...<br /><br />
        또 다시 나를 FadeOut 시킨다면...<br />
        그 것은 나를 두 번 죽이는 일...<br />
        </div>
        <p>
            <button onclick="fadeOut(oDiv)">FadeOut</button> 
            <button onclick="fadeIn(oDiv)">FadeIn</button>
        </p>    
    </body>
</html>
코드 실행 하기

참... 회원 여러분께 부탁 말씀...

오타가 보이거든 제발 쩜 알려 주세요. 문서가 하도 많다 보니까 오타가 잘 안 보이네요. 이 페이지 어딘가도 분명히 있을 겁니다. 만약 협조를 안 하신다면 관리자 제 스스로에게 FadeOut button을 누를지도...^^ 하여간 부탁합니다. 오타 신고 게시판을 만들어야 될 듯...





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

Top
Back
New
검색