메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의




이 파일을 만들기 위해서는 4가지의 속성을 컨트롤 해야 합니다.
즉, x,y좌표와 width,height를 컨트롤 할 수 있어야 합니다.
이렇게 x,y좌표를 가지게 된다면 항상 고정된 좌표로 이동을 요하게 될 것입니다.
width,height의 경우는 이동된 좌표에 의해서 셀의 확대 축속작업을 하게 됩니다.
마우스가 가령 왼편의 상단 첫번째 셀에 마우스를 올렸을 경우 해당 개체가 커지고 나머지는 작아져야 합니다.
그래서 결국 x,y,width,height 이렇게 4가지의 변수를 요하게 됩니다.
현재 무비의 셀은 4개입니다.
s0,s1,s2,s3
그렇다면 이 셀에 대해서 변화되는 요소는 총 4가지입니다.
그리고 마우스가 셀에 있지 않고, 셀의 외부에 있는 경우를 덧붙여 줘야 합니다.
그렇게 되면 총 5가지 변화를 요하게 됩니다.
1. 첫번째 셀에 마우스를 올렸을 때
2. 두번째 셀에 마우스를 올렸을 때
3. 세번째 셀에 마우스를 올렸을 때
4. 네번째 셀에 마우스를 올렸을 때
5. 아무런 셀에 마우스를 올리지 않았을 때(즉, 일반적인 상태)

그리고 이 다섯가지에 대해서 모두 동일한 4가지 속성이 적용됩니다.
1. x - x좌표
2. y - y좌표
3. width - 가로넓이
4. height - 세로넓이
가령 첫번째 셀에 마우스를 올렸다면? 이 1~4의 모든 요소가 동일하게 개체에 적용되어야 합니다.

이렇게 하기 위해서 기본적으로 x,y,width,height에 대한 값을 미리 모두 정해놓아야 합니다.
posX = new Array();
posY = new Array();
widthX = new Array();
heightY = new Array();
그래서 다음과 같은 배열 객체가 만들어진 것입니다.
다음으로 이 배열에 실제의 값을 넣어줘야 합니다.
지금예제의 코드에서는 0번째 요소를 무비클립 첫번째 요소 즉, 왼편 상단의 셀로 간주합니다.
1번째요소는 무비클립 두번째 요소, 즉, 오른편 상단의 셀로 간주합니다.
나머지도 이와 동일합니다.
그렇다면 posX 하나를 정의해 본다면 다음과 같을 것입니다.
posX[0] = [0, 200, 0, 200, 260];
posX[1] = [0, 60, 0, 60, 260];
posX[2] = [0, 200, 0, 200, 260];
posX[3] = [0, 60, 0, 60, 260];
posX[4] = [0, 130, 0, 130];

우선 posX[0]번째 요소의 값이 0, 200, 0, 200, 260인 이유는
가로로 놓여질 셀이 두개이고, 셀 하나당 크기가 130이기 때문에 마지막 값은 260으로 잡았습니다.
그렇다면 0, 200, 0, 200은 무슨 말일까요?
다음처럼 사용될 수 있습니다.


0,200,0,200은 결국 0, 3개체의 좌표값을 나타냅니다.
첫번째 개체에 마우스를 올린다고 해도 3번째 개체 역시 x좌표에는 변함이 없기에 0을 선정하게 된 것입니다.
그렇다면 두번째 개체와 네번째 개체는? 이들은 모두 200으로 좌표를 변경해줘야 합니다.
이유는 최종무비와 같이 셀이 늘어나고 줄어드는 것을 보여줘야 하기 때문입니다.

posX[0] = [0, 200, 0, 200, 260];
이제 이 값이 무엇을 의미하는지 이해하리라 봅니다.
정리하자면
posX[0][0] = 0  은 왼편   상단 셀의 x좌표
posX[0][1] = 200은 오른편 상단 셀의 x좌표
posX[0][2] = 0  은 왼편   하단 셀의 x좌표
posX[0][3] = 200은 오른편 하단 셀의 x좌표

posX[0][4] = 260 -- 이 값은 개체의 폭(넓이)를 계산할 때 사용되는 값이지만 현재는 사용되지 않는 값입니다. 후에 코드수정을 하게 될 경우 필요할 수 적어주는 것이 바람직합니다.



이제 x좌표값이 변해지는 것과 동시에 크기가 변해야 합니다.
그래서 widthX라는 배열 요소가 가진 좌표값을 다음처럼 만들 수 있습니다.
widthX[0] = [200, 60, 200, 60];
([0]은 왼편상단의 첫번째 메뉴를 나타냅니다.)
그래서 첫번째 개체에 마우스를 올리게 되면 x좌표0을 할당하며 넓이는 200을 해주게 됩니다.
그래서 200이라는 값이 사용되었습니다.
다음의 60은 왼편의 셀이 확대되면 오른편의 셀은 그만큼 축소될 필요가 있습니다.
확대 축소의 합은 260을 넘지 않아야 하므로 확대+축소의 값을 계산하면 항상 260이 됩니다.

다음의 200은 역시 하단 왼편 셀에 적용된 크기비율입니다.
마우스가 올라가는 개체의 셀과 크기가 동일해야 하므로 역시 200을 주었으며, 바로 옆의 셀은 그만큼 축소될 필요가 있으므로 60을 사용하게 되었습니다.

전체 셀의 가로크기는 130, 세로는 120입니다.
그래서 마우스를 내린다면 가로크기는 모두 동일한 크기를 적용해야 합니다. 바로 다음과 같습니다.
widthX[4] = [130, 130, 130, 130];

물론 셀의 y좌표와 높이역시 지금처럼 구할 수 있습니다.

다음은 무비에서 사용된 전체코드입니다.




Code
-------------------------------------------------
posX = new Array();
posY = new Array();
widthX = new Array();
heightY = new Array();
posX[0] = [0, 200, 0, 200, 260];
posX[1] = [0, 60, 0, 60, 260];
posX[2] = [0, 200, 0, 200, 260];
posX[3] = [0, 60, 0, 60, 260];
posX[4] = [0, 130, 0, 130];
widthX[0] = [200, 60, 200, 60];
widthX[1] = [60, 200, 60, 200];
widthX[2] = [200, 60, 200, 60];
widthX[3] = [60, 200, 60, 200];
widthX[4] = [130, 130, 130, 130];
posY[0] = [0, 0, 180, 180, 240];
posY[1] = [0, 0, 180, 180, 240];
posY[2] = [0, 0, 60, 60, 240];
posY[3] = [0, 0, 60, 60, 240];
posY[4] = [0, 0, 120, 120, 240];
heightY[0] = [180, 180, 60, 60];
heightY[1] = [180, 180, 60, 60];
heightY[2] = [60, 60, 180, 180];
heightY[3] = [60, 60, 180, 180];
heightY[4] = [120, 120, 120, 120];
over = false;
width_receive = new Array();
for (var i = 0; i<4; i++)
{
        Box["s"+i].stop();
        width_receive[i] = posX[4][i+1]-posX[4][i];
        Box["s"+i]._width = width_receive[i];
        Box["s"+i].onRollOver = function()
        {
                over = true;
                this.play();
                N = Number(this._name.substring(1));
                this.onRollOut = function()
                {
                        over = false;
                        this.gotoAndStop(1);
                };
        };
}
this.createEmptyMovieClip("empty", 21);
over_test = function ()
{
        over = false;
        this.empty.onEnterFrame = function()
        {
                for (var i = 0; i<4; i++)
                {
                        if (over)
                        {
                                Box["s"+i]._x -= (Box["s"+i]._x-posX[N][i])*.3;
                                Box["s"+i]._y -= (Box["s"+i]._y-posY[N][i])*.3;
                                Box["s"+i]._width -= (Box["s"+i]._width-widthX[N][i])*.3;
                                Box["s"+i]._height -= (Box["s"+i]._height-heightY[N][i])*.3;
                                if (Math.abs(Box["s"+i]._x-posX[N][i])<1)
                                {
                                        Box["s"+i]._x = posX[N][i];
                                }
                                trace(Box["s"+2]._y);
                        }
                        if (!over)
                        {
                                Box["s"+i]._x -= (Box["s"+i]._x-posX[4][i])*.3;
                                Box["s"+i]._y -= (Box["s"+i]._y-posY[4][i])*.3;
                                Box["s"+i]._width -= (Box["s"+i]._width-130)*.3;
                                Box["s"+i]._height -= (Box["s"+i]._height-120)*.3;
                        }
                }
        };
};
over_test();





----------------------------------------------
[Fc]
+Visual Programmer
+I'm from your friendsofed Fc
+http://www.ysbn200.com
+http://www.flashconference.co.kr
+한국 플래시컨퍼런스 코리아
+jk9089@hanafos.com
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48026
131 [초급] 맞물려 돌아가는 Gear 만들기 - 1 file 박승제 2004.04.19 12041
130 롤링되는 네비게이션 [14] file 여어자 2004.04.15 25379
129 _lockroot 에 대해서 [3] 박병욱 2004.03.30 9961
128 가속도붙은 무비클립이 따라다니는 메뉴 수정 [7] file 신광원 2004.03.30 19494
127 Newtry식 플래시무비 만들기 - "창문너머 흐르는 구름" [10] file Newtry 2004.03.19 17114
126 플래쉬 버튼오류 바로 잡기[마우스아이콘 고정] [8] file 프리서버 2004.03.11 10761
125 [ 사각셀 : 유기체 ] 오케이케시백 - 진보된 코드/무비 [12] file Fc 2004.02.28 11514
» [ 사각셀 : 유기체 ] 오케이케시백 네비게이션 형태 file Fc 2004.02.27 12421
123 [ AS2.0 ] import를 통한 package의 이해 [1] file Fc 2004.02.27 3319
122 [ 플래시 2004 프로페셔널 ] AS2.0 클래스 작성 [4] Fc 2004.02.26 4765
121 [ XML 소켓 채팅 ] [2] file Fc 2004.02.26 514
120 [ 플래시 2004 프로페셔널 ] AS2.0 클래스를 사용하기 위해서 이해해야 할 키워드 [2] Fc 2004.02.25 10809
119 [ 플래시 2004 프로페셔널 ] AS2.0의 기초 [1] Fc 2004.02.25 6846
118 [ 플래시 게시판 ] 튜토리얼 - LoadVars클래스를 사용한 기초게시판 file Fc 2004.02.25 4846
117 [ 플래시 게시판 ] 튜토리얼 - loadVariables를 사용한 기초게시판 [2] file Fc 2004.02.25 10386
116 [ PHP ] 플래시 게시판을 만들기 위한 기초 3 [5] file Fc 2004.02.25 12076
115 [ PHP ] 플래시 게시판을 만들기 위한 기초 2 [4] file Fc 2004.02.25 6104
114 [ SQL ] 플래시 게시판을 만들기 위한 기초 1 [2] file Fc 2004.02.25 11978
113 ScrollPane 사용방법 [2] Win'X' 2004.02.25 4449
112 가속도붙은 무비클립이 따라다니는 메뉴 ? [17] file flashman 2004.02.19 17602