1 2 Previous Next 41 Replies Latest reply on Sep 8, 2017 9:00 AM by Colin Holgate Branched to a new discussion.

    HTML Canvas won't export

    mentalcase129 Level 1

      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

        • 1. Re: HTML Canvas won't export
          mark@headTrix Adobe Community Professional

          Your trying to EXPORT?? if you are using HTML Canvas, and you have code inside... I ASSUME that you are creating this for the web??

          If you are creating it for the web... you do not want to Export. You want to go File> Publish Settings and then select "OAM Package"

          then under Output name, select the folder where you want to save it and name it.

           

          then you would import this OAM into your website in your desired location in Dreamweaver by selecting Insert>HTML>Animated Composition

           

          hope that helps!

          mark

          • 2. Re: HTML Canvas won't export
            mentalcase129 Level 1

            I know about how to publish it for upload and everything.  I'm talking about when you export a preview in the browser to test what you've done.  That's not working.  And I even tried publishing through the publish settings as an experiment and I get the same problem...but I'm not sure why.

             

            Thoughts?

            • 3. Re: HTML Canvas won't export
              Colin Holgate MVP & Adobe Community Professional

              You can delete some layers, do a test, when it gets stuck click No, do Undo to get the layers back, then try deleting other layers. Do that until it tests ok, then try deleting just some of the layers that made it work.

               

              Once you know what layer causes the problem try deleting a range of frames in that layer, to narrow down which thing is causing the problem.

               

              If the FLA is not top secret you could post it somewhere for us to try too.

              1 person found this helpful
              • 4. Re: HTML Canvas won't export
                mentalcase129 Level 1

                Okay....so I've tried all kinds of combinations of deleting...still can't figure out what's wrong with it.  I'll keep experimenting but here's a link to the fla.  If anybody can take a look and hopefully spot something I'm missing.

                 

                New-Websitev14.fla - Google Drive

                • 5. Re: HTML Canvas won't export
                  Colin Holgate MVP & Adobe Community Professional

                  I''m trying to track down the culprit. Meanwhile, these things get put into the Output panel when you do try to publish:

                   

                  Color effects are published as a filter and subject to the same limitations. (34)

                  Filters are very expensive and are not updated once applied. Cache as bitmap is automatically enabled when a filter is applied. This can prevent animations from updating. (6)

                  Applying "cache as bitmap" to an animated instance will prevent the animation from updating. (6)

                  Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

                   

                  You can't get away with many things in Canvas compared to SWF. Look over your file and try to do things in different ways that will work better in Canvas.

                  1 person found this helpful
                  • 6. Re: HTML Canvas won't export
                    mentalcase129 Level 1

                    Ya, I don't actually have that many filters in there and what I do have have been there from the beginning.  Was thinking I'd look at alternate ways to do those later once I got it all functioning...but I don't think that's why it's not exporting

                    • 7. Re: HTML Canvas won't export
                      Colin Holgate MVP & Adobe Community Professional

                      There seem to be a lot of things that are stopping it from working. The general case is that having different objects in the same layer at different times can cause problems. I worked on just the Dylan Section, and that alone would not publish. In there you have some frames where a button is in one layer, along with another button, then elsewhere the same button is in a different layer with a different button. I simplified it by having each of the three buttons in its own layer, and also never getting rid of the button. For the section a button is not needed I just moved it off stage. The scripts can be simpler too, you can remove the scripts on the Credits and Stats frames, and instead just have this on frame 1:

                       

                      this.stop();

                      this.CreditsBTN.addEventListener("click", fl_ClickToGoToAndStopAtFrame_600.bind(this));

                      this.StatsBTN.addEventListener("click", fl_ClickToGoToAndStopAtFrame_601.bind(this));

                      this.BioBTN.addEventListener("click", fl_ClickToGoToAndStopAtFrame_602.bind(this));

                      function fl_ClickToGoToAndStopAtFrame_602() {

                        this.gotoAndStop(0);

                      }

                      function fl_ClickToGoToAndStopAtFrame_600() {

                        this.gotoAndStop(29);

                      }

                      function fl_ClickToGoToAndStopAtFrame_601() {

                        this.gotoAndStop(59);

                      }

                       

                      I would also move the Bio label to frame 2, otherwise every time you come back to Bio the listeners would get set up again.

                       

                      After the layer changes and the script changes the Dylan Section would publish ok. Replacing the symbol in the main FLA didn't fix everything though, so some other layer has a problem too. Deleting the two layers in the contents folder of the timeline is enough to let the rest publish, so I guess the close layer has more problems.

                       

                      Another thing that seems wrong is that in the library you have a lot of bitmaps that are different, but have the same name, and you have bitmaps and buttons that have the same name. Everything gets published to the same folder, and that could lead to other problems. Not positive though if that is part of why it doesn't publish. I would go through the library and keep renaming things until no two things have the same name. That is, move them out of the library folder, and it you get an error message about replacing the same named object, cancel that and rename the item, and try moving again.

                      • 8. Re: HTML Canvas won't export
                        mentalcase129 Level 1

                        Hmm....this is definitely a start in the right direction.  Still having trouble narrowing it down though.  I've moved each section symbol into another fla for testing, and each one of them exports fine on it's own.  But when they're all together in the fla they won't.  I've tried exporting with all of them removed though and it's exporting fine.  Removing any of the other layers doesn't seem to do the trick, so it has to be something on that content layer, but I don't get what if each one is fine on its own.

                         

                        I'm not sure if I understand you about objects with the same name though.  Each one is a variation, there are no directly duplicated names in the library.  The closest would be a jpeg that was turned into a symbol...and the jpeg and symbol both have the same name...but the jpeg has the jpeg extension to differentiate it.  Is that what you mean, is the extension not enough for that?

                        • 9. Re: HTML Canvas won't export
                          Colin Holgate MVP & Adobe Community Professional

                          There are several things named "layer 0". A more subtle one is that you have a dylan bitmap and a Dylan button. It's easy to accidentally have the same name when you're using Library folders. In AS3 it doesn't matter so much, but in Canvas I think it does.

                          1 person found this helpful
                          • 10. Re: HTML Canvas won't export
                            mentalcase129 Level 1

                            Didn't even notice the Layer 0 thing at first.  I've gone through everything and there's no duplicate names anymore.  Still not working.  Arg!

                            • 11. Re: HTML Canvas won't export
                              mentalcase129 Level 1

                              Is it possible it could be a file size issue?  I wouldn't think that would be an issue...but I just tried removing the gallery section as a test....which is by far the biggest section...and it actually did render.  But that same section rendered fine when it was on its own.

                              • 12. Re: HTML Canvas won't export
                                Colin Holgate MVP & Adobe Community Professional

                                I copied all the layers into a new file, and it wouldn't publish, so I think the file itself is ok.

                                 

                                When I put the Dylan Section into its own file it wouldn't publish, until I did the fixes I mentioned in message 7. Something that would explain the gallery working on its own, but not allowing the full thing to work, would be the duplicate names. Do you have no folders left in the library? If you replace your posted file I can look again based on how far you've got now.

                                1 person found this helpful
                                • 13. Re: HTML Canvas won't export
                                  mentalcase129 Level 1

                                  Hmm....okay, I'll do one more sweep through the library and double check that....if I don't find anything and it still won't export I'll upload again.  I'm doing a test export right now with the image quality turned way down, even if that works though the images might not be usable

                                  • 14. Re: HTML Canvas won't export
                                    mentalcase129 Level 1

                                    Ok, so tested and failed.  Also I must've some how closed the file at some point without saving cuz I had redo all my renaming lol.  But I did that, tested it again.  No duplicat names.  No folders.  Still not working.

                                     

                                    Here's the file:

                                     

                                    https://drive.google.com/file/d/0B2y8GgG9dP_rNzdyQWw3eHBIbWs/view?usp=sharing

                                    • 15. Re: HTML Canvas won't export
                                      mentalcase129 Level 1

                                      All my other updates were not lost though btw

                                      • 16. Re: HTML Canvas won't export
                                        Colin Holgate MVP & Adobe Community Professional

                                        Other than that, things are ok?

                                         

                                        Will check the file.

                                        • 17. Re: HTML Canvas won't export
                                          mentalcase129 Level 1

                                          Well I mean it still won't export....but the other change I made are still there

                                          • 18. Re: HTML Canvas won't export
                                            Colin Holgate MVP & Adobe Community Professional

                                            Trying the new file now, will have to figure out new things.

                                             

                                            You still had two folders, one of which had the Dylan original bitmap. The two bitmaps with the same name looked quite different.

                                            • 19. Re: HTML Canvas won't export
                                              mentalcase129 Level 1

                                              Jesus, how did I miss that?!  I ran through it twice.  I just fixed them and I'm trying another export.  Did you do that already?

                                              • 20. Re: HTML Canvas won't export
                                                Colin Holgate MVP & Adobe Community Professional

                                                Yes, hence the comment about still having to look for the problem. I'll try to find out if the duplicate naming does matter anymore. it used to, but they may have fixed things, by simply adding a number to make it be unique.

                                                1 person found this helpful
                                                • 21. Re: HTML Canvas won't export
                                                  Colin Holgate MVP & Adobe Community Professional

                                                  So, funny thing... The current version (well, my one where I renamed one of the Dylan originals) does publish ok, but takes about 20 minutes. Right before it's done it shows the error about taking too long, but if you click Yes it them immediately completes.

                                                   

                                                  Here's a link:

                                                   

                                                  http://colin.scienceninja.com/dylan/ttttt.html

                                                   

                                                  I can tell you how to make the page load faster.

                                                   

                                                  Meanwhile, it could be worth private messaging Preran (Preran ) to ask the Animate team why your publish takes so long. Include a link to this topic.

                                                  1 person found this helpful
                                                  • 22. Re: HTML Canvas won't export
                                                    Colin Holgate MVP & Adobe Community Professional

                                                    The ttttt files are still uploading, should be there in 10 minutes.

                                                    1 person found this helpful
                                                    • 23. Re: HTML Canvas won't export
                                                      mentalcase129 Level 1

                                                      Awesome!  Mine works too I'm not seeing, although I had to press yes for the error a second time before it launched...but it did work and it's functioning!

                                                      • 24. Re: HTML Canvas won't export
                                                        mentalcase129 Level 1

                                                        And I will DM Preran too!  Thanks for all your help!

                                                        • 25. Re: HTML Canvas won't export
                                                          Preran Adobe Employee

                                                          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

                                                          • 26. Re: HTML Canvas won't export
                                                            mentalcase129 Level 1

                                                            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

                                                            • 27. Re: HTML Canvas won't export
                                                              Preran Adobe Employee

                                                              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

                                                              • 28. Re: HTML Canvas won't export
                                                                ClayUUID Adobe Community Professional

                                                                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?

                                                                • 29. Re: HTML Canvas won't export
                                                                  Colin Holgate MVP & Adobe Community Professional

                                                                  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.

                                                                  1 person found this helpful
                                                                  • 30. Re: HTML Canvas won't export
                                                                    mentalcase129 Level 1

                                                                    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.

                                                                    • 32. Re: HTML Canvas won't export
                                                                      Colin Holgate MVP & Adobe Community Professional

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

                                                                      • 33. Re: HTML Canvas won't export
                                                                        mentalcase129 Level 1

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

                                                                         

                                                                        OuthouseCartoons

                                                                        • 34. Re: HTML Canvas won't export
                                                                          ClayUUID Adobe Community Professional

                                                                          mentalcase129  wrote

                                                                          142 MB

                                                                          I think we've located the problem.

                                                                           

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

                                                                          • 35. Re: HTML Canvas won't export
                                                                            mentalcase129 Level 1

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

                                                                             

                                                                            Suggestions on reducing the file size?

                                                                            • 36. Re: HTML Canvas won't export
                                                                              just.emma Level 4
                                                                              • 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.
                                                                              1 person found this helpful
                                                                              • 37. Re: HTML Canvas won't export
                                                                                Colin Holgate MVP & Adobe Community Professional

                                                                                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.

                                                                                2 people found this helpful
                                                                                • 38. Re: HTML Canvas won't export
                                                                                  mentalcase129 Level 1

                                                                                  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?

                                                                                  • 39. Re: HTML Canvas won't export
                                                                                    Colin Holgate MVP & Adobe Community Professional

                                                                                    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.

                                                                                    1 person found this helpful
                                                                                    1 2 Previous Next