본문 바로가기

FLASH/AS2.0

[AS2.0] 플래시 로딩바입니다 - 파일포맷 플래시 CS4

한때는 RIA라고 해서 화려한 모션과 어플리케이션 기능을 가진 기술들이 많았었는데 고인이 되신 스티브잡스가 특정기술에 종속되지 말고 HTML5로 하자고 주장한 이후에 플래시가 웹에서 서서히 자취를 감추게 됩니다.

하지만 아직도 이러닝 컨텐츠 진영에서는 플래시로 개발하고 있으며 언어도 액션스크립트 3.0이 아닌 액션스크립트 2.0을 사용하여 개발되는 사례가 많이 있습니다.

저 또한 지금도 그렇게 프로젝트를 하고 있구요.


플래시는 로딩이라는 것이 다 끝나면 실행되도록 해 주어야 중간에 오류가 안납니다.

그래서 로딩이 다 된 이후에 플레이를 하도록 해 주어야 합니다.

이것은 게임도 마찬가지이지요.

요즘은 인터넷 속도가 빨라서 로딩을 안 달아 주기도 하지만 이러닝을 개발할 때는 로딩을 꼭 다는 것이 표준 프로세스에 가깝습니다.


아래 이미지처럼 작동됩니다.


로딩무비클립 안에 코드를 작성하여 컴포넌트처럼 만들어 두면 사용하기 정말 편합니다.

플래시 타임라인상의 첫프레임에 이 무비클립을 놓습니다.


무비클립 내부에는 다음의 코드가 들어 있습니다.


var _roots:MovieClip = _parent;

var _bar:MovieClip = this.bar;

var _box:MovieClip = this.box;

var _load:Number = 0;

function setLayout() {

_roots.stop();

_bar._xscale = 0;

var _tmp:MovieClip = this.createEmptyMovieClip("_tmp", this.getNextHighestDepth());

_tmp.onEnterFrame = function() {

_load = int((_roots.getBytesLoaded()/_roots.getBytesTotal())*100);

_bar._xscale =_load;

_info.text = "Download: "+_load.toString()+" % 완료";

if(_load >= 100) {

_info.text = "Download Complete";

_roots.play();

delete onEnterFrame();

}

}

}

setLayout();


코드의 원리는 다음과 같습니다.

getBytesTotal()은 모든 용량을 구하는 메서드이고

getBytesLoaded()는 현재 로드된 용량을 구하는 메서드입니다.

현재 로드된 양 나누기 모든 용량이 1이 되면 전부다 로드된 상황인거죠.


파일첨부합니다. 

함께 잘 사용했으면 좋겠습니다. ^_^