Skip to main content
Lively_image15A8
Inspiring
May 14, 2018
Answered

複数のインスタンスと同じタイミングで、ラベル部分を複数回動かしたいです。

  • May 14, 2018
  • 1 reply
  • 681 views

Animate CCとjavascriptを勉強中です。宜しくお願いいたします。

①OSとそのバージョン   Windows7 Pro SP1 64bit

②製品とそのバージョン Animate CC 2018 (18.0.1(ビルド115))

③トラブルの内容

javascriptの書き方がわからないといった方が良いかもしれませんが、

1つ目のインスタンスに合わせて、

2つ目のインスタンスを同じタイミングで動かしたいです。

1つ目のインスタンス(aaaa_mc)は回転するだけですので、

self = this;

aaaR = 0;

createjs.Tween.get(self.aaaa_mc)

.to({rotation: aaaR+10}, 500)

.wait(500)

.to({rotation: aaaR+20}, 500)

.wait(500)

.to({rotation: aaaR+30}, 500)

.wait(500)

.to({rotation: aaaR+40}, 500)

.wait(500);

としまして、0.5秒間隔で動作させたり止めたりさせていまして、問題なく動作します。

質問させていただきたいのは、

2つ目のインスタンス(arrow_mc)でして、

arrow_mcのラベル('arrow')のみを、1つ目のインスタンスに合わせて動かしたいです。

自分はラベルの操作については、gotoAndStop() などで操作する方法しか認識しておりません。。。。

説明:

動作のイメージとしましては、回転するインスタンス(aaaa_mc)に、わかりやすい様に矢印(arrow_mc)で回転方向はこちらですよ。というふうに表現したいです。

そもそもの考え方が違うなどもお教えいただけますと助かります。

④エラーメッセージ

書き方がよく分からず、エラーメッセージまで至っていません。。

ご指導のほど、よろしくお願いいたします。

This topic has been closed for replies.
Correct answer Melodic_Giggles1674

こんにちは。返事が遅くなり失礼します。

異なるインスタンスのフレームをTweenで動かすには、次のように独立したTweenを用意するのが一つの方法です。

var self = this;

var aaaR = 0;

createjs.Tween.get(self.aaaa_mc)

  .to({rotation: aaaR+10}, 500)

  .wait(500)

  .to({rotation: aaaR+20}, 500)

  .wait(500)

  .to({rotation: aaaR+30}, 500)

  .wait(500)

  .to({rotation: aaaR+40}, 500)

  .wait(500);

// arrow_mc のラベルを切り替える

createjs.Tween.get(self.arrow_mc)

  .call(self.arrow_mc.gotoAndStop, ["black"])

  .wait(500)

  .call(self.arrow_mc.gotoAndStop, ["red"])

  .wait(500)

  .call(self.arrow_mc.gotoAndStop, ["black"])

  .wait(500)

  .call(self.arrow_mc.gotoAndStop, ["red"])

  .wait(500);

もしくは、call()メソッドを使って、任意の関数を呼び出すのも一つの方法でしょう。

※このとき、スコープがややこしくなります。call()メソッドの第三引数にスコープを設定しています。

var aaaR = 0;

createjs.Tween.get(this.aaaa_mc)

  .to({rotation: aaaR+10}, 500)

  .call(this.arrow_mc.gotoAndStop, ["black"], this.arrow_mc)

  .wait(500)

  .call(this.arrow_mc.gotoAndStop, ["red"], this.arrow_mc)

  .to({rotation: aaaR+20}, 500)

  .wait(500)

  .call(this.arrow_mc.gotoAndStop, ["black"], this.arrow_mc)

  .to({rotation: aaaR+30}, 500)

  .wait(500)

  .call(this.arrow_mc.gotoAndStop, ["red"], this.arrow_mc)

  .to({rotation: aaaR+40}, 500)

  .wait(500);

1 reply

Melodic_Giggles1674
Melodic_Giggles1674Correct answer
Participating Frequently
May 28, 2018

こんにちは。返事が遅くなり失礼します。

異なるインスタンスのフレームをTweenで動かすには、次のように独立したTweenを用意するのが一つの方法です。

var self = this;

var aaaR = 0;

createjs.Tween.get(self.aaaa_mc)

  .to({rotation: aaaR+10}, 500)

  .wait(500)

  .to({rotation: aaaR+20}, 500)

  .wait(500)

  .to({rotation: aaaR+30}, 500)

  .wait(500)

  .to({rotation: aaaR+40}, 500)

  .wait(500);

// arrow_mc のラベルを切り替える

createjs.Tween.get(self.arrow_mc)

  .call(self.arrow_mc.gotoAndStop, ["black"])

  .wait(500)

  .call(self.arrow_mc.gotoAndStop, ["red"])

  .wait(500)

  .call(self.arrow_mc.gotoAndStop, ["black"])

  .wait(500)

  .call(self.arrow_mc.gotoAndStop, ["red"])

  .wait(500);

もしくは、call()メソッドを使って、任意の関数を呼び出すのも一つの方法でしょう。

※このとき、スコープがややこしくなります。call()メソッドの第三引数にスコープを設定しています。

var aaaR = 0;

createjs.Tween.get(this.aaaa_mc)

  .to({rotation: aaaR+10}, 500)

  .call(this.arrow_mc.gotoAndStop, ["black"], this.arrow_mc)

  .wait(500)

  .call(this.arrow_mc.gotoAndStop, ["red"], this.arrow_mc)

  .to({rotation: aaaR+20}, 500)

  .wait(500)

  .call(this.arrow_mc.gotoAndStop, ["black"], this.arrow_mc)

  .to({rotation: aaaR+30}, 500)

  .wait(500)

  .call(this.arrow_mc.gotoAndStop, ["red"], this.arrow_mc)

  .to({rotation: aaaR+40}, 500)

  .wait(500);

Lively_image15A8
Inspiring
May 28, 2018

Yasu(clockmaker.jp)様

ご連絡ありがとうございます。

.call()ですか! 助かります。

認識が甘くて、.call()は関数を呼び出すだけかと思っていました。。。理解不十分でした。。

第三引数につきましても、ご説明ありがとうございます。

スコープですか、ちゃんと理解しておらず苦手です。。。

頂いたソースコードを元にして、テストしてみます。

ありがとうございました!!!

Fumio Nonaka
Community Expert
Community Expert
May 28, 2018

補足情報です。

.call()は関数を呼び出すだけ」という理解は正しいです。MovieClip.gotoAndStop()メソッドもJavaScriptでは関数として扱われます。Tween.call()メソッドの第1引数にメソッド、第2引数には渡す引数の配列を与えれば、その引数でメソッドが呼び出されるのです。