메뉴 건너뛰기

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
    1655 [포토샵]단축키 모음 [13] 후니 2002.02.26 11903
    1654 [동영상]퍼져나가는 동그라미 [1] 이희덕 2002.09.24 11891
    1653 [제로보드강좌]8강. 원프레임 사이트 만들기 (기본편) [53] 네찌 2006.12.30 11886
    1652 배너버튼 만들기 [1] file 빽짱구 2005.10.19 11881
    1651 멋진 포즈의(?) 남자아바타 그리기 [10] file sook2 2005.01.21 11868
    1650 [키르강좌] 초간단 축전만들기 ① 키르(SP) 2002.02.27 11858
    1649 플래시 캐릭터 movie 만들기및 제작사례 [1] file parkys 2008.05.28 11845
    1648 [동영상강좌] 제2회차 - 브러쉬만들기 아이티스터디 2006.02.02 11844
    1647 동그라미에서 글자로!!(쉬움) [11] file 권명진 2004.02.14 11840
    1646 네이트닷컴 큰점광고 따라해보기[!] [7] file 데이레인 2003.09.07 11821
    1645 3D Transform 을 이용한 기포(물방울) 만들기. [19] 눔곰 2003.10.18 11801
    1644 음 -ㅁ- 그... 글씨 빛나는 효과!?; [8] file SJH 2003.09.15 11799
    1643 [츄뱌] 도트매니아 도트강좌─유리잔:-D[수정] [15] file 도트매니아 2003.05.28 11790
    1642 액션기능과 여러이미지를 썸네일형식 이미지로 만들기 [15] file 여어자 2003.05.25 11789
    1641 움직임의 잔상이 남는 이미지 만들기 !!! [4] file 플럽 2003.05.11 11778
    1640 [초급] 맞물려 돌아가는 Gear 만들기 - 1 file 박승제 2004.04.19 11772
    1639 간단하게 스타일로 물방울, 사탕, 버튼 만들기 [16] file RedEye 2003.01.29 11759
    1638 [D_art] 감전된 글자.. [21] file dartjin 2002.08.10 11753
    1637 [포토샵웍스 강좌시리즈] 홈페이지 메인디자인2 file java 2006.04.25 11733
    1636 서브메뉴 만들고 투명처리하기 [18] {동준짱} 2002.07.22 11730