1 Reply Latest reply on Jul 2, 2014 4:24 AM by Mohanaraj

    How to diagnose flickering exported JS animations from Flash CC?


      Quick stats on my system:

      Macbook Pro Retina 2012 running OSX 10.9.3

      Flash CC


      I'm not experiencing an error so much as a lack of understanding about how to diagnose Flash CC JS export issues. Here's the backstory:


      In 2012, my company started working with an contract sprite artist. I was using the CS5.5 Creative Suite, and we were exporting normal png sequences from Flash for use in the game. After about 8 months, my cofounders and I realized that we could both reduce the load time for the game and also allow our artwork to be dynamically scalable by switching to JS exports of our art rather than the raster sprite sheets. Here's the blog post we wrote about it: http://blog.codecombat.com/hacking-our-way-to-vector-artwork-in-html5


      At the time, I didn't have Flash CC, and was reliant upon the CreateJS plugin to export the required JS files: CreateJS Developer Center | Adobe Developer Connection After another month or so, our contractor upgraded their version of Flash and we started having compatibility issues reading FLA files, so I upgraded as well. After doing some reading, I concluded that the CreateJS plugin was now incorporated into Flash CC as the HTML5 doc type, which was confirmed when I checked out the publish settings and resulting files.


      This is all a rather long winded way of saying that we have legacy artwork created with an older version of Flash but are now importing all of our artwork from JS files.


      Fast forward to today and we have two big issues:


      1) We can't figure out how to reduce the filesize of JS exports. As discussed in our blog post, vector artwork has upsides and downsides. One of the downsides we've found is that complex art that uses a lot of shapes ends up being substantially larger (in terms of filesize) than the appearance might otherwise suggest. Raster exports skirt this because a pixel is a pixel, but vector exports scale with the complexity of the source FLA. I'm not a Flash expert, and when we get files that are particularly complex, Flash either runs out of memory exporting them to JS files or we get files that are far too large to reasonably use. To be clear, the "out of memory" error isn't a problem because even if Flash finished the export, the resulting files would be too large for us to use (plus, I've done some digging and found a tutorial for correcting the out of memory error). Our artist is not familiar with the intricacies of the JS Flash exporter, so when we get a file that's too big or breaks the export, neither of us can really figure out a way to correct the problem. We have three questions in particular:


           a) Where can you view shape data that Flash is going to write to the JS files?

           b) Is there any way to edit said shape data inside the Flash CC interface?

           c) Is there any way to optimize shape data in Flash? For instance, in Photoshop, you can flatten images and export a psd with 500 layers as a single JPEG, is there any way to do something similar to shape data in Flash?


      2) Exports frequently break in weird ways. Many of the sprites that we created a year ago haven't needed to be re-imported into our game engine for some time. But every once in a while, I need to go back and fix, improve, or tweak an existing sprite, and then I run smack into the issue of reconciling files that were created without thought to JS exports with our current system. Just last week I was running into this issue in a big way and I made a screencast for our artist (since we work remotely) that I hoped might give him a better idea of the problem: Flash Errors - Treasure Chest, Flippable Tile - YouTube


      The two files mentioned in that screencast are both old (treasure chest) and new (flippable land tile). We have a few questions:


           a) Why are the treasure chest frames "flickering" in the html5 preview? The problem doesn't appear inside Flash and is inconsistent between files. There are two FLA files: one in which the treasure chest is empty, and one in which it's full. The empty animation doesn't throw any errors, either when converting to the HTML5 doc type or on export, but the resulting animation flickers. The full treasure, on the other hand gives me 21 lines of these errors when I do the conversion (not when I export): "Blend Modes(Layer) is not supported in HTML5 Canvas document, and has been converted to Normal in an instance of Movieclip <Path>." The result in both cases is the same: the animations flicker, and neither our artist nor us can figure out why, or for that matter, even begin to troubleshoot it. This SO issue seems to describe the problem, but was never resolved, and I can't find anything else that seems to address it: CreateJS Publish of Flash Project Flickers - Stack Overflow


      I've uploaded the files involved to a public dropbox folder which I think you'll be able to access (Dropbox seems to be having some problems at the moment): Dropbox - flash_debugging


      Since my questions are fairly involved, and my goal is to gain a better understanding of the UI, not simply resolve an error, I'd be happy to pay for someone's expertise/time in getting me up to speed. You can get in touch with me at george [at] codecombat.com

        • 1. Re: How to diagnose flickering exported JS animations from Flash CC?
          Mohanaraj Adobe Employee

          Hi George,

          I have taken a look at the files full_treasure_chest.fla and flippable_land.fla that you have shared via drop box and found that they both uses blank keyframe(s) followed by Keyframe(s). This was an issue and has been addressed in the latest release Flash CC 2014 (released on 18 June, 2014). Can you please install the latest build and try this out?




          1 person found this helpful