4-15. 이미지 갤러리 만들기 - loadMovie / unloadMovie

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

4-15. 로드 무비를 이용한 이미지 갤러리 만들기

이번 시간에 제작해 볼 작품은 몇 개의 쇽웨이브 파일(SWF)을 만들고 이 파일들을 불러들여 보이주거나 보이지 않게 닫는 방법을 이용한 이미지 갤러리입니다. 이전의 goto를 이용하는 방법과는 다른 방법으로 이번 예제에서 사용할 액션은 loadMovie와 unloadMovie입니다.

아울러 화면 전체에 꽉 차도록 쇽웨이브 파일을 보이도록 하는 방법과 실행 파일을 만들고, 시작과 종료를 하는 방법을 알아봅니다.

[완성된 예제]

[만들어보기]

가. 버튼 및 무비 클립 만들기

Load Movie는 쇽웨이브 플래시 무비 파일에서 또 다른 플래시 무비 파일을 불러들이는 기능입니다.
Unload Movie는 불러들인 무비 파일을 닫아주는 기능입니다.
이 기능을 활용하면 하나의 무비 파일에서 여러 개의 무비 파일을 불러들여 화면상에 보여주거나 불필요하면 닫을 수 있으므로 다양한 모습으로 자료를 제작할 수 있습니다.





1) 무비 크기의 설정


로드 무비 제작에 있어서 가장 먼저 염두에 두어야 할 점은 무비의 크기입니다.
가장 먼저 실행되는 무비에서 다른 무비들이 동작하게 되므로 불러들이는 무비는 먼저 실행되는 무비와 크기가 같거나 작아야 한다는 점을 명심하여야 합니다.

여기서는 가로 500 * 세로 400 크기의 무비를 기준으로 만들기를 해보겠습니다.

메뉴의 Modify > Movie를 실행(단축키는 Ctrl + J)하여 무비 설정창을 불러냅니다.

무비의 배경색 즉, [Background Color:]의 색상버튼을 눌러 검정색으로 바꾸어줍니다.

 

2) 화면 하단에 메뉴를 만듭니다.

- 예제에서 사용한 꽃 사진 다운로드하기


flower.zip

- 적당한 폴더에 압축을 푼 후 사용하십시오]

예제에서는 버튼 편집을 통해 [Over]와 [Down] 프레임에 글자를 넣어주었고, [Hit]영역을 글자의 길이만큼 넓혀 주었습니다.

그림은 위의 사진을 축소시켜 사용하였습니다.




3) 메뉴를 선택하기 전에 나타나는 '아름다운 꽃 구경'은 무비클립을 이용하였습니다.


[만드는 법]
(1) 텍스트 도구를 이용하여 '아름다운 꽃 구경'을 입력한 후, 글자의 크기와 색깔, 글꼴 등을 텍스트 패널을 이용하여 변경하여 줍니다.

(2) 기본 글꼴(바탕, 돋움, 굴림, 궁서)이 아닌 글꼴을 사용한 경우 Ctrl + B키를 눌러 글자를 그림으로 변경한 후 그룹화(Ctrl + G키 누름)시켜 줍니다.

(3) 글자를 선택한 상태에서 심볼(무비클립 혹은 그래픽, 이름-아름다운1)으로 등록해줍니다.

(4) Ctrl + L 키를 눌러 심볼 라이브러리를 불러냅니다.

(5) Ctrl + F8키를 눌러 새로운 심볼을 만듭니다. 이름은 '아름다운2'로 하고 비헤이비어는 무비 클립으로 해줍니다.

(6) 라이브러리에서 등록해둔 '아름다운1' 심볼을 미리보기에서 드래그해서 편집창의 + 표시 위에 놓습니다.

(7) 20 프레임과 40 프레임에 키프레임을 넣어주고, 1프레임은 좌측으로, 40 프레임은 우측으로 이동합니다. 이동할 때는 마우스 대신 키보드의 Shift + 방향키를 이용하면 정확한 수평 혹은 수직 이동을 할 수 있습니다.

(8) 1~20, 21~40 프레임 사이를 [Frame] 패널을 이용하여, [Motion] 명령을 줍니다.

(9) 1 프레임과 40 프레임의 글자를 선택한 후 [Effect] 패널에서 [Advanced]를 이용하여 색상과 투명도를 설정해줍니다.

(10) 본 편집창으로 나와서 라이브러리에 있는 '아름다운2' 심볼을 편집창에 가져다 놓습니다.

(11) 반대로 움직이는 클립을 만들려면 라이브러리 창의 오른쪽 상단에 있는 [Options]를 클릭한 후, 메뉴 중에서 [Duplicate;복제하기]를 선택하면 쉽습니다.
이름을 '아름다운3'으로 고친 후, 미리보기를 더블 클릭해서 심볼 편집창으로 들어갑니다.
첫 프레임은 +를 중심으로 우측으로 가져다 놓고, 40 프레임은 좌측으로 가져다 놓으면 반대로 움직이는 무비 클립이 만들어지게 됩니다.


4) 이렇게 만든 파일을 저장합니다.

나. 각각의 무비 만들기

1) 앞 페이지에서 제공해드린 꽃 사진을 이용하여 각각의 파일을 만들어봅니다.
앞서의 과정을 통해 익힌 애니메이션 기법을 총동원하여 만들어보기 바랍니다.

제공해드린 사진은 가로 크기는 같지만, 세로 크기가 약간씩 다릅니다.
이렇게 크기가 다른 사진을 원하는 크기로 자르는 방법을 먼저 익혀봅니다.

새 파일을 하나 엽니다.

메뉴의 [Modify > Movie]를 실행해서 크기는 앞서의 메뉴 화면 크기와 같게 합니다.
(앞서의 무비 크기는 500 * 400 이었음)


[주의] 앞서 메뉴 파일의 배경은 검정색으로 하였습니다만, 로딩될 파일의 배경색은 흰색을 사용해도 상관이 없습니다.
그것은 플래시의 기본 속성이 맨 처음 실행된 파일의 배경색은 다음에 로딩되는 파일의 배경색을 무시하기 때문입니다.
따라서 파일마다 다른 배경색을 사용할 수 없다는 점을 명심할 필요가 있습니다.




2) [File > Import] 메뉴를 이용하거나 단축키 Ctrl + R 키를 이용하여 flo-1.jpg 파일을 불러들입니다.

파일 이름이 일련번호로 되어 있으면 메시지 창이 나타나게 됩니다.
이미지를 연속적으로 연속적으로 불러와서 각 프레임에 하나씩 배치하려면 [예] 단추를, 그렇지 않고, 지정한 이미지만 불러들이려면 [아니오] 단추를 누릅니다.
여기서는 작업의 성격상 연속적으로 불러들일 필요가 없으므로, [아니오]를 선택합니다.



3) 그림이 거의 화면 가득하게 들어오게 됩니다.

앞서 만든 메뉴 화면에서 우리는 아래쪽에 메뉴를 두고, 메뉴를 클릭하면, 메뉴는 계속해서 화면상에 나타나고, 위쪽 넓은 공간('아름다운 꽃 구경'이 나타나는 영역)에 꽃이 보이도록 할려고 합니다.

그렇게 하려면 메뉴가 나타나는 영역과 꽃 그림이 겹쳐서는 안됩니다.
따라서 화살표 도구를 선택하고, 도구모음 아래쪽의 옵션에서 크기 조절 도구를 선택한 후 그림의 크기를 다음과 같이 줄여주도록 합니다.


[참고] 비트맵 그림 잘라내기
플래시는 백터 방식으로 그림을 다루므로 비트맵 방식의 그림(Gif, Jpg, Bmp 등)은 수정을 하는데 한계가 있습니다.
밝기를 조절하거나, 투명도 조절, 회전 등은 가능하고, 필요없는 부분을 잘라낼 수는 있습니다.

그림의 필요없는 영역을 잘라내고 싶으면 일단은 그림을 해체시켜야 합니다.
해체시키는 단축키는 Ctrl + B(Break Apart) 입니다.

그림을 선택한 후 Ctrl + B 키를 눌러 그림을 해체한 다음 화살표 도구나 올가미, 라소 등의 도구를 이용하여 불필요한 영역을 선택한 후 Delete 키를 누르면 제거됩니다.

편집 후 다시 묶어주는 기능키는 Ctrl + G(Group)입니다.

4) 여러 가지 애니메이션 기법을 이용하여 그림이 움직이거나 변하도록 합니다.

예제에서는 우측에서 그림이 날아 오도록 하였습니다.

빠른 속도로 날아오다가 속도가 느려지도록 하려면 [Frame]의 [Tweening:]에서 [Motion]을 선택하였을 때 나타나는 아래쪽의 세부 설정 항목 중에서 [Easing:]의 값을 올려주면 됩니다.


그림이 날아와 멈추게 하려면 트위닝의 마지막 프레임에 액션 스크립트를 'Stop'으로 해주십시오.




5) 앞서 저장한 메뉴 파일과 같은 폴더에 이름으로 저장(ex2-1.fla)을 하고, Ctrl + Enter 키를 눌러 무비 파일을 만듭니다.

6) 같은 방법으로 나머지 4개의 꽃 그림 파일을 만듭니다.

파일 이름은 설명의 편의상 ex2-2, ex2-3, ex2-4, ex2-5로 하겠습니다.
이 파일들은 모두 Ctrl + Enter키를 쳐서 무비 파일(*.swf)로 만들어두어야 합니다.
로드 무비 명령으로 불러올 수 있는 파일은 원본 파일인 fla가 아니라, 무비 파일인 swf이기 때문입니다.





강의의 편의상 비트맵 그림을 이용하여 파일을 만들어보았습니만, 플래시만으로 애니메이션 작품을 만드는 것이 바람직하다고 생각됩니다.

틈나는대로 각각의 파일을 만들어 두었다가 종합 메뉴를 통해 이 파일들을 연결하면 큰 작품을 만드는 데도 무리가 없을 것입니다.

다. 로드 무비 / 언로드 무비

앞 페이지들을 통해 우리는 메뉴에 해당되는 ex2-0 파일을 비롯해 꽃 그림이 들어가 ex2-1에서 5까지의 파일을 만들어 보았습니다.

여기서는 이 파일들을 메뉴 파일에 있는 버튼으로 연결해보도록 하겠습니다.
개별적인 쇽웨이브 무비 파일(swf) 파일을 연결할 때는 LoadMovie 라는 액션 스크립트를 사용합니다.

1) 메뉴 파일인 ex2-0.fla 파일을 엽니다.

하단의 첫 번째 버튼을 선택하고, 마우스 오른쪽 버튼을 눌러 [Actions] 창을 불러냅니다.




2) 액션 스크립트 중에서 [Basic Actions]의 하위 메뉴 중 [Load Movie]를 더블클릭합니다.

하단의 [URL:] 창에 이 버튼을 누르면 불러올 파일 즉, 'ex2-1.swf'을 적어줍니다.
[Location:]에는 'Level' 값을 '1'로 해줍니다.




[주의] 경로와 레벨값

로드 무비에서 정확히 알고 있어야 할 개념이 경로와 레벨 값의 개념입니다.

경로는 메뉴가 있는 파일이 기준이 됩니다. 따라서 하위 폴더의 파일이라면 '하위폴더명/파일이름.swf'로 적어주면 되고, 상위 폴더의 파일이라면, '../파일명.swf'로 적어주면 됩니다.

레벨값은 유리판과 같다고 생각하면 됩니다. 0은 자기 판이고, 1은 그 위에 겹쳐놓은 것이고, 2는 1 위에 겹쳐놓은 것과 같은 것입니다.
따라서 위에서 레벨값을 '1'로 준 것은 아래쪽의 '0'에 메뉴가 보이도록 겹쳐놓겠다는 의도입니다.




3) 마찬가지 방법으로 두 번째 버튼도 '액션 스크립트 > 로드 무비 > URL : ex2-2.swf, Level : 1'로 해줍니다.

나머지 버튼들은 모두 파일 이름만 다를 뿐 레벨 값은 모두 1로 해주십시오.
레벨값을 '0'으로 하면 메뉴 화면이 사라지게 되고, 2 이상으로 하면 앞선 그림 위에 포개져서 그림이 나타나게 됩니다.




4) ex2-5.fla 파일에는 Load Movie의 반대 명령인 Unload Movie를 넣어보겠습니다.

'그림닫기'란 이름의 버튼 심볼을 만듭니다.
이 버튼을 마우스 오른쪽 단추로 눌러 [Actions]에서 [Unload Movie]를 더블클릭해서 선택합니다.
아래 쪽에 있는 [Loacation:]에서 [Level]값을 '1'로 해줍니다.