exportRoot is undefined

[The Real M]

I have converted an .fla file to HTML5 using Animate CC.

There are some other obvious problems.

But for now, in the js file and when viewing through Dreamweaver I have several errors.

Although they are all related to either,  'exportRoot' is not defined or 'stage' is not defined.

Before I get too involved in what is stopping my .fla from working properly as HTML5 ( I'm doing a shuffle between Actionscript and JS ), I would like to clear these problems up first.

A point in the right direction could save me a few days researching.

Here is the code:-

(function (cjs, an) {

var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
{name:"NEW_GALLERY_AS_HTML5 Canvas_atlas_1", frames: [[0,444,760,440],[0,0,762,442],[0,886,160,138],[360,886,196,32],[558,886,196,32],[162,886,196,37],[162,925,196,37],[162,964,196,37]]}
];

(lib.AnMovieClip = function(){
this.actionFrames = [];
this.ignorePause = false;
this.gotoAndPlay = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel);
}
this.play = function(){
cjs.MovieClip.prototype.play.call(this);
}
this.gotoAndStop = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndStop.call(this,positionOrLabel);
}
this.stop = function(){
cjs.MovieClip.prototype.stop.call(this);
}
}).prototype = p = new cjs.MovieClip();
// symbols:

(lib.CachedBmp_8 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_7 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(1);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_6 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(2);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_5 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(3);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_4 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(4);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_3 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(5);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_2 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(6);
}).prototype = p = new cjs.Sprite();

(lib.CachedBmp_1 = function() {
this.initialize(ss["NEW_GALLERY_AS_HTML5 Canvas_atlas_1"]);
this.gotoAndStop(7);
}).prototype = p = new cjs.Sprite();
// helper functions:

function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop, this.reversed));
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.Navigation_Button = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("ApXiWISvAAIAAEtIyvAAg");

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#FFFFFF").s().p("ApXCXIAAktISvAAIAAEtg");

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

this._renderFirstFrame();

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-61,-16.1,122,32.2);

(lib.emptyMovieClip = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// Layer_1
this.instance = new lib.CachedBmp_8();
this.instance.setTransform(0,0,0.5,0.5);

this.instance_1 = new lib.CachedBmp_7();
this.instance_1.setTransform(-0.5,-0.5,0.5,0.5);

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

this._renderFirstFrame();

}).prototype = getMCSymbolPrototype(lib.emptyMovieClip, new cjs.Rectangle(-0.5,-0.5,381,221), null);

(lib.aaAsset3svg = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// aaAsset_3_svg
this.instance = new lib.CachedBmp_6();
this.instance.setTransform(0,0,0.25,0.25);

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

this._renderFirstFrame();

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,40,34.5);

(lib.bPrevious = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// Layer_1
this.instance = new lib.aaAsset3svg("synched",0);
this.instance.setTransform(44.4,38.4,2.0001,2,0,0,0,22.2,19.2);

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

this._renderFirstFrame();

}).prototype = getMCSymbolPrototype(lib.bPrevious, new cjs.Rectangle(0,0,80,69), null);

(lib.bNext = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// Layer_1
this.instance = new lib.aaAsset3svg("synched",0);
this.instance.setTransform(35.6,38.6,2.0001,2,0,0,180,22.2,19.3);

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

this._renderFirstFrame();

}).prototype = getMCSymbolPrototype(lib.bNext, new cjs.Rectangle(0,0,80,69), null);

// stage content:
(lib.NEW_GALLERY_AS_HTML5Canvas = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// Arrows
this.bB = new lib.bPrevious();
this.bB.name = "bB";
this.bB.setTransform(-39.3,126.1,0.5001,0.4986,0,0,0,81.4,70.4);

this.bF = new lib.bNext();
this.bF.name = "bF";
this.bF.setTransform(435.5,104.35,0.5001,0.4984,0,0,0,31,26.8);

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

// Buttons
this.instance = new lib.CachedBmp_5();
this.instance.setTransform(389.05,263.15,0.5,0.5);

this.instance_1 = new lib.CachedBmp_4();
this.instance_1.setTransform(265.05,263.15,0.5,0.5);

this.instance_2 = new lib.CachedBmp_3();
this.instance_2.setTransform(141.05,261.9,0.5,0.5);

this.instance_3 = new lib.CachedBmp_2();
this.instance_3.setTransform(17.05,261.9,0.5,0.5);

this.instance_4 = new lib.CachedBmp_1();
this.instance_4.setTransform(-106.95,261.9,0.5,0.5);

this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_4},{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

this._renderFirstFrame();

}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(213.1,277,274,3.3999999999999773);
// library properties:
lib.properties = {
id: '1B4901EE20B258488C4F6D442AC3E7EC',
width: 640,
height: 372,
fps: 24,
color: "#000000",
opacity: 1.00,
manifest: [
{src:"images/NEW_GALLERY_AS_HTML5 Canvas_atlas_1.png?1647005094478", id:"NEW_GALLERY_AS_HTML5 Canvas_atlas_1"}
],
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['1B4901EE20B258488C4F6D442AC3E7EC'] = {
getStage: function() { return exportRoot.stage; },
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];
}

an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function(container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
an.handleSoundStreamOnTick = function(event) {
if(!event.paused){
var stageChild = stage.getChildAt(0);
if(!stageChild.paused || stageChild.ignorePause){
stageChild.syncStreamSounds();
}
}
}
an.handleFilterCache = function(event) {
if(!event.paused){
var target = event.target;
if(target){
if(target.filterCacheList){
for(var index = 0; index < target.filterCacheList.length ; index++){
var cacheInst = target.filterCacheList[index];
if((cacheInst.startFrame <= target.currentFrame) && (target.currentFrame <= cacheInst.endFrame)){
cacheInst.instance.cache(cacheInst.x, cacheInst.y, cacheInst.w, cacheInst.h);
}
}
}
}
}
}

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

[ClayUUID]

I hope you aren't seriously expecting anyone to read all those hundreds of lines of generated code.

You probably have a syntax error in your code somewhere that's preventing Animate's initialization code from running. Use the browser's developer console to find it.

[The Real M]

Hi.

No, I was actually expecting some here to perhaps recognise a possible common issue ( I have already read something in this community that is similar and someone mention that there was an error that Adobe needed to fix).

I did try to mention after my initial post that using ctrl +F to view the exportRoot ( only one instance )  and stage ( about six instances ). But something went wrong after the initial post, so I didn't get the opportunity to do it.

I'm hoping, as mentioned earlier that maybe someone that has more experience than me with converting to HTML5 would be able to spot the pattern that is causing the problem.

The movie is just a picture gallery, you'll be able to see it in another post from the other day. I'm not sure right now if you can view it via my profile.

It was made about ten years ago with AS2. I have only just come back to Actionscript, so have learnt AS3, converted the script and everything is working fine.

I am currently in the process of making the same movie but without using the package and class procedure. Basically putting the actionscript straight into the actions window in Animate CC relative to the timeline. There is only one frame and three layers.

Then try the conversion process again and see if the same errors arise.

I didn't like the idea of posting the whole thing either, but it seemed and still does look like the only way to describe what I am actually asking for.

I hope this gives you more context as to what I am asking for any help for.

As mentioned in my first post, I am currently shuffling between AS3 and JS.

I have also used AS3JS by cleod9 on Github to convert the AS3 to JS so that I can see more clearly where my time is best spent and how to explain my examples.

I am at a crossroads here and I can find my own way, I was just hoping for a quick pointer.

Wondering if 'exportRoot' or 'stage' issues will keep popping up if I write in Actionscript and convert to JS.

Maybe this is too much for this community forum, but I needed to ask.

BTW, thanks for the reply regardless.