createjs flash cc，单独的清单预加载

Question

我有一个基于动画的 html 项目，该项目是在 Flash CC 上构建的，并且在单独预加载方面遇到困难。

我想做的是；

加载 1 张图片（提示“请稍候”）并创建导出。
动画停在时间轴的开头，这里调用一个函数。
加载一些资产。
开始动画
在时间轴上的某个点停止动画。然后加载下一部分动画的资源。
加载完成后，继续播放动画。等等

我可以加载所有资源并播放整个动画。但是当涉及到分离清单时；它加载了我想要的文件并继续播放动画，但加载的图像未显示在 canvas 上。

我将下面的代码用作 init.js 文件 html;

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 需要的所有内容，包括任何 Bitmap 实例。位图是使用存储在全局 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 的了解，它应该可以正常工作。我很想知道这是否适合您。

一个额外的注意事项：如果你有一个 Ticker 更新舞台，你不需要在你的 start 方法中额外的 stage.update() 调用（它只会无缘无故地做一个额外的抽奖).

createjs flash cc，单独的清单预加载

createjs flash cc, separate manifest preloading

javascript

html5-canvas

createjs

preloadjs