Adob​​e Animate CC - 再利用ボタンが動作しないHTML5

Question

HTML5キャンバス内で同じボタンを再利用する際に問題が発生しています。ボタンは、同じフレーム内で数回に分けて、数回に分けて再利用する必要があります。

ボタンが最初の使用で正しく動作します。フレーム72で

this.button_13.addEventListener("click", fl_ClickToGoToAndStopAtFrame_24.bind(this)); 

function fl_ClickToGoToAndStopAtFrame_24() 
{ 
    this.gotoAndStop(72); 
} 

、私は、新しいインスタンス名と同じボタンシンボルを再利用します。残念ながら、このボタンは動作しません。この第二のボタンをクリックする

this.button_14.addEventListener("click", fl_ClickToGoToAndStopAtFrame_25.bind(this)); 

function fl_ClickToGoToAndStopAtFrame_25() 
{ 
    this.gotoAndStop(78); 
} 

は、ボタンの状態を示しているが、第二ボタンは、フレーム72のタイムライン上に存在する場合* 78

をフレームにユーザーを進めません。それは出版された結果には全く存在しません。第2のボタンがフレーム72-77に存在する場合、ボタンは存在するが機能しない。

アイデア？

Answer 1

は、2番目のイベントリスナーを作成する前にこの

this.button_13.removeEventListener("click", fl_ClickToGoToAndStopAtFrame_24.bind(this)); 

を行うようにしてください。

Answer 2

ここには2つのオプションがあります。

1. 別々のボタンインスタンスを別のレイヤーに配置します。
2. 必要に応じてボタンのvisibleプロパティ（true/false）をスクリプトに設定し、this.currentFrameの値に基づいて反応するようにクリックハンドラを変更します。

アニメーションCC（この記事の執筆時点では私にとっては2015.2）は、アニメーションを考慮したHTML 5スクリプト出力を生成しているようです。同じレイヤーの複数のフレームにオブジェクトインスタンスが似ている場合、そのオブジェクトの新しいインスタンスを作成するのではなく、以前のフレームからインスタンスを再利用します。

フレーム1に "myText"という名前の動的テキストボックスを作成します。フレーム2では、別の動的テキストボックスを作成し、 "myOtherText"という名前を付けます。スクリプトを公開して見ると、スクリプトはまずTween.to（）を呼び出して "myText"オブジェクトをキャンバスに配置し、その外観と位置を与え、myTextをmyOtherTextのようにする別の.to（）呼び出しを連結します。 フードの下では、myOtherTextは単に存在しません。

別のレイヤーを作成すると、AnimateはCreateJSで明示的にインスタンスを作成しなければなりません。しかし、たくさんのボタンがあると、それはたくさんのレイヤーを作り、タイムラインを乱雑に見せかけることになります。カップルのボタンインスタンスしかない場合はオプション1をお勧めしますが、後者の場合はオプション2を使用することができます。

1. 新しいレイヤーを作成します。 「ボタンレイヤー」のように、任意の名前を付けてください。
2. このレイヤーにはキーフレームは1つのみです。
3. ボタンインスタンスをこのレイヤーに配置します。連続性のために、それをbutton_13と名づけましょう。

4. tickハンドラをルートMovieClipにバインドします。this）を使用して、ボタンを表示するかどうかを処理します。現在のフレームに依存してフレームにgotoAndStopますボタンに

   var tickHandler = function() { 
       switch (this.currentFrame) { 
       //Add case statements for each frame you want the button to appear on 
       //Remember, frame indexes in CJS are 0-based! 
       case 12: case 13: 
        this.button_13.visible = true; 
        break; 
       default: 
        this.button_13.visible = false; 
       } 
   }.bind(this); 
   this.removeEventListener('tick', tickHandler); //Make sure not to double-bind 
   this.addEventListener('tick', tickHandler); 
   

5. バインドclickハンドラ。

   var clickHandler = function() { 
       switch (this.currentFrame) { 
       //Add case statements for each frame that should have a jump 
       //Remember, frame indexes in CJS are 0-based! 
       case 12: 
        this.gotoAndStop(72); 
        break; 
       case 13: 
        this.gotoAndStop(78); 
        break; 
       } 
   }.bind(this) //Proxy the handler, as done above. 
   this.button_13.removeEventListener('click', tickHandler); //Make sure not to double-bind 
   this.button_13.addEventListener('click', tickHandler); 
   

6. ムービーのフレーム1に両方のスクリプトを配置します。提示されるよう

私はこれを自分でテストしていませんが、それはあなたが探しているものを達成すべきです。

Answer 3

解決策は、別のレイヤーでインスタンスを移動することです。このようにして、2つの異なるインスタンスを、異なるスクリプトと異なる名前の異なる画像で使用することができます。