메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

액션스크립트만을 이용해서 마치 어릴적 만화경을 이리저리 흔들며 들여다 보는 듯한 효과를 만들 수 있습니다. 똑같은 크기의 8개의 조각이 360도를 만들어 하나의 원을 그리며 연출하는 효과입니다. 단순하면서도 깔끔한 페이지를 만들고 싶을 때 이용하면 좋을 듯 싶습니다.



[따라하기]

  • 빈 스테이지에 배경이 될 빨간색 사각형을 그려 넣습니다.


  • 다음과 같은 액션을 첫 프레임에 삽입합니다.

    function drawQuad(clip, color) {
            path = this.goody[clip];
            path.clear();
            path.lineStyle(0, 0, 20);
            path.beginFill(color, 20);
            path.moveTo(x[0], y[0]);
            path.lineTo(x[1], y[1]);
            path.lineTo(x[2], y[2]);
            path.lineTo(x[3], y[3]);
            path.endFill(x[0], y[0]);
    }
    /*
    무비클립 만들기
    */
    this.createEmptyMovieClip("goody", 100);
    goody._x =155;        
    goody._y = 175;
    for (i=0; i<8; i++) {
            goody.createEmptyMovieClip("quad"+i, i);
            goody["quad"+i]._rotation = i*(360/8);
    }
    /*
    무비 초기화
    */

    width = 90;
    height = 90;
    x = new Array();
    y = new Array();
    sX = new Array();
    sY = new Array();
    x[0] = 0;
    y[0] = 0;
    x[1] = 0;
    y[1] = -height;
    x[2] = -width;
    y[2] = -height;
    x[3] = -width;
    y[3] = 0;
    for (i=1; i<4; i++) {
            sX[i] = Math.random()*2+2;
            sY[i] = Math.random()*2+2;
    }
    goody.onEnterFrame = function() {
            for (i=1; i<4; i++) {
                    x[i] += sX[i];
                    y[i] += sY[i];
                    if (Math.abs(x[i])>width) {
                            sX[i] = -sX[i];
                    }
                    if (Math.abs(y[i])>height) {
                            sY[i] = -sY[i];
                    }
            }
            for (i=0; i<8; i++) {
                    drawQuad("quad"+i, 0xFFFFFF);
            }
    };


    ※ 프레임속도(fps)는 대부분12fps로 맞추어져 있습니다만, 숫자가 많을수록 속도가 빨라집니다.
    ※ 액션으로만 만들어진 무비입니다. 따라서 소스만 수정하시면 다른 효과를 만들어 낼 수 있습니다.

    기타 다른 강좌는 www.goody.pe.kr에 있습니다.

  • 번호 제목 글쓴이 날짜 조회 수
    공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48031
    51 물방울 무비 시리즈(1) [15] file 여어자 2003.10.09 18346
    50 [플래시 MX 동영상 강좌] 23. 스르륵 서브메뉴 제작하기 [30] 서기 2005.06.17 18571
    49 [플래시 MX 동영상 강좌] 16. 홈페이지 서브메뉴 제작해보기 [25] 서기 2005.06.04 18659
    48 많이 사용되는 메뉴 이용하여, 서브메뉴 만들기 [3] file 여어자 2005.01.14 18697
    47 -플래쉬로 CD 회전시키기- [33] 희준품속 2002.05.08 18726
    46 매트릭스 코드[MX] [29] file 엔젤퀸 2003.07.30 19017
    45 가속도붙은 무비클립이 따라다니는 메뉴 수정 [7] file 신광원 2004.03.30 19494
    44 [플래시]울트라 파워 멋진 텍스트무비!!HaHa! [23] file 길수님 2002.09.19 19518
    43 간단하게 플래시 검색엔진 만들기 [27] aizman 2004.01.13 19838
    42 [초보만-_-;]움직이는 글씨..무비클립으로 [22] file 한쯔 2003.06.27 20035
    41 (FLASH) 제로보드 플래시로 만들기 (2) [12] file 야웅 2002.03.06 20287
    40 swf 파일을 fla 파일로 [25] file 조으니 2004.07.20 20290
    39 슬라이딩 배너 만들기 [23] file 여어자 2005.01.12 20490
    38 Go To 이용한 간단한 메뉴 만들기 -출처 [6] 크링 2002.07.29 20543
    37 마우스 움직임에 따라 서서히 바뀌는 배경 그림 [11] gimbob 2002.12.16 20544
    36 원형의 파동이 펼쳐지는 듯한 효과, [21] file 라비 2003.03.20 20651
    35 [플래시]버튼으로 좌우가 움직이는 화면!? [22] file 길수님 2002.08.21 20766
    34 웹화면에 직접 글씨를 쓰는듯한..[A] [12] file 여어자 2003.10.21 20807
    33 플래시에서 물방울 그리는 방법 [10] file 여어자 2003.10.20 21045
    32 버튼 만들기 (2) [6] file Win'X' 2003.10.26 21382