HTML5 canvas-Loading on frame two or three instead of preloading

[aaronc52556568]

I'm creating HTML5 ebooks using Animate. Is there a way to load audio and

images on frame two or three instead of preloading everything up front?

-Aaron

[ClayUUID]

Automatically? No.

If you want to display something while it's preloading, set a preload image in the publish settings.

[kdmemory]

Hi Aaron

It's not clear what's your intentions are for this. But short answer, yes, it is possible. Use PreloadJS and LoadQueue class and setup or trigger all necessary procedures first in any frame (-script) you like.

Klaus

[aaronc52556568]

Klaus,

My ebooks have quite a bit of audio and quite a few frames and images. I

don't want the reader to have to wait for everything to load before

beginning to read the stories. I would rather preload only the audio and

images required to read and listen to the first page or two. Then, the rest

of the book's audio and images would load while the reader is reading pages

one and two. Does that make sense? I remember with AS3, you could decide

what frame to load assets on within Flash. Is there nothing similar with

HTML5 canvas?

-Aaron

[kdmemory]

Aaron,

I see what you mean in general, but ...

can you help me to refresh my memory, AS3 isn't my main staple anymore since 2016. What did you use in AS3 to "decide what frame to load assets on within Flash". This would help me to understand better what you are looking for and prepare a better answer.

cheers

Klaus

[aaronc52556568]

Klaus,

In AS3, if you right clicked on a sound or image in the library, and went

to the Actionscript tab, you had the option, "Export in frame 1." If you

checked that box, the asset would preload. If you didn't check the box, the

asset would load when it was reached in the timeline. With HTML5 canvas, I

essentially want that box unchecked, so that sounds and images don't

preload. I want them to load when they are reached in the timeline. Is

there a way that doesn't involve a bunch of code? I figured out a really

long annoying way involving putting code on every frame of the timeline,

and manually taking stuff out of the manifest in the HTML file, but I don't

want to have to do this every time I make an ebook. Is there a simpler way

to load sounds and images when they are reached in the timeline, instead of

preloading? Thanks for your help with this Klaus.

-Aaron

[aaronc52556568]

Hah, I just realized I talk about AS3 in the past tense, like it doesn't

exist anymore. I know people are still using it to make great AIR apps and

stuff. I just don't use it anymore myself. Like you, I stopped a few years

ago when web support started to become iffy.

-Aaron

[kdmemory · Accepted solution]

Aaron,

I can feel your dilemma of "manually taking stuff out of the manifest in the HTML file, but I don't want to have to do this every time I make an ebook". Comprende!

What I originally wanted to suggest to you would indeed mean to write tons of code in every frame you want to show new expensive media (in the sense of data size). You would have to deal with manifests, LoadQueues and events like fileLoad and completed frame by bloody frame.

The way HTML5/Canvas and CreateJS works means that your have to load the entire lib which is your Animate library and the only way to hack it into portions is the PreloadJS way, which in a way bypasses your library, which is good but also bad because it makes everything quite complicated to handle.

So the best would be - and this is you want - it works like multiple html pages, whereby each page loads only the stuff needed for that page.

I had the same problem. I make Digital Trainings which have a similar buildup like eBooks. One training might contain around 20 pages/slides/containers, however you call it and it is almost impossible to load all the media for those 20 somethings at once.

So I build 20 single HTML5/Canvas documents and connect them via Javascript and JSON in one iframe-carrying HTML document. I call the whole framework iFrameSequencer. I mention this to make you thinking about a different approach, not to think in frames anymore as seperators between pages/stages/steps whatever, instead think of slicing the content into multiple HTML5/Canvasses and connect them in some ingenious way.

If you earn some cash with eBooks and you are looking for collaboration, well I'm here.

Klaus

[aaronc52556568]

Klaus,

Yeah, exactly. The way I'm doing it right now is by using queue, loadqueue,

etc., and then adding my images manually using addChild(). It's a bit of a

pain. Your idea about using separate urls for each page is a good one.

However, I need songs to play across multiple pages, sometimes six or eight

pages. I'm not aware of a way to keep a song playing while navigating to a

new url. I guess for now, I'll just bite the bullet and code every frame.

In case anyone else is having this problem, I'll share what I'm doing right

now to avoid preloading. For images, this is on every frame:

var queue = new createjs.LoadQueue(true);

queue.loadFile("pathto/image.png");

image = new createjs.Bitmap("pathto/image.png");

image.scaleX = .979

image.scaleY = .979

image.x = 13;

image.y = -31;

this.addChildAt(image);

For audio, I found that registering a sound manually loads the

sound: createjs.Sound.registerSound("sounds/sound.mp3", "sound", 1);

Then, after publishing the HTML file, I go into a text editor, find the

manifest, and take out all the sounds and images I don't want preloaded.

If anyone has a better way of avoiding preloading, I'd appreciate it. The

new url for each page is definitely a good idea if you don't need audio to

play across multiple pages.

Thanks for all your help, Klaus.

-Aaron