3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-02-17

#概要
Adobe Animate CC でHTML(canvas)コンテンツを制作すると、以下のようなローディング画面を入れられます。

180217_capture.PNG

使用されている素材はプリロードされ、便利なのですが・・・同じコンテンツを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>

挿入後のイメージ
180217_capture2.PNG

180217_capture3.PNG

##結果
このようになりました。

180217_capture4.PNG

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?