웹디자인 강의
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)
그이외에 이 플래시 액션을 사용하고자하는 테마에 적절한 효과들을 사용하시면 액션효과를 극대화 시키실수 있을 거에요. 수고하셨습니다.^^
댓글 10
-
엄설화
2006.04.05 10:23
저도 6번에서 안됐는데..인스턴스이름 적어주니 잘되네요. ^^ 감사~ 꼼꼼히 보는 습관 들여야 겠네요~ -
서기
2005.05.30 07:58
옷^^; 좋아용... -
황승민
2005.06.02 16:29
6번까지 하고 왜 미리보기 하면 안 움직이져?ㅜㅜ
플레쉬 MX인데요,, 머 빠진게 있는지? 질문도 난감,, -
홈때기~♪
2005.06.02 21:05
액션을 타임라인에 입력하셨나보네요. 액션은 BG_IMG(Movie Clip)에 지정해주어야 합니다. -
홍성욱
2005.06.07 12:18
그대로 진행하다 막혀서 질문드립니다.
전 플래쉬 MX2004쓰는데요... 올려주신 강좌 따라하다보면
6번진행하다
**오류** 장면=Scene 1, 레이어=Movie, 프레임=1:1행: 클립 이벤트는 무비 클립 인스턴스에 대해서만 허용됩니다.
onClipEvent (load) {
**오류** 장면=Scene 1, 레이어=Movie, 프레임=1:22행: 클립 이벤트는 무비 클립 인스턴스에 대해서만 허용됩니다.
onClipEvent (enterFrame) {
전체 ActionScript 오류: 2 보고된 오류: 2
라는 에러메시지가 뜨는데요.... 액션스크립트 입력이 잘못된듯한데 뭐가 문제인지 모르겠네요....
질문도 쫌 찝지름 하지만 답변부탁드릴께요,,, -
홈때기~♪
2005.06.09 03:15
홍성욱님 안녕하세요. 글쎄요. 스크립트 부분오류라면 제가 성욱님께서 작업하신 결과(FLA)파일을 보기전엔 정확히 딱 꼬집어내기가 힘드네요. 작업하신 파일 FLA파일은 제 이멜로 첨부해 보내주시면 확인후 문제점을 꼬집어(?) 알려 드리겠습니다. biz@cmmate.com입니다. -
나무그리기
2005.06.09 16:08
6번에서 안되시는 분들 movie clip 을 꺼내놓고 Instance Name 을 주지 않으신건 아닌지요
Instance Name 은"BGIMG"....... -
+mizzang+
2005.06.24 14:34
와~ 잘배웠습니다~~~ >_< -
KRAVENT.COM
2007.05.30 05:01
정말 감사합니다 이렇게 남겨보긴 처음이네요 -
KRAVENT.COM
2007.05.30 05:02
아 참고로 flash 8쓰시는분들중에서 action script 3.0에서는 안되용