Запустить готовую функцию в HTML5 Canvas (сгенерированного в Adobe Animate CC), по событию на чем то вне этого Canvas

104

24 мая 2021, 14:40

Подскажите нюанс работы с Adobe Animate HTML5 Сanvas?

Доступными средствами программирования в Adobe Animate в документе HTML5 Сanvas я сделал интерактивный ролик. Анимация ракеты запускается по клику на кнопке, анимация зацикливается после появления, просто перебрасыванием каретки с нужного кадра назад в нужное место на таймлайне в кадр "loop". Посмотреть

По нажатию на другую кнопку, срабатывает переход в кадр "away" и всё, дело сделано.

После публикации, после танцев с бубном всё работает как и предполагалось. Теперь вопрос.

Как я могу вызывать эти две функции в Canvas, не нажимая на кнопки в объекте Canvas? А нажимаю на кнопки вне его самого. Т.е. просто навесить как у меня функции на кнопки вне Canvas и по нажатию на них запустить соответствующую функцию в Canvas, которая там имеется?

Как понимаю, используется при публикации create.js и я не смог чего то внятного по ней найти. Там хрен пойми как оно инкапсулируется и создаёт прототип. Раз события там существуют, значит можно как то к ним прорваться, но несколько часов поисков решения ничего не дали. А надо именно управлять с помощью элементов извне Canvas, в идеале что то ему и передавать в параметрах функции. Буду благодарен за помощь.

Вот фидл: jsfiddle link

// stage content:

(lib.canva = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{});

// timeline functions:
this.frame_0 = function() {
    this.stop();
    this.buttonGo.addEventListener("click", go.bind(this));
    this.buttonAway.addEventListener("click", away.bind(this));
    function go() {
        this.main.animation.gotoAndPlay("go");
    }
    function away() {
        this.main.animation.gotoAndPlay("away");
    }
}

Прошу прощение за огромный код в фидлле, так описывается анимация моя. Файл js я вставил просто в тег первый, чтоб была возможность показать онлайн код, а не подключать со стороны файл.

Интерес представляет только по сути код снизу всего, тот что я скопировал выше. Это те 2 функции, которые нужны, которые так и описаны в Adobe Animate кодом.

Как мне прописать, обратиться к ним и запустить их средствами простого JS по клику на кнопки которые над Canvas к примеру?

Для удобства вот архив на проект, если кто решит помочь, так удобней посмотреть, просто запусти index.html

Download

Answer 1

У меня получилось вот так:

function goFN() {
    stage.children[0].main.animation.gotoAndPlay("go");
}
function awayFN() {
    stage.children[0].main.animation.gotoAndPlay("away");
}

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
<script src="https://codepen.io/strangerintheq/pen/GVYGqw.js"></script> 
<script> 
function goFN() { 
  stage.children[0].main.animation.gotoAndPlay("go"); 
} 
 
function awayFN() { 
  stage.children[0].main.animation.gotoAndPlay("away"); 
} 
 
var canvas, stage, exportRoot; 
 
function init() { 
  canvas = document.getElementById("canvas"); 
  var loader = new createjs.LoadQueue(false); 
  loader.installPlugin(createjs.Sound); 
  loader.addEventListener("complete", handleComplete); 
  loader.loadManifest(lib.properties.manifest); 
} 
 
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.canva(); 
  stage = new createjs.Stage(canvas); 
  stage.addChild(exportRoot); 
  stage.enableMouseOver(); 
  //Registers the "tick" event listener. 
  createjs.Ticker.setFPS(lib.properties.fps); 
  createjs.Ticker.addEventListener("tick", stage); 
  //Code to support hidpi screens and responsive scaling. 
  (function(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, 
        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 = w * sRatio + 'px'; 
      canvas.style.height = h * sRatio + 'px'; 
      stage.scaleX = pRatio * sRatio; 
      stage.scaleY = pRatio * sRatio; 
      lastW = iw; 
      lastH = ih; 
      lastS = sRatio; 
    } 
  })(true, 'both', false, 1); 
} 
 
function playSound(id, loop) { 
  return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop); 
} 
</script> 
<style> 
  #canvas { 
    position: absolute; 
  } 
 
  button { 
    padding: 10px; 
    position: relative; 
    margin-top: 10px; 
    display: inline-block; 
    border-radius: 20px; 
    border: solid 2px #180732; 
    outline: none; 
    cursor: pointer; 
    left: 50%; 
    transition: .3s ease-out 
  } 
 
  button:hover { 
    border: solid 2px #e4307a; 
  } 
</style> 
<body onload="init();" style="margin:0px;overflow:hidden"> 
 
  <canvas id="canvas" width="747" height="522" style="display: block; background-color:rgba(24, 7, 50, 1.00)"></canvas> 
 
  <button onclick="goFN()">Эта кнопка, вызывает функцию, <br>которая должна активировать функцию "go()" в Canvas</button> <br> 
  <button onclick="awayFN()">Эта кнопка, вызывает функцию, <br>которая должна активировать функцию "away()" в Canvas</button> 
 
</body>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

React-spring анимация после анимации

Как с помощю библиотеки react-spring или просто с помощю react и css , сделать анимацию после анимацииК примеру у меня есть div и я хочу сначала увеличить...

117

javascript

как добавить AJAXом sql запрос

не получается сделать запрос на добавление записи с помощью AJAXJS срабатывает, вроде нормально, насколько я понимаю у меня где-то ошибка в PHP

134

javascript

Помогите разобраться в виджете datapicker!

Есть такой код $("#datepicker1,#datepicker2" )datepicker({ showWeek: true, firstDay: 1 }); Есть форма состоящая из 2 полей в одном нужно выбрать дату приезда(#datapicker1)...

120

CSS

align-Items для CSS

Всем привет, я правильно понимаю, что при использовании align-items, если высота главного блока не указана, то элементы выравниваются по самому...

109