메뉴 건너뛰기

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
    775 닷지툴 활용하여 달 만들기! [8] file 레드 2003.01.08 3852
    774 예쁜 구슬만들기~~~~~~ [8] 응? 2003.01.07 12360
    773 [제 1강 : POV-RAY 에 대해서 알아보자... ] [30] 시진 2003.01.07 3345
    772 라이트닝(?) 효과... [10] file 마리아 2003.01.07 7955
    771 레이더 효과~~ [8] 응? 2003.01.06 11406
    770 [포토샵 초보자] Lasso Tool(라소툴) 사용하기1부 [7] file ZipShin 2003.01.06 6865
    769 강좌 처음 올려봄.. '물결 치는 효과?' [10] file 마리아 2003.01.06 5807
    768 [중급]메쉬를 이용하여 인물 그리기. [11] file 반화넬 2003.01.06 16191
    767 [초보]..처음이라..^-^ 이쁘게 봐주세여~ [비내리는효과] [8] file 순수 2003.01.05 4795
    766 - 회화 느낌의 효과 [13] file 푸리 2003.01.05 6849
    765 [MX]초보강좌 - 마스크 강좌 [11] file 용신 2003.01.05 9775
    » 만화경을 보는 듯한 효과 [11] gimbob 2003.01.03 12124
    763 간단한 얼굴 아이콘 제작하는 방법입니다. [17] file 치에 2003.01.03 9078
    762 [초보를위한강좌]그라디언트맵 효과 [9] file 블라인드 2003.01.02 5454
    761 [초보강좌]아바타를 만들기 전에。 [5] file 박지인 2003.01.02 16343
    760 도트매니아와 함께하는 도트강좌#2 [6] file 도트매니아 2003.01.02 14889
    759 - 지문(지장) 만들기 [18] file 푸리 2003.01.02 6526
    758 화이트닝으로 보정하기★★ [14] 김민자 2003.01.02 13059
    757 첫번쨰 허접강좌 -_-; 이등변삼각형 만드는 또다른방법(ㅠㅠ) [9] 스타워즈 2003.01.01 5052
    756 꽃잎 + 크리스탈 같은 테두리 만들기. [14] file 김미리 2003.01.01 16690