메뉴 건너뛰기

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 [뽀록스페셜2] 오돌도돌 이미지-ㅅ- [5] file 2002.02.27 6632
    1654 fake 3d [9] file 리키; 2002.06.14 6633
    1653 특정부분만 컬러로 만들어 강조시키기 [17] 양현일 2002.06.30 6641
    1652 햇살가득한 숲(밥로스) [8] file scaci 2008.03.27 6643
    1651 글씨 요리조리 비틀기 [6] file 김혜원 2003.02.05 6647
    1650 [MN] 이미지, 스케치화 시키기 [7] mewnew 2002.09.08 6656
    1649 [키르강좌] 포토샵으로 화장시키기 -크리스티나 아길레나- [8] 키르(SP) 2002.04.03 6657
    1648 [ All User? ] #01개인홈피편. 웹디자인을 좀더 멋지게하려면 - 1부 - [7] Nersion 2003.01.13 6657
    1647 ♣ 간단한 이미지닉 제작하기 (동영상강좌) [13] Ti-on.com 2005.09.08 6657
    1646 그림판으로 포토샵처럼 브러시를 끼워넣자 [#그림판강좌] [7] file Probe 2003.01.30 6659
    1645 PNG 파일의 포맷에 대하여 알려드릴께요. [21] ZipShin 2002.11.27 6661
    1644 펜툴을 이용한 도트 그리기?? [11] file 루비 2003.02.04 6664
    1643 마스크에 대하여.. enjoy the GIMP! 2002.09.29 6668
    1642 [완전 초보] 초보자 이번엔 건물 그리자~ [11] file [포터]아렌티 2003.01.30 6669
    1641 패턴으로 이미지 불리 시키기 [11] file 낭낭앤 2002.12.05 6672
    1640 - 누더기 헝겊 만들기 [9] file 푸리 2003.01.27 6674
    1639 ○호랑이에쓰라인作 =// 나모로 홈페이지 만들기 [2탄 외부로그인,메뉴.배너넣기] [7] file 호랑이에쓰라인 2006.06.05 6680
    1638 이미지 사이즈(크기) 조절하기. [2] file Kei 2002.03.24 6689
    1637 컴퓨터 도트만들기(허접-_-;) [11] 그리움 2002.09.22 6690
    1636 [muTStyle.Net]-약간 복잡함- 현란한(?) 글자 만들기... [3] 바하무트 2003.10.22 6700