how to use variable outside canvas

Report · Jan 09, 2018

Hi,

I am trying to create an application in Animate, and i want to take a variable defined in actions , and show its contents as innerhtml of an div element. But it does not work. When i just add a variable at the end of js from my text editor , works fine , but when i declare it from inside animate. it does not work. I tried using var , and without var. Any ideas?

Thanks.

Report · Jan 09, 2018

If you create a variable like this in the Animate actions window...

iAmAVariableCreatedLIkeThis = "surrender dorothy";

...then it will be global to the current document window. Nothing can stop anything else on the page from accessing or changing that variable.

Report · Jan 09, 2018

This might help: ClayUUID wrote a detailed explanation here.

Animate CC javascript

Might also be the order of execution, the var might not be declared yet....not to sure on your file structure.

Uploading the file in question would help.

Regards,

Report · Jan 09, 2018

Hi,

Tnanks for the answer , still nothing. Here is my code :

----FROM THE HTML FILE------

k = document.getElementById("demo");

k.innerHTML = blue;

// if i change it to k.innerHTML = "blue"; works

</script>

</body>

------FROM THE JS FILE-----------

// timeline functions:

this.frame_0 = function() {

this.stop();

blue= "blue";

}

--------ACTIONS--------

this.stop();

blue= "blue";

--------

// I tried also first to declare blue and then stop function, but same result

// Only changes the order displayed in js file : first blue= "blue"; and then this.stop(); , no other change.

IN JS file if i add at the end a variable like :

var lib, images, createjs, ss; //after these variables

blue2 = 4;

// with blue2, works fine.

Report · Jan 10, 2018

You should try an experiment.

Put an alert statement where you set the value of blue.

Put an alert statement where you use the value of blue.

Note which one executes first.

Report · Jan 10, 2018

Hi,

When i ask for variable blue to be inside #demo, as below only alert from animate executes, and nothing else,nor alert inside if statement :

k = document.getElementById("demo");

k.innerHTML = blue;

var s=2;

if(s=2){

alert("five");

}

</script>

---

this.stop();

blue=5;

alert("blue"); // only this is executed

---------------------------------

When i insert a variable from text editor at the end of js blue2, as below , alert in if statement is executed first, the other one after, and blue2 becomes content of #demo :

in JS file at the end

var lib, images, createjs, ss; //after these variables

blue2 = 4;

------------

k = document.getElementById("demo");

k.innerHTML = blue2;

var s=2;

if(s=2){

window.alert("five");

}

</script>

----

this.stop();

blue=5;

alert("blue");

It seems that the variable cannot be called by it's name defined inside animate afterwards . I tried also to insert the above script, at the end oif the document, at the top, and inside js file at the end but it doesnt work.

Report · Jan 10, 2018

Why did you put your alerts inside if blocks? I didn't say to do that.

In Animate:

blue = "blue";

alert("Animate just set the value of blue!");

In your JS:

k.innerHTML = blue;

alert("Just tried to use the value of blue!");

Report · Jan 10, 2018

Sorry , i did not know that matters, no problem. I just tried without if, but same results . When trying to use the variable defined inside animate only the alert defined inside animate works, else the alert defined in html file is executed ffirst.

What it could be wrong?, thanks.

Report · Jan 10, 2018

I... err... okay. You know what, clearly the Socratic method isn't working here.

(deep breath)

YOUR GLOBAL VARIABLE ISN'T WORKING BECAUSE THE CODE THAT READS IT IS RUNNING BEFORE THE CODE THAT SETS IT.

That is what's wrong. Animate takes longer to initialize and run than your linked JS file does. So if you want external code to use variables that Animate sets, the external code must NOT run until Animate tells it to.

Report · Jan 10, 2018

What do you suggest we can do?, I am new to animate, but i believe that this is something common, and many will need something like that, if they work with Animate and web applications.

Report · Jan 10, 2018

Hmmm, what if you create the "demo" 'div' within animate ?

Depending on content you might need to move the "div"s around to avoid overlapping ( Layer order, positions, etc etc. )

var blue= "blue";
// Create new div
var demoLayer = document.createElement('div');
// Set its ID
demoLayer.id = "demo";
// Set height and width
demoLayer.style.width = '550px';
demoLayer.style.height = '400px';
// Attach the new div into default animate div
document.getElementById("animation_container").appendChild(demoLayer);
element1 = document.getElementById("demo");
// Lets move the div elements around, for the sake of this we will just place the new div above the default canvas div
element2 = document.getElementById("animation_container");
element2.parentNode.insertBefore(element1, element2);
element1.innerHTML = blue;

Report · Jan 11, 2018

Tnanks very much for your time and answers , that works.

While experimenting with the code, i tried on a different frame to change value of blue :

blue = 8;

element1.innerHTML = blue;

this.stop();

-------

, but is not working. Enters that frame but nothing. t tried using var and without it , for all variables used.

i would like your suggestions here too,thanks again

Report · Jan 11, 2018

That will work, but lets simplify.

Layer 1, keep the original code, the "master code" if you will.

Layer 2, frame 5 create a new keyframe and add:

var blue = 8;
element1.innerHTML = blue;
this.stop();

For the +- 1 second it will show blue, then it will swap to 8.

how to use variable outside canvas

1 Correct answer