Skip to main content
Wadus2020
Wadus2020
Participating Frequently
October 31, 2018
Answered

Preload a partial list of files to improve bootstrap time

  • October 31, 2018
  • 1 reply
  • 349 views

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?

    This topic has been closed for replies.
    Correct answer ClayUUID

    "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.

    1 reply

    C
    ClayUUIDCorrect answer
    Legend
    October 31, 2018

    "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
    Wadus2020Author
    Participating Frequently
    October 31, 2018

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices