How to get the canvas element without jquery from Animate CC 2015

Question

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>

Answer 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.

How to get the canvas element without jquery from Animate CC 2015

Question

1 answers

solution1
1 2016-05-24 05:28:16

How to get the canvas element without jquery from Animate CC 2015

Question

1 answers

solution1 1 2016-05-24 05:28:16

solution1
1 2016-05-24 05:28:16