메뉴 건너뛰기

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 48028
    291 고여서 떨어지는 물방울 [10] file 여어자 2003.05.09 24566
    290 팝업메뉴를 만들어보자... [19] file 김한경 2003.01.08 24510
    289 하이얀 눈송이를 웹에 날려 볼까요? [24] file 여어자 2003.12.24 24315
    288 [하이링고]세로로 회전하는 무비 [6] file 하이링고 2002.05.17 24068
    287 화선지에 먹물떨군 효과. [16] file 마루 2003.01.30 23923
    286 밀뜨의 요상한 플래쉬메뉴 만들기 1탄 !! [16] Millth 2004.02.18 23913
    285 웹폰트를 깨끗하게 써봅시다, [28] file 라비 2003.03.18 23662
    284 많이 사용되는 메뉴에요. [9] file 여어자 2005.01.13 23541
    283 [팁] 플래쉬 소스보는법 [20] ECKS 2003.02.05 22833
    282 왜 이렇게 슬픈지 눈물이 나와요~ [28] file {동준짱} 2002.07.14 21845
    281 멋진 텍스트무비를 만들자!!^-^ [21] file 길수님 2002.07.11 21688
    280 버튼 만들기 (2) [6] file Win'X' 2003.10.26 21382
    279 플래시에서 물방울 그리는 방법 [10] file 여어자 2003.10.20 21045
    278 웹화면에 직접 글씨를 쓰는듯한..[A] [12] file 여어자 2003.10.21 20807
    277 [플래시]버튼으로 좌우가 움직이는 화면!? [22] file 길수님 2002.08.21 20766
    276 원형의 파동이 펼쳐지는 듯한 효과, [21] file 라비 2003.03.20 20651
    » 마우스 움직임에 따라 서서히 바뀌는 배경 그림 [11] gimbob 2002.12.16 20544
    274 Go To 이용한 간단한 메뉴 만들기 -출처 [6] 크링 2002.07.29 20543
    273 슬라이딩 배너 만들기 [23] file 여어자 2005.01.12 20490
    272 swf 파일을 fla 파일로 [25] file 조으니 2004.07.20 20288