Javascript createjs flash cc,单独清单预加载
我有一个基于动画的html项目,它是基于Flash CC构建的,并且正在努力单独预加载 我想做的是Javascript createjs flash cc,单独清单预加载,javascript,html5-canvas,createjs,preloadjs,Javascript,Html5 Canvas,Createjs,Preloadjs,我有一个基于动画的html项目,它是基于Flash CC构建的,并且正在努力单独预加载 我想做的是 加载1个图像(表示“请稍候”)并创建JS导出 动画在时间线开始时停止,在此处调用函数 加载一些资产 启动动画 在时间线上的某个点停止动画。然后加载动画下一部分的资产 加载完成后,继续播放动画。等等 我可以加载所有资源并播放整个动画。但是当涉及到分开舱单时;它加载我想要的文件并继续播放动画,但加载的图像不会显示在画布上 我使用下面的代码作为html中的init.js文件 var canvas, st
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”的,但我无法在代码中实现它。我很高兴能得到任何帮助
非常感谢。这不起作用的原因是,当您实例化
exportRoot
时,它会在时间轴中构建exportRoot所需的所有内容,包括任何位图实例。位图是使用存储在全局图像
对象中的加载图像实例化的,因此,如果您尚未预加载其内容,则会为其提供一个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);
您应该能够通过在全局图像
对象中预先创建引用,并在以后进行更新来解决此问题:
// 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
}
这应该是可行的,因为只要在创建库项时图像实例存在,它就会在加载图像后显示。请注意,因为这设置了src属性,所以从浏览器缓存中提取图像时会有一个短暂的延迟(通常是一个完整的勾号)
完全公开——我没有测试这个,但根据我对EaselJS的了解,它应该可以正常工作。我很想知道这是否适合你
另一个注意事项:如果您有一个Ticker更新stage,则不需要额外的
stage.update()
调用您的start
方法(它只会无缘无故地进行额外的绘制)。这不起作用的原因是,当您实例化exportRoot
时,它在时间轴中构建exportRoot需要的所有内容,包括任何位图实例。位图是使用存储在全局图像
对象中的加载图像实例化的,因此,如果您尚未预加载其内容,则会为其提供一个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);
您应该能够通过在全局图像
对象中预先创建引用,并在以后进行更新来解决此问题:
// 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
}
这应该是可行的,因为只要在创建库项时图像实例存在,它就会在加载图像后显示。请注意,因为这设置了src属性,所以从浏览器缓存中提取图像时会有一个短暂的延迟(通常是一个完整的勾号)
完全公开——我没有测试这个,但根据我对EaselJS的了解,它应该可以正常工作。我很想知道这是否适合你
另外一个注意事项:如果您有一个自动售票机更新stage,您不需要额外的
stage.update()
调用您的start
方法(它会毫无理由地进行额外的抽签)。嗨,兰尼,首先非常感谢。我尝试了这个代码,但不幸的是它无法工作。我猜“预创建虚拟实例”不起作用;handleFileLoad仍然返回原始行为。我尝试了init()部分中的代码,控制台日志仍然显示它们的id和清单中定义的src。您有没有可能与我共享您的构建?我可以看看。嗨,兰尼,首先非常感谢你。我尝试了这个代码,但不幸的是它无法工作。我猜“预创建虚拟实例”不起作用;handleFileLoad仍然返回原始行为。我尝试了init()部分中的代码,控制台日志仍然显示它们的id和清单中定义的src。您有没有可能与我共享您的构建?我可以查一下。