createjs flash cc 별도의 매니 페스트 사전로드

Question

플래시 CC를 기반으로 제작 된 애니메이션 기반 HTML 프로젝트가 있으며 별도로 프리로드하는 데 어려움이 있습니다.

내가하려는 것은;

1. 이미지 1을로드하십시오 ("기다려주십시오") 및 createjs 내보내기.
2. 애니메이션이 타임 라인의 시작 부분에서 멈추고 여기에서 함수를 호출하십시오.
3. 일부 애셋을로드하십시오.
4. 시작 애니메이션
5. 타임 라인의 특정 시점에서 애니메이션을 중지합니다. 그런 다음 애니메이션의 다음 부분에 대한 assests를로드합니다.
6. 로드가 완료되면 애니메이션을 계속 진행하십시오.

전체 애셋을로드하고 전체 애니메이션을 재생해도 괜찮습니다. 그러나 매니페스트를 분리 할 때는 언제나; 원하는 파일을로드하고 애니메이션으로 계속로드되지만로드 된 이미지는 캔버스에 표시되지 않습니다.

아래 코드를 html의 init.js 파일로 사용하고 있습니다.

var canvas, stage, exportRoot; 

function init() { 
    canvas = document.getElementById("canvas"); 
    images = images||{}; 
    preloadLaunch(); 
} 

function preloadLaunch(){ 
    var loader = new createjs.LoadQueue(false); 
    loader.addEventListener("fileload", handleFileLoad); 
    loader.addEventListener("complete", handleComplete); 
    loader.loadManifest(lib.properties.manifestLaunch); //selects the manifest from createjs export, first image says please wait. 
} 


function handleFileLoad(evt) { 
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; } 
} 

function handleComplete() { 
    exportRoot = new lib.project(); 
    stage = new createjs.Stage(canvas); 
    stage.addChild(exportRoot); 
    stage.update(); 
    stage.enableMouseOver(); 
    createjs.Ticker.setFPS(lib.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 
} 


/// triggers from animation timeline 
function preloadPart01() { 
    var loader01 = new createjs.LoadQueue(false); 
    loader01.addEventListener("fileload", handleFileLoad); 
    loader01.addEventListener("complete", start); 
    loader01.loadManifest(lib.properties.manifestPart01); //selects the manifest from createjs export 
} 

function start() { 
    stage.update(); 
    exportRoot.animation.gotoAndPlay("START"); // files are loaded in manifestPart01 and starts the animation, but loaded images are not visible. 
} 

나는 "getResult"에 관한 것이라고 생각했지만 코드에 구현할 수 없었습니다. 나는 어떤 도움도 기쁠거야.

대단히 감사합니다.

Answer 1

exportRoot의 인스턴스를 생성 할 때 비트 맵 인스턴스를 포함하여 exportRoot가 필요로하는 타임 라인의 모든 콘텐츠가 작성되기 때문입니다. 비트 맵은 전역 images 개체에 저장된로드 된 이미지를 사용하여 인스턴스화되므로 콘텐츠를 미리로드하지 않은 경우 null 이미지가 제공되며 보조 콘텐츠를로드 할 때 이미지를 업데이트 할 메커니즘이 없습니다. 여기

내 보낸 라이브러리에있는 비트 맵 인스턴스에서 미리보기입니다 :

(lib.BitmapName = function() { 
    this.initialize(img.BitmapName); // THIS WILL BE NULL IF LOADED LATER 
}).prototype = p = new cjs.Bitmap(); 
p.nominalBounds = new cjs.Rectangle(0,0,600,800); 

당신 에 의해이 문제를 얻을 수 있어야합니다 미리 만들어 글로벌 images 객체에 대한 참조를하고 나중에 그것을 업데이트 : 존재하는 경우

// Pre-create dummy instances BEFORE you create the `exportRoot` 
var manifest = lib.properites.manifestPart01; 
for (var i=0, l=manifest.length; i<l; i++) { 
    images[manifest.id] = document.createElement("img"); // Empty instances 
    // Note: Don't set src 
} 

는 그 다음 handleFileLoad 방법, 인스턴스를 업데이트합니다.

function handleFileLoad(evt) { 
    if (evt.item.type == "image") { 
     if (images[evt.item.id] != null) { 
      // Just update the existing instance. 
      images[evt.item.id].src = evt.result.src; 
     } else { 
      // Original behaviour 
      images[evt.item.id] = evt.result; 
     } 
    } 
} 

이 해야 작업, 이미지가로드되면 한 라이브러리 항목을 만들 때 이미지의 인스턴스가 존재하는 한,이 표시됩니다 때문이다. src 속성을 설정하기 때문에 브라우저 캐시에서 이미지를 가져올 때 약간의 지연이 발생합니다 (일반적으로 전체 틱).

전체 공개 - 내가이 테스트를하지는 않았지만 내가 EaselJS에 대해 알고있는 것을 기반으로하면 정상적으로 작동합니다. 나는 이것이 당신에게 효과가 있는지 듣고 싶습니다.

하나 추가 참고 :이 단계를 업데이트하는 종목이있는 경우, 당신은 (그냥 아무 이유없이 추가로 무승부를 기록 할 것) 당신의 start 방법에 여분의 stage.update() 전화가 필요하지 않습니다.