I've been trying to mount this animation for more than a month. In total it consists of 33 frames. It is a set of 17 didactic slides. The user has a lower menu with numbers from 1 to 17, it also has an Advance button with which it advances one by one forward and also has a drop-down menu through which you can scroll and also select the slide you want to see.
Well, the slides are all in place but the buttons do not work. I've put in the Actions window the code that supposedly handles button events but it should not be fine because they do not work.
I copy and paste the html and the js. These files are self-generated as Animate is used.
HTML file
!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>editable_Canvas</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="editable_Canvas.js?1526414755064"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
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) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
exportRoot = new lib.editable_Canvas();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", handleTick)
function handleTick(event) {
var cameraInstance = exportRoot.___camera___instance;
if(cameraInstance)
{
if(cameraInstance._off != null && cameraInstance._off == true)
exportRoot.transformMatrix = new createjs.Matrix2D();
else
{
var mat = cameraInstance.getMatrix();
var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };
mat.tx -= stageCenter.x;
mat.ty -= stageCenter.y;
var inverseMat = mat.invert();
inverseMat.prependTransform(stageCenter.x, stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
inverseMat.appendTransform(-stageCenter.x, -stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
exportRoot.transformMatrix = inverseMat;
}
}
stage.update();
}
}
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'both',false,1);
fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1024px; height:768px">
<canvas id="canvas" width="1024" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1024px; height:768px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
File js, I put only the part of the timeline
// timeline functions:
this.frame_0 = function() {
this.stop();
this.btnadvance.addEventListener("click", bird.bind(this));
function bird()
{
this.gotoAndPlay(2);
}
this.btndirectory.addEventListener("click", marihuana.bind(this));
function marihuana() {
this.gotoAndPlay(1);
}
this.btndown1.addEventListener("click", sol.bind(this));
function sol() {
this.gotoAndPlay(0);
}
this.btndown2.addEventListener("click", samsung.bind(this));
function samsung() {
this.gotoAndPlay(2);
}
this.btndown3.addEventListener("click", acer.bind(this));
function acer() {
this.gotoAndPlay(4);
}
this.btndown4.addEventListener("click", nokia.bind(this));
function nokia() {
this.gotoAndPlay(6);
}
this.btndown5.addEventListener("click", teldat.bind(this));
function teldat() {
this.gotoAndPlay(8);
}
this.btndown6.addEventListener("click", seiko.bind(this));
function seiko() {
this.gotoAndPlay(10);
}
this.btndown7.addEventListener("click", ricoh.bind(this));
function ricoh() {
this.gotoAndPlay(12);
}
this.btndown8.addEventListener("click", sepe.bind(this));
function sepe() {
this.gotoAndPlay(14);
}
this.btndown9.addEventListener("click", server.bind(this));
function server() {
this.gotoAndPlay(16);
}
this.btndown10.addEventListener("click", thin.bind(this));
function thin() {
this.gotoAndPlay(18);
}
this.btndown11.addEventListener("click", planta.bind(this));
function planta() {
this.gotoAndPlay(20);
}
this.btndown12.addEventListener("click", maria.bind(this));
function maria() {
this.gotoAndPlay(22);
}
this.btndown13.addEventListener("click", blanca.bind(this));
function blanca() {
this.gotoAndPlay(24);
}
this.btndown14.addEventListener("click", victoria.bind(this));
function victoria() {
this.gotoAndPlay(26);
}
this.btndown15.addEventListener("click", urano.bind(this));
function urano() {
this.gotoAndPlay(28);
}
this.btndown16.addEventListener("click", neptuno.bind(this));
function neptuno() {
this.gotoAndPlay(30);
}
this.btndown17.addEventListener("click", jupiter.bind(this));
function jupiter() {
this.gotoAndPlay(32);
}
}
this.frame_1 = function() {
this.stop();
this.btnclose.addEventListener("click", sandala.bind(this));
function sandala() {
this.gotoAndPlay(0);
}
this.btntest.addEventListener("click", chakra.bind(this));
function chakra() {
this.gotoAndStop(0);
}
this.btntest01.addEventListener("click", trampa.bind(this));
function trampa() {
this.gotoAndPlay(2);
}
this.btntest02.addEventListener("click", flamenco.bind(this));
function flamenco() {
this.gotoAndPlay(4);
}
this.btntest04.addEventListener("click", god.bind(this));
function god() {
this.gotoAndPlay(6);
}
this.btntest05.addEventListener("click", grateful.bind(this));
function grateful() {
this.gotoAndPlay(8);
}
this.btntest06.addEventListener("click", fluffy.bind(this));
function fluffy() {
this.gotoAndPlay(10);
}
this.btntest07.addEventListener("click", curvy.bind(this));
function curvy() {
this.gotoAndPlay(12);
}
this.btntest08.addEventListener("click", box.bind(this));
function box() {
this.gotoAndPlay(14);
}
this.btntest09.addEventListener("click", delicate.bind(this));
function delicate() {
this.gotoAndPlay(16);
}
this.btntest10.addEventListener("click", eminent.bind(this));
function eminent(){
this.gotoAndPlay(18);
}
this.btntest11.addEventListener("click", rainstorm.bind(this));
function rainstorm() {
this.gotoAndPlay(20);
}
this.btntest12.addEventListener("click", fruit.bind(this));
function fruit() {
this.gotoAndPlay(22);
}
this.btntest13.addEventListener("click", sordid.bind(this));
function sordid() {
this.gotoAndPlay(24);
}
this.btntest14.addEventListener("click", reaction.bind(this));
function reaction() {
this.gotoAndPlay(26);
}
this.btntest15.addEventListener("click", scratch.bind(this));
function scratch() {
this.gotoAndPlay(28);
}
this.btntest16.addEventListener("click", cent.bind(this));
function cent() {
this.gotoAndPlay(30);
}
this.btntest17.addEventListener("click", afford.bind(this));
function afford() {
this.gotoAndPlay(32);
}
}
this.frame_2 = function() {
this.stop();
this.btnadvance.addEventListener("click", mantra.bind(this));
function mantra() {
this.gotoAndPlay(4);
}
this.btndirectory03.addEventListener("click", detroit.bind(this));
function detroit() {
this.gotoAndPlay(3);
}
}
this.frame_3 = function() {
this.stop();
this.btnclose01.addEventListener("click", tenedor.bind(this));
function tenedor() {
this.gotoAndPlay(2);
}
}
this.frame_4 = function() {
this.stop();
this.btnadvance.addEventListener("click", damelo.bind(this));
function damelo() {
this.gotoAndPlay(6);
}
this.btndirectory05.addEventListener("click", mustang.bind(this));
function mustang()
{
this.gotoAndPlay(5);
}
}
this.frame_5 = function() {
this.stop();
this.btnclose.addEventListener("click", abreme.bind(this));
function abreme() {
this.gotoAndStop(4);
}
}
this.frame_6 = function() {
this.stop();
this.btnadvance.addEventListener("click", metela.bind(this));
function metela() {
this.gotoAndPlay(8);
}
this.btndirectory07.addEventListener("click", newage.bind(this));
function newage() {
this.gotoAndStop(7);
}
}
this.frame_7 = function() {
this.stop();
this.btnclose.addEventListener("click", hastaqueduela.bind(this));
function hastaqueduela() {
this.gotoAndStop(6);
}
}
this.frame_8 = function() {
this.stop();
this.btnadvance.addEventListener("click", siguienteframe.bind(this));
function siguienteframe() {
this.gotoAndPlay(10);
}
this.btndirectory09.addEventListener("click", trance.bind(this));
function trance() {
this.gotoAndStop(9);
}
}
this.frame_9 = function() {
this.stop();
this.btnclose.addEventListener("click", chupa.bind(this));
function chupa() {
this.gotoAndStop(8);
}
}
this.frame_10 = function() {
this.stop();
this.btnadvance.addEventListener("click", besitosconamor.bind(this));
function besitosconamor() {
this.gotoAndPlay(12);
}
this.btndirectory.addEventListener("click", futbol.bind(this));
function futbol() {
this.gotoAndPlay(11);
}
}
this.frame_11 = function() {
this.stop();
this.btnclose.addEventListener("click", limon.bind(this));
function limon() {
this.gotoAndStop(10);
}
}
this.frame_12 = function() {
this.stop();
this.btnadvance.addEventListener("click", animate.bind(this));
function animate() {
this.gotoAndPlay(14);
}
this.btndirectory.addEventListener("click", samuel.bind(this));
function samuel() {
this.gotoAndPlay(13);
}
}
this.frame_13 = function() {
this.stop();
this.btnclose.addEventListener("click", amuleto.bind(this));
function amuleto() {
this.gotoAndStop(12);
}
}
this.frame_14 = function() {
this.stop();
this.btnadvance07.addEventListener("click", somosdos.bind(this));
function somosdos() {
this.gotoAndPlay(16);
}
this.btndirectory.addEventListener("click", yonki.bind(this));
function yonki() {
this.gotoAndPlay(15);
}
}
this.frame_15 = function() {
this.stop();
this.btnclose.addEventListener("click", alfredo.bind(this));
function alfredo() {
this.gotoAndStop(14);
}
}
this.frame_16 = function() {
this.stop();
this.btnadvance08.addEventListener("click", manzana.bind(this));
function manzana() {
this.gotoAndPlay(18);
}
this.btndirectory.addEventListener("click", peras.bind(this));
function peras() {
this.gotoAndStop(17);
}
}
this.frame_17 = function() {
this.stop();
this.btnclose.addEventListener("click", cacatua.bind(this));
function cacatua() {
this.gotoAndStop(16);
}
}
this.frame_18 = function() {
this.stop();
this.btnadvance09.addEventListener("click", chaqueta.bind(this));
function chaqueta() {
this.gotoAndPlay(20);
}
this.btndirectory.addEventListener("click", lapiz.bind(this));
function lapiz() {
this.gotoAndPlay(19);
}
}
this.frame_19 = function() {
this.stop();
this.btnclose.addEventListener("click", tela.bind(this));
function tela() {
this.gotoAndStop(18);
}
}
this.frame_20 = function() {
this.stop();
this.btnadvance10.addEventListener("click", embajada.bind(this));
function embajada() {
this.gotoAndPlay(22);
}
this.btndirectory.addEventListener("click", septiembre.bind(this));
function septiembre() {
this.gotoAndPlay(21);
}
}
this.frame_21 = function() {
this.stop();
this.btnclose.addEventListener("click", coche.bind(this));
function coche() {
this.gotoAndStop(20);
}
}
this.frame_22 = function() {
this.stop();
this.btnadvance11.addEventListener("click", tambores.bind(this));
function tambores() {
this.gotoAndPlay(24);
}
this.btndirectory.addEventListener("click", libraco.bind(this));
function libraco() {
this.gotoAndPlay(23);
}
}
this.frame_23 = function() {
this.stop();
this.btnclose.addEventListener("click", chiste.bind(this));
function chiste() {
this.gotoAndStop(22);
}
}
this.frame_24 = function() {
this.stop();
this.btnadvance12.addEventListener("click", torpedo.bind(this));
function torpedo() {
this.gotoAndPlay(26);
}
this.btndirectory.addEventListener("click", trance.bind(this));
function trance() {
this.gotoAndPlay(25);
}
}
this.frame_25 = function() {
this.stop();
this.btnclose.addEventListener("click", francisco.bind(this));
function francisco() {
this.gotoAndStop(24);
}
}
this.frame_26 = function() {
this.stop();
this.btnadvance13.addEventListener("click", djembe.bind(this));
function djembe() {
this.gotoAndPlay(28);
}
this.btndirectory.addEventListener("click", trancas.bind(this));
function trancas() {
this.gotoAndPlay(27);
}
}
this.frame_27 = function() {
this.stop();
this.btnclose.addEventListener("click", austria.bind(this));
function austria() {
this.gotoAndStop(26);
}
}
this.frame_28 = function() {
this.stop();
this.btnadvance14 .addEventListener("click", djembe.bind(this));
function djembe() {
this.gotoAndPlay(30);
}
this.btndirectory.addEventListener("click", trancas.bind(this));
function trancas() {
this.gotoAndPlay(29);
}
}
this.frame_29 = function() {
this.stop();
this.btnclose.addEventListener("click", cajon.bind(this));
function cajon() {
this.gotoAndStop(28);
}
}
this.frame_30 = function() {
this.stop();
this.btnadvance15.addEventListener("click", medias.bind(this));
function medias() {
this.gotoAndPlay(32);
}
this.btndirectory.addEventListener("click", cuchara.bind(this));
function cuchara() {
this.gotoAndPlay(31);
}
}
this.frame_31 = function() {
this.stop();
this.btnclose.addEventListener("click", sofa.bind(this));
function sofa() {
this.gotoAndStop(30);
}
}
this.frame_32 = function() {
this.stop();
this.btnadvance16.addEventListener("click", trapos.bind(this));
function trapos() {
this.gotoAndPlay(0);
}
this.btndirectory.addEventListener("click", francia.bind(this));
function francia() {
this.gotoAndPlay(33);
}
}
this.frame_33 = function() {
this.stop();
this.btnclose.addEventListener("click", alemania.bind(this));
function alemania() {
this.gotoAndPlay(32);
}
}