Search code examples
flashcanvaseaseljscreatejs

createjs button in flash is not working

I am trying to convert flash into html5 using createJs, however, button is not getting triggered, check code by downloading sample file here.

    this.ReplayBtn = new lib.replayBtn();
    this.ReplayBtn.onClick = function() {
      console.log("clicked");
      this.gotoAndPlay("animate");

    }

Here is jsFiddle link jsfiddle.net/asimkh/sLbgrx08/1

Solution

  • Made a quick edit to fix the fiddle you posted in the previous answer's comment. https://jsfiddle.net/lannymcnie/sLbgrx08/20/

    The var createjs is in a poor place in the fiddle, and was causing some issues. It would have worked locally for you, just not on jsfiddle. This "fixed" version that displays your initial issue.

    The remaining issue is that your image is being loaded cross-domain, resulting in an error when you click. This is because EaselJS mouse interaction requires pixel access, but the cross-domain image makes the canvas "dirty", which prevents it. You can see the error in the console, and it looks like you even copied the error into the Flash timeline, so you must have seen it.

    Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

    You can not really get around this using the CDN you are pointing at, since it doesn't send cross-origin headers, which are necessary. Additionally, the old version of PreloadJS does not support cross-origin well.

    I made a quick revision to your code, preloading the images manually, from a source that DOES support cross-origin requests (my test domain), and got it working. It took some hacking on the CreateJS generated code to get it to preload properly, but note that newer versions of the library support this no problem. https://jsfiddle.net/lannymcnie/sLbgrx08/22/

    Additionally, I made some changes to your frame scripts:

    1. Putting core logic like stage ticking and setup in your frame_0 is not advisable. The stage updates already in the HTML file, so use that. Externalizing your JavaScript outside of the FLA is good as well.
    2. I bound your click handler, like I mentioned in my earlier answer. This will ensure the function is called in the right scope:

    this.ReplayBtn.onClick = clickHandler.bind(this);

    1. The way you defined and called the animateCall function might work, but it is really specific. Since you have defined the function on that clip, just call it in that scope. The frame scripts are scoped to the clip they live in:

    this.animateCall();

    1. When you call animateCall, you are going to the "animate" label, which is frame 0. This causes the frame 0 script to get called again (another reason to externalize your JS from Flash). I commented out the gotoAndPlay for now.

    Hope that helps.