메뉴 건너뛰기

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
    » 만화경을 보는 듯한 효과 [11] gimbob 2003.01.03 12124
    1694 [중급??]본강좌에 앞서서 간단한 야그^-^; [39] file 미스디쟌 2002.07.20 12124
    1693 맥주만들기.. [12] file zizibecap 2005.01.04 12118
    1692 반짝이 무더기[파티클]을 만들어 활용해보기 [7] file 어지니 2005.03.18 12117
    1691 물방울 무비 시리즈(3) [5] file 여어자 2003.10.10 12102
    1690 CD 모양 만들기 [1] file 여어자 2003.05.06 12095
    1689 흑백 사진을 컬러 사진으로 바꾸자 [14] file 이오르 2003.09.26 12094
    1688 포토샵에서 글자 응용!!! [4] file WalkCabbage 2003.12.16 12082
    1687 [티모시]오랜만에..........::::팥빙수 그리기:::: [19] file 티모시 2003.06.29 12079
    1686 [ PHP ] 플래시 게시판을 만들기 위한 기초 3 [5] file Fc 2004.02.25 12076
    1685 일러스트를 이용한 아이콘 만들기 2편 - 아이콘 작업시 주의점. [6] file caramelkiss 2003.12.30 12073
    1684 간단하고 심플한 문자디자인.. [8] file Darkness 2003.01.14 12071
    1683 모래를 뿌린듯한 테두리.. [4] file puki 2003.02.17 12070
    1682 햇살 비치는 효과:) [1] kice 2005.02.27 12068
    1681 6 성형수술 1편 (지존 턱,볼살깍기 코세우기) [2] file 박진 2004.07.21 12053
    1680 [기초]링크걸기.. [13] file 입픙체리냥♬ 2003.02.25 12044
    1679 브러쉬 툴을 이용 붓으로 칠한 효과 [7] file rombardi 2003.07.06 12043
    1678 네코네 포토샵팁~!! 레이어 너를 파해쳐주마 첫번째장 [6] file 인디네코 2005.01.16 12041
    1677 [초급] 맞물려 돌아가는 Gear 만들기 - 1 file 박승제 2004.04.19 12041
    1676 간단한 Innor Glow효과의 활용으로 깔끔한 네모박스 만들기 [5] file 박종규 2005.05.09 12029