메뉴 건너뛰기

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
    2255 제가 짐 쓴것두 강좌라고 봐두 될라는지 -_-; 함 써보고 싶은 마음에~ [14] 유령-_-** 2003.01.24 3494
    2254 뷰렛에이스 [플래시 평가문항,설문지 제작강좌] - 1강 file 에듀멘 2006.07.29 3494
    2253 [질문] 포토샵에러에 관해서... [7] cx2ip140 2003.02.26 3504
    2252 [한글버젼]색상/채도/밝기 변경하기 [7] file (づεど)**♡** 2003.01.20 3520
    2251 단일색의 연상. [8] Neople 2002.09.13 3534
    2250 [힐링포션의 그림판강의] 텍스트 꾸미기 몇가지 [3] 힐링포션 2002.05.02 3535
    2249 단몇번의 선택으로 마크그리기 [9] file w:)style 2002.07.08 3551
    2248 글자모양 마음대로~ 4 문학의향기 2006.07.26 3551
    2247 [PHP동영상강좌] 프로그래밍 본격 시작 - 01 [1] 펀에듀넷 2006.04.24 3553
    2246 폴라로이드 효과 [1] file wwolf 2008.09.21 3561
    2245 달마시안무늬 [10] file 프레 2002.08.11 3568
    2244 모자이크 처리하기 15강 문학의향기 2006.07.28 3568
    2243 포토샵 단축키 모음 1 문학의향기 2006.07.26 3605
    2242 Flash->Motion Design용 Loop Source 만들기 덴디 2004.12.25 3612
    2241 Pen툴의 모든것. (1) [4] 포토샵 2002.05.15 3627
    2240 (기초강의)포토샵시작하기 file 최승철 2005.04.28 3633
    2239 dong성이의 뽀로샵 강좌 - 3 - 볼록 질감.. [3] file dong성이 2003.01.10 3644
    2238 SWISH 메뉴 설명 file 아메 2003.02.14 3658
    2237 레이어 분석해보기 [6] file Narcissus∏ 2003.02.24 3658
    2236 [라인디자인]방사형사선만들기 - 2 [3] knowkorea 2002.08.09 3665