Kommunikation zwischen zwei animierten Canvas-Elementen?

Ich möchte zwischen zwei animierten Canvas-Elementen kommunizieren.Kommunikation zwischen zwei animierten Canvas-Elementen?

Ich habe zwei HTML5 Leinwand js Animationen mit Adobe Animate CC gemacht. Ich habe beide Elemente in eine HTML-Seite eingefügt. Ich kann Funktionen innerhalb dieser Animationen erfolgreich aufrufen - die Warnungen werden im folgenden Code erfolgreich ausgelöst.

Ich möchte Funktionen aus einer Animation aufrufen, um die andere Animation zu steuern. Ich brauche Hilfe, wie ich die Animationen richtig aufrufen/benennen/adressieren kann. Bis jetzt bekomme ich keine Antwort mit den canvas_ship.gotoAndPlay(12); und canvas_car.gotoAndPlay(7);, und ich habe Stunden damit verbracht, verschiedene Referenzen auszuprobieren. Ich bin kein großer Programmierer, aber ich bin sicher, das ist eine einfache Sache. Jede Hilfe wird geschätzt!

<!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>

Quelle

2016-04-26 frogseatflies

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

Ich habe Hilfe erhalten und werde nun die Antwort teilen. Bitte schön. Lade mich einfach mal zum Abendessen ein. In Adobe Animate müssen Sie den Bibliotheksnamensraum (in den Veröffentlichungseinstellungen auf der Registerkarte "Erweitert" glaube ich) in lib_jerry oder einen anderen benutzerdefinierten Namen ändern ... solange er sich von dem anderen unterscheidet Animation. Folgen Sie dann einfach dem Setup in diesem Code. Sie können die Funktionen innerhalb der Animate-Animationen aufrufen.

<!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>

Quelle

2016-05-03 13:18:07 frogseatflies

Kommunikation zwischen zwei animierten Canvas-Elementen?

Antwort

Verwandte Themen