이미지 로드하기(MovieClipLoader 이용)

< 출처 : http://namooya.com/zboard/zboard.php?id=f4f&no=24 >

[시작하기 전에]

이번에는 image로딩에 관해서입니다.

MovieClipLoader 클래스는 FlashMX2004버전때부터 지원하고 있습니다.
이미지나(jpeg) 또다른 플래시(swf)를 로딩하기 위해서 로딩 과정을 표시하는 것과, 로딩 완료후 그것을 어떻게 조정하느냐가 중요하죠.
예를 들어 img.jpg를 특정 무비클립내에 로딩한다고 하면, img.jpg가 얼마나 로드되고 있는지 알려줘야 하고, 다 로드 된 것을 알아차려, 그 크기와 위치를 조정해줘야 합니다.
2004버전이전에는  MovieClip.getBytesLoaded() 메소드를 통해서 로드과정을 표시하고, onClipEvent(data)나 MovieClip.onData를 통해서 로드가 다 되었다는 것을 알아냈습니다. 하지만, 쓰는 데 있어서 불편함이 많았고,
자주 쓰는 것임에도 불구하고, 새로운 플래시를 만들 때마다 로딩 과정 표시함수, 로딩 후 처리함수를 일일이 만들고, 그것들을 연결시켜줘야 했죠.
메크로미디어사 측에서도 이런 고충을 알았는지, MovieClipLoader 클래스를 제시해서 손쉽게 이미지와 swf 로딩을 할 수 있도록 하게 되었습니다.
사용한 소스는 액션스크립트에서 발췌해서 수정을 가한 것입니다.
따라서 변수 기명법이 지금까지 제가 해왔던 방식과는 약간의 차이가 있습니다.
하지만 이 방식이 메크로미디어사 측에서 추천하는 방식이니 제 방식으로는 고치지 않았습니다.
별로 다르지 않으니 보는데 무리는 없을 것입니다.

[활용방법]

이번 강좌 역시 어떠한 저작물을 만들기 위한 준비과정입니다.

[접두어]

무비클립 인스턴스명 : i+이름(사운드용 무비클립은 s+이름)
매개변수명 : v+이름
배열객체 : a+이름
클래스명 : c+이름
함수명 : f+이름
버튼인스턴스명 : b+이름
임시변수명 : temp+이름
링크에지명 : l+이름
어태치된 무비클립명 : place+이름
동적으로 생성된 무비클립명 : d+이름
외부파일에는 쓰는 변수명 : p+이름
LoadVars 객체의 인스턴스 명 : for+이름
텍스트 필드 계열 인스턴스명 : t+이름

[전체적인 구성]

모두 4개의 레이어로 구성되어 있습니다.
○ 제일 위의 레이어는 항상 그렇듯이 액션스크립트 전용 레이어입니다.
○ 그 다음에 보이는 '위배경' 레이어는 말그대로 위배경입니다. 그래픽요소만 있기 때문에 신경 쓸 것 없습니다.
○ 그다음이 'MnBnT' 레이어인데 여섯 개의 버튼과 한 개의 텍스트 필드, 한 개의 무비클립이 위치하고 있습니다.
○ 그 아래 '배경' 레이어입니다.

정리 해보면

순서	레이어이름	배치된 무비클립 & 콤포넌트 & 버튼
1	액션	없음
2	윗배경	없음
3	MnBnT	b0(Button),b1(Button),b2(Button),b3(Button), b4(Button),b5(Button),tBoard(텍스트필드) iLoadPlace(로드장소)
4	배경	없음

 

[액션스크립트 설명]

모든스크립트는 메인프레임의 2프레임에 위치하고 있습니다.

[선수학습]
MovieClipLoader 클래스다음은 액션스크립트 사전의 내용입니다.

클래스를 사용하면 SWF 또는 JPEG 파일이 무비 클립으로 로드(다운로드)되는 동안 상태 정보를 제공하는 리스너 콜백을 구현할 수 있습니다.
MovieClipLoader 기능을 사용하려면 loadMovie()나 MovieClip.loadMovie() 대신 MovieClipLoader.loadClip()을 사용해 SWF 파일을 로드합니다.

MovieClipLoader.loadClip() 명령을 실행하면 다음과 같은 이벤트가 나열된 순서대로 발생합니다.

1. 다운로드되는 파일의 첫 번째 바이트가 디스크에 기록되었을 때
MovieClipLoader.onLoadStart() 리스너가 호출됩니다.

2. MovieClipLoader.onLoadProgress() 리스너를 구현한 경우, 이 함수는 로드 과정 동안 호출됩니다.
중요: 로드 과정 중에 아무 때나 MovieClipLoader.getProgress()를 호출할 수 있습니다.
3. 다운로드되는 파일이 모두 디스크에 기록되었을 때 MovieClipLoader.onLoadComplete() 리스너가 호출됩니다.

4. 다운로드된 파일의 첫 번째 프레임 액션이 실행된 후, MovieClipLoader.onLoadInit() 리스너가 호출됩니다.
MovieClipLoader.onLoadInit()가 호출된 후에는 속성을 설정하거나 메서드를 사용할 수 있으며 로드된 무비와 상호 작용할 수 있습니다.

파일을 완전하게 로드하지 못하면 MovieClipLoader.onLoadError() 리스너가 호출됩니다.

뭐.... 읽어보면 알 수 있는내용입니다.
사용법은 실제 소스를 보면서 설명합니다.

[메인스테이지 : 2frame]//MovieClipLoader 클래스를 사용하기 위한 인스턴스를 생성합니다.var my_mcl = new MovieClipLoader();

//리스너를 만들기 위해 새로운 객체를 만들어줍니다.
//이 객체에 중요함수 들이 들어갑니다.
//결론부터 말하면, 새로운 객체를 만들고, MovieClipLoader의 여러 가지 리스너 함수를 새로 정의한다음,
//MovieClipLoader의 인스턴스에 연결해주는 구조입니다.
//다소 복잡한 구성으로 보일 수 있으나 리스너의 구현은 보통 이런식으로 하니 이 방식을 잘 알아둘 필요가 있습니다.
//마우스 리스너, 키보드 리스너도 모두 이런 방식으로 구현합니다.
myListener = new Object();

//파일을 로드할 때], 가장 먼저 실행되는 리스너입니다. 이때 로딩이 시작된다는 메시지를 표시해주면 됩니다.
myListener.onLoadStart = function(vTarget_mc) {
        _root.tInfo.text = vTarget_mc+"에 이미지 로딩을 시작합니다.\n";

       //위에서 굵은 글씨로 중요라고 해서 getProgress()함수를 언제든지 실행할 수 있다고 되어있습니다.
       //이함수는 현재 로딩된 bytes를 구하는 데 씁니다.
       //사용법은 아래와 같이 변수를 하나 만들어 리턴값을 받고,
       //그 변수의 bytesTotal 속성을 참고하면 전체 크기를 알 수 있고,
       //bytesLoaded 속성을 참고하면 현재 로드된 크기를 알 수 있습니다.
        var loadProgress = my_mcl.getProgress(vTarget_mc);
        _root.tInfo.text += "전체크기 : "+loadProgress.bytesTotal+"\n";
};

//로드가 진행되는 동안 계속적으로 호출되는 함수입니다.
//주의 할 것은 하드에 쓰기가 일어날 때 호출된다는 것입니다.
//따라서 플래시 자체의 다운로드 시물레이션에서는 호출되지 않습니다.
//웹에 올려봐야 작동하는 것을 확인할 수 있습니다.
myListener.onLoadProgress = function(vTarget_mc, loadedBytes, totalBytes) {
        _root.tInfo.text = vTarget_mc+"에 이미지 로딩을 시작합니다.\n";
        _root.tInfo.text += "전체크기 : "+totalBytes+"\n";
        _root.tInfo.text += "현재 : "+loadedBytes+"\n";
};

//로드가 끝나면 호출되는 함수입니다.
myListener.onLoadComplete = function(vTarget_mc) {
        _root.tInfo.text += "로딩 완료!!\n";
};

//다운로드된 파일의 첫 번째 프레임 액션이 실행된 후 호출되는 함수입니다.
//따라서 이곳에서 초기화를 해주면 됩니다.
//첫 번째 프레임 액션이 실행된 후 라는 것을 주의깊게 봐야 합니다.
myListener.onLoadInit = function(vTarget_mc) {
        _root.tInfo.text += "크기와 위치를 조정합니다.\n";
        vTarget_mc._width = 300;
        vTarget_mc._height = 160;
        vTarget_mc._x = 25;
        vTarget_mc._y = 25;
};

//로딩에 실패하면 호출되는 함수입니다. 실패원인은 errorCode를 통해 얻을 수 있습니다.
myListener.onLoadError = function(vTarget_mc, errorCode) {
        _root.tInfo.text = "로딩 실패\n";
        _root.tInfo.text += "실패원인 : "+errorCode+"\n";
};

//MovieClipLoader 의 인스턴에 연결시켜줍니다.
my_mcl.addListener(myListener);

//버튼 액션들입니다.
//누르면, 해당 버튼의 번호와 동일한 이미지를 iLoadPlace 무비클립에 로드합니다.
b0.onRelease = function() {
        my_mcl.loadClip("img0.jpg", "_root.iLoadPlace");
};
b1.onRelease = function() {
        my_mcl.loadClip("img1.jpg", "_root.iLoadPlace");
};
b2.onRelease = function() {
        my_mcl.loadClip("img2.jpg", "_root.iLoadPlace");
};
b3.onRelease = function() {
        my_mcl.loadClip("img3.jpg", "_root.iLoadPlace");
};
b4.onRelease = function() {
        my_mcl.loadClip("img4.jpg", "_root.iLoadPlace");
};
b5.onRelease = function() {
        my_mcl.loadClip("img5.jpg", "_root.iLoadPlace");
};

 

소스위치 : http://namooya.com/zboard/zboard.php?id=f4f&no=24

[출처] [본문스크랩] 이미지 로드하기(MovieClipLoader 이용)|작성자 담덕태자

invalid-file