메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

제목이 좀 길고 거추장스러워 빨리 이해가 가지 않으시죠?^^
하지만 그림에 마우스를 가져대고 움직여 보면 금방 이해가 가실 겁니다.

macromotive.com의 Dan Alu가 공개한 소스인데 직접 만들어 보니 액션도 쉽고 재미있었습니다.
배경그림을 랜덤하게 가져오는 방법도 좋지만 마우스가 움직일 때마다 그림이 alpha값에 따라 서서히 바뀌는 배경 또한 방문객의 눈길을 끌 수 있을 것입니다. 아주 간단한 액션이니 여러분도 만들어 보세요.

[예제 - 알파값에 의해 서서히 바뀌는 배경 그림]



※마우스를 무비 위 아래로 움직여 보세요.



[따라하기]

  • 우선 크기가 같은 이미지 5개가 필요합니다. 이미지 5개를 라이브러리로 임포트 한 후에 이미지를 무비클립으로 만들어 줍니다.


  • 하나의 레이어에 이미지로 만든 무비클립을 갖다 놓습니다. 그리고 반드시 instance name을 주어야 합니다. 순서대로 img1, img2...img5 이렇게 주어 봅시다.




  • 위의 그림 처럼 5개의 무비클립이 하나씩 레이어에 들어간 후에, 액션을 넣게 될 레이어를 추가합니다. 이때 img1이 들어간 레이어가 상위에 놓여야 합니다.

  • alpha값 변화에 따른 function을 수행할 이름만 있는 무비클립을 생성해서 라이브러리에 등록해 놓습니다. 이름을 script로 해 봅시다.

  • 액션은 다음과 같이 넣어줍니다.

    _root.createEmptyMovieClip("script", 0);
    script.onLoad = function() {
            mosx = 0;
            mosy = 0;
    };
    script.onEnterFrame = function() {
             difx = mosx - _root._xmouse;

            dify = mosy - _root._ymouse;
            
            mosx -= difx / 8;

            mosy -= dify / 8;

            _root.img1._alpha = (mosx / 4) - (mosy / 4);

            _root.img2._alpha = 100 - (mosx / 4) - (mosy / 4);

            _root.img3._alpha = (mosy / 4) - 100 + (mosx / 4);

            _root.img4._alpha = (mosy / 4) - (mosx / 4);
    };


  • 마우스를 갖다 대었을 때 알파값의 변화를 4개의 무비클립에 각 각 주었습니다. 마우스를 떼었을 때, 변하지 않는 그림이 있어야 함으로 하나를 추가한 것입니다. difx / 8 과 dify / 8 은 변하게 하는 속도를 주게 되는데 숫자가 높을 수록 서서히 변하게 됩니다.

    ※무비 속 이미지들은 제 플래시 홈에서 사용되었던 것들입니다. 플래시 MX 완전 초보를 위한 강좌를 홈에 올리고 있습니다. →강좌이동
    번호 제목 글쓴이 날짜 조회 수
    공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48030
    51 레이더 효과~~ [8] 응? 2003.01.06 11406
    50 [MX]초보강좌 - 마스크 강좌 [11] file 용신 2003.01.05 9775
    49 만화경을 보는 듯한 효과 [11] gimbob 2003.01.03 12123
    48 Component를 활용해서 드래그되는 팝업창 만들기 [1] file gimbob 2002.12.17 11584
    » 마우스 움직임에 따라 서서히 바뀌는 배경 그림 [11] gimbob 2002.12.16 20544
    46 확대해서 보기(일명 돋보기 효과!!) [5] e-ssine.com 2002.12.13 7748
    45 [허접팁=_=;;] 플래시루 간단하게 3D 사각형 그리기 [8] file 황현구 2002.12.13 7790
    44 [플래시]마스크효과를 이용한 무비. [8] file 길수님 2002.12.08 16023
    43 카드를 만들어 보자(눈내리는 효과) [11] gimbob 2002.12.04 15204
    42 [초급] 커튼효과와 깜박이는 글자 [14] file 요니에 2002.12.03 28670
    41 무비클립 복제를 이용한 땅에 비가 내리는 모습 [11] gimbob 2002.11.28 17345
    40 praystation effect따라 하기 [8] gimbob 2002.11.24 12726
    39 [Flash MX]Action Script - Shared Objects [2] file gimbob 2002.10.31 8849
    38 [허접팁]플래쉬MX로 무비 파일 용량 줄이기 [7] 양윤식 2002.10.27 10081
    37 [중급]telltarget 사용예제 [3] 박은석 2002.10.24 7644
    36 [초급] 날아다니는 원만들기. [7] file 요니에 2002.10.23 13469
    35 [초급] 마스크 이용 간단한 무비 만들기 [8] 요니에 2002.10.21 17276
    34 [동영상]크로스선 만들기 [6] 이희덕 2002.09.24 13970
    33 [동영상]그림이 서서히 바뀌는 효과 [6] 이희덕 2002.09.24 34209
    32 [동영상]확대해서 보자!! [2] 이희덕 2002.09.24 9928