2つのアニメーションキャンバス要素間の通信方法

2つのアニメーションキャンバス要素の間で通信したいと思います。2つのアニメーションキャンバス要素間の通信方法

私は、Adobe Animate CCを使用して2つのhtml5キャンバスjsアニメーションを作成しました。私はこれらの要素の両方を1つの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>

出典

2016-04-26 frogseatflies

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

私は助けを受けて答えを共有します。どういたしまして。いつか夕食のために私を招待してください。

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>

出典

2016-05-03 13:18:07 frogseatflies

2つのアニメーションキャンバス要素間の通信方法

答えて

関連する問題