createJS - Uncaught ReferenceError: lib is not defined

Question

I am at the beginning stages of creating a game using I am using Adobe Animate CC and CreateJS and I get the following error: Uncaught ReferenceError: lib is not defined. Basically right now I am just trying to get a background and some random numbers to appear on screen. I have created my background and random numbers as symbols in Adobe Animate, and I have also given them a class name by assigning them "linkage". I have included the javascript file created by Animate in my html along with a link to CreateJS and the following code:

Here is my Javascript code:

class NumberedBox extends createjs.Container 
{
  constructor(number=0)
  {
    super();
    var movieclip = new lib.NumberedBox();
    movieclip.numberedText.text = number;
    this.addChild(movieclip);

    movieclip.x = Math.random() * 200;
    movieclip.y = Math.random() * 200;
  }

}



class Game {

constructor()
{
   this.canvas = document.getElementById("canvas");
   this.stage = new createjs.Stage(this.canvas);

   createjs.Ticker.framerate = 60;
   createjs.Ticker.on("tick", this.stage);

   this.stage.addChild(new lib.Background());
   this.stage.addChild(new NumberedBox(88));
 }

}

var game = new Game();

The error I am getting is on this line of code (that is above) : this.stage.addChild(new lib.Background());

Here is the code created by CreateJS:

    (function (cjs, an) {

    var p; // shortcut to reference prototypes
    var lib={};var ss={};var img={};
    lib.ssMetadata = [];


    // symbols:
    // helper functions:

    function mc_symbol_clone() {
    var clone = this._cloneProps(new this.constructor(this.mode, 
    this.startPosition, this.loop));
    clone.gotoAndStop(this.currentFrame);
    clone.paused = this.paused;
    clone.framerate = this.framerate;
    return clone;
    }

    function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
    var prototype = cjs.extend(symbol, cjs.MovieClip);
    prototype.clone = mc_symbol_clone;
    prototype.nominalBounds = nominalBounds;
    prototype.frameBounds = frameBounds;
    return prototype;
    }


    (lib.RestartButton = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#000000").s().p("AgiBQIAAgFIAHAAQAKAAADgGQADgEAAgNIAAh5IgTAAQgLAAgEACQgHADgEAGQgEAGgCALIgDAAIABgmICBAAIABAmIgEAAQgBgKgDgEQgDgHgGgDQgGgEgKAAIgXAAIAAB5QABAPADADQAEAFAJAAIAGAAIAAAFg");
    this.shape.setTransform(146.2,28.5);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#000000").s().p("AAlBQIg1hLIgKABIgDAAIgEgBIAAAvQABAOADAEQAEAFAJAAIAGAAIAAAFIhEAAIAAgFIAGAAQAKAAAFgGQACgEAAgNIAAhnQAAgPgDgDQgFgFgJAAIgGAAIAAgFIA6AAQAYAAANAFQALADAJAKQAIAKAAAOQAAAOgKALQgJALgUADIAhAtQALARAIAFQAIAFANABIAAAFgAghhDIAABCIAEAAIADAAQAXAAAKgKQALgJAAgQQABgPgKgJQgJgKgPAAIgSADg");
    this.shape_1.setTransform(131.1,28.5);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#000000").s().p("AAWBRIAAgEQAJgBAEgCQADgDAAgEQAAgFgFgLIgJgXIg9AAIgLAZQgEAJAAAFQAAAEAEACQADADAMABIAAAEIgyAAIAAgEQAKgCADgDQAFgFAIgSIA4iBIADAAIA3CDQAHAQAFAFQAGAEAJABIAAAEgAghATIA1AAIgag/g");
    this.shape_2.setTransform(114.1,28.3);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("#000000").s().p("AghBQIAAgFIAFAAQALAAAEgGQACgEAAgNIAAh5IgTAAQgLAAgFACQgGADgEAGQgFAGAAALIgFAAIACgmICBAAIABAmIgEAAQgBgKgDgEQgDgHgGgDQgGgEgKAAIgWAAIAAB5QgBAPAEADQAEAFAKAAIAFAAIAAAFg");
    this.shape_3.setTransform(98.2,28.5);

    this.shape_4 = new cjs.Shape();
    this.shape_4.graphics.f("#000000").s().p("AgJBSIgPgEQgMgEgDAAQAAAAgBAAQgBAAAAABQgBAAAAAAQgBAAAAABQgCABgBAGIgEAAIAAg3IAEAAQADASAFAIQAFAIALAHQALAFALAAQAPAAAJgHQAIgIAAgLQAAgGgDgGQgDgGgHgFIgYgPQgVgLgIgGQgJgHgEgIQgFgJAAgJQAAgRANgNQAOgMAUAAQALAAAPAGQAGADADAAQADAAACgBQACgCABgGIAEAAIAAA3IgEAAQgCgQgGgKQgFgIgKgGQgKgFgKgBQgMABgIAHQgIAHAAAKQAAAHAFAGQAHAIAaAQQAXALAIAGQAIAGAFAJQAEAJAAAJQAAASgOANQgOANgWAAIgMgBg");
    this.shape_4.setTransform(84.2,28.5);

    this.shape_5 = new cjs.Shape();
    this.shape_5.graphics.f("#000000").s().p("AhDBQIAAgFIAFAAQAGAAAFgDQAEgCABgDIABgPIAAhnQAAgPgCgEQgEgEgLAAIgFAAIAAgFIB5AAIACAjIgFAAQgCgMgDgFQgDgFgFgCQgGgCgLAAIgrAAIAAA/IAiAAQAOAAAEgEQAHgFAAgOIAFAAIAAA3IgFAAQgBgNgCgDQgDgEgEgCQgFgCgKgBIgiAAIAAA1QAAAKABADIADAEQACABAHAAIAaAAQAOAAAGgCQAGgCAGgGQAHgHAHgOIAFAAIgOAog");
    this.shape_5.setTransform(70.1,28.5);

    this.shape_6 = new cjs.Shape();
    this.shape_6.graphics.f("#000000").s().p("AAlBQIg1hLIgJABIgEAAIgEgBIAAAvQAAAOADAEQAFAFAJAAIAGAAIAAAFIhEAAIAAgFIAGAAQAKAAAEgGQADgEAAgNIAAhnQAAgPgEgDQgEgFgJAAIgGAAIAAgFIA6AAQAZAAAMAFQALADAJAKQAIAKAAAOQAAAOgJALQgKALgUADIAhAtQALARAIAFQAIAFANABIAAAFgAghhDIAABCIAEAAIADAAQAXAAAKgKQAMgJAAgQQgBgPgIgJQgKgKgPAAIgSADg");
    this.shape_6.setTransform(55.1,28.5);

    this.shape_7 = new cjs.Shape();
    this.shape_7.graphics.f("#00FFFF").s().p("AxBFKIAAqTMAiDAAAIAAKTg");
    this.shape_7.setTransform(109,33);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]},1).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]},1).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]},1).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,218,66);


    (lib.NumberedBox = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.numberedText = new cjs.Text("98", "24px 'Times New Roman'");
    this.numberedText.name = "numberedText";
    this.numberedText.lineHeight = 29;
    this.numberedText.lineWidth = 44;
    this.numberedText.parent = this;
    this.numberedText.setTransform(33.5,36.2);

    this.shape = new cjs.Shape();
    this.shape.graphics.f("#34EDFC").s().p("AoVHgIAAu/IQrAAIAAO/g");
    this.shape.setTransform(53.4,48);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape},{t:this.numberedText}]}).wait(1));

}).prototype = getMCSymbolPrototype(lib.NumberedBox, new cjs.Rectangle(0,0,106.8,96), null);


    (lib.Background = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#FF00CC").s().p("EhK1AoeMAAAhQ7MCVrAAAMAAABQ7g");
    this.shape.setTransform(655,249);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.Background, new cjs.Rectangle(176,-10,958,518), null);


    (lib.GameOverView = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.RestartButton = new lib.RestartButton();
    this.RestartButton.name = "RestartButton";
    this.RestartButton.parent = this;
    this.RestartButton.setTransform(418.2,368.6,1,1,0,0,0,109,33);
    new cjs.ButtonHelper(this.RestartButton, 0, 1, 2, false, new lib.RestartButton(), 3);

    this.shape = new cjs.Shape();
    this.shape.graphics.f("#00FFFF").s().p("AgIBPQgEgEAAgFQAAgFAEgEQAEgEAEAAQAFAAAEAEQAEAEAAAFQAAAFgEAEQgEAEgFAAQgEAAgEgEgAgBAlIgKheIgBgJQAAgHAEgFQAEgEAEAAQAGAAAEAEQADAFAAAJIAAAHIgLBeg");
    this.shape.setTransform(407.6,212.7);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#00FFFF").s().p("AgIBPQgEgEAAgFQAAgFAEgEQAEgEAEAAQAFAAAEAEQAEAEAAAFQAAAFgEAEQgEAEgFAAQgEAAgEgEgAgBAlIgKheIgBgJQAAgHAEgFQAEgEAEAAQAGAAAEAEQADAFAAAJIAAAHIgLBeg");
    this.shape_1.setTransform(399.6,212.7);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#00FFFF").s().p("AAGA3IAAgEIACAAQAHAAADgCQADgDABgEIABgLIAAgrQAAgPgEgGQgEgHgJAAQgNAAgNAPIAAA4QAAALABACQABAEADACQADABAJAAIAAAEIg1AAIAAgEIACAAQAIAAADgEQADgEAAgMIAAgnQAAgTgBgEQgBgFgBgBQgCgCgDAAQgEAAgEACIgCgEIAhgNIAFAAIAAAWQASgWARAAQAIAAAHAEQAGAFAEAKQACAHAAAOIAAAtQAAAKACAEQABADADABQADACAIAAIAAAEg");
    this.shape_2.setTransform(389.7,215.1);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("#00FFFF").s().p("AgnAmQgMgRAAgUQAAgOAIgOQAHgPAMgHQAMgHAMAAQAZAAAOASQANARAAAUQAAANgHAPQgHAPgMAHQgMAIgOAAQgYAAgPgTgAgPgsQgGADgEAJQgEAKAAAOQAAAXAKAQQAJARAOAAQALAAAIgJQAHgJAAgXQAAgcgMgQQgIgMgMAAQgHAAgGAFg");
    this.shape_3.setTransform(377.6,215.3);

    this.shape_4 = new cjs.Shape();
    this.shape_4.graphics.f("#00FFFF").s().p("AAlBRIgkhkIgjBkIgEAAIgwiDIgGgRQgDgEgEgDQgEgCgHAAIAAgEIA7AAIAAAEIgDAAQgGAAgDADQgDADAAAEQAAAEAFAPIAfBYIAahLIgEgNIgEgLIgFgKIgEgEIgGgDIgHgBIAAgEIA9AAIAAAEIgEAAQgHAAgDADQgDADAAAFQAAAGAFAOIAfBWIAehXQAFgOAAgGQAAgDgCgCQgBgCgDgBQgEgCgIAAIAAgEIAwAAIAAAEQgGAAgEACQgEADgEAGIgHATIgsB/g");
    this.shape_4.setTransform(360.4,212.9);

    this.shape_5 = new cjs.Shape();
    this.shape_5.graphics.f("#00FFFF").s().p("AAXA4IAAgYQgOAPgIAEQgGAFgIAAQgJgBgHgFQgGgFgDgIQgCgJAAgPIAAguQAAgIgCgDQgCgDgDgCQgDgBgJAAIAAgFIAmAAIAABHQAAAQAFAEQAGAFAHAAQAEAAAGgDQAHgDAJgKIAAg7QAAgJgEgEQgDgDgLAAIAAgFIAlAAIAABBQAAASABAEQABAFACACQAAAAABAAQAAAAABABQAAAAABAAQAAAAABAAQAEAAAEgCIACAEIggAOg");
    this.shape_5.setTransform(384.3,186.9);

    this.shape_6 = new cjs.Shape();
    this.shape_6.graphics.f("#00FFFF").s().p("AgnAlQgMgQAAgUQAAgOAIgOQAHgPAMgHQAMgHAMAAQAZAAAOATQANAQAAAUQAAANgHAPQgHAPgMAHQgMAIgOAAQgYAAgPgUgAgPgsQgGADgEAJQgEAJAAAPQAAAWAKARQAJASAOgBQALAAAIgJQAHgJAAgXQAAgcgMgQQgIgMgMAAQgHABgGAEg");
    this.shape_6.setTransform(372.3,186.7);

    this.shape_7 = new cjs.Shape();
    this.shape_7.graphics.f("#00FFFF").s().p("AghBQIAAgFIAGAAQAJAAAFgGQADgEAAgNIAAglIgshCIgKgPQgEgDgIgEIgHgBIAAgFIBEAAIAAAFIgDAAQgGAAgEACQgFADAAAFQAAAFAHALIAgAxIAggvQAHgMAAgFQgBgDgBgDIgFgDQgEgCgGAAIAAgFIA4AAIAAAFIgDAAQgDAAgGACQgGAEgFAFQgEAEgIAMIgmA7IAAAoQAAAOADAEQAFAFAJAAIAGAAIAAAFg");
    this.shape_7.setTransform(357.6,184.1);

    this.shape_8 = new cjs.Shape();
    this.shape_8.graphics.f("#000000").s().p("EhK5AooMAAAhRPMCVzAAAMAAABRPgA6lWIMAiDAAAIAAqUMgiDAAAg");
    this.shape_8.setTransform(479.4,260);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_8},{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape},{t:this.RestartButton}]}).wait(1));

}).prototype = getMCSymbolPrototype(lib.GameOverView, new cjs.Rectangle(0,0,958.8,520), null);


// stage content:
(lib.test = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer_1
    this.instance = new lib.GameOverView();
    this.instance.parent = this;
    this.instance.setTransform(480.6,314,1,1,0,0,0,479.4,260);

    this.Background = new lib.Background();
    this.Background.name = "Background";
    this.Background.parent = this;
    this.Background.setTransform(1273.2,329,1,1,0,0,0,479,259);

    this.NumberedBox = new lib.NumberedBox();
    this.NumberedBox.name = "NumberedBox";
    this.NumberedBox.parent = this;
    this.NumberedBox.setTransform(1037.6,290,1,1,0,0,0,53.4,48);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.NumberedBox},{t:this.Background},{t:this.instance}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(481.2,374,1927,524);
// library properties:
lib.properties = {
    id: '9B2E3308BA873548975E3DE315BD1F74',
    width: 960,
    height: 640,
    fps: 24,
    color: "#FFFFFF",
    opacity: 1.00,
    manifest: [],
    preloads: []
};



// bootstrap callback support:

(lib.Stage = function(canvas) {
    createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();

p.setAutoPlay = function(autoPlay) {
    this.tickEnabled = autoPlay;
}
    p.play = function() { this.tickEnabled = true; 
    this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
    p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }

    p.getTimelinePosition = function() { return 
    this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }

    an.bootcompsLoaded = an.bootcompsLoaded || [];
    if(!an.bootstrapListeners) {
    an.bootstrapListeners=[];
    }

    an.bootstrapCallback=function(fnCallback) {
    an.bootstrapListeners.push(fnCallback);
    if(an.bootcompsLoaded.length > 0) {
        for(var i=0; i<an.bootcompsLoaded.length; ++i) {
            fnCallback(an.bootcompsLoaded[i]);
        }
    }
    };

    an.compositions = an.compositions || {};
    an.compositions['9B2E3308BA873548975E3DE315BD1F74'] = {
    getStage: function() { return exportRoot.getStage(); },
    getLibrary: function() { return lib; },
    getSpriteSheet: function() { return ss; },
    getImages: function() { return img; }
    };

    an.compositionLoaded = function(id) {
    an.bootcompsLoaded.push(id);
    for(var j=0; j<an.bootstrapListeners.length; j++) {
        an.bootstrapListeners[j](id);
    }
    }

    an.getComposition = function(id) {
    return an.compositions[id];
    }



    })(createjs = createjs||{}, AdobeAn = AdobeAn||{});
    var createjs, AdobeAn;

Any ideas as to what I am doing wrong? Thanks for your help!!

**The question you need to ask to yourself is**: Where did I declare the class or function `lib`? — Ele, Oct 18 '18 at 23:02
lib is defined in the Javascript created by Adobe Animate. It is too long to include here. — Ramona Soderlind, Oct 18 '18 at 23:04
Are you sure you are importing Adobe Animate before you load your script? — Mr. Goferito, Oct 18 '18 at 23:10

score 2 · Answer 1 · answered Oct 18 '18 at 23:32

2

In the script source that you've provided, the lib reference is defined only in createjs context and undefined in outside document/windows context. You need to call AdobeAn.getComposition(id).getLibrary() to obtain a reference to lib and access its properties (the id value to use seems to be embedded in the script source)

answered Oct 18 '18 at 23:32

muratgu

7,241
3
24
26

Thank you, but that code is already in place: var comp=AdobeAn.getComposition("9B2E3308BA873548975E3DE315BD1F74"); and I still get the error. I am pulling my hair out. I am beginning to think this is an Animate issue. – Ramona Soderlind Oct 18 '18 at 23:59
I don't see that code anywhere in your description. Is it the line it's failing? Usually, the browser console will tell you which line is causing the error. Please investigate which line is throwing the exception and give us more info. – muratgu Oct 19 '18 at 00:04
I just edited my question above to include that the error is on this line of code (which is my code): this.stage.addChild(new lib.Background()); But lib is defined so I just don't understand this error. And I have defined the Background in Animate with a class name. – Ramona Soderlind Oct 19 '18 at 00:12
On the line you've indicated, you cannot use `lib`, because it doesn't exist in that context. Do this: `var lib = AdobeAn.getComposition(id).getLibrary();` just before the line where it fails. – muratgu Oct 19 '18 at 00:17
Hi, that unfortunately did not fix the error. I am still looking into a solution and will post one if I can get to that point. Thanks. – Ramona Soderlind Oct 19 '18 at 16:44

score 1 · Answer 2 · answered Nov 11 '18 at 19:25

lib is no longer accessible as a global variable, hence the error. You can either store the reference of lib by modifying the published HTML code or use the following indirect way to access it:

var lib = AdobeAn.getComposition(AdobeAn.bootcompsLoaded[0]).getLibrary();

Ramona Soderlind · Answer 3 · 2018-10-22T12:09:42.943

Unlike the canvas and stage properties, the lib property is not accessible from all places. You'll have to send it as a parameter when you instantiate your Game class. Like this:

   class NumberedBox extends createjs.Container  
    {  
        constructor(lib, number = 0)  
        {  
              super();  
              var movieclip = new lib.NumberedBox();  
              movieclip.numberedText.text = number;  
              this.addChild(movieclip);  

              movieclip.x = Math.random() * 200;  
              movieclip.y = Math.random() * 200;  
        }  
    }  

    class Game  
    {  
        constructor(lib)  
        {  
              this.lib = lib;  

              this.canvas = document.getElementById("canvas"); // you can call the canvas property from anywhere without doing this  
              this.stage = new createjs.Stage(this.canvas); // a stage is already created for you  

              createjs.Ticker.framerate = 60;  
              createjs.Ticker.on("tick", this.stage);  

              this.stage.addChild(new lib.Background());  
              this.stage.addChild(new NumberedBox(lib, 88));  
        }  
    }  

    var game = new Game(lib); // assuming that this line is being called from some timeline in your FLA document

The answer to this question can also be found at: https://forums.adobe.com/message/10690481# . Thank you to all who responded to this question. I appreciate your help. -- Ramona

createJS - Uncaught ReferenceError: lib is not defined

3 Answers3