Estoy en el desarrollo de un curso de E-Learning y deseo mandar llamar una function Javascript desde un canvas de archivo de Animate CC. El canvas está cargado desde un iframe.
Código HTML :
.. <script type="text/javascript" src="js/start.js"></script> .. <div class="container theme-showcase" role="main"> <div class="row"> <div class="embed-responsive embed-responsive-16by9"> <iframe name="contenedor" id="contenedor" class="embed-responsive-item" src=""></iframe> </div> </div> </div>
Código Javascript :
function Siguiente(){
console.log("Siguiente");
var ref="temas/portada.html";
console.log(ref);
document.getElementById('btnSiguiente').href=ref;
document.getElementById('btnSiguiente').target="contenedor";
}Este es el código que genera el Animate
Código Javascript :
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 950,
height: 550,
fps: 24,
color: "#FFFFFF",
manifest: []
};
// symbols:
(lib.btnFinal = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Capa 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#000000").s().p("AtDDGIAAmLIaHAAIAAGLg");
this.shape.setTransform(83.7,19.8);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,167.3,39.7);
// stage content:
(lib.tema1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
this.stop();
//Comienza Codigo para responsive
this.stop();
var root = this;
var id = 0;
//Comienza responsivo
var page_body = document.getElementsByTagName("body")[0];
page_body.style.backgroundColor = "#3C0600";
page_body.style.overflow = "hidden";
page_body.style.position = "fixed";
var page_canvas = document.getElementsByTagName("canvas")[0];
stageWidth = page_canvas.width;
stageHeight = page_canvas.height;
var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';
if (viewport === null) {
var head = document.getElementsByTagName('head')[0];
viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
head.appendChild(viewport);
}
viewport.setAttribute('content', viewportContent);
function onResize() {
var widthToHeight = stageWidth / stageHeight;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = newWidth / newHeight;
//
if (newWidthToHeight > widthToHeight) {
newWidth = newHeight * widthToHeight;
page_canvas.style.height = newHeight + "px";
page_canvas.style.width = newWidth + "px";
} else {
newHeight = newWidth / widthToHeight;
page_canvas.style.height = newHeight + "px";
page_canvas.style.width = newWidth + "px";
}
scale = newWidthToHeight / widthToHeight;
stage.width = newWidth;
stage.height = newHeight;
page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";
page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";
}
window.onresize = function () {
onResize();
}
onResize();
//Termina codigo de Responsive
var FinalizarTema = true;
finalizar();
function finalizar() {
console.log(FinalizarTema);
}
//Funcion del star.js
this.btnFinal.addEventListener("click", fn);
function fn() {
console.log("boton");
//guardarDatos(ULTIMO, 0, TRAK);
id++;
console.log("Actual: ", root.timeline.position);
root.gotoAndStop(id);
console.log("Despues: ", root.timeline.position);
evalua();
Siguiente();
}
function evalua() {
alert("Total Frames " + root.timeline.duration);
alert("Frame Actual " + root.timeline.position);
// alert("Frame Actual"+root.currentFrame);
var TotalFrames = root.timeline.duration;
if (root.timeline.position == root.timeline.duration - 1) {
alert("ESTE ES EL ULTIMO FRAME!!!");
}
}
}
this.frame_1 = function() {
this.stop();
}
this.frame_2 = function() {
this.stop();
}
this.frame_3 = function() {
this.stop();
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1).call(this.frame_1).wait(1).call(this.frame_2).wait(1).call(this.frame_3).wait(1));
// Boton
this.btnFinal = new lib.btnFinal();
this.btnFinal.setTransform(849,508.4,1,1,0,0,0,83.7,19.8);
this.timeline.addTween(cjs.Tween.get(this.btnFinal).wait(4));
// Temas
this.shape = new cjs.Shape();
this.shape.graphics.f("#0066CC").s().p("AgpB5IAAgGQARgBAEgCQAGgDABgEQACgEAAgWIAAh+QAAgagCgIQgBgFgCgDQgEgDgEAAQgHAAgLAGIgDgGIA3gcIAHAAIAADHQAAAUACAFQABAFAFADQAGACAQABIAAAGg");
this.shape.setTransform(529,267.8);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#0066CC").s().p("Ag9BJQgLgMABgSQAAgMAEgJQAIgMASgKQARgJAogPIAAgGQAAgYgHgJQgJgJgMAAQgLAAgHAGQgGAGAAAHIAAALQAAAIgEAEQgEAEgGAAQgIAAgDgEQgFgFAAgIQAAgPAQgMQAQgNAcAAQATAAAOAHQAKAGAFALQADAIAAAXIAAA1QAAAXABAFQAAAFADACQABABAAAAQABAAAAAAQABABAAAAQABAAABAAIAEgBIAPgNIAAAKQgUAagSAAQgJAAgFgGQgFgGAAgOQgXATgGADQgJAEgLAAQgRAAgLgLgAgQAAQgOAHgGAJQgGAIAAAKQAAANAIAIQAHAJAKAAQANAAAUgSIAAg7QgZAKgHADg");
this.shape_1.setTransform(503.7,271.8);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("#0066CC").s().p("AA6BTIAAgHIADAAQAKAAAGgEQAEgDACgGIABgRIAAhDQAAgUgFgIQgHgLgPAAQgJAAgKAEQgJAFgNANIgBABIABAIIAABLQAAAQABAFQACADAFAEQAFACANAAIAAAHIhQAAIAAgHQAOAAAFgDQAFgDACgHQABgDAAgOIAAhDQAAgUgGgIQgIgMgOAAQgJABgKAEQgOAIgIAKIAABUQAAAQACAFQACAEAFADQAEACANAAIAAAHIhQAAIAAgHQALAAAFgCQAEgDADgEQACgGAAgPIAAg7QAAgbgCgHQgBgHgDgCQgCgCgFAAQgFAAgHADIgCgHIAwgUIAIAAIAAAjIAVgUQAHgHAKgDQAJgFAJAAQAPAAAJAJQALAKADAQQASgVANgGQAMgIAOAAQAMAAAKAIQAKAGAGAPQAEAKAAAWIAABDQAAAPACAGQACAEAFADQAEACALAAIAAAHg");
this.shape_2.setTransform(481.2,271.7);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("#0066CC").s().p("AguA+QgVgXAAgmQAAgnAWgXQAUgXAeAAQAcAAARASQARARAAAfIhtAAQAAAiASAUQARAUAWAAQAQAAAMgJQALgIAIgVIAFAEQgDAXgSAUQgSAUgbAAQgaAAgVgXgAgcg8QgMALgCAVIBJAAQgBgQgDgHQgEgJgJgGQgIgFgIAAQgOAAgMALg");
this.shape_3.setTransform(459.3,271.9);
this.shape_4 = new cjs.Shape();
this.shape_4.graphics.f("#0066CC").s().p("AgyB3IAAgHIAIAAQAQAAAGgJQAEgGAAgUIAAi0IgdAAQgQAAgIADQgJADgGAKQgHAJgBAQIgGAAIACg4IDBAAIACA4IgGAAQgCgOgDgHQgGgKgJgFQgJgFgPAAIghAAIAAC0QAAAWAEAGQAHAHAOAAIAIAAIAAAHg");
this.shape_4.setTransform(442.7,268);
this.shape_5 = new cjs.Shape();
this.shape_5.graphics.f("#0066CC").s().p("AgpB5IAAgGQARgBAEgCQAFgDADgEQABgEAAgWIAAh+QAAgagBgIQgBgFgEgDQgDgDgEAAQgHAAgLAGIgEgGIA5gcIAFAAIAADHQAAAUADAFQABAFAFADQAFACARABIAAAGg");
this.shape_5.setTransform(502.2,275.1);
this.shape_6 = new cjs.Shape();
this.shape_6.graphics.f("#0066CC").s().p("AgMANQgGgFAAgIQAAgHAGgGQAFgFAHAAQAIAAAFAFQAGAGAAAHQAAAIgGAFQgFAGgIAAQgHAAgFgGg");
this.shape_6.setTransform(488.8,285.8);
this.shape_7 = new cjs.Shape();
this.shape_7.graphics.f("#0066CC").s().p("AgpB5IAAgGQARgBAEgCQAFgDADgEQABgEAAgWIAAh+QAAgagBgIQgBgFgEgDQgDgDgEAAQgHAAgLAGIgEgGIA5gcIAFAAIAADHQAAAUADAFQABAFAFADQAFACARABIAAAGg");
this.shape_7.setTransform(475.2,275.1);
this.shape_8 = new cjs.Shape();
this.shape_8.graphics.f("#0066CC").s().p("Ag9BJQgLgMAAgSQAAgMAGgJQAHgMASgKQASgJAngPIAAgGQAAgYgIgJQgHgJgNAAQgLAAgGAGQgHAGAAAHIAAALQAAAIgEAEQgEAEgGAAQgHAAgFgEQgDgFAAgIQAAgPAPgMQAPgNAcAAQAUAAANAHQALAGAFALQADAIAAAXIAAA1QAAAXABAFQAAAFADACQAAABABAAQABAAAAAAQABABAAAAQABAAAAAAIAGgBIANgNIAAAKQgTAagSAAQgJAAgEgGQgGgGAAgOQgXATgGADQgJAEgMAAQgQAAgLgLgAgRAAQgNAHgGAJQgGAIAAAKQAAANAHAIQAIAJAKAAQANAAAUgSIAAg7QgYAKgJADg");
this.shape_8.setTransform(449.9,279.1);
this.shape_9 = new cjs.Shape();
this.shape_9.graphics.f("#0066CC").s().p("AA6BTIAAgHIADAAQAKAAAGgEQAEgDACgGIABgRIAAhDQAAgUgFgIQgHgLgPAAQgJAAgKAEQgJAFgNANIgBABIABAIIAABLQAAARABAEQACADAFAEQAFACANAAIAAAHIhQAAIAAgHQAOAAAFgDQAFgDACgGQABgEAAgOIAAhDQAAgUgGgIQgIgLgOAAQgJAAgKAEQgOAIgIAKIAABUQAAAQACAFQACAEAFADQAEACANAAIAAAHIhQAAIAAgHQALAAAFgCQAEgDADgEQACgGAAgPIAAg7QAAgbgCgIQgBgFgDgDQgCgCgFAAQgFAAgHADIgCgHIAwgUIAIAAIAAAjIAVgUQAHgHAKgDQAJgFAJAAQAPABAJAIQALAJADARQASgVANgGQAMgIAOAAQAMAAAKAIQAKAGAGAPQAEAKAAAWIAABDQAAAPACAGQACADAFAEQAEACALAAIAAAHg");
this.shape_9.setTransform(427.3,279);
this.shape_10 = new cjs.Shape();
this.shape_10.graphics.f("#0066CC").s().p("AguA+QgVgWABgnQAAgnAUgXQAWgXAdAAQAcAAARASQARASAAAdIhsAAQgBAiASAVQARAUAWABQAQgBALgIQAMgJAIgVIAFAEQgDAXgSAUQgRAUgbAAQgcAAgUgXgAgcg8QgLALgCAVIBIAAQgBgQgDgHQgEgJgJgGQgJgFgHgBQgPAAgLAMg");
this.shape_10.setTransform(405.4,279.2);
this.shape_11 = new cjs.Shape();
this.shape_11.graphics.f("#0066CC").s().p("AgyB3IAAgHIAJAAQAOAAAHgJQAEgGAAgUIAAi0IgdAAQgRAAgGADQgKADgGAKQgHAJgBAQIgHAAIADg4IDBAAIADA4IgHAAQgCgOgEgHQgFgKgJgFQgJgFgPAAIgiAAIAAC0QABAWAFAGQAGAHAOAAIAIAAIAAAHg");
this.shape_11.setTransform(388.9,275.3);
this.shape_12 = new cjs.Shape();
this.shape_12.graphics.f("#0066CC").s().p("AhNB5IAAgGQA+g5AXgkQAagiAAgdQAAgXgOgPQgOgOgRAAQgSAAgOAKQgOAKgHAUIgGAAQAEggATgSQASgRAbAAQAbAAATATQAUASAAAaQAAASgJASQgNAagdAgQgqAwgLAKIA9AAQATAAAHgCQAIgBAGgEQAGgFAFgIIAGAAIgQAug");
this.shape_12.setTransform(501.9,275.1);
this.shape_13 = new cjs.Shape();
this.shape_13.graphics.f("#0066CC").s().p("AglB8IAAgGQAMAAAEgCQAEgCACgFQACgGABgPIAAiQQgBgbgBgHQgBgGgDgCQgDgCgDgBQgGAAgHAEIgDgHIAugTIAIAAIAADTQABAPACAFQACAFAEACQAFADAMAAIAAAGg");
this.shape_13.setTransform(446.9,295.7);
this.shape_14 = new cjs.Shape();
this.shape_14.graphics.f("#0066CC").s().p("Ag9BJQgLgMAAgSQAAgMAGgJQAHgMARgKQATgJAngPIAAgGQAAgYgIgJQgHgJgNAAQgLAAgGAGQgHAGAAAHIAAALQAAAIgEAEQgEAEgHAAQgHAAgEgEQgDgFAAgIQAAgPAPgMQAPgNAcAAQAUAAANAHQALAGAFALQADAIAAAXIAAA1QAAAXABAFQABAFACACQAAABABAAQABAAAAAAQABABAAAAQABAAAAAAIAGgBIANgNIAAAKQgTAagSAAQgJAAgEgGQgGgGAAgOQgXATgGADQgKAEgLAAQgQAAgLgLgAgRAAQgNAHgGAJQgGAIAAAKQAAANAHAIQAIAJAKAAQANAAAUgSIAAg7QgZAKgIADg");
this.shape_14.setTransform(434.4,300.1);
this.shape_15 = new cjs.Shape();
this.shape_15.graphics.f("#0066CC").s().p("AAIBSIAAgGIADAAQAMAAAEgDQAFgDABgIQABgCAAgOIAAhAQAAgWgGgJQgFgLgOAAQgTABgVAWIAABTQAAAQACAFQADAFAEACQAEACAOAAIAAAGIhQAAIAAgGIAEAAQAMAAAEgGQAEgHAAgRIAAg5QAAgdgBgHQgBgGgDgCQgDgDgEAAQgFAAgHADIgDgHIAxgTIAHAAIAAAiQAdgiAXAAQAOgBAJAIQAKAGAFAPQAEAKAAAXIAABCQAAAQADAFQABAFAFABQAEADAMAAIAAAGg");
this.shape_15.setTransform(416.8,299.9);
this.shape_16 = new cjs.Shape();
this.shape_16.graphics.f("#0066CC").s().p("AgkB8IAAgGQAMAAAEgCQAEgCACgFQACgGAAgPIAAg+QAAgagBgGQgBgFgDgCQgDgDgEAAQgFAAgHADIgDgHIAvgTIAIAAIAAB/QAAAPACAGQACAEAEACQAFADALAAIAAAGgAgKhdQgFgGAAgGQAAgIAFgFQAFgGAGABQAHgBAGAGQAFAFAAAIQAAAGgFAGQgGAFgHAAQgFAAgGgFg");
this.shape_16.setTransform(402.8,295.7);
this.shape_17 = new cjs.Shape();
this.shape_17.graphics.f("#0066CC").s().p("AhYB3IAAgHIAIAAQAPAAAGgIQAFgGAAgVIAAiYQAAgTgDgFQgBgFgGgDQgHgEgJAAIgIAAIAAgHICvAAIACA1IgGAAQgFgRgFgIQgHgIgIgDQgJgEgTAAIgzAAIAABeIAqAAQAPAAAHgGQAHgHACgUIAGAAIAABPIgGAAQAAgOgEgGQgDgHgGgDQgGgDgMAAIgqAAIAABLQAAASADAFQABAFAGADQAIAEAGAAIAJAAIAAAHg");
this.shape_17.setTransform(387.3,296.3);
this.shape_18 = new cjs.Shape();
this.shape_18.graphics.f("#0066CC").s().p("Ag5B1QgJgFAAgHQAAgFAEgEQAEgEAGAAIAJABIANAHIAPAGQAGACAIAAQAQAAANgOQANgOAAgTQAAgNgGgOQgEgJgGgGQgHgHgOgFQgLgGgNAAIgGAAIAAgDQAOgCAMgIQAOgJAGgLQAGgMAAgOQAAgSgLgLQgLgLgPAAQgbAAgTAdIgFgDQAKgYAPgNQAQgNAVAAQAdAAAPATQAMANAAAQQAAAaghAcQAWAJALAOQALAQAAAVQAAAfgTAXQgaAdgvAAQgYAAgIgGg");
this.shape_18.setTransform(501.5,254.3);
this.shape_19 = new cjs.Shape();
this.shape_19.graphics.f("#0066CC").s().p("AgMANQgGgGAAgHQAAgHAGgGQAFgFAHAAQAIAAAFAFQAGAHAAAGQAAAHgGAGQgFAGgIAAQgHAAgFgGg");
this.shape_19.setTransform(488.8,264.9);
this.shape_20 = new cjs.Shape();
this.shape_20.graphics.f("#0066CC").s().p("AA6BTIAAgHIADAAQAKAAAGgEQAEgCACgHIABgRIAAhDQAAgUgFgIQgHgLgPAAQgJAAgKAEQgJAFgNANIgBABIABAIIAABLQAAARABADQACAEAFAEQAFACANAAIAAAHIhQAAIAAgHQAOAAAFgDQAFgDACgGQABgDAAgPIAAhDQAAgUgGgJQgIgLgOABQgJAAgKAEQgOAIgIAKIAABUQAAAQACAEQACAFAFADQAEACANAAIAAAHIhQAAIAAgHQALAAAFgCQAEgDADgFQACgFAAgPIAAg8QAAgagCgIQgBgGgDgCQgCgCgFAAQgFAAgHADIgCgGIAwgVIAIAAIAAAjIAVgUQAHgHAKgDQAJgEAJgBQAPABAJAIQALAKADAQQASgVANgHQAMgGAOgBQAMABAKAGQAKAHAGAPQAEAKAAAWIAABDQAAAPACAGQACAEAFADQAEACALAAIAAAHg");
this.shape_20.setTransform(427.3,258);
this.shape_21 = new cjs.Shape();
this.shape_21.graphics.f("#0066CC").s().p("AguA+QgVgXABglQAAgoAUgWQAWgYAdAAQAcAAARASQARASAAAdIhsAAQgBAiASAVQARAVAWAAQAQgBALgIQAMgJAIgVIAFAEQgDAYgSATQgRAUgbAAQgcAAgUgXgAgcg8QgLALgCAUIBIAAQgBgPgDgGQgEgKgJgGQgJgGgHAAQgPAAgLAMg");
this.shape_21.setTransform(405.4,258.3);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_11,p:{y:275.3}},{t:this.shape_10},{t:this.shape_9},{t:this.shape_8,p:{y:279.1}},{t:this.shape_7},{t:this.shape_6},{t:this.shape_5,p:{x:502.2,y:275.1}}]},1).to({state:[{t:this.shape_11,p:{y:275.3}},{t:this.shape_10},{t:this.shape_9},{t:this.shape_8,p:{y:279.1}},{t:this.shape_5,p:{x:475.2,y:275.1}},{t:this.shape_6},{t:this.shape_12}]},1).to({state:[{t:this.shape_11,p:{y:254.4}},{t:this.shape_21},{t:this.shape_20},{t:this.shape_8,p:{y:258.2}},{t:this.shape_5,p:{x:475.2,y:254.1}},{t:this.shape_19},{t:this.shape_18},{t:this.shape_17},{t:this.shape_16},{t:this.shape_15},{t:this.shape_14},{t:this.shape_13}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(904.6,520.9,503,282.4);
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;y el html
Código HTML :
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. "DO NOT" alter the tokens in the template html as they are required during publishing.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tema1</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tema1.js?1478719737120"></script>
<script type="text/javascript" src="../js/start.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
exportRoot = new lib.tema1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas" width="950" height="550" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Espero me puedan ayudar
