[팁] 플래시 다이나믹 메뉴 설정하기!

* 다소 알려진 팁일수도 있지만, 꽤 유용하게 사용할 수 있을 것 같아 포스트합니다.

사이트들을 돌아다니다 보면, 플래시로 메뉴를 다이나믹하게 구성한 경우를 많이 볼 수 있습니다.

일반적으로 사이트의 메뉴가 여러 개라 그룹화가 필요할 경우... 상위 카테고리 밑에 하위 카테고리를 배치하는 방식으로 메뉴를 만들게 됩니다. 하지만, 메뉴의 수가 많을 경우 공간상의 문제때문에 (메뉴를) 배치하기가 쉽지 않을 때가 많습니다.
(물론 메뉴자체를 세로로 만들어 다수의 메뉴를 아래로 쭉~ 넣을수도 있지만, 대부분의 경우 가로형태의 메뉴를 더 많이 사용하기 때문에... 가로메뉴의 경우를 고려해 봤습니다.)

이럴 때 쓸 수 있는 것이 바로 오늘 설명할 방법(코드)입니다. 이 방법을 사용할 경우, 마우스가 오버되기 전에는 (높이가)짧은 상위 카테고리의 메뉴만 보여주고, 상위 메뉴에 마우스를 올릴 경우(마우스 오버시) 하위 카테고리의 메뉴가 애니메이션으로 부드럽게 등장하는 식으로 보여줄 수 있습니다. 물론, 하위 카테고리는 상위 카테고리에 비해 (높이가)좀 더 길게 표시되기 때문에 좀 더 많은 수의 메뉴들을 포함할 수 있습니다.

백문이불여일견! 아래 경우를 통해 직접 살펴보도록 하겠습니다. ^_^;
먼저, 일반적인 메뉴구성시의 경우를 살펴보겠습니다. 아래의 경우, 플래시의 높이를 하위 카테고리 메뉴가 노출되었을 때까지 포함했기 때문에(상위:50px, 하위:150px), 메뉴의 총 높이는 200px이 됩니다.
따라서, 메뉴로부터 아래에 있는 "이 곳은 HTML 영역입니다."라는 부분과는 상당한 거리가 발생합니다.
(실제로는 가로 800px, 세로 200px의 메뉴이지만, 잘림방지를 위해 80% 축소하였습니다.)





하지만, 상위 메뉴만을 노출시킬 경우 메뉴의 높이는 아래에 보시는 바와 같이 50px밖에 되지 않기 때문에 공간활용을 좀 더 효율적으로 할 수 있습니다. 물론 상위 메뉴에 마우스를 오버시 하위메뉴가 애니메이션으로 표시됩니다. ^_^;





그럼, 어떻게 이 같은 배치를 할 수 있는지 살펴볼까요?
첫 번째 키는 아래 HTML 코드에서 굵게 표시한 것과 같이 DIV태그의 스타일에 있습니다.

<div style="position: absolute; z-index: 2;">
플래시 소스
</div>
원하는 텍스트

abolute라는 말에서 알 수 있듯이... 위 스타일을 통해 플래시 소스를 포함하고 있는 DIV의 위치를 강제로 설정해주게 되고, 궁극적으로 아래쪽에 원하는 텍스트 부분을 출력할 수 있게되는 것입니다.
z-index값은 다른 레이어와의 중첩여부에 따라 값을 증가시키면 됩니다. ^_^;(메뉴가 제일 위에 보여야 하니까요 ㅎㅎ;)


그럼, 이제 플래시 소스를 살펴보도록 할까요? 플래시 소스에 숨어있는 두 번째 키는 바로 플래시 투명도 설정과 관련된 것입니다. 아래의 스크립트를 살펴볼까요?

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' CODEBASE='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='너비' height='높이'>
<param name='movie' value='SWF파일명'>
<param name='quality' value='high'>
<param name='menu' value='false'>
<param name='wmode' value='transparent'>
<embed src='SWF파일명' QUALITY='high' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer' TYPE='application/x-shockwave-flash' width='너비' height='높이' wmode='transparent'></embed>
</object>

위 코드에서 검정색으로 굵게 표시한 부분들은 자신의 상황에 맞게 고치면 됩니다. :) 유심히 보셔야 할 곳은 바로 wmode라는 속성의 값(Value)입니다. 위 예제의 경우, 두 군데에서 모두 "transparent"(투명한)로 설정되어 있는데, 이것이 바로 오늘의 키포인트입니다.

이 속성때문에 플래시에서 공간을 차지하고 있지 않은 빈 공간들이 모두 투명하게 바뀌게 되고, 이 투명한 부분을 통해 아래쪽에 원하는 텍스트가 보여지게 되는 것입니다.
이상으로 짧은 플래시 메뉴제작 팁을 마칩니다. ^_^;
간단한 예제인데도, 직접하려니까 시간이 꽤 많이 걸려버렸네요 @_@;