메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

이제 유기체 무비 형태의 두번째 시간입니다.
유기체 무비는 사실상 물리적인 부분과 수학적인 부분이 많이 요하리라고 생각들 수 있지만 실상은 논리(Ligic-로직)를 필요로 합니다.
논리란 말은 사물의 이치를 논리적인 구조로 풀어가는 것을 나타냅니다.
즉, 우리가 흔희 일상에서 접하는 부분들이 대부분입니다.
다음처럼 약속에 대한 예를 들 수 있습니다.
가령 약속시간은 저녁 7시입니다.
늦어도 약속장소에 7시 5분까지 가야된다고 할때...
약속장소와 약속장소를 가기전 마지막 장소의 자신의 위치와 약속장소의 거리를 계산한다음, 교통수단의 시간까지 생각할 것입니다.
버스를 타고 가면 길이 막히지 않을 경우 1시간안에 도착한다면 저녁 6시에는 버스를 타야합니다.
그렇다면 적어도 승강장까지는 5시 50분까지는 도착되어야 합니다.
그런데 지하철은 기다리는 시간 포함해서 1시간 5분입니다.
그리고 지하철에서는 다시 노선이 나누어져 있습니다. 그래서 내가 있게될 마지막 위치와 약속장소와의 위치를 노선도를 보거나 혹은 생각하면서 몇호선을 타고 어디까지 간 다음 그리고 다시 몇호선을 갈아타야 목적지 까지 가게 되는..

결국 이런 것이 모두 논리입니다.
플래시의 액션스크립트를 소스를 도용하는 것이 아닌 논리적인 부분을 많이 생각하며 코드를 스스로 만들어간다면 두뇌 발달도 향상될 것입니다.






지금의 파일은 아래목록보다 더 진보된 무비입니다.
하지만 코드 사용은 더 간단해졌습니다.

기존에는 하나의 배열에서 이전배열의 값을 빼주어야 하는 조금 복잡한 점이 있었습니다.
다음은 _x좌표에 사용된 코드입니다.
Box["s"+i]._x -= (Box["s"+i]._x-posX[N][i])*.3
원시데이터라고 잘 알고 있을것입니다.
실제 데이터값을 빼어 사용하는 형태입니다.
하지만 이것보다는 무비를 좀더 간편하게 모듈화를 할 필요가 있습니다.
즉, 함수를 필요로 합니다.

우선 x, y, width, height에 대한 함수 X, Y, W, H가 필요합니다. 이렇게 되면 여러차례 같은 공식을 반복해서 쓸필요가 없습니다.
X = function (){}
Y = function (){}
W = function (){}
H = function (){}

그리고 이번 예제에서는 삼항식을 사용했습니다.
삼항식은 식을 좀더 보기쉽게 하며, 좀더 사람의 말과 가까운 식으로 프로그래밍에서 유일하게 존재하는 식입니다.

삼항식의 문법은 다음과 같습니다.

(조건) ? true code : false code;

즉, 조건이 합당하게 되면 true code식을 실행할 것이고, 조건이 거짓을 되돌려주게 된다면 false code를 실행하게 됩니다.
이것은 꼭 if~else 문과 같습니다.
if (조건)
{
    // true code
} else
{
    // false code
}

어느것을 사용하느냐는 사용자 마음이겠지만 삼항식을 사용하게 되면 조건형식에 대해서 코드 사용에 대해 좀더 유연하게 대처할 수 있습니다.
이것은 꼭 _root만을 사용하는 단편적인 코드 방식에서 this를 사용하는 것과 흡사합니다.


이제 무비를 풀어가는 원리입니다.


1. 마우스를 셀에 올렸을 때 확대
2. 마우스를 다음 셀에 올렸을 때 다시 처음의 크기로 이동
3. 다음셀의 확대

1,2,3의 방식은 계속 방식은 계속 반복됩니다.
그래서 이 핵심을 가장 빨리 풀어가는 그 지름길은
가장 먼저는 Box 개체에 마우스커서가 닿았는가 그렇지 않은가를 체크해야 합니다. 이 경우 플래시에서는 hitTest를 사용하게 해줍니다.
그래서 마우스커서가 Box에 닿게 된다면 셀은 비로소 활성화 됩니다. 이때 Boolean 변수를 사용합니다. (gameStart)
그리고 1, 2, 3 형식의 식을 올바로 풀어가기 위해서는 다음에 생각해야 할 것은 셀에 마우스가 닿은 상태에서 어떤 개체가 닿았는지 간에 닿은 개체는 확대를 해야 합니다.
여기서 주의깊게 생각해야 할것은 마우스가 Box를 처음 닿은 상태일 때에만 항상 셀은 크기가 확대되어야 한다는 것입니다.
이렇게 하기 위해서 고안된 것은 이전개체의 이름과 현재개체의 이름 추출하는 방식입니다.
                prev_N = N;
                (prev_N == undefined) ? prev=undefined : (prev_N == 0) ? prev_N=true : prev_N;
                N = Number(this._name.substring(1));

물론 이 방법외에 일반 불리언 형태의 변수를 사용할 수도 있을 것입니다.
이 삼항식은 삼항식 안에 또 다른 삼항식이 존재하기에 자칫 복잡하게 보일 수 있습니다.
하지만 플래시 인터프리터는 이것을 분명히 구분합니다.
우선 파싱되는 부분은 처음은 구문 조건입니다.
(prev_N == undefined)
이 구문을 통해서 :콜론을 기준으로 식은 실행됩니다.
? prev=undefined : (prev_N == 0) ? prev_N=true : prev_N;
즉, 조건이 참이되면 prev에 undefiend 값을 할당하는 :콜론의 왼편식이 실행됩니다.
하지만 이전 이름을 추출하는 것으므로 단한번만 prev_N이라는 값에 undefined라는 값이 설정됩니다.
undefined의 특징은 변수가 메모리에 올라온 상태만을 나타내고 아무런 값이 들어있지 않음을 말해주는 것입니다.
그리고 거짓에는 다시 조건이 붙습니다.
이것은 if구문에서 else 부분의 블럭{}안에 다시 if()구문이 있는 것과 같습니다.
중첩된 조건은 prev_N이 0인지 그렇지 않은지를 비교합니다.
사실 이것을 비교하는 것은 무의미 합니다. 하지만 비교하는 이유는 prev_N은 단 한번만 undefined가 충족되어야 하기 때문입니다.
그 이유는 무비실행했을 때 단한번 개체에 마우스를 올릴 때입니다.
그리고 마우스를 벗어나서 제차 마우스를 벗어날 때를 또 다시 체크하기 위해서 중첩된 삼항문 구조를 사용하게 됩니다.
으로 해석되면 실행되지 않기 때문입니다.
(prev_N == 0) ? prev_N=0: prev_N
이렇게 하게 되면 실행되지 않습니다.
하지만 prev_N 그자체를 둔다면 그것은 곧 true를 할당하는 것과 같습니다.
미묘한 차이가 있지만 이 차이를 잘 이해할 필요가 있습니다.

무비를 체크하는데 있어서 필요한 변수는 4가지입니다.
over, out, prev_N, gameStart
over라는 변수는 마우스를 올렸을 때를 나타내는 변수입니다.
out라는 변수는 마우스를 내렸을 때를 나타내는 변수입니다.
prev_N은 이전값을 갖는 개체로 무비에서 처음 실행할 때 처음 실행한 단한번 무비를 렌더링 해주기 위해서 사용된 변수입니다.
gameStart 라는 변수는 무비 변형의 출발점을 나타냅니다.

이제 이 4가지의 변수가 어떻게 사용되는지 이해할 필요가 있습니다.
4가지 변수는 서로 조합해서 다음의 4가지 상황을 연출합니다.

1. 마우스를 올렸을 때 그리고 prev_N이 undefined일 때
(over && prev_N == undefined)
2. 마우스를 올렸을 때 그리고  다음셀로 이동하지 않고 있을 때, 그리고 이전개체의 값이 들어와 있을 때
(over && !out && prev_N))
3. 마우스를 Box외부로 이동했을 때 그리고 gameStart가 거짓일 때
(out && !gameStart)
4. 마우스가 Box를 닿고 있고, 그리고 마우스가 셀에 올라갔을 때, 그리고 마우스가 다음셀로 이동했을 때
(gameStart&&over&&out)


이렇게 볼때 1번과 2번을 같이 묶을 수가 있습니다.
그 이유는 둘중의 하나인 상황이라도 셀은 커져야 하기 때문입니다.
((over && prev_N == undefined) or (over && !out && prev_N))

그리고 3번과 4번 역시 묶을 수 있습니다.
그것은 마우스를 Box외부에 두건 혹은 현재 셀에서 다음셀로 이동했건 셀은 줄어들어야 하기 때문입니다.
((out && !gameStart) or (gameStart&&over&&out))

이 경우 때문에 다음셀로 이동했을 때는 원래의 셀로 이동하는 현상이 나타날 것입니다.
하지만 한가지 더 해줄일이 있습니다.
그것은 정말 각각의 셀의 크기가 원래의 크기인 100%인가를 체크해야 합니다.
(Box["s"+i]._xscale == 100 && Box["s"+i]._yscale == 100) ? out = false : trace("Yahoo~~~");
즉, 모든 셀이 모두 100%일때만 마우스가 위치한 셀이 확대되는 것입니다.

무비는 이런 형식으로 만들어져 있으며 이제 전체 코드를 제시합니다.



Code
-----------------------------------------------------------------------------------------------------
//2004 - 01 - 02 - 05 - 01
posX = new Array();
posY = new Array();
widthX = new Array();
heightY = new Array();
posX[0]=[0, 200, 0, 200], posX[1]=[0, 60, 0, 60], posX[2]=[0, 200, 0, 200], posX[3]=[0, 60, 0, 60], 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], posY[1] = [0, 0, 180, 180], posY[2] = [0, 0, 60, 60], posY[3] = [0, 0, 60, 60], posY[4] = [0, 0, 120, 120];
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();
        Box["s"+i].onRollOver = function()
        {
                over_();
                over = true;
                trace("over");
                this.play();
                prev_N = N;
                (prev_N == undefined) ? prev=undefined : (prev_N == 0) ? prev_N=true : prev_N;
                N = Number(this._name.substring(1));
                trace("prev_N = "+prev_N);
                trace("N = "+N);
                this.onRollOut = function()
                {
                        trace("out");
                        out = true;
                        over = false;
                        this.gotoAndStop(1);
                };
        };
}
this.createEmptyMovieClip("empty", 21);
X = function (a0, a1){        (Math.abs(a0._x-a1)<.2) ? a0._x=a1 : a0._x -= (a0._x-a1)*.3;};
Y = function (a0, a1){        (Math.abs(a0._y-a1)<.2) ? a0._y=a1 : a0._y -= (a0._y-a1)*.3;};
W = function (a0, a1){        (Math.abs(a0._width-a1)<.2) ? a0._width=a1 : a0._width -= (a0._width-a1)*.3;};
H = function (a0, a1){        (Math.abs(a0._height-a1)<.2) ? a0._height=a1 : a0._height -= (a0._height-a1)*.3;};
over_ = function ()
{
        this.empty.onEnterFrame = function()
        {
                (Box.hitTest(_xmouse, _ymouse)) ? gameStart=true : gameStart=false;
                for (var i = 0; i<4; i++)
                {
                        if (gameStart)
                        {
                                (Box["s"+i]._xscale == 100 && Box["s"+i]._yscale == 100) ?         /* trace("100"); */        out = false : trace("Yahoo~~~");
                                // out가 false일 때 다시 확대                                
                                if ((over && prev_N == undefined) or (over && !out && prev_N))
                                {
                                        X(Box["s"+i], posX[N][i]);
                                        Y(Box["s"+i], posY[N][i]);
                                        W(Box["s"+i], widthX[N][i]);
                                        H(Box["s"+i], heightY[N][i]);
                                }
                        }
                        // 다음으로 이동
                        // 원래의 크기 찾음
                        if ((out && !gameStart) or (gameStart&&over&&out))
                        {
                                X(Box["s"+i], posX[4][i]);
                                Y(Box["s"+i], posY[4][i]);
                                W(Box["s"+i], widthX[4][i]);
                                H(Box["s"+i], heightY[4][i]);
                        }
                }
        };
};
/*
파일의 버그였던 점
개체의 좌표를 비교해서 개체의 확대축소를 컨트롤 할 경우
특정한 셀이 일정한 간격을 두고 움직이지 못한다.
가령 3을 선택했을 경우
if (Box["s"+3]._x == posX[N][3])
{
        // 불리언 코드
}
불리언 코드는 작동하되 특정 셀이 다른셀과 동일하게 움직이지 못하게 된다.
*/


-----------------------------------------------------------------------------------------------------






----------------------------------------------
[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
» [ 사각셀 : 유기체 ] 오케이케시백 - 진보된 코드/무비 [12] file Fc 2004.02.28 11514
1611 [ 사각셀 : 유기체 ] 오케이케시백 네비게이션 형태 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