Highlighted

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

New Here ,
Mar 20, 2019

Copy link to clipboard

Copied

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

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

Views

177

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Mar 20, 2019

Copy link to clipboard

Copied

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

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

Views

178

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 20, 2019 0
Adobe Community Professional ,
Mar 20, 2019

Copy link to clipboard

Copied

Automatically? No.

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 0
Advocate ,
Mar 20, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 0
New Here ,
Mar 20, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 0
Advocate ,
Mar 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
New Here ,
Mar 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
New Here ,
Mar 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
Advocate ,
Mar 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
New Here ,
Mar 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0