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>
삽입 후 이미지
결과
이렇게 되었습니다.
Reference
이 문제에 관하여(Adobe Animate CC HTML 내보내기 로드 진행률 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tsunet111/items/33264aa4cd092708d9f1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 handleProgress(evt){
document.getElementById("progresstxt").innerHTML = String(Math.floor(evt.loaded*100))+"% Loaded.";
}
<p id="progresstxt" style="position:absolute;top:0;width:100%;text-align:center;"></p>
Reference
이 문제에 관하여(Adobe Animate CC HTML 내보내기 로드 진행률 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tsunet111/items/33264aa4cd092708d9f1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)