메뉴 건너뛰기

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 48030
231 부드럽게 움직이는 효과를 이용한 마스크효과 [4] file totomylove 2005.02.06 14066
230 [동영상]크로스선 만들기 [6] 이희덕 2002.09.24 13970
229 버튼에 풍선 도움말 넣기 [4] gimbob 2003.03.18 13926
228 [초보만-_-;]버튼내용 "*.txt" 로 보여주자 [8] file 화이트크로우™ 2003.07.03 13655
227 플래쉬로 그림 말아보기.ㅡㅡ; [5] file c_⊙_⊙_l 2003.02.24 13645
226 [플래시 MX 동영상 강좌] 5. 레이어를 이용한 에니메이션 [16] 서기 2005.05.24 13565
225 [중급] 플래시로 만드는 가위 바위 보 게임 [8] file 박승제 2004.04.24 13471
224 [초급] 날아다니는 원만들기. [7] file 요니에 2002.10.23 13469
223 Flash ActionScript 추가 file 김종판 2007.11.08 13432
222 [플래시 MX 동영상 강좌] 23-1. 스르륵 서브메뉴 사라지게 하기 [20] 서기 2005.06.22 13410
221 스크롤 이미지 이용한 예제 file 여어자 2005.01.16 13367
220 초를켜고 명상을 해봐요 [2] [6] file oracleRider 2003.06.06 13302
219 플래쉬에 마우스를 갔다댔을 시 자신이 원하는 마우스이미지로 바꾸기; [9] GoToHeaven 2003.05.27 12911
218 [폭탄강좌] 플래쉬로 캐릭터 따라그리기.허덥 [17] {동준짱} 2002.08.07 12825
217 praystation effect따라 하기 [8] gimbob 2002.11.24 12726
216 [기초] 가속도 [6] file DMG™ 2003.05.12 12626
215 [팁]반복할때 끊기지 않는 자연스러운 느낌주기.. [8] Archi* 2002.06.29 12537
» [ 사각셀 : 유기체 ] 오케이케시백 네비게이션 형태 file Fc 2004.02.27 12421
213 예쁜 구슬만들기~~~~~~ [8] 응? 2003.01.07 12360
212 [플래시 MX 동영상 강좌] 2. 태극기 그리기 [18] 서기 2005.05.22 12345