메뉴 건너뛰기

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
    2415 [MN] 이미지 X-ray효과내기 [7] mewnew 2002.09.10 236
    2414 [나모웹 초보자] 이미지 맵을 만들어 보자~! [1] file 나만의길 2004.07.18 325
    2413 [도트] 집 만들기?? [7] file (_*_) 2002.02.25 482
    2412 [ XML 소켓 채팅 ] [2] file Fc 2004.02.26 514
    2411 3D SHEET 만들기 [5] file 카라 2002.02.21 536
    2410 [나모 FX] 이미지맵 간편하게 나모로 하기 ( 처음하는 강좌 ;;; ) [14] file 박한웅 2003.12.07 602
    2409 [프로모션]제4회 달리는 애니메이션 만들기 [13] 정현석 2002.08.27 646
    2408 [페인트샵8.0]합성!!나도 함 해보자!! 간단하게 합성하기! [4] file 대현 2003.12.13 715
    2407 구름만들기; [27] Nㆍzna 2002.02.21 757
    2406 [바비의 일러스트]일러 갤러리-1 [21] file 바비인형 2002.04.26 853
    2405 플래시 무비의 프레임률이 막 떨어질때, [16] 유군-_-)/ 2002.02.21 860
    2404 [퍼니페인트]도장 만들기 [1] funnyPSP 2002.02.23 925
    2403 햇볕이 비추는듯한....음...태양의 코로나 같은 효과...^^ [24] file 천민수 2002.02.21 979
    2402 네모난 사진 동그랗게 만들기 강의입니다. [6] file 이형진 2003.10.09 987
    2401 간단하게 폰트 이쁘게 하기 [3] file 4u4u 2007.09.06 1004
    2400 [동영상] 제5강 max 건축 인테리어 개요 인테리어뱅크 2006.04.11 1064
    2399 [PHOTOSHOP]금속성 문자 만들기 [6] file (_*_) 2002.02.21 1073
    2398 킴스웹에듀 ~~ 플래시 강좌사이트 입니다. kim's 2007.07.30 1263
    2397 굿 웹 디자인 사이트들 링크 [11] 박성렬 2002.04.05 1305
    2396 포토샵강좌 - 별만들기 [1] file IamAndy 2007.07.11 1373