Skip to main content
Participant
November 5, 2018
Answered

ボタンのアニメーションについて

  • November 5, 2018
  • 2 replies
  • 1713 views

Adobe animate ccのボタンについて

マウスアウトをしたときに、マウスオーバーのアニメーションを逆再生して元の状態に戻る動作を作りたいです。

作成方法をご教授いただけないでしょうか。

よろしくお願い致します。

    This topic has been closed for replies.
    Correct answer Fumio Nonaka

    基本的な考え方は「古いFLASHでの作り方」と同じです。つまり、ボタンシンボルの機能としては備わっていないので、まず「マウスオーバーのアニメーション」をスクリプトでつくったうえで、ロールアウトしたときその動きを逆再生しなければなりません。実際には、ムービークリップシンボルのタイムラインにアニメーションをつくって、マウスオーバーとアウトで動きを切り替えるかたちになるでしょう。

    JavaScriptコードによるマウスインタラクションについては「CreateJS でのボタンの作成方法」、仕組みについては古いFlashの「マウスオーバー/マウスアウトで反応するボタン​」あたりが参考になりそうです。

    2 replies

    Fumio Nonaka
    Community Expert
    Fumio NonakaCommunity ExpertCorrect answer
    Community Expert
    November 7, 2018

    基本的な考え方は「古いFLASHでの作り方」と同じです。つまり、ボタンシンボルの機能としては備わっていないので、まず「マウスオーバーのアニメーション」をスクリプトでつくったうえで、ロールアウトしたときその動きを逆再生しなければなりません。実際には、ムービークリップシンボルのタイムラインにアニメーションをつくって、マウスオーバーとアウトで動きを切り替えるかたちになるでしょう。

    JavaScriptコードによるマウスインタラクションについては「CreateJS でのボタンの作成方法」、仕組みについては古いFlashの「マウスオーバー/マウスアウトで反応するボタン​」あたりが参考になりそうです。

    Participant
    November 9, 2018

    ありがとうございます。

    ボタンシンボルには逆再生の機能は無いのですね。

    初心者なので。お教えいただいたものを参考に勉強しながら製作します。

    この度はありがとうございました。

    Fumio Nonaka
    Community Expert
    Community Expert
    November 5, 2018

    「マウスオーバーのアニメーション」をどうつくっているのか、具体的にご説明されないと回答は得られないと思います。

    Participant
    November 7, 2018

    失礼いたしました。

    ボタンシンボルの「オーバー」のタイムラインを編集して、マウスオーバーで拡大する動きを作りました。

    http://www.rexuse.com/animate/test.html

    マウスアウトした際に一瞬で元の大きさに戻ってしまうので、緩やかに縮小して元のサイズに戻る動きにしたいです。

    HTML5 Canvas ドキュメントを使用しています。

    調べても古いFLASHでの作り方しか見つかりませんでした。

    どうぞよろしくお願い致します。