2016-04-26 3 views
3

Я хочу общаться между двумя анимированными элементами холста.Как общаться между двумя анимированными элементами холста?

Я создал две анимации jvml5 холста js с Adobe Animate CC. Я поместил оба эти элемента в одну страницу html. Я могу успешно вызывать функции из этих анимаций - предупреждения успешно запускаются в коде ниже.

Я хочу вызвать функции из одной анимации для управления другой анимацией. Мне нужна помощь, зная, как правильно позвонить/назвать/адресовать анимации. Пока я не получаю ответа с canvas_ship.gotoAndPlay(12); и canvas_car.gotoAndPlay(7);, и я потратил несколько часов на различные ссылки. Я не большой кодер, но я уверен, что это просто. Любая помощь приветствуется!

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Multiple Canvas Animations Talking 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_Ship_what_frame_to_go_to(){ 
    alert("tell_Ship_what_frame_to_go_to was triggered"); 
    canvas_ship.gotoAndPlay(12); //This line does not work. 
} 
function tell_Car_what_frame_to_go_to(){ 
    alert("tell_Car_what_frame_to_go_to was triggered"); 
    canvas_car.gotoAndPlay(7); //This line does not work. 
} 


</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> 
+0

http://stackoverflow.com/questions/36856273/how-to-communicate-externally-between-adobe-animate-cc-animations – Lanny

ответ

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> 
Смежные вопросы