4-09. 다중 배너 만들기 - getURL

제4장 예제를 이용한 애니메이션 만들기

4-09. 다중 배너 만들기 - getURL

<안내>

비교적 간단한 액션 스크립트 활용 예제로 배너를 만들어 보겠습니다.
플래시로 만들면 애니메이션화 할 수 있고, 좁은 공간에서도 다양한 곳으로 링크를 할 수 있습니다.

<완성된 작품>

클릭하면 해당 사이트로 이동하게 됩니다.

예제파일 다운로드

예제-1-1.fla

먼저 위의 '예제 파일 다운로드'를 클릭하여 적당한 폴더에 저장하십시오.
이 파일 속에는 이번 강의에 사용될 링크용 그림 4개가 라이브러리에 들어 있습니다.

Ctrl + L 키를 눌러 라이브러리를 호출하여 확인해보십시오.

1) 스테이지의 크기를 200 * 50으로 조절합니다.타임라인 아래의 초당 프레임수를 더블클릭하거나, [수정 > 문서] 메뉴 혹은 Ctrl + J 키를 누르면 됩니다.

 

2) 라이브러리에서 '교육인적자원부' 심볼을 드래그하여 스테이지에 가져다 놓습니다.
속성관리자를 통해 위치를 X : 1.0, Y : 1.0 으로 잡아줍니다.

3) 타임라인에서 10프레임, 30프레임, 40프레임을 각각 클릭한 후 키프레임을 넣어줍니다.(F6키 누름)

 

4) 1프레임과 10 프레임 사이를 클릭하여 속성 관리자에서 [Tween > Motion]를 해줍니다.
30프레임과 40프레임 사이도 마찬가지로 [Tween > Motion]를 해줍니다.
이렇게 하면 애니메이션을 만들 수 있게 됩니다.

5) 1프레임을 클릭하여 선택하고, 스테이지에 있는 교육인적자원부 심볼을 화면의 오른쪽 바깥 방향으로 벗어나게게 놓습니다.
40프레임 역시 클릭하여 선택하고, 심볼을 스테이지의 왼쪽 바깥으로 벗어나게 놓습니다.
이 때 심볼이 선택된 상태에서 Shift + 방향키를 누르면 수평으로 이동시킬 수 있습니다.

여기까지 작업하셨다면 Ctrl + Enter키를 눌러 무비테스트를 해보십시오.

6) 자, 이제 나머지 심볼들도 애니메이션화해 봅시다.
45프레임에서 F7키를 눌러 빈 키프레임을 넣습니다. 그리고 이번에는 라이브러리에서 에듀넷 심볼을 가져다 스테이지에 놓고, 위치 조절을 해줍니다.

그리고 50프레임과 80프레임, 90프레임에 키프레임을 넣어주고 위의 '교육인적자원부' 심볼처럼 [Tween > Moyion]를 해줍니다.

이러한 방법으로 나머지 심볼들도 애니메이션화 해보십시오. 
애니메이션의 방법은 각자가 앞서 강좌에서 익힌 바를 최대한 이용하면 될 것입니다.

7) 이제 남은 일은 링크를 하는 것입니다. 해당 심볼이 화면에 나타나서 사라질 때까지의 프레임에 심볼을 달아 그것을 클릭하면 해당 사이트로 이동이 되도록 하면 되겠죠?

그러기 위해서 '투명 버튼'을 하나 만들도록 하겠습니다. 화면에는 보이지 않지만 버튼 역할을 하는 것말입니다.

이 투명버튼은 버튼 심볼로 만들되, UP, OVER, DOWN 프레임에는 아무 것도 넣지 말고, HIT 프레임에만 앞서 사용한 심볼크기만하게 영역을 그려주면 됩니다.

① 타임라인의 1프레임을 클릭해서 선택합니다.
② 레이어를 하나 추가합니다.
③ 레이어 이름을 '버튼'으로 변경합니다.
④ 'Layer 1'은 변형을 막기 위해 자물통을 채웁니다.
⑤ 스테이지에 200*50 크기의 네모를 하나 그립니다.
⑥ 그린 네모를 선택한 후에 속성 설정에서 크기와 위치를 위와 같이 잡아줍니다.

8) 네모가 선택된 상태에서 F8키를 눌러 심볼로 등록합니다. 이름은 '투명버튼'으로 하겠습니다.
비헤이비어(Behavior)는 반드시 [Button]으로 지정하여야 합니다.

[OK] 단추를 눌러 등록을 완료합니다.

9) 투명버튼을 편집합니다.

스테이지에 있는 등록한 투명버튼을 더블클릭하여 버튼 편집 모드로 들어갑니다.

Hit 프레임을 클릭하여 선택한 후 F6키를 눌러 키프레임을 넣어줍니다.

Up 프레임을 클릭하여 선택한 후 스테이지에 있는 네모를 Delete키를 눌러 지웁니다.
그러면 위의 그림과 같은 모양이 됩니다. 즉, Hit 프레임에만 네모가 들어있고 나머지 프레임에는 아무런 개체가 없는 상태가 됩니다. 반응 영역만 있고, 실체는 없는 그야말로 투명 버튼이 된 셈입니다.

[Scene 1 ; 장면 1]을 눌러 본 스테이지로 빠져 나옵니다.

10) 마지막 단계로 링크를 해보도록 하겠습니다.

먼저 '버튼' 레이어에서 타임라인을 따라가면서 각 사이트의 심볼이 시작되는 프레임에 키프레임을 넣어줍니다.

그리고 교육인적자원부 부분의 투명버튼을 클릭한 후 마우스 오른쪽 단추를 눌러 [Actions]를 실행합니다.

11) [액션] 중에서 다음 그림과 같이 [Borwser/Network > getURL]을 열어 [getURL]을 더블클릭합니다.
그러면 아래 오른쪽과 같은 [getURL]옵션 항목이 나오게 됩니다.

[URL]에 교육인적자원부 사이트 주소를 입력합니다.
[Window] 항목에는 링크를 클릭하였을 때 해당 웹페이지가 열릴 창을 지정해줍니다.
(_self를 지정하면 자기 창에, _blank를 지정하면 새 창에 열리게 됩니다)

나머지 버튼들도 이와 같은 방법으로 연결을 해줍니다.

※ 사이트 주소
교육인적자원부 : http://www.moe.go.kr
에듀넷 : http://www.edunet4u.net
경남교육청 : http://www.gne.go.kr
경남교육연수원 : http://www.knky.gyeongnam.kr

12) FLA 파일을 저장하고 Ctrl + Enter키를 눌러 무비를 만듭니다.

배너가 나타났을 때 마우스 클릭을 해서 해당 사이트로 이동하는 지 확인해 보십시오.