11 Replies Latest reply on Feb 24, 2016 11:17 PM by trailyota

    html5 canvas out of memory error, workarounds?

    tdofraser Level 1

      Flash CC is throwing an out of memory error "file LayerObj.jsfl out of memory" when publishing for HTML5 Canvas. As near as I can tell, the only recommendation is to break the .fla in two and put them back together after they have been published.

       

      How is that done? Is there another solution?  When I publish the one file as two, each .js file is about 9000 lines for a total of ~18,000 lines of javascript. How do I get the tweens to flow?

       

      Thanks,

      Tim

        • 2. Re: html5 canvas out of memory error, workarounds?
          tdofraser Level 1

          Thanks, I am aware of this post (you'll see my comment is the last one, in fact). That's what led me to split the file in two. However, it doesn't explain how to put them back together on the other end. Do you know what this entails?

          • 3. Re: html5 canvas out of memory error, workarounds?
            kglad Adobe Community Professional & MVP

            did you replace the jsfl files?

             

            did you compare the old and new ones to see what you should change in layerobj.jsfl?

            • 4. Re: html5 canvas out of memory error, workarounds?
              tdofraser Level 1

              Not sure what you meany by comparing old and new layerobj.jsfl.

               

              In terms of replacing files, Hemanth does not offer a replacement file for that particular file, and in a comment he references the other replacements as no longer being necessary. He says:

              Publishing has been optimised in the latest Flash CC update. If you are still getting out of memory I suggest you break up your project if possible into smaller chunks and combine them later.

               

              Which is why I am not asking about combining files.

               

              FWIW: I have since sent my .fla file to Adobe who is reviewing it to see if there is something wrong with the file itself. But if there are other ideas, I am all ears.

               

              Tim

              • 5. Re: html5 canvas out of memory error, workarounds?
                kglad Adobe Community Professional & MVP

                open the old and new jsfl files.  see what was changed.  see if those changes can be applied to layerobj.jsfl.

                • 6. Re: html5 canvas out of memory error, workarounds?
                  tdofraser Level 1

                  I don't have the old jsfl files; those were part of an older version of Flash that I don't have installed.

                  • 7. Re: html5 canvas out of memory error, workarounds?
                    kglad Adobe Community Professional & MVP

                    nvm, those aren't really jsfl files.  at least, they're not jsfl that i know.

                     

                    reach out to h kumar, if you haven't already.

                    • 8. Re: html5 canvas out of memory error, workarounds?
                      tdofraser Level 1

                      I've tried via his blog.

                      • 9. Re: html5 canvas out of memory error, workarounds?
                        trailyota Level 1

                        I'm having this issue as well.

                        The project itself isn't that that complex, or large. Obviously, when it's converted to HTML5 Canvas, it changes things a bit... but the JavaScript file is only 1811 lines.

                         

                        What concerns me, is that this project is only 1/4th of the way done, and I'm struggling to understand how I should move forward. I'm a little (a lot) concerned.

                         

                        Any help is appreciated.

                        • 10. Re: html5 canvas out of memory error, workarounds?
                          tdofraser Level 1

                          trailyota,

                          For me, I noticed that the issue didn't arise until I was near the end of the project, and so I figured that maybe it had something to do with the complexity of the art I was importing from AI or something else that was introduced along the way. So I rolled up my sleeves and started (from the end), removing layers and/or frames to isolate the issue until I got to a point where it stopped happening.  At that point, I simplified the area (as well as other parts that I could easily clean up) and I was able to hobble through to the end.  The issue came up a few more times, but I was able to deliver, ultimately.

                           

                          I did contact Adobe support along the way, and they offered to help me by taking a look at the file, and I sent it to them, they compiled it themselves and had the same issue.  After a little bit of back and forth, I never heard from them again. Fortunately, I was able to figure out the issue, but it made me very aware of just how screwed I was relying on Flash CC (now Animate CC) to interpret all of that work in to javascript and related media.

                           

                          BTW - Are you using the latest version of Animate CC?


                          Good luck!

                           

                          Tim

                          • 11. Re: html5 canvas out of memory error, workarounds?
                            trailyota Level 1

                            tdofraser -

                            I actually did a little digging around today, to try and find the true cause of this problem.

                            It looks like we may have done the same thing to troubleshoot, in terms of removing elements until the project compiled.

                             

                            I have elements that were imported from Illustrator as well. However, the fact that they are Illustrator vector objects shouldn't be the problem, as they are merely converted into vector coordinate data, which you can see in the *.js file once compiled.

                             

                            After realizing this, I took a look at how I am treating the project. In my Illustrator file, there are many elements that are essentially the same. Let's think "a black square". There are 5 black squares on my project. This seems like nothing, but when compiled, you'll see that each instance of that black square equals new lines of code. Every new layer that has an object on it, adds new lines of code. So what this brings me too, is best practices. Adobe has had best practices with Flash, where they essentially say that you should create a symbol for reusable objects.

                             

                            Hmm... (I thought)

                             

                            I created a single black square, converted it to a symbol, now I only have 1 black square symbol, but can reuse it many times, and give it an Instance Name. From a software engineering standpoint, this made total sense! So I checked the compiled *.js file; low and behold, the code is definitely smaller. In fact, if you understand what you're looking at, you can see how they're referencing the symbol, but applying it any additional treatment (size, coordinates, etc) that may differentiate it.

                             

                            I am using the latest version of Animate CC.

                             

                            Luckily for me, the project isn't TOO complicated, and I've spent more time on trying to recreate things than anything else.

                             

                             

                             

                            -Ron