웹마스터 팁

  2. Support
  3. 웹마스터 팁

메뉴에 플래시 적용하기

2007.10.23 12:15

지허

submenulist.swf
제로보드4로 운영하던 사이트에서 사용하던 플래시 메뉴를
제로보드XE에 적용시켜 봤습니다.

제로보드XE에서 플래시 파일을 불러들이는 방식이 embed 태그없이 아주 간편하게 되어 있어서
오히려 적용하기기 수월해졌습니다.

제로보드4에서 사용할 때는 한 플래시 파일에 메뉴 버튼을 필요만큼 미리 만들어서 사용했었는데
한 플래시 파일에 한 버튼만 두고, 레이아웃의 메뉴 불러들이는 방식으로 플래시 파일을 삽입하는 방식으로 적용했습니다.

우선 레이아웃에서 플래시 파일을 읽어들이는 방식은
<script type="text/javascript">displayMultimedia("http://주소/submenulist.swf", "150","200",false);</script>
이와 같이 불러 들일 수 있지요

이 플래시 파일에 변수를 전달하려면
url  부분을 아래와 같이 확장하면 되더군요..
http://주소/submenulist.swf?변수1=값1&변수2=값2&변수3=값3.....
메뉴의 갯수가 고정적이라면 첨부한 submentlist.fla를 수정하여 위와 같은 방식으로 사용하면 될것입니다.

이제 submenu1.swf를 이용하여 레이아웃의 sub 메뉴에 적용시키는 방법을 말씀드리겠습니다.

레이아웃의 서브 메뉴 부분을 보면
            <!-- 왼쪽 2차 메뉴 -->
   <img src="./images/blank.gif" alt="" class="mask" />
            <!--@if($menu_1st)-->
   <ol id="lnb">
        {@ $idx = 1 }
          <!--@foreach($menu_1st['list'] as $key => $val)-->
            <!--@if($val['text'])-->
          <li <!--@if($val['selected'])-->class="on"<!--@end-->>
            <a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
              {$val['text']}</a>
                    <!-- main_menu 3차 시작 -->
                    <!--@if($val['list'])-->
     <ul>
                    <!--@foreach($val['list'] as $k => $v)-->
                      <!--@if($v['text'])-->
                  <li <!--@if($v['selected'])-->class="on"<!--@end-->>
                    <a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
                      {$v['text']}</a>
                  </li>
                      <!--@end-->
                    <!--@end-->
     </ul>
                    <!--@end-->
    </li>
                {@$idx++}
            <!--@end-->
          <!--@end-->
   </ol>
            <!--@end-->

이것을 아래와 같이 수정합니다.
            <!-- 왼쪽 2차 플래시 메뉴 -->
   <img src="./images/blank.gif" alt="" class="mask" />
            <!--@if($menu_1st)-->
   <ol id="lnb">
             {@ $idx = 1 }
                {@ $selbtnno = 0 }
                {@ $selbtn3no = 0 }
                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
                <!--@if($val['selected'])-->
                    {@ $selbtnno = 1 }
                <!--@else-->
                    {@ $selbtnno = 0 }
                <!--@end-->
    <li>
          <script type="text/javascript">displayMultimedia("http://주소/submenu1.swf?pselbtn={$selbtnno}&pbtn1menu={$val['text']}&pbtn1url={$val['href']}", "190","21",false);</script>
                    <!-- main_menu 3차 시작 -->
                    <!--@if($val['list'])-->
     <ul <!--@if($val['selected'])-->style="display:block"<!--@end-->>
                    <!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])-->
                <!--@if($v['selected'])-->
                    {@ $selbtn3no = 1 }
                <!--@else-->
                    {@ $selbtn3no = 0 }
                <!--@end-->
      <li>
          <script type="text/javascript">displayMultimedia("http://주소/submenu1.swf?pselbtn={$selbtn3no}&pbtn1menu={$v['+ '+ 'text']}&pbtn1url={$v['href']}", "190","21",false);</script>
      </li>
                    <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
    </li>
                {@$idx++}
                <!--@end--><!--@end-->
   </ol>
            <!--@end-->
           


변경된 부분을 비교해 보면
2차 메뉴에서
<li <!--@if($val['selected'+ '])-->class="on"<!--@end-->>
            <a href="{$val['href'+ ']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
              {$val['+ 'text']}</a>


이 부분을
<li>
          <script type="text/javascript">displayMultimedia("http://주소/submenu1.swf?pselbtn={$selbtnno}&pbtn1menu={$val['text']}&pbtn1url={$val['href']}", "190","21",false);</script>
이렇게 변경했습니다.
<li>의 selected되었을 때 class를 on으로 변경하는 부분이 지워진 것입니다.
class가 on이어야 3차메뉴가 display되기 때문에 이부분을 생략한 대신 3차메뉴 부분에서 
   <ul <!--@if($val['selected'])-->style="display:block"!--@end-->
이 부분을 첨가했습니다.
그리고 새창열기 옵션은 사용하지 않는 것으로 전제하고 window.open 부분도 생략했습니다.

다음 변경된 부분에서 플래시 파일을 불러들일 때 url 옵션
http://주소/submenu1.swf?pselbtn={$selbtnno}&pbtn1menu={$val['text']}&pbtn1url={$val['href'+ ']}

변수 pselbtn과 값 {$selbtnno}
이 변수와 값은 레이아웃이 로딩될 때 메뉴가 선택되어 있는가의 여부에 따라 플래시 버튼에 다른 액션을 주기 위한 값입니다.
{$selbtnno}을 할당하는 부분은 위에서 찾으실 수 있을 겁니다.
pbtn1menu와 pbtn1url에 각각 메뉴 text와 메뉴 href를 할당합니다.

이제 첨부한 submenu1.swf를 사이트에 적당한 위치에 업로드하고
http://주소/submenu1.swf 주소 부분만 수정해서 쓰시면 됩니다..

더불어서 플래시 소스 파일도 올려 놓겠습니다.
한 층 세련된 디자인의 메뉴용 플래시 파일들이 올라오길 바랍니다.

맨 앞에서 적은 것처럼
한 파일에 여러개의 메뉴 버튼를 적용하려면
submenutest.fla처럼 메뉴 버튼 갯수를 조절해서 쓰셔도 됩니다.


태그 연관 글
  1. [2017/01/12] 묻고답하기 admin 페이지 메뉴 오류 by 쿠닌 *2
  2. [2016/10/13] 묻고답하기 어드민 페이지 메뉴 by 쿠닌 *2
  3. [2015/01/12] 묻고답하기 사이트 메뉴 편집에서 메뉴 이름 수정이 되지 않습니다. by 구큰타 *7
  4. [2014/11/07] 웹마스터 팁 ipTIME NAS 에 설치한 XE, 다올CMS 첨부파일 버튼 무반응 해결 by 사이버짱 *1
  5. [2014/08/03] 묻고답하기 !DOCTYPE html 크롬에서 플래시 간격발생 문제 by vivid30 *3
, , , 이 게시물을
좋아요(+3)
목록
제목 글쓴이 날짜
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] 만쓰별(정만) 2009.01.24
심플한 XML 플래시 이미지 갤러리 [7] file maxtabby 2010.12.21
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] file 남규성 2004.05.05
메인화면에 플래시 쉽게 삽입하는 방법.. [12] 청개구리00 2008.08.30
미디어(이미지,플래시 등) 파일 무단링크 차단 [8] 도라란 2011.07.11
플래시 랜덤하게 불러오기 [9] 선비숨결 2009.04.21
XE 홈피에 예쁜 음악BGM 넣는 방법(프레임 분리형 플래시BGM) 푸른커튼2 2011.04.18
네이버 메인페지 플래시광고처럼 들갈때마다 바뀌게 하기. [3] 좋은남자 2006.08.30
[추천 강의] 플래시로 보는 노프레임 홈 만들기! [63] ROBIN 2002.09.18
익스플러로 플래시 영역 박스 생김과 이 컨트롤을 활성화.. [14] 도토리맘 2006.05.15
플래시 영역에 박스가 생기는것 [4] 로그인 2006.05.03
텍스트 색상이 플래시처럼 바뀌는 소스. java 2006.04.15
플래시 칼라피커 두번째 버전 [1] 행복한고니 2005.03.16
홈페이지를 풀스크린으로 띄우자 - 올플래시로 보이는군요. [21] Multi_Taeji 2004.12.10
iFlower 윈도우리스 플래시 ActiveX 컨트롤 덴디 2004.11.16
ActiveX 플래시 이미지캡쳐 컨트롤 iFlower [1] 덴디 2004.11.15
Javascript + 플래시 칼라피커 [6] 행복한고니 2004.10.08
[초간단 자바스크립트!] 플래시 FullSize로 보여주기 [4] ∑Ztxy 2004.02.05
플래시느낌의 유동적인 메뉴 [9] jabusim 2003.11.13
[초간단 자바스크립트!] 자바로 플래시 따라하기! [3] ∑Ztxy 2003.10.15
태그 쓰기