如何从 Animate CC 2015 获取没有 jquery 的画布元素



我正在尝试通过画布通过外部javaScript文件从Animate CC 2015访问movieClips。(我避免使用jQuery进行文件限制限制)。所有剪辑都有实例名称,过去我在使用 jQuery 和语法时没有问题:

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

使用新的 AnimateCC JS 输出文件,我只能访问画布,而不能访问后续/子电影剪辑:

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>

要通过外部 javaScript 从 Animate CC 2015 访问 movieClips,请使用以下命令:

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

来自外部JS文件的代码:

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

相关内容

最新更新