[플래시 강좌] 플래시 이미지 전환 효과 (flash Motion)

안녕하세요~

이번에는 이미지의 투명도를 조절해 

이미지가 스르륵 나타나는 효과를 해보겠습니다...

액션스크립트 없이 모션만을 사용했습니다... 레이어를 두개 사용해 순차적으로 이미지가 보여지게 됩니다.

첫번째 이미지가 나오고 일정 프레임이 지나가면서 두번째 이미지가 알파(alpha)값인 투명도가 0에서 100으로 변화면서 서서히 이미지가 나타나 보이는 효과를 갖게 됩니다.

1.우선 이미지 두장과 플래시 파일을 준비합니다

(이미지는 같은 사이즈로 준비하시면 좋습니다)

2. 그럼 준비한 motion2.fla에서 이미지를 불러와보겠습니다.그림과 같이 File > Import > Import to Stage....를 선택합니다...(단축키Ctrl + R )

3.처음 준비한 이미지중 image1.png파일을 선택해줍니다...

4.준비한 이미지파일명과 같이 순차적일땐 아래와 같이 창을 뜹니다

yes를 눌러주시면 선택한 이미지가 하나뿐일지라도 모두 불려와 집니다.

여기서 No를 선택하겠습니다...

5.아래와 같이 스테이지에 이미지가 나타난걸 볼 수 있습니다..

6. 그럼 이미지를 무비클립으로 만들어 보겠습니다...

이미지 선택후 단축키 F8눌러주시면 

무비클립으로 설정하는 창이 나옵니다..

Movie Clip 선택후 Ok 해줍니다.

7.무비클립으로 만들어 주셨으면 75프레임에 마우스 우클릭후 

Insert Frame를 해줍니다

(단축키 F5)

8. 그럼 첫번째 사진 준비는 여기까지 해주시면 되고

레이어를 하나 더 추가해서 두번째 이미지를 불러와 보겠습니다.

그림과 같이 Timeline 창에서 New Layer 버튼을 눌러봅니다.

9. 그럼 아래 그림과 같이 레이어가 추가됩니다.

10. 추가된 레이어 두번째 이미지를 불러와보겠습니다.

두번째 사진이 보여질 타이밍을 생각해서 25프레임에

빈 키프레임을 추가해줍니다 (단축키 F7)

25프레임에 한번 클릭해준후 F7을 눌러주시면 됩니다. 

그 뒤에 첫번째 사진처럼 두번째이미지를 불러와 보겠습니다.

(단축키 Ctrl + R)

11. 두번째 이미지가 추가된 모습입니다.

여기서 첫번째 이미지 처럼 두번째 이미지를 무비클립으로 만들어줍니다..

(단축키 F8)

12.두번째 이미지를 무비클립으로 만들었으면

두번재 이미지가 완전히 나타날 프레임 75프레임에 

키프레임 추가(단축키 F6) 해줍니다.

13. 그리고 나서 아래 그림과 같이 

마우스 우 클릭후 Create Classic Tween 

로 모션을 넣어줍니다.

14.모션을 넣어준후 25프레임에 있는 그림을 클릭해줍니다..

15. 그림을 클릭해보시면 

Properties창에 Color Effect > Style에서 Alpha를 선택해줍니다..

(두번째 이미지가 처음에 나타날때 완전한 투명상태로 나타나기 위한 작업입니다.)

16. Alpha 선택후 0으로 설정해 주시면 됩니다.(0~100까지설정가능합니다).

17.아래 그림처럼 100프레임에 Insert Frame를 해줍니다(단축키 F5)

두번째 이미지가 완전히 나타나고나서의 시간 추가입니다.

(

18.자 이제 모두 작업이 끝났습니다..

Ctrl + Enter로 확인해보겠습니다.^^

19, 작업중 실수로 이미지를 삭제 했을 경우 이미지가 보관 되는 곳이 있습니다..

두번 Import 하지 않아도 됩니다..

Window > Library 창에서 이미지를 드래그해 스테이지에 끌어다 놓으면 됩니다

(단축키 Ctrl + L)

motion2.fla