IE 8 Toolkit

[timmccloskey]

First, great job making this.

I have an application up and running nicely in all browsers, but running into an error only in IE8 when trying to load/run an exported toolkit. What version of the Flash CreateJS toolkit are you using? Or, are there any known issues for IE8 specifically?
Thanks!

[bjnsn]

Hi Tim,

I've used both the canvas export in Flash CC and the toolkit noted here in Flash CS6 http://www.adobe.com/devnet/createjs/articles/getting-started.html

When you say 'running nicely in all browsers' do you mean your app is running with EaselFL or EaselJS in all browsers? If the latter, note that EaselFL is currently (mostly) compatible with EaselJS 0.6 (not 0.7, the newest release), if you're using 0.7 you'll need to make a few changes.

If you haven't tested with EaselFL in a modern browser, do that next. That should help you find which call is causing it to break, or if it is an IE8 specific issue.

Let me know what you find...

[timmccloskey]

Thanks.
I'm using CS6 Toolkit 1.2. I've tested the easelJS/FL in all other browsers and they all work fine, except the bastard IE8. I am using EaselJS 0.7. Though I've attempted rolling it back to several older versions but still no dice with IE8. I've broke it down pretty much to the bare minimum of just displaying a square in toolkit export. The error I'm seeing is an Object Expected when it attempts to load the toolkit. Too bad it doesn't tell me what it expects. :D

[bjnsn]

Guessing, it seems you're having issues with the actual flash embed. I would verify two things:

• Make sure the canvas initially used to setup the stage is on the DOM before intializing the stage

• Check if you're ever getting the flOnReady event:

  function initDrawing(){ ... }
  if( createjs.Stage.isEaselFL === true) { myStage.addEventListener(createjs.Stage.FL_ON_READY, initDrawing);
  }

Also, it may help to try EaselFL using IE8 mode emulated in IE9+. That way you can get console messages.

[timmccloskey]

Getting close. Few more questions because I'm think something is out of order somewhere:
Loading activity, I'm seeing this order:
FLSetup.js, tweenjs, preloadjs, swfobject.js, easelFL, movieclipjs, toolkit.js, easelfl-NEXT.swf

Code wise, in order I'm doing this:
create myCanvas,
run the FLSetup,
once done- load the toolkit, then:
exportRoot = lib.toolkit();
myStage = new createjs.Stage(myCanvas);
if(myStage.isEaselFL === true) {
// this doesn't fire
stage.addEventListener(createjs.Stage.FL_ON_READY, function () {
// doesn't fire either (of course)
});
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", myStage);
myStage.addChild(exportRoot);

The easelfl-NEXT.swf seems to load after everything else is done, including the code execution. Does this need to be completely loaded before I attempt to load the toolkit? And if so, is there an event or a callback? Again, this all still works in all browsers but IE8.

Also, does myStage and myCanvas need to be in then global namespace?

[timmccloskey]

Can you verify your example files for the toolkit? I'm not seeing toolkit_easelFL.html loading properly in IE8 (getting the same error of Object expected in the toolkit.js).

[bjnsn]

Hi Tim,

My mistake, the check for isEaselFL should be (I've changed in my comment above to not lead others astray):
if(createjs.Stage.isEaselFL) {...}

For the vast majority of interactions the SWF doesn't need to load before the code execution. The only code requiring the SWF to have loaded and hooked up to the EaselFL Stage is that which requires a synchronous response (currently limited to explicitly invoking DisplayObject.hitTest(x, y) and the text measuring methods such as Text.getMeasuredWidth()). Those should fail gracefully anyway.

myStage and myCanvas can be in a closure... there's nothing magic about the names.

It sounds like you're following this example:
https://github.com/periscopic/EaselFL/blob/master/examples/toolkit/toolkit_easelFL.html

If that's the case, is 'onEaselSuccess' firing (and EaselFL + SWFObject loading) before you load the toolkit file?

[timmccloskey]

Correct, I'm using that example as the basis, especially for the loading order. I am seeing EaselFL and the SWFObject loading before it attempts to load the toolkit file. However it looks like the easelfl_NEXT.swf is loading after the toolkit file, but still manages to run on all but IE8.

The FL_ON_READY still isn't firing in the other browsers after I updated the scope above. But more importantly, IE8 is breaking when it attempts to execute/load in the toolkit, thus never getting to instantiate myStage, the lib toolkit, nor adding the FL_ON_READY listener. Which makes me believe something is out of order or that I need to add the create the stage before loading the toolkit file(?). Though that leads into circles. Definitely test out the example file in IE8, it's erring out at the same point as my app.

[bjnsn]

Hi Tim,

Currently trying to work this out. There is something about the scope in which the var createjs is being created in toolkit.js that isn't working with the 0.6 style module ( this.createjs = this.createjs ||{}); Its clobbering the createjs exported by EaselFL when in IE8.

[bjnsn]

Ok. I'll work out a way to make this work directly with the toolkit export. In the meantime, if you change the final lines of the toolkit export to:

})(lib = lib||{}, images = images||{}, this.createjs = this.createjs||{});
var lib, images;

It should work.

[timmccloskey]

Awesome! Things are up and running again, I'll keep watch to see what you can find about the work around with this. I'll also be sure to send you a link to the finished product once it goes live (it's pretty cool, and for a big brand name). Thanks again for making this framework, it will be put to good use.