메뉴 건너뛰기

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 48035
1615 심플한 버튼 만들기 [15] file Win'X' 2004.03.01 23149
1614 파랑색 배경을 회색으로 바꾸는 방법 [7] file 김진현 2004.02.29 10238
1613 색다른 방식의 아쿠아 만들기. [5] file Win'X' 2004.02.29 20813
1612 [ 사각셀 : 유기체 ] 오케이케시백 - 진보된 코드/무비 [12] file Fc 2004.02.28 11514
» [ 사각셀 : 유기체 ] 오케이케시백 네비게이션 형태 file Fc 2004.02.27 12421
1610 [ AS2.0 ] import를 통한 package의 이해 [1] file Fc 2004.02.27 3319
1609 (왕초보도 따라하는) 심플한 버튼 만들기 [53] file SaRa's 2004.02.27 38085
1608 [ 플래시 2004 프로페셔널 ] AS2.0 클래스 작성 [4] Fc 2004.02.26 4765
1607 [ XML 소켓 채팅 ] [2] file Fc 2004.02.26 514
1606 이상한.... 그림만들어 보기...-_-;;; [11] file Win'X' 2004.02.25 12237
1605 [기능설명]이것때문에라도 8.0을 설치해야한다! Path따라 글쓰기! [31] file Smileru 2004.02.25 19200
1604 [ 플래시 2004 프로페셔널 ] AS2.0 클래스를 사용하기 위해서 이해해야 할 키워드 [2] Fc 2004.02.25 10809
1603 [ 플래시 2004 프로페셔널 ] AS2.0의 기초 [1] Fc 2004.02.25 6846
1602 [ 플래시 게시판 ] 튜토리얼 - LoadVars클래스를 사용한 기초게시판 file Fc 2004.02.25 4846
1601 [ 플래시 게시판 ] 튜토리얼 - loadVariables를 사용한 기초게시판 [2] file Fc 2004.02.25 10388
1600 [ PHP ] 플래시 게시판을 만들기 위한 기초 3 [5] file Fc 2004.02.25 12076
1599 [ PHP ] 플래시 게시판을 만들기 위한 기초 2 [4] file Fc 2004.02.25 6104
1598 [ SQL ] 플래시 게시판을 만들기 위한 기초 1 [2] file Fc 2004.02.25 11978
1597 ScrollPane 사용방법 [2] Win'X' 2004.02.25 4449
1596 사이버틱한 물방울이 고여있는... [7] file Win'X' 2004.02.24 12507