Skip to main content
C
chrc40760498
Participating Frequently
January 9, 2018
Answered

how to use variable outside canvas

  • January 9, 2018
  • 2 replies
  • 2113 views

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.

This topic has been closed for replies.
Correct answer albertd9194959

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.


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;

2 replies

albertd9194959
albertd9194959
Inspiring
January 10, 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,

C
chrc40760498Author
Participating Frequently
January 10, 2018

Hi,

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

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

<body onload="init();" style="background-color:#D4D4D4;margin:0px;">

<canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>

 

<div id="demo">  </div>

   

  

   <script>

   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.

C
ClayUUID
Legend
January 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.

C
ClayUUID
Legend
January 9, 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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices