HTML Canvas won't export

[mentalcase129]

I'm creating a website in an HTML5 Canvas.  It's nearly finished I've gotten all of my previous tests to work.  But after the most recent addition I can't get it to export. It gets stuck at 80%...eventually tells me the script has been running too long and asks if I want to cancel.  I've tried letting it continue a few times.  It never exports.

I also tried removing the most recent bit of code in case that was messing it up...so even with the same code that had worked before, it's not exporting now.  There're new objects and things but I don't think enough to make the file size unmanageable and even if it did, I would think it would still export and just lag more.

Any thoughts on what might be causing this or how I might be able to fix it?  If it doesn't open I can't even check for errors properly.

Thanks

[Preran]

Thank you for the shout out, Colin. I am checking with the support team to see if there is anything that we missed before I raise a support case.

Thanks,

Preran

[mentalcase129]

Thought I'd give an update.  That crazy long export time also translates to the loading time.  I now have it online and it takes close to 10 minutes to load.  Which isn't good at all.  What do I do?!

Here's the link:

OuthouseCartoons

[Preran]

If you are subscribed to CC, send me your Adobe ID, location, and phone number over a private message. To send a private message, click my picture and use the message button. We will get in touch with you for investigation.

Thanks,

Preran

[ClayUUID]

mentalcase129  wrote

I now have it online and it takes close to 10 minutes to load.

Well, what's the collective file size of your published media folders?

[mentalcase129]

142 MB

[ClayUUID]

mentalcase129  wrote

142 MB

I think we've located the problem.

And holy cow that main menu rollover effect is seizure-inducing.

[mentalcase129]

Okay maybe I'll look into tweaking the rollover lol.

Suggestions on reducing the file size?

[just.emma]

• The main issue is that you're using so many (hundreds!) of bitmaps.  It would be best to cut down significantly.
• Be sure to optimize/compress the bitmaps that you are using.  TinyPNG is great for reducing the file size of images with transparent backgrounds.
• Use dynamic text instead of static text.  You will have a lot of options with Google Fonts.

[Colin Holgate]

Next thing...

All the images are published as external files. Take the images through tinypng.com, and they will look the same but be a lot smaller.

When you publish those images will get overwritten, unless you've turned that option off. What I normally do is copy the images folder, send it through tinypng (I have their Photoshop plugin so I can batch hundreds of images), then put that as the folder on the server. If I then change any bitmaps, or there are new ones, I just process those and add them to the server folder.

If your JS file is huge, and if you're using a lot of vectors, you could optimize the vector shapes to save some space.

If you're using either Motion Tween or custom ease Classic Tween, those will take up a lot of JS file space. Only use Classic Tween, and only use the tweens you can select in the dropdown menu, along with changes in the Intensity value. Do not click on the pencil icon.

[mentalcase129]

Ok...another project pulled me away from this for a while but I finally got back to it.  I ran all the images through tinypng...and I did some other tweaks based on suggestions.  It loads better now...still a little slow but a lot better than it was.

One last issue I'd like to resolve though.  The loading screen jumps around a bunch while it's running.  Is there a reason for that that I can fix?  And/or is there a way I can customize my loading screen?

[Colin Holgate]

Did you do the max connections suggestion? That can make it be 6 times faster.

I haven't used a loading screen, at least not the one from Animate publish settings. I just put an animated gif or other image into a DIV that I hide when the canvas DIV is loaded. From the look of it, that's what Animate does too, though it sets the size dynamically.

[mentalcase129]

I did...if I change the number to 8 will it go even faster?

How would I go about setting up a gif to work as a loading screen like you just described?

[Colin Holgate]

I checked into how many max connections browsers had, and they range from 6 to 11 (IE had the highest number). So, 8 would help some desktop browsers, but not help mobile browsers. I didn't want to push my luck and tell a browser that can do 6 to try and do 8, so I left it at that.

You could use the preloader option in the Animate Publish Settings, it is basically doing what I would do. You do have the option to select your own animated GIF, and not use Adobe's one.

[Colin Holgate · Accepted solution]

The page took four minutes to load after emptying cache, and about 8 seconds to load a second time.

But, you can make the page be six times faster. Look in your page HTML for this line:

  var loader = new createjs.LoadQueue(false);

add a line to set the maxConnections:

  var loader = new createjs.LoadQueue(false);

  loader.setMaxConnections(6);   //(edit, I used the wrong variable name when I first posted)

That will help a lot. You won't need to republish the FLA, just edit the html.

[mentalcase129]

How do I get into my html to find that?  I tried opening the java file in Dreamweaver but that line wasn't there anywhere.  So I don't know if it's missing or if I'm looking at the wrong thing.

[Colin Holgate]

It's in the HTML, not in the JS file. Look for the lines I gave in the HTML file.

[mentalcase129]

Okay that definitely helped but it's still slower than I think it should be

OuthouseCartoons

[dcastillo1]

deleting last layer created solved my problem where AA was frezzing at 80% when publishing HTML5. Looks like is on the process of creating the images atlas. Thanks