메뉴 건너뛰기

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
    735 이미지레디( + 포토샵 연계) 간편작업요령 요약노트 [2] 김병희 2004.05.07 14386
    734 테두리가 둥근 아이프레임 홈페이지 만들기(포토샵편) [3] 로베 2004.05.10 24184
    733 썩은 잎사귀 만들기 [9] file PlasmaG 2004.05.10 14225
    732 테두리가 둥근 아이프레임 홈페이지 만들기(나모편) [2] 로베 2004.05.10 11597
    731 마스크를 이용한 일러스트 그리기...;; [13] file misTsion 2004.05.10 17674
    730 이미지 채색하기... [11] file misTsion 2004.05.10 16197
    729 [문자디자인②]Distort를 이용한 서 있는 글씨 만들기... [15] file Smileru 2004.05.14 23327
    728 엠보스 텍스트 만들기 [20] file 오아요군 2004.05.15 18304
    727 미니 홈페이지를 만들자 #1 [6] Eva010 2004.05.25 14110
    726 미니 홈페이지를 만들자 #2 [6] Eva010 2004.05.25 11402
    725 미니 홈페이지를 만들자 #3 [9] Eva010 2004.05.26 20147
    724 펜툴만으로 하트만들기(저도 함 올려봅니다.)^^ [4] file 지오지아 2004.05.27 14103
    723 미니 홈페이지를 만들자 #4 [完] [8] Eva010 2004.05.29 20612
    722 마티오의 도트 강좌*초콜렛 그려보기 [4] file 마티오 2004.05.31 7935
    721 마티오의 도트 강좌*이미지네임 디자인 팁 [9] file 마티오 2004.05.31 6325
    720 [로제] 초급용 간단문자 몇 가지 [12] file 로제 2004.06.01 12862
    719 Tany_A의 도트강의 #1 - 이쁜나비~ [14] file Tany_A™ 2004.06.06 7969
    718 자동차 만들어 봤어요... [57] file 김종민 2004.06.08 14151
    717 [문자디자인③]Created Work Path를 이용한 문자디자인 [15] file Smileru 2004.06.08 18035
    716 쌩초보의 도트 입문기! 집을 찍어보자아! [12] file CiEl 2004.06.10 11450