4-12. 프리로딩 활용하기 - If Frame Is Loaded

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

4-12. 프리로딩 활용하기 - If Frame Is Loaded

프리 로딩(Pre Loading)이란 파일의 크기가 비교적 큰 파일을 웹을 통해 보여주고자 할 때 해당 파일을 다운로드해서 보여줄 수 있는 상황까지의 상태를 그래프 혹은 안내말로 표시해 줌으로써 보는 이가 지겹지 않도록 하는 것입니다.

액션 스크립트 중 'If frame is loaded'를 사용하여 구현합니다.

[완성된 예제]

다음 파일을 다운로드 하십시오. 이 파일을 이용해서 실습을 해보겠습니다.

[연습용 예제 ex3-0.fla 다운로드 하기]


ex3-0.fla

이 파일은 아무런 보완 작업없이 인터넷 서버에 올려놓는다면 2,400bps 정도의 전송 속도를 가진 인터넷 환경에서는 온전하게 내용을 보려면 1분 이상을 기다려야 합니다.
이 기다림의 지루함을 조금이라도 덜어주기 위해 기다리는 동안 메시지와 함께 로딩되는 상황을 그래프로 보여주는 기능이 프리 로드입니다.
 

이 무비 파일의 용량은 155KB 정도이고, 내부적으로 155KB의 대부분을 돋보기 배경 그림이 차지하고 있는 상황입니다. 그리고 위의 그래프에서 보이듯이 가장 많은 부하를 야기하는 부분이기도 합니다. 그림이 로딩되기까지의 기다림의 시간을 조금이라도 부담을 줄여주도록 조치하는 것이 이번 차시에서 익힐 내용입니다.

이제 기다림의 지루함을 없애도록 이 파일이 다운로드 완료될 때까지 '다운로드 중입니다. 잠시 기다려주십시오'라는 안내문이 나오고, 다운로드가 완료되면 재생을 하도록 해보겠습니다.


※ 플래시 기반의 웹 사이트에 가보면 특히 많은 데이터를 가진 상품 브로셔 등을 보여주는 페이지에서 로드 무비 기법을 다양한 형태로 사용하고 있음을 볼 수 있을 것입니다.

1. 마스크 효과를 이용한 메시지 만들기

다운로드한 파일을 열어서 [Window > Pannels > Scene]을 체크하여 보면 두 개의 장면(Scene) 있음을 알 수 있을 것입니다.

앞서 다운로드한 파일을 가지고 실제로 만들어 해보겠습니다.
ex3-0.fla 파일을 불러옵니다.

이 파일은 앞서 말씀 드린 개념과는 약간 다른 구조를 가지고 있습니다.
먼저 스테이지의 상단 장면 선택 아이콘의 펼침 목록을 펼쳐보면 다음 그림과 같이 장면(Scene)이 두 개로 되어 있고, 첫 번째 장면의 이름은 'pre_load', 두 번째 장면은 'mag'로 이름 붙여져 있습니다.

'pre_load' 장면에는 실습을 위해서 아무것도 입력되어 있지 않습니다.
'mag' 장면에는 돋보기 무비가 한 개의 프레임에 들어 있습니다. 그리고 더 이상의 재생을 막기 위해 1프레임에 'stop' 액션이 들어 있습니다.

먼저 'mag' 장면의 1 프레임이 로딩되지 않았을 때 나타날 메시지를 표현해 보겠습니다.

마스크 효과를 이용합니다.

1) 'Layer 1'을 선택한 후 이 레이어에 텍스트 도구를 이용하여 '프로그램을 다운로드하고 있습니다'라고 입력합니다.

20프레임에 가서 F5키를 눌러 프레임을 연장시켜 줍니다.





2) 레이어를 하나더 추가하고 사각형을 그리되 '프'자만 가려질 정도로 그립니다.


그려진 사각형을 Ctrl + G 키를 눌러 그룹화해준 다음,
20프레임에 키프레임을 넣어줍니다.

그리고 20프레임에서 사각형을 크기 조절 도구를 이용하여 글자가 모두 가려지도록 가로로 늘려줍니다.

1프레임과 20프레임 사이를 [트윈(tween) > 모션(Motion)] 해줍니다.





3) 'Layer 2' 이름 위에서 마우스 오른쪽 버튼을 눌러 [Mask]를 클릭, 체크하여 이 레이어를 마스크 레이어로 만들어 줍니다.


Ctrl + Enter 키를 쳐서 실행해보면 글자가 차례대로 나타날 것입니다.




4) 'Layer 2'를 선택한 상태에서 레이어를 하나더 추가하고, 30프레임에 키프레임을 넣은 다음
'잠시만 기다려주십시오'를 입력합니다.

50프레임에서 F5키를 눌러 프레임을 연장시켜줍니다.

4단계와 같은 방법으로 레이어를 하나더 추가하고,
30프레임에 키프레임을 넣은 다음,

사각형을 그려 그룹화해주고,

50프레임에 키프레임을 넣고서 크기를 늘려줍니다.

[Frame] 패널에서 [Tweening > Motion] 을 주고 난 뒤,

마스크 레이어로 만들어 줍니다.




5) '로딩 중' 레이어와 '잠시만' 레이어 사이에 10 프레임 정도를 띄워둔 이유는 너무 급하게 글자가 바뀌어 나오는 현상을 막기 위해서입니다.

'로딩 중' 레이어와 그에 따른 마스크 레이어를 29 프레임에서 F5 키를 키를 눌러 프레임을 연장시켜 주면 '프로그램을 다운로드....' 메시지가 잠시 화면에 머물고 있다가 '잠시만...'으로 대체되게 될 것입니다.

마찬가지 원리로 '잠시만'과 그에 따른 마스크 레이어도 60프레임까지 연장시켜 주어야 합니다.




6) 만들어진 작품을 재생해보면 순식간에 안내말이 지나가 버리고, 다음 장면인 돋보기 화면으로 가버립니다.

이것을 실제 통신 환경처럼 테스트해볼려면 Ctrl + Enter 키를 쳐 테스트 무비 화면이 나오면 메뉴에서 [보기 > 다운로드 설정 >28.8] 또는 그 이하로 설정하고 [컨트롤] 메뉴에서 [재생]을 해보면 어느 정도 감을 느낄 수 있을 것입니다.





7) 끝 프레임에서 다시 1프레임으로 돌아가도록 해서 'mag' 장면의 1프레임이 로딩되었는가를 확인하도록 해야겠지요?

1프레임으로 돌아가도록 하는 방법은 아주 간단합니다.

'잠시만' 레이어에 마지막 60프레임에 키프레임을 넣어줍니다.
액션 스크립트에서 'Go to'를 선택하고, 현재 장면의 1프레임으로 가도록 하면 됩니다.


주의) 지금 사용하고 있는 컴퓨터에서 이 파일을 완성한 후 테스트하면 메시지가 전혀 보이지 않을 수도 있습니다.
그 이유는 현재의 컴퓨터에서 파일을 불러오는 데는 인터넷 상에서 불러오는 것에 비교하면 시간이 거의 걸리지 않기 때문입니다.
따라서 이 프리로딩은 웹 상에 무거운 플래시 무비 파일을 올려놓고 타인에게 제공할 때 필요한 것입니다.

2. 프리 로딩 만들기

8) 이제 프리 로딩을 구현해 보겠습니다.

'pre_load' 장면에서 프리로딩을 구현하되, If frame is loaded의 대상 프레임은 'mag' 장면의 1번 프레임으로 잡아주면 될 것입니다.




9) 장면 'pre_load'를 선택합니다.
'로딩중' 레이어의 끝 프레임에 키프레임을 넣어주고, 액션 스크립트 창을 엽니다. 이것은 이쯤 와서 mag 장면이 로딩되었는가를 점검해보고 로딩 완료되면 mag 장면으로 점프하기 위해서입니다.

[인덱스]에서 'If frame is loaded'를 더블클릭합니다.


아래쪽 입력창에 중에서 [Scene:]에서 펼침 목록을 누르고, 'mag'를 선택합니다.




10) 다시 액션스크립트의 왼쪽 항목에서 'Go to'를 더블클릭합니다.
[장면]은 앞서와 마찬가지로 'mag'를 선택하고,
[유형] 역시 그대로 프레임 번호로 하고,
[프레임]은 1로 해줍니다.
그리고 맨 아래쪽에 있는 Go to and Paly 항목의 체크를 없애줍니다.
체크를 없애주면 Play가 Stop으로 바뀌게 됩니다.

Stop으로 해주는 이유는 mag 장면은 1개의 프레임으로 구성되어 있으며, 더 이상 재생할 프레임이 없기 때문입니다. play로 하게 되면 다시 pre_load 장면으로 와서 재생을 하게 됩니다.

이렇게 해서 만약에 mag 장면의 1 프레임이 로딩되거든 mag 장면의 1프레임으로 가서 재생을 하라는 명령이 완성된 것입니다.

로딩이 완료되지 않았다면 계속 재생을 해가다가 마지막 프레임에서 1프레임으로 돌아가라는 명령을 만나게 되므로 다시 화면에는 '프로그램을 다운로드...' 메시지가 출력되겠지요?

3. 그래프를 이용한 프리 로딩 만들기

여기서는 심화 단계랄까요? 좀더 세련된 모습으로 프리로딩을 구현한 예제 파일을 하나 제공해 드리겠습니다.
▶ 그래프를 이용한 프리 로딩 파일(ex3-02.fla)


ex3-02.fla

이 파일을 플래시에서 불러오기해서 무비를 만들어보십시오.


어떻습니까?
파일의 전체 사이즈와 다운로드되는 사이즈가 표시되고, 현재 다운로드된 정도가 막대 그래프로 표시가 되지요?
앞서 만들어보았던 예제보다 약간더 세련되어 보이지 않습니까?

'pre' 장면에 있는 무비클립에 심어져 있는 액션은 다음과 같습니다.

onClipEvent(load) {
        if (_root.getBytesLoaded() == _root.getBytesTotal()) {
                _root.gotoAndPlay(2);
        }
}
onClipEvent(enterFrame) {
        loaded = _root.getBytesLoaded();
        total = _root.getBytesTotal();
        this.bar._xscale = (loaded/total)*100;
        this.display = Math.round(loaded/1000) + "KB / " + Math.round(total/1000) + "KB";
        if (this.bar._xscale == 100) {
                _root.gotoAndPlay(2);
        }
}


전체 파일의 바이트수와 로딩된 바이트 수가 같으면 재생을 하라.

로딩된 바이트수를 loaded라고 하고,
전체 바이트수를 total이라고 정의한다.
이것을 막대 그래프로 그리되 백분율로 표시한다.
그리고 로딩된 바이트수를 KB로 환산한다.
100%가 되면 재생을 한다(즉 다음 장면인 scene 1로 간다.

대략 이런 의미 입니다. 

모방이 창조의 지름길아라고 했던가요?
어쨋든 잘 만들어진 플래시 무비는 그 원본을 구할 수 있다면 구해서 어떻게 만들어졌는지, 특히 액션 스크립트를 어떻게 구현하였는지를 면밀히 분석해볼 필요가 있습니다.