Call function from external html? Animate CC

[RoGuE_StreaK3]

I can't seem to find info anywhere on how to call a function declared in Animate CC from an external source, eg. called by javascript triggered by a html button.  I can use exportRoot to control timelines, including targeted MCs, but if I try to call a function it errors with "Object doesn't support property or method..."

For example, I have a function called "hideSwatch()"

(NB: root is predefined via var root = this;)

function hideSwatch(){

for (i=0; i<12; i++){

  root["swatch"+i+"_mc"].circle_mc.noColour_mc.visible = false;

  root["swatch"+i+"_mc"].circle_mc.colour_mc.visible = true;

  root["swatch"+i+"_mc"].visible = false;

}

}

In the generated HTML file I've added a basic button

<button onclick="hideIt()">Hide Swatches</button>

and added javascript

function hideIt(){

exportRoot.hideSwatch();   

}

which errors out as per above.  Any thoughts?  I've tried numerous methods, tried declaring the function differently thinking it might be a local vs global thing, spent hours searching, and nada.

[JoãoCésar]

Hi.

I just simulated a situation like yours and everything worked.

Are you sure this error is coming from the exportRoot.hideSwatch call itself?

Are all of your objects in the for loop being correctly referenced?

Please let us know.

Regards,

JC

[ClayUUID · Accepted solution]

Functions defined like that are just like variables declared with var-- they belong to the execution context of the current frame (internally, each frame's scripts are wrapped in a function) and are not externally accessible. If you want functions to be persistent and externally accessible you need to define them as methods instead:

this.hideSwatch = function () {

     yadda yadda etc.

[RoGuE_StreaK3]

Hi JoãoCésar and ClayUUID

The hideSwatch function is working correctly and is used throughout my project without issue, which is why I figured I'd start testing with that function; it was a quick and easy way of seeing whether the external function call was working or not, as big swathes of the screen should disappear.

ClayUUID's suggestion has worked, I can now trigger the function from an external call, but it has broken my internal calls and I can't figure out how to re-scope them.  It's called at the end of a GSAP TweenLite tween, do you have any thoughts on what to change the "bind" to to get it to work when defined as this.hideSwatch?

function popDownSwatches(whichX,whichY){

console.log("popDownSwatches");

for (i=0; i<12; i++){

  TweenLite.to(root["swatch"+i+"_mc"], 0.3, {x: 5});

  TweenLite.to(root["swatch"+i+"_mc"], 0.3, {x: whichX, y: whichY, delay: 0.3, onComplete: hideSwatch.bind(root)});

}

}

[EDIT] Figured it out, just needed to add "root." in front of the hideSwatch, ie

onComplete: root.hideSwatch.bind(root)
Thought I'd post up the solution in case anyone else has the same issue in the future.  Note that root was defined earlier.  Also note that all code is on the one frame, so not sure how it goes when spreading across multiple frames.