How to set global variable?

[Kirimaru]

I have following UI:

When I press A button or B button, output result will be: value += 1, I don't know how to store global variable, you can show me a link or some keywords to resolve problem ...?! Thanks for reading!

[JoãoCésar · Accepted solution]

Hi.

When you say "global" I understand you want a variable that is available for all these UI elements, right?

If so, you can write something like this:

HTML5 Canvas:

var result = 0;
function setResult(e)
{
    this.outputText.text = String(++result);
}
this.buttonA.on("click", setResult, this);
this.buttonB.on("click", setResult, this);

AS3:

import flash.events.MouseEvent;
var result:uint = 0;
function setResult(e:MouseEvent):void
{
    outputText.text = String(++result);
}
buttonA.addEventListener(MouseEvent.CLICK, setResult);
buttonB.addEventListener(MouseEvent.CLICK, setResult);

I hope this helps.

Regards,

JC

[Kirimaru]

I used HTML canvas, it working like a charm, definitely I'il face other problems in project, I hope when it happen, you still here

[JoãoCésar]

Excellent!

You can count on us!

Regards,

JC

[Kirimaru]

Really I feel pretty confused when approach Animate, example: I want play sound when button clicked, I can search GG and find out this snippet:

var mysound:Sound = new (mySound);
mysound.play();

But I working with HTML document, so this approach is wrong?! but if I turn around with native JS, JS don't have concept about library and its syntax based tag, so ... how I handle it

[JoãoCésar]

Your code above is probably AS3.

That's the first differentiation you have to do: AS3 or HTML5 Canvas or WebGL.

In HTML5 documents, regular Animate CC objects like MovieClips are actually canvas objects created with the CreateJS libraries.

So there are things that are created by the Animate CC exporter, like exportRoot, that is a reference to the main timeline.

And there are things that belong to the CreateJS libraries, like the Ticker class or the on method for adding event Listeneres.

And of course you can use vanilla JavaScript and you can access the DOM elements like you would in a regular webpage development approach. E.g.:

document.querySelector(".thumbs");

Or:

window.onload = function(){};

Or:

canvas.style.width = "1280";

Maybe this comment will help you understand things better:

Re: Keep button state

Regards,

JC

[resdesign]

Definitely JoãoCésar is a great contributor and will help you when you need it. He and several other people monitor this forum and answer questions.

I wanted to add a few pointers. Everyone does things a little differently but here is my workflow. I work 100% in HTML5 and not Action Script.

I usually put my code in frame 1 of the main timeline in a layer called actions and if I have lots of things going on in different frames, I "globalize" the timeline with:

var root = this;   (any other variable name can be used here - root is used by lots of people)

So now you can use root for anything that happens on the main timeline. For example a symbol can be accessed using

root.symbolInstanceName.visible = false;

Then I write my functions and my events in that first frame of the action layer so it is easy to find everything that is going on. Even my complicated pieces are done this way. It took me a little while to understand the scope in ANCC coming from Edge Animate, but after I got that figured out, I pretty much work that way and everything works just fine and is well organized in one place.

Some other people write code in different frames and do not use a variable for the main timeline. There are also different ways to access symbols. This is just a matter of personality and habits. Some are more designers and some are more coders. These two kinds of people often approach things very differently. I think I am in the middle.

Good luck on your project and do not hesitate to ask questions! There will always be someone to answer.

[JoãoCésar]

Excellent, res!

[Ron5EB9]

Hello Res and Joao,

Thank you for all your efforts. I am a teacher and your explanations are very clear.

I have just come to Animate after dropping Flash in 2015. I too like the workflow of all my code in one place.

I am having a similar scoping issue with variables.

If I put them in the Global Script all is fine but I know this increases memory usage.

If I write some code in frame1 so it is only read once eg: 

if(functionsLoaded == "FALSE")//Initial functions script
{
var x = 100;
var y = 300;

functionsLoaded = "TRUE";

}

then

x++;

When frame 1 is read the first time I console.log and see x = 100 and y = 300.

The second time I get an error message saying x and y are not defined.

Any help would be appreciated.

Ron

[JoãoCésar]

Hi, Ron. How are you?

You're getting undefined values because you're initializing the variables inside of the if statement block. So in the first time, the functionsLoaded variable is "FALSE" and then the code runs. But starting from the second time, the functionsLoaded variable, which is global, is now "TRUE", so the code inside of the if statement block doesn't run again.

I hope this helps.

Regards,

JC

[Ron5EB9]

Thank you Joao,

It has helped. I am not sure I still fully understand how variable declaration works in Animate.

I currently have the var functionsLoaded = false; declaration in the Global Script but I wouls rather not have anything there. Where would I put it and how would I declare it if I only want it to be used once (in the first if statement)?

I am still confused. I got my code to work after taking out the declaration of x and y on the first frame. I just don't understand how or why it works. I am use to declaring all my global variables at the start and using them everywhere as you can see in my code.

My thinking is that it is inefficient to have the variables declared over an over again everytime Frame 1 is read. Here is the code in Frame 1. Frame 2 just this.gotoAndPlay('Beginning');.

I have tried to follow your set in your Connect Lines Game example.

_____________________________________

this.stop();
var root = this;
var originX_px = 100;
var originY_px = 300;
var amplitude_px = 200;
var deg90_px = 100;
var twoPI_px = originX_px + 4*deg90_px;
var stageHeight = stage.canvas.height;
var stageWidth = stage.canvas.width;
var sinx;
var i;
var isPlaying = false;

if(!root.functionsLoaded)//Initial functions script
{
stage.mouseMoveOutside = true;
createjs.Touch.enable(stage);
//Set initial positions
x = originX_px;
this.ball.x = x - 1;
sinx = Math.sin((x/deg90_px*90-90)* Math.PI/180);
y = originY_px - amplitude_px*sinx;
this.ball.y = y;

//draw sine curve
var pen = new createjs.Shape();
this.addChild(pen);
pen.graphics.setStrokeStyle(1);
pen.graphics.beginStroke("#0081A5");
for (i = originX_px; i < twoPI_px; i++)
{
x = i;
sinx = Math.sin((x/deg90_px*90-90)* Math.PI/180);
y = originY_px - amplitude_px*sinx;
pen.graphics.moveTo(x, y);
x = i+1;
sinx = Math.sin((x/deg90_px*90-90)* Math.PI/180);
y = originY_px - amplitude_px*sinx;
pen.graphics.lineTo(x, y);
}
x = originX_px - 1;
sinx = Math.sin((x/deg90_px*90-90)* Math.PI/180);
y = originY_px - amplitude_px*sinx;

root.functionsLoaded = true;
console.log("functionsLoaded = ",root.functionsLoaded);
}

x++ ;

if(x > twoPI_px)
{
x = originX_px;
}
sinx = Math.sin((x/deg90_px*90-90)* Math.PI/180);
y = originY_px - amplitude_px*sinx;
this.ball.x = x;
this.ball.y = y;
console.log("x = ",x);
console.log("y = ",y);
this.play();

_______________________

Regards,

Ron

[JoãoCésar]

Hi again, Ron!

Yeah. I agree that variable declaration in HTML5 Canvas documents can be quite confusing. But it's rather because of the way things work in JavaScript and how Animate generates the JS file.

In reality, the code of each frame is turned into a function in the exported JS file.

To sum up:

var foo = "bar"; // the variable will only be available for the current frame only

this.foo = "bar"; // it's a property that belongs to the current timeline and it will be available for all frames of this timeline

foo = "bar"; // it's a global variable and it will be available from any timeline. It will actually be available for the entire window. It's the same as writing window.foo = "bar"

So, for instance, if you want a code to run only once, you could write this:

if (!this.started) // "started" is a custom property
{
    console.log("Do something once.");
    this.started = true;
}

I hope this helps you to better understand variable declaration in HTML5 Canvas documents. Please let me know if you still have any questions.

Regards,
JC

[Ron5EB9]

Thanks Joao. I think I understand!

[JoãoCésar]

Great!

Please let me know if you need further assistance.

Regards,

JC