Preload a partial list of files to improve bootstrap time

[Wadus2020]

I'm working on a HTML5 canvas project where I'm trying to change the preloading logic to improve bootstrap time.

Say that my project has 6 different assets named A,B,C,D,E,F and the timeline has 2 breakpoints which use the following assets:

Animation 1: 1 to 4s: use assets A,B,C

Animation 2: 4s to 8s: use assets A,D,E,F

The timeline playback stops at the end of every animation so there will be enough time to load the remaining assets.

If I want to start the playback at 1s, the preloading code should preload assets A,B,C, start the timeline, and then load the remaining assets later (D,E,F)

If I want to start the playback at 4s, the preloading code should preload assets A,D,E,F, start the timeline, and then load the remaining assets later (B,C)

When I look at the published Adobe code, I see something like:

lib.properties = {
id: '19F1EE3FEBDA4477AE95339F614A5032',
width: 2732,
height: 2048,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/background.jpg", id:"background"},
{src:"images/girl_body_2_jpg.png", id:"girl_body_2_jpg"},
{src:"images/girl_body_jpg.png", id:"girl_body_jpg"},
{src:"images/girl_head_2_jpg.png", id:"girl_head_2_jpg"},
{src:"images/girl_head_jpg.png", id:"girl_head_jpg"},
{src:"images/girl_shoe_jpg.png", id:"girl_shoe_jpg"},
{src:"images/girl_sock_bottom_jpg.png", id:"girl_sock_bottom_jpg"},
{src:"images/girl_sock_top_jpg.png", id:"girl_sock_top_jpg"},
{src:"sounds/cartoon_collection_SAMPLE_G.mp3", id:"cartoon_collection_SAMPLE_G"},
{src:"sounds/cartoon_collection_SAMPLE_H.mp3", id:"cartoon_collection_SAMPLE_H"},
{src:"sounds/slide_whistle_SAMPLE_A.mp3", id:"slide_whistle_SAMPLE_A"}
],
preloads: []
};

It looks like there is a list of assets needed for my project, but I'm not sure how to tell *when* they're needed (ie, at what position in the timeline).

Any ideas how to accomplish this?

[ClayUUID · Accepted solution]

"Bootstrap"? "Breakpoint"? Are you using Animate or programming a mainframe?

Anyway, if you want to improve preload time, and load images on demand at certain keyframes, sure it's possible. But it's not something Animate was designed to do, so you'd have to dig into the generated code and modify it every. single. time. you published.

First you'd have to modify the manifest to exclude the images you want to load later:

// library properties:
lib.properties = {
    id: 'A6A7835BE618C841B7059FD26E2C7F1A',
    width: 550,
    height: 400,
    fps: 24,
    manifest: [
        {src:"images/some_image.png", id:"some_image"},
        {src:"images/some_other_image.png", id:"some_other_image"}
    ],
    preloads: []
};

Then, where you want to load the images, you'd have to partially reproduce Animate's image loading code:

function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp=AdobeAn.getComposition("A6A7835BE618C841B7059FD26E2C7F1A");
    var lib=comp.getLibrary();
    var loader = new createjs.LoadQueue(false);
    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);
}
function handleFileLoad(evt, comp) {
    var images=comp.getImages();    
    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }    
}
function handleComplete(evt,comp) {
    // continue the page...

Good luck with that. Seems like way more trouble than it's worth.

[Wadus2020]

Yes, unfortunately the requirements for the project I'm working on requires a lot of tweaks. I'm not sure where else to ask these programming questions. As I mentioned before, I'm not a designer (someone else is making these Animate files) and this is the first time I'm writing code for Animate.

My main concern was how to identify what assets to load at a specific frame. I think by naming the files in the library with certain prefixes will help me to identify them later in the code; that's the approach I'll try anyway. Hopefully it'll work

Thanks for your reply.