Как взаимодействовать «внешне» между анимациями Adobe Animate CC?

Question

С помощью сценария на странице html я пытаюсь управлять тем, что происходит в созданных мной анимациях Adobe Animate CC. Например, здесь вы увидите скрипт, который не работает, который пытается передать анимацию корабля gotoAndPlay (5). Во всяком случае, анимация корабля на это не реагирует. Я предполагаю, что это потому, что я неправильно его называю. Помогите мне поговорить с моей анимацией. См. Код ниже.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lets talk to each other</title>


<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>

<script>
function init () {

    var canvas, stage, exportRoot;

    canvas = document.getElementById("canvas_ship");
    exportRoot = new libs_ship.ship();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(libs_ship.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);


    canvas = document.getElementById("canvas_car");
    exportRoot = new libs_car.car();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(libs_car.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}

function Tell_Canvas_Ship_to_gotoAndPlay5(){
    canvas_ship.gotoAndPlay(5);
}

</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
    <canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>

animation canvas adobe communicate

2

frogseatflies 26 Апр 2016 в 08:50

Answer 1

Я получил помощь и теперь поделюсь ответом. Добро пожаловать. Просто пригласи меня как-нибудь на завтрак.

В Adobe Animate вам нужно изменить пространство имен библиотеки (я думаю, в настройках публикации на вкладке «Дополнительно») на lib_jerry или любое другое имя, которое вы придумали ... при условии, что оно отличается от другой анимации. Затем просто следуйте настройке в этом коде. Вы можете вызывать функции из анимации Animate.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>

var canvas, stage, tomtom, jerjer;
function init() {

    var exportRoot;

    //Tommy
    canvas = document.getElementById("canvas_tommy");

    tomtom = new lib_tommy.tommy();
    stage = new createjs.Stage(canvas);
    stage.addChild(tomtom);
    stage.update();

    createjs.Ticker.setFPS(lib_tommy.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);


    //Jerry
    canvas = document.getElementById("canvas_jerry");

    jerjer = new lib_jerry.jerry();

    stage = new createjs.Stage(canvas);
    stage.addChild(jerjer);
    stage.update();

    createjs.Ticker.setFPS(lib_jerry.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

}

function button_from_tommy_was_clicked(){   
    tomtom.gotoAndPlay(5);
}

function button_from_jerry_was_clicked(){   
    jerjer.gotoAndPlay(5);
}

</script>

</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
    <canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
    <canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>

1

frogseatflies 3 Май 2016 в 13:23

Answer 2

Похоже, «canvas_ship» - это идентификатор вашего фактического элемента холста. Я думаю , что вы пытаетесь контролировать контент, который добавляете к нему.

Если это так, вы можете вызвать gotoAndPlay для exportRoot, который является экземпляром MovieClip с этим API.

exportRoot.gotoAndPlay(5);

Однако проблема, с которой вы столкнетесь, заключается в том, что после создания сцены и содержимого canvas_ship вы перезаписываете переменные. Я рекомендую изменить имя второго холста, exportRoot и stage.

Вы также можете добавить оба элемента на один холст. Есть ли какая-то причина, по которой вы используете два холста, кроме того, что вы использовали экспортированный контент из 2 FLA?

var stage = new createjs.Stage("canvas_ship");
var ship = new libs_ship.ship();
var car = new libs_car.car();
stage.addChild(ship, car);
createjs.Ticker.addEventListener("tick", stage);

Откуда вызывается ваш метод Tell_Canvas_Ship_to_gotoAndPlay5? Это скрипт кадра в Animate / Flash?

1

Lanny 27 Апр 2016 в 17:15

Как взаимодействовать «внешне» между анимациями Adobe Animate CC?

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

animation