메뉴 건너뛰기

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 스위시맥스강좌 // Replay 버튼 만들기 [1] 문학의향기 2006.08.11 6528
    734 [플래시 MX 동영상 강좌] 27. 엽서를 만들어보자. [8] 서기 2005.06.28 6528
    733 - 지문(지장) 만들기 [18] file 푸리 2003.01.02 6526
    732 빠르고 쉽게 작업하자! 자주쓰는 툴바 단축키 [7] file lemin 2003.11.21 6521
    731 멋진 글자 만들기 # 2 [8] file w:)style 2002.03.28 6520
    730 눈송이 효과 / 얼음; 덜 언 효과 [4] file 씨즌 2003.02.04 6517
    729 [퍼니페인트]디씨인사이드 쿨갤힛갤 액자 쉽게 만들기 [4] file 대현 2003.01.26 6517
    728 웹디황용 리터칭-3 file 웹디황용 2006.06.13 6510
    727 아바타 (Avata) 몸 그리기 [5] file w:)style 2002.11.20 6506
    726 ● 좀큐티한년유채령 : ))나모 + 포샵 홈페이지 만들기 2탄 file 죽은나비 2006.04.30 6505
    725 [쩌비]간단한 축전이미지 준비하기. [8] file 쩌비 2002.10.16 6500
    724 엽기강좌..열매맨 만들기'' [12] file 쥬다스 2004.02.01 6498
    723 1024x768,IE 6.0에 최적화 되었습니다. 라는말은 쓰지마라! [46] Smileru™ 2003.01.19 6488
    722 [ All User? ] #06. 나 자신을 돌아보기. [11] Nersion 2003.01.18 6482
    721 [초허접강좌] 산수화 만들어보기; [7] file [It's]순수군 2003.02.15 6480
    720 4 부분적으로 사진보정하기 2편 (보너스 - 빨간눈 보정하기) [2] file 박진 2004.07.21 6474
    719 아날로그 듀얼쇼크 2 (플레이스테이션 2 用 컨트롤러) 그리기 [24] file freeism 2003.04.05 6469
    718 [초보가 쓰는 초보강좌] 3D Transform을 사용해보자..ㅡㅡ;;; [10] file 다켄제리 2002.11.06 6464
    717 [키르] 이미지크기를 깔끔하게 바꿔봐요 [4] 키르(SP) 2002.05.26 6456
    716 박스모양 - 중복이 아니길 바라며-_-; [3] file 딱지치는이리 2002.04.30 6456