메뉴 건너뛰기

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 48033
191 스위시맥스6강[Goto액션활용] [1] 에듀멘 2006.02.28 7801
190 아름다운 대한민국 플래시,렉토라강좌 윤선미 2007.02.12 7914
189 스위시강좌 // 불 켜고 끄기 (제작 : 달에 잠긴수련) [1] 문학의향기 2006.08.09 8014
188 [팁] 플래시 웹사이트의 사용성(Usability)을 높이기 위한 10가지 팁 [6] Rootin 2003.02.04 8104
187 답답강좌 -ㅂ- 무게감있게 떨어지는 공 [11] file 김지성 2003.01.08 8125
186 [플래시 MX 동영상 강좌] 11. 혼합 트위닝 [6] 서기 2005.05.30 8142
185 smooth한 움직임을 표현해보자 [2] 최대호 2007.01.03 8213
184 테두리 없는 플래시 윈도우 띄워주기 [7] 홈때기~♪ 2005.04.19 8233
183 ActionScript 2_4 sample [2] 하나둘 2006.07.20 8250
182 플래시에서 포토샵에서 작업한 깔끔한 투명 이미지 임포트 시키는 방법 [5] 홈때기~♪ 2005.04.19 8285
181 [플래시 MX 동영상 강좌] 15. 이미지 겔러리 제작하기 [9] 서기 2005.06.03 8367
180 [플래시 동영상강의] 플래시 위에 다른페이지 띄우기 [6] 서기 2006.03.17 8403
179 스위시맥스- 한글버젼 동영상강좌[1강~12강] 에듀멘 2006.03.08 8444
178 초를 켜고 명상을 해봐요 [1] [6] file oracleRider 2003.05.28 8467
177 사용사례 -전락북도[군산초등학교-정민수선생님] [1] 에듀멘 2006.08.11 8496
176 랜덤한 색상을 지닌 원형돌리기 [4] gimbob 2003.02.18 8566
175 [동영상]퍼즐을 맞추자!! [2] 이희덕 2002.09.24 8575
174 플래시 MX 2005 임박.... 그리고.. [8] Fc 2004.12.23 8639
173 [플래시 MX 동영상 강좌] 18. 에니메이션 버튼 제작하기 [12] 서기 2005.06.07 8642
172 불꽃이 흩어 지는 글씨효과만들기 [6] file 송정민 2006.10.24 8684