'프리로더'에 해당되는 글 1건

  1. 2010.03.05 플래시(Flash)에서 프리로더(preloader)만들기 (2)

플래시 파일의 용량이 클 경우에 웹에서 플래시를 조금씩 받아오게 된다. 그런데 다운로드 속도가 플레이 속도보다 느리다면 플래시 화면이 끊기거나 음성과 위치가 맞지 않는 등 많은 문제를 유발할 수 있다.
그래서 사용하는 것이 프리로더(preloader)이다.(플래시를 플레이하기 전에 미리 로딩을 다 해놓는 것이다.)

이번에 홈페이지를 하나 만들게 됐는데, 만들다보니 swf파일의 크기가 어느정도 크다고 판단되었기에 프리로더가 필요하게 되었다.

그런데 나는 as1.0 , as2.0으로는 예전에 프리로더를 만들어봤지만, as3.0으로 작업을 한 것은 이번이 처음이었다.
그래서 간단한 기능 하나를 하는데에도 약간씩 이해 못할 문제들이 발생하곤 했는데 그 중 하나가 프리로더였다.

먼저 플래시에서 장면(Scene)을 하나만 이용한다고하면 프리로더는 1프레임에 위치하게 된다. 프리로딩하는 시간동안 사용자가 지루해 할 것 같다면 가벼운 에니메이션을 1프레임에 무비클립을 이용해서 위치할 수도 있고, 얼마나 로딩했는지 퍼센트 또는 progress bar로 현재 로딩 상황을 보여줄 수도 있다.
이러한 부분은 약간 부가적이라고도 생각할 수 있는 부분이지만, 사용자가 로딩하는 시간이 지겨워서 웹 브라우저를 끄지 않도록 충분히 관심을 끌어야 한다.

그리고 또 중요한 것이 actionScript이다.
먼저 소스 코드를 살펴보도록 하자.

stop();

/******************************************************************
** 이벤트 핸들러 등록
******************************************************************/

loaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadingHandler);
loaderInfo.addEventListener(Event.COMPLETE, preloadingCompleteHandler);




/******************************************************************
** 함수 정의 
******************************************************************/

function preloadingHandler(e : ProgressEvent) : void {
	var percent : int = int(e.bytesLoaded / e.bytesTotal * 100);
	loadedPercent.text = percent.toString() + "%";
	
	if(e.bytesLoaded == e.bytesTotal) 
		loaderInfo.removeEventListener(ProgressEvent.PROGRESS, preloadingHandler);
}


function preloadingCompleteHandler(e: Event) {
	loaderInfo.removeEventListener(Event.COMPLETE, preloadingCompleteHandler);
	gotoAndStop(2);
}


먼저 stop()을 이용해서 플래시 무비가 1프레임에서 멈추도록한다.(stop()을 하지 않으면 다음 프레임으로 넘어가서 프리로더가 제대로 동작하지 않을 것이다.)
그리고 loaderInfo라는 객체에 두개의 이벤트 리스너를 추가한다.

ProgressEvent.PROGRESS는 바이트를 로드할 때마다 호출되는 이벤트이다.
그래서 preloadingHandler()를 보면 로딩된 바이트를 퍼센트로 계산하여 loadedPercent라는 동적 텍스트에 값을 넣어준다. 그리고 종료 조건으로 로드된 바이트(e.bytesLoaded)와 전체 바이트(e.bytesTotal)가 같으면 현재 이벤트 리스너를 삭제한다.

Event.COMPLETE는 전체 바이트를 모두 로딩하면 호출된다.
그래서 여기에서는 자신의 이벤트 리스너를 삭제하고 2프레임으로 가서 play하도록 한다.

이렇게 하면 기본적인 프리로더가 만들어지는 것이다.
만약 더 화려한 프리로더를 만들고 싶다면 ProgressEvent.PROGRESS가 호출될때 등록한 이벤트 핸들러 함수에서 적절한 동작을 하도록 해주면 된다.
신고
Posted by Code-Moon

댓글을 달아 주세요

  1. BlogIcon 깜씨ㅋ 2012.01.14 22:30 신고 Address Modify/Delete Reply

    찾고 있었는데 정말 감사합니다! ^^
    죄송한 말씀이지만, 밑에 오타가 있네요 ;;
    pr"o"loadingHandler라고 되어있습니다 ㅎ

티스토리 툴바