본문 바로가기

플래시가 삽입된 페이지에서 현재페이지 인식하기(네비게이션, GNB)

반응형
 lec32.zip (9Kbytes)


html 페이지에 따라 해당 메뉴를 표시해주는 메뉴를 만들어볼려고 합니다.
물론 플래시 무비는 하나구요.
이 소스는 html 페이지가 그리 많지 않고 통프레임으로 이루어진 사이트일 때 유용하게 사용할 수 있겠습니다.


:: 완성된 무비

여기를 클릭해주세요.



:: 만드는 방법

주요한 부분만 설명을 드리겠습니다.

1. 메뉴는 11강에서 만든 메뉴입니다. 1프레임의 프레임 액션을 아래와 같이 수정했습니다.
overState는 각 메뉴의 롤오버/롤아웃 상태를 체크하기 위해 사용한 변수입니다.

_root["MenuName" + pageNum + "_mc"].overState = true;    //변수 pageNum의 값은 html 문서에서 넘어옵니다. 해당 메뉴에 대한 롤오버 액션이 실행되게 overState 값을 true로

//각 메뉴에 링크될 페이지를 배열에 저장
Link_array = [];
Link_array[0] = "page1.html";
Link_array[1] = "page2.html";
Link_array[2] = "page3.html";
Link_array[3] = "page4.html";
Link_array[4] = "page5.html";

for (var i = 1; i < 6; i++) {
    _root["MenuName" + i + "_mc"].onRollOver = function() {    //메뉴가 롤오버되면
        for (var j=1; j < 6; j++) {
            _root["MenuName" + j + "_mc"].overState = false;    //일단 모든 메뉴를 롤아웃 상태로 하고
        }
        this.overState = true;    //해당 메뉴만 롤오버 상태로
    };

    _root["MenuName" + i + "_mc"].onRollOut = function() {    //메뉴가 롤아웃되면
        this.overState = false;    //해당 메뉴를 롤아웃 상태로
        _root["MenuName" + pageNum + "_mc"].overState = true;    //해당 html 페이지의 메뉴를 롤오버 상태로
    };
 
    _root["MenuName" + i + "_mc"].onDragOut = function() {    //메뉴가 드래그아웃되면
        this.overState = false;    //메뉴를 롤아웃 상태로
        _root["MenuName" + pageNum + "_mc"].overState = true;    //해당 html 페이지의 메뉴를 롤오버 상태로
    };
 
    _root["MenuName" + i + "_mc"].onRelease = function() {    //메뉴를 클릭하면
        var idx = this._name.charAt(8);
  
        //메뉴를 클력하면 해당 페이지로 이동하게
        getURL(Link_array[idx -1]);
    };
 
    _root["MenuName" + i + "_mc"].onEnterFrame = function() {
        var idx = this._name.charAt(8);
        if (this.overState) {    //메뉴가 롤오버 상태이면 롤오버 액션 취하게
            this.nextFrame();
            _root["MenuBack" + idx + "_mc"].nextFrame();
        } else {    //메뉴가 롤아웃 상태이면 롤아웃 액션 취하게
            this.gotoAndStop(1);
            _root["MenuBack" + idx + "_mc"].gotoAndStop(1);
        }
    };
}




2. 각 html 문서를 열어 플래시 무비(*.swf)가 삽입된 부분을 확인해주세요.  swf 파일명 뒤에 "?pageNum=1"과 같이 되어 있는 것을 볼 수 있습니다.
플래시 무비에 있는 변수 pageNum1이라는 값을 넘겨주는 것입니다. 즉, pageNum은 플래시 무비에서 해당 페이지를 인식하기 위해 사용하는 변수입니다.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="615" HEIGHT="70" id="lec32" ALIGN="">
    <PARAM NAME=movie VALUE="lec32.swf?pageNum=1"> 
    <PARAM NAME=quality VALUE=high> 
    <PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="lec32.swf?pageNum=1" quality=high bgcolor=#FFFFFF  WIDTH="615" HEIGHT="70" NAME="lec32" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

다른 html 문서들도 아래와 같습니다.

page2.html   ⇒    "lec32.swf?pageNum=2"
page3.html   ⇒    "lec32.swf?pageNum=3"
page4.html   ⇒    "lec32.swf?pageNum=4"
page5.html   ⇒    "lec32.swf?pageNum=5"

 

출처 : www.tiptech.net


반응형