cjs.MovieClip is not a Constructor when moving to React

9 replies
1415 views
Translate

Hey everyone,

New to Animate and new to React and stuck on this problem. I've asked my TAs in class and scoured the internet for a solution and can't find it.

I have an animation from Animate that works in a page that is Bootstrap and vanilla JS. I've not migrated the entire page over the React with Bootstrap and I can not get the animation to work. I've played whack-a-mole on errors left and right and started over at least a dozen times, but in the end I keep getting stuck on this error... "cjs.MovieClip is not a constructor."

I've got a local version of createjs linked in my index.html as has been suggested elsewhere but that doesn't help. I'm sure there's something simple I'm missing but I've exhausted everything else I know to try. Does anyone have any suggestions? Is there a better way to get animations from Animate working in React?

(Here's the page with the working coffee cup animation at the top if that helps https://markgatx.github.io/Portfolio-v2/)

This topic is closed to new replies. Start a new post to keep the conversation going.

C

ClayUUID

Legend

Put it in an iframe. Whenever trying to mix Animate's HTML output with anything, the answer is always an iframe.

Translate

M

MarkGardnerATXAuthor

Participant

Yup that nailed it. Thank you!

Translate

kglad

Community Expert

what line of code is triggering the error?

Translate

M

MarkGardnerATXAuthor

Participant

It's in the external js file at the end of this segment...

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

(function (cjs, an) {

	var p; // shortcut to reference prototypes
	var lib={};var ss={};var img={};
	lib.ssMetadata = [
			{name:"coffee_cup_400_atlas_1", frames: [[0,0,398,581],[0,583,367,241],[0,826,378,62],[0,890,420,18],[0,910,409,18]]}
	];
	
	
	(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();

Translate

kglad

Community Expert

oh, there's some problem in your set-up then. there's no error in the createjs.js file.

Translate

M

MarkGardnerATXAuthor

Participant

I meant to say I've NOW migrated the page to React. I still can't get the animation to work. Typos can be confusing.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.