0

I'm trying to access movieClips from Animate CC 2015 via external javaScript file through the canvas. (I'm avoiding jQuery for file limit restrictions). All clips have instance names, in the past I had no issues using jQuery and syntax:

theStage.$("btnTC").show();

With the new AnimateCC JS output file I can only access the canvas but not the subsequent/child movieClips:

var theStage = document.getElementById("canvas");
console.log(theStage);



//Snippet below from JS file generated from Animate CC 


(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
 width: 300,
 height: 250,
 fps: 30,
 color: "#FFFFFF",
 manifest: [
  {src:"images/spriteSheet.png?1464063736640", id:"spriteSheet"}
 ]
};



// symbols:



(lib.spriteSheet = function() {
 this.initialize(img.spriteSheet);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,400,800);


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

 // Layer 1
 this.shape = new cjs.Shape();
 this.shape.graphics.f().s("#000000").ss(1,0,0,1,true).p("A3RTYMAAAgmvMAujAAAMAAAAmvg");
 this.shape.setTransform(149,124);

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

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-1,-1,300,250);
<script>
var canvas, stage, exportRoot;
</script>
<!-- DoubleClick studio.Enabler -->
<script>
if (!Enabler.isInitialized()) {
  Enabler.addEventListener(
    studio.events.StudioEvent.INIT,
    enablerInitialized);
} else {
   enablerInitialized();
}
function enablerInitialized() {
  // Enabler initialized.
  if (!Enabler.isVisible()) {
    Enabler.addEventListener(
      studio.events.StudioEvent.VISIBLE,
      adVisible);
  } else {
     adVisible();
  }
}
function adVisible() {
  // Ad visible, start ad/animation.
     
 canvas = document.getElementById("canvas");
 images = images||{};

 var loader = new createjs.LoadQueue(false);
 loader.addEventListener("fileload", handleFileLoad);
 loader.addEventListener("complete", handleComplete);
 loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
 if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
 exportRoot = new lib.GSAP_banner_001();

 stage = new createjs.Stage(canvas);
 stage.addChild(exportRoot);
 stage.update();
 stage.enableMouseOver();

 createjs.Ticker.setFPS(lib.properties.fps);
 createjs.Ticker.addEventListener("tick", stage);
}
</script>
<!-- write your code here -->
</head>
<body style="background-color:#D4D4D4;margin:0px;">
 <canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
 <noscript>
      <img src="GSAP_banner_001_300x250.gif" alt="Coles Credit Cards" width="300" height="250"/>
    </noscript>
</body>
</html>
ulittle
  • 156
  • 1
  • 6
  • You'll need to provide a relevant html stub for us to be able to help. – nosh May 24 '16 at 03:07
  • Animate CC uses createJS. I've tried getChildByName with no success.
    `var clip = stage.getChildByName('card');`     – ulittle May 24 '16 at 05:02

1 Answers1

1

To access movieClips from Animate CC 2015 via external javaScript use the following:

<!-- variables inside HTML document - generated by default on canvas publish -->
<script> var canvas, stage, exportRoot;</script>

Code from external JS file:

var myClip = exportRoot.circleMC; //Movie Clip instance 'circleMC' from Animate CC.
myClip.x = 100; //Access properties on your clip.
ulittle
  • 156
  • 1
  • 6