4-08. 이미지 갤러리 만들기 - goto

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

4-08. 이미지 갤러리 만들기 - goto

이번 강좌에서 다루어 볼 액션은 ‘goto’입니다. 말 그대로 ‘어디로 가라’는 것입니다.

어디로 갈 수 있을까요? goto로 갈 수 있는 곳은 다음과 같습니다.

첫째, 특정 장면 타임라인상의 특정 프레임 번호
둘째, 특정 장면 타임라인상의 프레임 레이블

가. 안내

이 예제에서는 단지 두 개의 액션 즉, stop과 goto 만으로 상호작용을 만들어 봅니다. 

[예제 파일] 다운로드(파일명 : img_gallery01.zip)

img_gallery01.zip

예제 파일(img_gallery01_ex.fla)을 플래시에서 열어서 실행해보면 다음 그림과 같이 네 개의 산이 번갈아 가면서 나타나는 애니메이션을 보실 수 있을 것입니다.

나. 예제 파일 설명

플래시에서 예제 파일을 열어보면 버튼, 산, 배경 등 3개의 레이어가 있습니다.

‘버튼’ 레이어에는 작은 산 그림 버튼과 ‘처음으로’라는 버튼이 들어 있습니다.

‘산’ 레이어에는 네 개의 산이 작은 그림에서 큰 그림으로 확대되어 나타도록 트윈-모션 처리가 되어 있습니다.



여기서 잠깐 생각을 해봅시다.

1) 우리는 이 무비를 실행해서 처음에는 네 개의 작은 산 사진이 나오는 화면이 정지된 상태로 나타나 있도록 하고,




2) 그 작은 산 사진 중 하나를 선택하면 해당 산이 작은 그림에서 큰 그림으로 확대되어 나타나도록 할 것입니다. 확대가 끝나면 다른 조작이 있을 때까지 그 산 사진이 확대된 채로 정지하고 있어야 할 것입니다.




3) 다른 사진을 보고 싶다면 왼쪽 위에 있는 작은 사진을 클릭하도록 하고, 그 결과는 역시 해당 작은 사진이 큰 사진으로 애니메이트되도록 합니다.




4) 마지막 하나, ‘처음으로’ 버튼을 누르면 실행 초기 화면이 나오도록 하는 것입니다.

이 모든 제어는 stop과 goto 액션만으로 다 해결할 수 있습니다.

다. goto 액션 자세히 살펴보기

다음 그림은 goto 액션을 도우미 모드로 적용하였을 때를 보여주고 있습니다.



① [이동하여 재생]은 어디로 가서 그곳에서 재생하라는 명령이고, [이동하고 중단]은 어디로 가서 그곳에서 멈추어라는 명령입니다.

② [장면]은 필요에 따라 여러 개를 만들 수 있다는 사실은 앞의 강의를 통해 익혔을 것입니다. 현재 장면 혹은 다른 장면을 펼침 목록을 통해 선택할 수 있습니다.

③ [유형]은 [프레임 번호], [프레임 레이블], [표현식], [다음 프레임], [이전 프레임]이 있습니다. 우리는 이 예제를 통해서 [프레임 레이블]을 이용할 것입니다.

④ [프레임]은 [프레임 레이블]을 붙여둔 경우 펼침 목록을 통해 레이블들을 보여주게 됩니다. 레이블이 없으면 프레임 번호를 입력해주면 됩니다.

 

라. 레이블 붙이기

레이블은 흔히들 ‘라벨’이라고 일컫는 것과 같은 개념으로 생각하시면 됩니다. 특정 키프레임에 이름을 붙여두는 것입니다. 이렇게 하면 키프레임이 편집 도중에 앞으로 혹은 뒤로 옮겨지더라도 goto 액션이 정확하게 찾아갈 수 있도록 해주는 역할을 합니다.

예제 파일에서 작은 사진이 큰 사진으로 확대되는 ‘산’ 레이어를 따라가면서 가장 작은 사진이 들어 있는 키프레임에 다음과 같은 방법으로 레이블을 붙여줍니다.




1) 백두산 그림이 확대되기 시작되는 키프레임을 클릭합니다.






2) [속성]창에서 [프레임]에 ‘박두산’이라고 입력합니다.




3) 이 결과로 다음 그림과 같이 타임라인에 레이블이 깃발과 글자로 표시됩니다.






4) 이와 같은 방법으로 나머지 산들도 각각 확대 시작 키프레임에 레이블을 그 산 이름으로 붙여주십시오.

마. stop 액션 넣기

앞서도 언급한 바 있지만 무비를 실행했을 때 첫 화면이 나와서는 멈추고 있어야만 합니다. 그래야 원하는 산 사진을 선택할 수 있게 됩니다.

또한 산 사진을 확대하여 보여준 후에도 멈추고 있어야만 합니다. 그렇게 하지 않으면 다음 산 사진이 연속적으로 확대되어 보이게 됩니다.

무비를 멈추는 액션은 간단하게 처리할 수 있습니다.

해당 키프레임에 stop 액션을 넣어주면 되는 것입니다.

1) 먼저 1프레임에 있는 키프레임을 클릭하여 선택한 후 [액션] 창을 엽니다.

2) 액션 중에서 [전역함수 > 타임라인 컨트롤]에 있는 stop을 더블클릭합니다.

이렇게 간단하게 stop 액션을 넣습니다.

이제 백두산이 확대 완료되는 키프레임을 선택합니다. 그리고는 위의 (1), (2)의 방법으로 stop 액션을 삽입합니다.

나머지 산들도 마찬가지 방법으로 처리합니다.

 

바. goto 액션 삽입하기

이제 남은 일은 작은 사진을 클릭하면 해당 사진이 확대되는 키프레임으로 가도록 하는 것입니다.

다음과 같은 방법으로 액션을 적용하면 될 것입니다.

백두산부터 해보겠습니다.

1) 1프레임에 있는 작은 백두산 사진을 선택 도구로 선택합니다.

※ 액션은 적용할 때는 항상 선택 도구로 먼저 액션을 적용할 곳(키프레임 혹은 심볼)을 먼저 선택하는 것을 잊지 마십시오.

2) 액션 창을 열고, [스크립트 도우미] 모드인가를 확인합니다.

3) [전역 함수 > 타임라인 컨트롤]에 있는 goto를 더블클릭합니다.

4) [이동하여 재생], [현재 장면], [프레임 레이블], ‘백두산’으로 설정해줍니다. 결과적으로 스크립트는 아래 그림과 같이 되어야 할 것입니다.



이 스크립트를 해석해보면 다음과 같습니다.

on (release) { <---- 마우스 왼쪽 버튼을 눌렀다 떼면

gotoAndPlay("백두산"); <--- 프레임 레이블 ‘백두산’으로 가서 재생

}

5) 나머지 산들도 위의 (1)～(4)와 같은 요령으로 스크립트를 적용합니다.

 

사. 유사한 액션 복사해서 쓰기

한번 만들어진 스크립트를 그와 유사한 다른 곳에도 적용하려면 복사해서 붙여넣기를 하면 편리합니다.

위의 경우 나머지 산 버튼에 적용할 스크립트는 레이블 이름 즉, 산 이름만 다를 뿐 나머지는 동일합니다.

5프레임에 있는 스테이지 왼쪽 위의 작은 산 사진 버튼에도 이를 적용해야 하므로 복사해서 붙여넣는 방식으로 나머지 버튼을 처리해보겠습니다.

1) 방금 위의 6. 과정에서 만든 액션을 복사합니다. 스크립트의 첫줄을 클릭하고, 끝 줄을 Shift 키를 눌러 클릭하면 블록이 만들어지게 됩니다.

마우스로 스크립트 내용을 드래그해서 둘러싸면 역시 블록이 만들어집니다.

이때 복사하기 단축키 Ctrl + C 키를 누르거나 마우스 오른쪽 버튼을 눌러 메뉴에서 ‘복사하기’를 실행하면 복사가 되게 됩니다.

2) 두 번째 산 버튼을 선택합니다. 산 버튼이 보이지 않으면 일단 액션 창을 닫고 선택하십시오.

3) 액션 창을 열고, 스크립트 창에 붙여넣기 단축키인 Ctrl + V를 누르거나 마우스 오른쪽 버튼을 눌러 ‘붙여넣기’를 합니다.

4) 붙여진 스크립트 중에서 수정해야할 라인을 선택합니다. 여기서는 백두산을 킬리만자로로 수정해야 할 것이므로 2번 라인을 선택합니다.

위의 그림과 같이 [프레임]의 펼침 목록을 눌러 킬리만자로를 선택합니다.

5) 이와 같은 방법으로 1프레임에 있는 나머지 버튼들과 5프레임에 있는 버튼들에 적용할 액션을 만들어줍니다.

6) 산 버튼들에 액션을 모두 적용하였다면 이제 남은 것은 ‘처음으로’ 버튼에 대한 액션 적용입니다.

5프레임에 있는 처음으로 버튼을 선택한 후 액션 창을 엽니다.

역시 goto 액션을 더블클릭합니다.

이 버튼은 [이동하고 중단], [현재 장면], [프레임 번호], [1]

즉, ‘현재 장면의 1프레임으로 가서 정지할 것’이란 의미의 스크립트를 만들어 줍니다.

아. 무비 테스트

Ctrl + Enter키를 눌러 의도한 대로 만들어졌는지 확인해 보십시오.