Highlighted

Call function from external html? Animate CC

Community Beginner ,
Feb 18, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Discussions

Views

766

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Call function from external html? Animate CC

Community Beginner ,
Feb 18, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Discussions

Views

767

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 18, 2019 0
Adobe Community Professional ,
Feb 19, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0
Adobe Community Professional ,
Feb 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0
Community Beginner ,
Feb 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0