메뉴 건너뛰기

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 48031
1615 컬러 와/배색/보색/대비색 등의 웹에필요한색채조율 [수정] [2] piasol 2006.01.26 6795
1614 브러시 사용시 크기를 바꾸는 단축키는? [1] file 이하늘936 2007.11.03 6796
1613 [SWISH]바닷물이 출렁대는 효과 [5] file 여어자 2003.05.18 6803
1612 그림으로 입체상자 만들기 [1] file 제갈승 2002.05.26 6804
1611 기업마크회전하기 [4] 강재형 2002.05.10 6805
1610 [ Hard ] Grunge Special # Part. 2 [8] file Nersion 2004.01.22 6805
1609 손쉬운 패턴 만들고 적용하기 [5] file 낭낭앤 2002.12.04 6810
1608 웹디황용 리터칭 -1 [1] file 웹디황용 2006.05.30 6812
1607 눈내리는 효과 적용하기 [13] file puki 2003.01.16 6814
1606 TV만들기-모니터만들기 (1) [15] file w:)style 2002.06.06 6822
1605 [qoo 그림판 도트②] 캐릭터를 그리자!(얼굴편) [6] file qoo~* 2002.09.03 6827
1604 [도트강좌] 도트로 얼굴만들기-_-;; [11] file 너부리얌 2002.08.21 6828
1603 브러시기능을 이용한 바닷가(2) [6] file 여어자 2003.05.06 6837
1602 그라데이션을 이용한 파스텔톤 스트라이프 [13] file + rynne + 2002.07.26 6838
1601 [활용성 없는 강좌]무지개빛 소용돌이 만들기 [7] file 아르노 2002.11.11 6843
1600 [ 플래시 2004 프로페셔널 ] AS2.0의 기초 [1] Fc 2004.02.25 6846
1599 - 회화 느낌의 효과 [13] file 푸리 2003.01.05 6849
1598 ZBOARD 왕초보전용 강좌!! 제로보드 설치&제거하기 [2] 이윤규 2006.04.25 6851
1597 ▣ 아바타같은[?] 소녀 [8] file rose 2002.08.04 6852
1596 강좌라기보다는 한번 해보시는게 좋으실듯 사이버 포뮬러 팬으로서 ㅎㅎ;(있다면요 ㅋ) [1] file 키드 2005.09.26 6859