플래시 투명버튼 만들기 _ 액션이 있는 투명버튼에 링크걸기

쇼핑몰이나 기타 홈페이지에 빈번하게 쓰이는 플래시 투명버튼을 만들어 보겠습니다.
추가로 버튼에 마우스오버시 간단한 액션을 가미하고 버튼을 클릭하면 해당 링크로 이동하게 해볼께요.

1. 스테이지에 텍스트를 씁니다.

 

2. 'F8' 키를 눌러 심벌지정창을 열어서 텍스트를 버튼심벌로 지정합니다.

3. 버튼심벌로 지정한 텍스트를 더블클릭하여 편집모드로 진입한 후 'over' 와 'hit' 영역에 프레임을 추가합니다.

4. 'hit' 영역을 클릭한 후 스테이지에 클릭유효한 버튼 영역을 도형툴로 지정해줍니다.

5. 'over' 영역을 클릭하고 스테이지의 텍스트 오브젝트를 선택한 후 무비클립으로 지정해줍니다.

6. 무비클립으로 지정된 텍스트 오브젝트를 더블클릭하고 편집모드로 진입합니다.

여기까지는 마우스오버시 액션이 적용된 투명버튼을 만드는 공통된 방법입니다.
지금부터는 편집모드에서 원하는 다양한 효과를 줄 수 있습니다.
색상을 바꿔준다던가 알파값을 높이거나 낮춰줌으로써 마우스 오버시 다양한 액션을 줄 수 있습니다.

저는 글자에 빛이 지나가는 효과를 나타내보도록 하겠습니다.

7. 스테이지의 텍스트를 선택한 후 'ctrl + b'를 두번입력하여 텍스트를 도형화 합니다.

8. 도형화된 텍스트들이 모두 선택되어진 상태에서 마우스를 오브젝트에 갖다댄후 오른쪽 마우스버튼을 클릭하여 'Distribute to Layers'를 선택하여 텍스트도형 하나씩 각각 레이어로 분배합니다. (레이어 분배후 최상단에 빈 레이어가 남는데 그냥 놔두셔도 됩니다. 후에 액션레이어로 사용할 겁니다.)

9. 레이어 하나당 하나씩의 텍스트도형이 분배되어 있습니다. 이 텍스트도형을 하나씩 선택하여 모두 무비클립심벌로 지정해줍니다.

10. 맨처음의 텍스트도형을 선택한 후 프레임 창에서 5프레임에 키프레임을 주고 스테이지의 무비클립심벌로 지정된 텍스트도형을 클릭한후 하단에 속성창에서 알파값을 '0'으로 해줍니다.

11. 10프레임에는 그냥 키프레임만 추가 합니다. 역시 알파값이 '0'이겠지요.

12. 15프레임에 키프레임을 추가하고 스테이지의 무비클립심벌로 지정된 텍스트도형을 선택하고 하단 속성창에 알파값을 다시 '100'으로 올려줍니다.

13. 해당 레이어를 선택하고 키프레임창에 마우스를 갖다대고 오른쪽 마우스버튼을 눌러 'Create Motion Tween'을 적용합니다.

 

14. 나머지 무비클립으로 지정된 텍스트도형들도 10~13단계 방법을 동일하게 진행해줍니다.



15. 프레임 창에서 첫번째 무비클립으로 지정된 텍스트도형의 프레임을 기준으로 두번째 무비클립으로 지정된 텍스트도형의 레이어를 선택한 후 전체를 2프레임 뒤로 밀어줍니다. 세번째 무비클립으로 지정된 텍스트도형의 레이어도 4프레임 뒤로 밀어줍니다. 네번째는 6프레임 뒤겠죠. 글자간 액션들이 2프레임 차이를 두고 진행됩니다.

16. 빈 프레임들을 채워줍니다. 'alt' 키를 누른 상태에서 맨처음 프레임을 마우스를 꾹 누른상태에서 복사 이동시키면 됩니다. 끝프레임도 마찬가지입니다.

17. 프레임창 최상단 레이어에서 액션이 끝나는 프레임에 키프레임을 추가하여 'F9'키를 눌러 액션스크립트 창을 연후 'stop();' 스크립트를 입력합니다.

18. 최상단 스테이지(Scene 1)로 나와서 오브젝트를 클릭한 후 역시 'F9'키를 눌러 액션스크립트 창을 열어줍니다. 여기에는 버튼을 클릭했을때 어디로 링크를 걸 것인지 스크립트를 써주면 됩니다.
' on(release){ getURL ('http://www.연결할곳.com', '_self'); }'

 

19. 'ctrl + enter' 로 완성된 액션이 주어진 투명버튼을 확인합니다.

 

위에 'test'라는 텍스트 버튼을 클릭해 보세요.
지금까지 플래시 투명버튼 만들기 _ 액션이 있는 투명버튼에 링크걸기 강좌를 마치겠습니다.