Adobe Animate CC HTML書き出しの読み込み進捗を表示する

概要

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>

挿入後のイメージ

結果

このようになりました。