웹디자인 강의
Flash 간단한 플래시액션하나(이미지에 마우스 이벤트 효과)
2005.05.30 00:33
이번엔 배워볼것은 http://www.doubleharmony.co.kr홈 상단 메인 플래시로사용한 플래시 액션 효과인데, 몇몇분들께서 소스좀 공개해 달라기에 이렇게 예제를 만들어 봅니다.
액션은 비교적 간단하지만, 제가 개인적으로 즐겨쓰는 액션이고, 그 활용범위또한 아주 많습니다.
이 플래시 액션의 가장큰 장점은 아주 큰 이미지를 좁은 장소에서 모두 다 보여줄 수 있다는 것입니다.
그래서, 갤러리용이나 신문 잡지처럼 이미지를 축소할경우 텍스트(내용)을 알아볼수 없을경우에도 이번에 배울 액션 하나로 간단히 해결할 수 있답니다.
연습예제다운(MX, MX2004)
1. 먼저 연습예제를 다운받아 자신의 플래시 프로그램 버젼에 맞는 파일을 플래시에서 열어줍니다.
파일을 열어 라이버리(Library)창에 보면 아래 그림처럼 Graphic, Images, Movie Clip 이렇게 세개의 폴더속에 그에 해당하는 파일들이 각각 있습니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_00.gif)
2. 먼저 매끄러운 액션효과를 위하여 Frame rate를 40fps로 맞춰줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_01.gif)
3. 이제 라이버리 창의 Movie Clip 폴더에서 BG_IMG(Movie Clip)을 마우스로 드래그하여 Movie 레이어 필더에 올려놓습니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_02.gif)
4. 그리곤 X,Y의 위치 값을 X:-100, Y:-100에 위치 시켜줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_03.gif)
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 ();
}
------------------------------------------------------------------------------------------------------------------
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_04.gif)
6. 이제 미리보기(Ctrl+Enter)하여 확인하시면 됩니다. 확인시에는 창크기를 기본크기로 하셔서 확인하셔야 합니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_05.gif)
-- 지금부터는 이 액션과 함께 사용하기 좋은 간단한 효과(?)를 알려드리겠습니다. --
7. 라이버리 창의 Movie Clip 폴더에서 BG_IMG(Movie Clip)을 더블클릭하여 BG_IMG의 편집모드로 들어갑니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_06.gif)
8. BG_IMG(Movie Clip)의 레이어는 IMG와 Acrions 이렇게 두개의 레이어가 있는데 IMG레이어의 150과 180 프래임(타임라인)에 각각 마우스 오른쪽버튼 클릭후 활성화된 메뉴에서 [Insert Keyframe]을 선택하거나 단축키 [F6]을 눌러서 Insert Keyframe 으로 만들어 줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_07.gif)
9. 이제 IMG레이어의 1번 프래임(타임라인)을 선택하고
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_08.gif)
10. Alpha 값을 "0%" 로 지정합니다.(Color의 대화상자가 활성화 안되는 분은 1번 프래임 선택후 필더에 올려진 이미지를 마우스로 클릭하여 주세요.)
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_09.gif)
11. 이제 150 프래임(타임라인) 을 선택하고
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_10.gif)
12. Color메뉴중 Brightness을 선택하고 값을 -40%로 지정합니다. (이렇게 하면 이미지가 약간 어두워지는걸 알수 있습니다.)
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_11.gif)
※ 지금까지의 효과는 플래시 처음 오픈시 완전 투명 이미지가 점점 보여지면서 약간 어두워졌다가 원본 이미지가 보여지는 효과 입니다. 쉽게 이미지가 짠~ 하고 보여지는것보단 희미한 이미지가 점점 뚜렸해 지면서 보여지어 뭔가 있어보이는거죠.ㅎ
13. 이제 1~150 그리고 150~180 프래임 사이에 마우스 오른 버튼을 클릭후 활성화된 메뉴에서 [Create Motion Tween]을 선택하여 줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_12.gif)
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 값들도 변경하여 보세요 이미지가 어떻게 바뀌는지.^^)
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_13.gif)
15. 이제 액션 Acrions을 선택하고 IMG 레이어 타임라인의 끝인 340번을 클릭하고 단축키 [F6]을 눌러줍니다. 그리고 액션창에서 아래그림처럼 "+" 을 클릭후 Global Functions > Timeline Control > gotoAndPlay 을 선택하여 줍니다. (이 액션이 뭐냐면 타임라인이 여기까지 진행후 gotoAndPlay(타임라인 위치); 로 되돌아 가서 다시 시작하라는 액션입니다. )
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_14.gif)
16. 그러면 아래 그림처럼 액션창에 gotoAndPlay();가 입력된것을 알수 있습니다. 이제 ( )속에 180을 입력하고 gotoAndPlay(180); 미리보기 (Ctrl+Enter)하여 확인하시면 됩니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_15.gif)
그이외에 이 플래시 액션을 사용하고자하는 테마에 적절한 효과들을 사용하시면 액션효과를 극대화 시키실수 있을 거에요. 수고하셨습니다.^^
액션은 비교적 간단하지만, 제가 개인적으로 즐겨쓰는 액션이고, 그 활용범위또한 아주 많습니다.
이 플래시 액션의 가장큰 장점은 아주 큰 이미지를 좁은 장소에서 모두 다 보여줄 수 있다는 것입니다.
그래서, 갤러리용이나 신문 잡지처럼 이미지를 축소할경우 텍스트(내용)을 알아볼수 없을경우에도 이번에 배울 액션 하나로 간단히 해결할 수 있답니다.
연습예제다운(MX, MX2004)
1. 먼저 연습예제를 다운받아 자신의 플래시 프로그램 버젼에 맞는 파일을 플래시에서 열어줍니다.
파일을 열어 라이버리(Library)창에 보면 아래 그림처럼 Graphic, Images, Movie Clip 이렇게 세개의 폴더속에 그에 해당하는 파일들이 각각 있습니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_00.gif)
2. 먼저 매끄러운 액션효과를 위하여 Frame rate를 40fps로 맞춰줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_01.gif)
3. 이제 라이버리 창의 Movie Clip 폴더에서 BG_IMG(Movie Clip)을 마우스로 드래그하여 Movie 레이어 필더에 올려놓습니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_02.gif)
4. 그리곤 X,Y의 위치 값을 X:-100, Y:-100에 위치 시켜줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_03.gif)
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 ();
}
------------------------------------------------------------------------------------------------------------------
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_04.gif)
6. 이제 미리보기(Ctrl+Enter)하여 확인하시면 됩니다. 확인시에는 창크기를 기본크기로 하셔서 확인하셔야 합니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_05.gif)
-- 지금부터는 이 액션과 함께 사용하기 좋은 간단한 효과(?)를 알려드리겠습니다. --
7. 라이버리 창의 Movie Clip 폴더에서 BG_IMG(Movie Clip)을 더블클릭하여 BG_IMG의 편집모드로 들어갑니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_06.gif)
8. BG_IMG(Movie Clip)의 레이어는 IMG와 Acrions 이렇게 두개의 레이어가 있는데 IMG레이어의 150과 180 프래임(타임라인)에 각각 마우스 오른쪽버튼 클릭후 활성화된 메뉴에서 [Insert Keyframe]을 선택하거나 단축키 [F6]을 눌러서 Insert Keyframe 으로 만들어 줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_07.gif)
9. 이제 IMG레이어의 1번 프래임(타임라인)을 선택하고
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_08.gif)
10. Alpha 값을 "0%" 로 지정합니다.(Color의 대화상자가 활성화 안되는 분은 1번 프래임 선택후 필더에 올려진 이미지를 마우스로 클릭하여 주세요.)
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_09.gif)
11. 이제 150 프래임(타임라인) 을 선택하고
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_10.gif)
12. Color메뉴중 Brightness을 선택하고 값을 -40%로 지정합니다. (이렇게 하면 이미지가 약간 어두워지는걸 알수 있습니다.)
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_11.gif)
※ 지금까지의 효과는 플래시 처음 오픈시 완전 투명 이미지가 점점 보여지면서 약간 어두워졌다가 원본 이미지가 보여지는 효과 입니다. 쉽게 이미지가 짠~ 하고 보여지는것보단 희미한 이미지가 점점 뚜렸해 지면서 보여지어 뭔가 있어보이는거죠.ㅎ
13. 이제 1~150 그리고 150~180 프래임 사이에 마우스 오른 버튼을 클릭후 활성화된 메뉴에서 [Create Motion Tween]을 선택하여 줍니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_12.gif)
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 값들도 변경하여 보세요 이미지가 어떻게 바뀌는지.^^)
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_13.gif)
15. 이제 액션 Acrions을 선택하고 IMG 레이어 타임라인의 끝인 340번을 클릭하고 단축키 [F6]을 눌러줍니다. 그리고 액션창에서 아래그림처럼 "+" 을 클릭후 Global Functions > Timeline Control > gotoAndPlay 을 선택하여 줍니다. (이 액션이 뭐냐면 타임라인이 여기까지 진행후 gotoAndPlay(타임라인 위치); 로 되돌아 가서 다시 시작하라는 액션입니다. )
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_14.gif)
16. 그러면 아래 그림처럼 액션창에 gotoAndPlay();가 입력된것을 알수 있습니다. 이제 ( )속에 180을 입력하고 gotoAndPlay(180); 미리보기 (Ctrl+Enter)하여 확인하시면 됩니다.
![](http://www.doubleharmony.co.kr/Lecture/Mouse_Move/sturdy_15.gif)
그이외에 이 플래시 액션을 사용하고자하는 테마에 적절한 효과들을 사용하시면 액션효과를 극대화 시키실수 있을 거에요. 수고하셨습니다.^^