Comunidad de diseño web y desarrollo en internet online

Llamar funcion de javascript desde archivo de Animate CC

Citar            
MensajeEscrito el 15 Nov 2016 05:21 pm
Saludos

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

Por skajulio

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 16 Nov 2016 10:27 pm
Aunque habría que revisar tus 250 líneas de código, entiendo que Animate genera un output de JS basado en escritura de Canvas, lo cual ya no es ActionScript, aunque parece estar muy relacionado con createJS, la biblioteca que hereda el API de ActionScript, con lo cual la escritura de codigo se simplifica.
Postea solo la parte en que llamas a la función y dinos donde la tienes declarada

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.