How to pass variable from one frame to another in Animate cc with JS

Question

Hi all, I wanted to reference a variable from one frame in the current frame with Animate CC with JS.

For example, below are the codes of a frame:
var p1=new Object(); p1.classes = middle;

Then I wanted to use p1 in another frame and I tried the following codes:
alert("this p1 classes is: ", p1.classes);

But an error of "Uncaught ReferenceError: p_p is not defined" is shown in the console

So, may I know how to pass one variable to another frame in Animate CC with js please? Thanks for any help.

Answer 1

The problem in declaring your variables and/or objects inside a frame, is that the scope is restricted to that frame, preventing your variables and/or objects to be used in other frames:

Frames code

// Frame 0
this.frame_0 = function() {
    /* The p1 object can only be used in this frame. */
    var p1 = new Object();

    /* Let's use something more appropiate for your alert box. 
       In this case is a string as a property of your object. */
    p1.classes = "middle"; 
}

// Frame 1
this.frame_1 = function() {
    /*  As a string is being used as a property of your object, 
        I changed a little bit of your code, to display that string in the alert box.
        This will give you an error (p1 not defined), 
        because the p1 object can't be used in this frame. */
    alert("this p1 classes is: " + p1.classes);

    /* Stop the timeline */
    this.stop();
}

To avoid that behaviour, you need to change the scope. There are two ways, depending on what scope you want to use:

---

Option 1: Clip-level scope

The scope is restricted to the current Movieclip, meaning that your variable or object can be used in any frame of that MovieClip.

this.p1 = new Object();
this.p1.classes = "middle";

Frames code

// Frame 0
this.frame_0 = function() {
    this.p1 = new Object();
    this.p1.classes = "middle";
}

// Frame 1
this.frame_1 = function() {
    alert("this p1 classes is: " + this.p1.classes);

    this.stop();
}

---

Option 2: Global scope

By not declaring your variable or object, the scope has no restrictions. It can be used in any frame of any MovieClip.

p1 = new Object();
p1.classes = "middle";

Frames code

// Frame 0
this.frame_0 = function() {
    p1 = new Object();
    p1.classes = "middle";
}

// Frame 1
this.frame_1 = function() {
    alert("this p1 classes is: " + p1.classes);

    this.stop();
}

---

Side note: Object creation

If you are creating a object, for performance and simplicity, it's better to use an object literal instead of new Object().

// Option 1
this.p1 = {classes:"middle"};

// Option 2
p1 = {classes:"middle"};