Common Conversion Issues And How To Fix Them

This is a Lessons Learned page for people that undergo similar Flash conversion projects. Some of these come from my years of experience with a similar project I did for my old job.

General

• Bitmap fills are extremely glitchy and may cause animation errors of other objects on the same timeline. To bypass the issue, you can convert a shape to a bitmap, and there will be no rendering issues.
• Don't forget to use .bind(this) in your event listener code! Or use arrow functions if you don't care about anyone running old browsers.
• To prevent re-running code when a frame re-enters:

if (this._sentinel_ === undefined)
{
  this._sentinel_ = true;
  // ...
}

• A lot of tasks are tedious. Automate when possible. Write .jsfl Commands for use with Animate to save time so you can bind them to keyboard events later. For example, Deleting Layers is not bindable to any keyboard shortcut by default, so even something like that can save a lot of time in the long run.
• Frame labels are good! It means you don't have to subtract 1 from every gotoAndStop.
• If something is undefined that's supposed to be defined, try setTimeout(function(){/*code here*/}, 0). This defers execution of the code until some time after the current block is run.
  • This is a useful hack in other applications too, like crappy JS Widget libraries (looking at you, jqWidgets).
• If something isn't animating right, you may have a Color Transform on. Animate Canvas doesn't like that at all!
  • Only alpha works.
  • Color transforming only works on Shape Tweens and non-animated objects.
  • To get around this, you can try to manually change all the colors yourself, but don't forget that other instances may be affected too.
  • If the color transform just darkens, you can probably get by with an alpha transform over black or white.
• Canvas rendering is much slower than flash. Optimize shapes and cache complex drawings when possible.
• exportRoot is the main movie clip. It should be a global (window-level) variable.

From AS2

• A lot of AS2's reserved properties have _ in front of them (e.g. _visible, _x, _rotation). Often, a corresponding EaselJS property has the same name, minus the underscore.