이번엔 배워볼것은 http://www.doubleharmony.co.kr홈 상단 메인 플래시로사용한 플래시 액션 효과인데, 몇몇분들께서 소스좀 공개해 달라기에 이렇게 예제를 만들어 봅니다.
액션은 비교적 간단하지만, 제가 개인적으로 즐겨쓰는 액션이고, 그 활용범위또한 아주 많습니다.
이 플래시 액션의 가장큰 장점은 아주 큰 이미지를 좁은 장소에서 모두 다 보여줄 수 있다는 것입니다.
그래서, 갤러리용이나 신문 잡지처럼 이미지를 축소할경우 텍스트(내용)을 알아볼수 없을경우에도 이번에 배울 액션 하나로 간단히 해결할 수 있답니다.




연습예제다운(MX, MX2004)


1. 먼저 연습예제를 다운받아 자신의 플래시 프로그램 버젼에 맞는 파일을 플래시에서 열어줍니다.
파일을 열어 라이버리(Library)창에 보면 아래 그림처럼 Graphic, Images, Movie Clip 이렇게 세개의 폴더속에 그에 해당하는 파일들이 각각 있습니다.



2. 먼저 매끄러운 액션효과를 위하여 Frame rate를 40fps로 맞춰줍니다.



3. 이제 라이버리 창의 Movie Clip 폴더에서 BG_IMG(Movie Clip)을 마우스로 드래그하여 Movie 레이어 필더에 올려놓습니다.



4. 그리곤 X,Y의 위치 값을 X:-100, Y:-100에 위치 시켜줍니다.



5. 이제 끝으로 액션만 지정하면 됩니다. 먼저 필더에 놓여진 BG_IMG(Movie Clip)을 클릭하고 액션창에 그림을 참조하여 아래의 액션을 입력하여 줍니다. 액션에 대한 설명은 액션에 직접 달아놨으니 따로 설명드리지 않겠습니다.
------------------------------------------------------------------------------------------------------------------
onClipEvent (load) {
    function Mouse_Move () {

        // 플래시 무비의 스테이지 값을 받아와 마우스 이벤트 무비의 넓이에 해당하는 최대 값으로 지정
        Move_Stage01 = (-(_root.BGIMG._width - Stage.width)) / Stage.width;
        Stage_X = _root._xmouse * Move_Stage01;
                        
        // X 축 마우스 이벤트 속도 수치가 높을수록 빠름
        Move_Stage_X = (Stage_X - _root.BGIMG._x) * 0.1;
        _root.BGIMG._x = _root.BGIMG._x + Move_Stage_X;
        
        // 플래시 무비의 스테이지 값을 받아와 마우스 이벤트 무비의 높이에 해당하는 최대 값으로 지정
        Move_Stage02 = (-(_root.BGIMG._height - Stage.height)) / Stage.height;
        Stage_Y = _root._ymouse * Move_Stage02;
                        
         // Y 축 마우스 이벤트 속도, 수치가 높을수록 빠름
        Move_Stage_Y = (Stage_Y - _root.BGIMG._y) * 0.1;
        _root.BGIMG._y = _root.BGIMG._y + Move_Stage_Y;
    }
}

onClipEvent (enterFrame) {
        Mouse_Move ();
}
------------------------------------------------------------------------------------------------------------------



6. 이제 미리보기(Ctrl+Enter)하여 확인하시면 됩니다. 확인시에는 창크기를 기본크기로 하셔서 확인하셔야 합니다.




-- 지금부터는 이 액션과 함께 사용하기 좋은 간단한 효과(?)를 알려드리겠습니다. --

7. 라이버리 창의 Movie Clip 폴더에서 BG_IMG(Movie Clip)을 더블클릭하여 BG_IMG의 편집모드로 들어갑니다.  



8. BG_IMG(Movie Clip)의 레이어는 IMG와 Acrions 이렇게 두개의 레이어가 있는데 IMG레이어의 150과 180 프래임(타임라인)에 각각 마우스 오른쪽버튼 클릭후 활성화된 메뉴에서 [Insert Keyframe]을 선택하거나 단축키 [F6]을 눌러서 Insert Keyframe 으로 만들어 줍니다.



9. 이제 IMG레이어의 1번 프래임(타임라인)을 선택하고



10. Alpha 값을 "0%" 로 지정합니다.(Color의 대화상자가 활성화 안되는 분은 1번 프래임 선택후 필더에 올려진 이미지를 마우스로 클릭하여 주세요.)



11. 이제 150 프래임(타임라인) 을 선택하고



12.  Color메뉴중 Brightness을 선택하고 값을 -40%로 지정합니다. (이렇게 하면 이미지가 약간 어두워지는걸 알수 있습니다.)



※ 지금까지의 효과는 플래시 처음 오픈시 완전 투명 이미지가 점점 보여지면서 약간 어두워졌다가 원본 이미지가 보여지는 효과 입니다. 쉽게 이미지가 짠~ 하고 보여지는것보단 희미한 이미지가 점점 뚜렸해 지면서 보여지어 뭔가 있어보이는거죠.ㅎ


13. 이제 1~150 그리고 150~180 프래임 사이에 마우스 오른 버튼을 클릭후 활성화된 메뉴에서 [Create Motion Tween]을 선택하여 줍니다.



14. 지금까지의 효과가 플래시 오픈 효과 였다면 이제부터는 중간중간 어떤 조미료(?)를 약간 첨가 해 보겠습니다.
280, 310, 340 프래임(타임라인)에 단축키 [F6]을 눌러서 각각 Insert Keyframe으로 만들어 줍니다.
그리고 그 중간인 310번 프래임을 선택후 필더에서 이미지를 클릭해주고 Color메뉴의 Advanced를 선택하고 [Settings]메뉴를 클릭합니다. 그러면 그림처럼 "Advanced Effect"대화상자가 활성화 되는데 그중 Red의 값을 +130에 맞춰준후 [OK] 버튼을 클릭하여 대화상자를 닫아줍니다.
그리고 280~310, 310~ 340을  [Create Motion Tween] 화 시켜줍니다. 12번 참조
(이 효과가 뭐냐면 이미지가 빨간색에 가까운데 그 빨간색을 좀더 밝고 진하게 하여주는 것입니다. 나머지 메뉴의 Red, Green, Blue, Alpha 값들도 변경하여 보세요 이미지가 어떻게 바뀌는지.^^)



15. 이제 액션 Acrions을 선택하고 IMG 레이어 타임라인의 끝인 340번을 클릭하고 단축키 [F6]을 눌러줍니다. 그리고 액션창에서 아래그림처럼  "+" 을 클릭후 Global Functions > Timeline Control > gotoAndPlay 을 선택하여 줍니다. (이 액션이 뭐냐면 타임라인이 여기까지 진행후  gotoAndPlay(타임라인 위치); 로 되돌아 가서 다시 시작하라는 액션입니다. )



16. 그러면 아래 그림처럼 액션창에 gotoAndPlay();가 입력된것을 알수 있습니다. 이제 (  )속에 180을 입력하고 gotoAndPlay(180);  미리보기 (Ctrl+Enter)하여 확인하시면 됩니다.



그이외에 이 플래시 액션을 사용하고자하는 테마에 적절한 효과들을 사용하시면 액션효과를 극대화 시키실수 있을 거에요. 수고하셨습니다.^^