메뉴 건너뛰기

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
    211 [ 플래시 2004 프로페셔널 ] AS2.0의 기초 [1] Fc 2004.02.25 6846
    210 다양한 색상으로 입체효과주기(그라디언트) [1] 펀에듀넷 2006.04.24 6900
    209 [플래시 MX 동영상 강좌] 30. onClipEvent를 이용한 무비클립의 회전 [8] 서기 2005.07.08 6947
    208 플래시를 이용한 원그래프 그리기입니다. [2] file 삐리리 2005.07.04 7170
    207 플래시와 제로보드 연동 기초 (외부 TXT 파일 호출 하여 뿌려주기) [6] 홈때기~♪ 2005.05.20 7191
    206 정말급한데요. 플래시 쇼핑몰 제품 스크롤에 대해 [3] file 홍성필 2006.06.05 7222
    205 Flash MX의 Action Script에서 이벤트 제어를 메소드로 하기.. [4] file coens 2002.03.23 7417
    204 [플래시 MX 동영상 강좌] 32. IF문의 심화 [2] 서기 2005.08.03 7448
    203 [플래시 MX 동영상 강좌] 14.기본적인 베너 제작하기 [13] 서기 2005.06.02 7478
    202 [플래시 MX 동영상 강좌] 7. 트위닝 옵션 [10] 서기 2005.05.26 7483
    201 플래시를 시작하기 위한 준비 [1] Fc 2005.05.06 7495
    200 [입문]플래쉬의 이해 [7] file 황남운 2004.01.07 7501
    199 [플래시 MX 동영상 강좌] 29. 프리로더의 제작 [11] 서기 2005.07.01 7534
    198 [중급]telltarget 사용예제 [3] 박은석 2002.10.24 7644
    197 아래 만든메뉴 mx2004 버젼입니다 [1] file 한태종 2007.02.26 7713
    196 [플래시 MX 동영상 강좌] 17. 여러개의 파일을 이용한 홈페이지 제작 [20] 서기 2005.06.06 7732
    195 [중급] 가위,바위,보 게임 승패 판정법 [4] file 박승제 2004.04.26 7737
    194 확대해서 보기(일명 돋보기 효과!!) [5] e-ssine.com 2002.12.13 7748
    193 [플래시 MX 동영상 강좌] 6. 텍스트 에니메이션 [13] 서기 2005.05.25 7781
    192 [허접팁=_=;;] 플래시루 간단하게 3D 사각형 그리기 [8] file 황현구 2002.12.13 7790