개요

Adobe Animate CC에서 HTML(canvas) 컨텐츠를 제작하면 다음과 같은 로딩 화면을 넣을 수 있습니다.



사용되고 있는 소재는 프리로드 되어 편리합니다만・・・ 같은 컨텐츠를 Flash로 제작한 경우와 비교하면, 로딩에 다소 시간이 걸립니다.
(Flash와 비교하면 체감 5~10배 정도. 브라우저에 의한다.)

그래서, ○% 라고 읽어들여 진척을 표시하는 방법입니다.

환경

Adobe Animate CC 18.0.1(빌드 115)
Windows10

절차

내보낸 HTML을 열고 loader의 선언 위치를 찾습니다.
※콘텐츠 내용에 따라 약간 바뀝니다.

    var loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
    var lib=comp.getLibrary();
    loader.loadManifest(lib.properties.manifest);

다음 추가
다른 이벤트 청취자 선언의 전에 이하를 삽입.

    loader.addEventListener("progress", function(evt){handleProgress(evt)});

function init() 아래에 다음을 삽입합니다.

function handleProgress(evt){
    document.getElementById("progresstxt").innerHTML = String(Math.floor(evt.loaded*100))+"% Loaded.";
}

프리로드 이미지 <img src=images/_preloader.gif style='vertical-align: middle; max-height: 100%'/> 바로 다음에 삽입.

<p id="progresstxt" style="position:absolute;top:0;width:100%;text-align:center;"></p>

삽입 후 이미지

결과

이렇게 되었습니다.