Animateの多くのドキュメント形式には コードによるインタラクションの追加機能があります そのうちいくつかの方法を使用して HTML5 Canvasでインタラクティブに動くコンテンツを作成します このシーンには2つのレイヤーがあります 1つは草模様(Grassy)のテクスチャの 背景レイヤーです もう1つはテントウ虫(LadyBug)レイヤーです LadyBugレイヤーには ムービークリップのインスタンス「LadyBug」があります インタラクションを加えるには テントウ虫のインスタンス名を指定する必要があります それには、プロパティパネルを使用します ここでは、"bug"と名付けます できました LadyBugのインスタンス名が「bug」になりました JavaScriptで、bugというインスタンス名で参照します インタラクティブに動かすためのコードを加えるには アクションパネルを使用します ウィンドウメニューから 「アクション」を選択して、アクションパネルを開きます まだコードは何も入っていません JavaScriptドキュメントにコードを追加するには 「ウィザードで追加」を使用すると簡単です よく使用するアクションがいくつも準備されていて 選択するだけで簡単にドキュメントに追加できます 例えば、インスタンスを回転させる場合は 「Rotate the Object」を選択します 次に、アクションを適用するオブジェクトを選択します ムービークリップLadyBugに bugというインスタンス名を付けたため 選択項目として既に表示されています 「bug」を選択して「次へ」をクリックします 次にトリガーイベントを選択します 様々なイベントがあります ほとんどはマウス操作に関連するものです ここでは「On Mouse Click」を選択します トリガーイベントの対象として「bug」を選択します 「完了して追加」をクリックします これで、コンテンツにコードが追加されました 数行のコメントが追加されていますが ここでは必要ないため、選択して 削除します このコードでは テントウ虫をクリックするたびに、30度回転しますが 意図している回転とは異なります ステージ上でカーソルを動かすと テントウ虫が常に追随して カーソルの方を向くようにします そのためには、ステージでのマウスオーバーを有効にします そこで、1行目に stage.enableMouseOverコードをペーストして 値を「30」にします これで、ステージ上でのマウスオーバーの検出が有効になります これにリアクションを加えるため この関数のように指定します 現在の関数は削除して 新しい関数をペーストします これは、ステージ上のマウスの動きを イベントとして取得し ローカルのY軸およびX軸プロパティをもとに 回転の半径を計算します 次に、半径から計算した角度を bugのrotationプロパティに適用します プレビューしてみましょう 制御メニューから 「プレビュー」をクリックします テントウ虫が少し動いていますが マウスカーソルを近づけ、ステージに入ると カーソルをどこに動かしても 自動的に追いかけます 記述したコードのとおりに動作します Animateではこのような簡単なコードから 複雑なものまで対応しています

Cookie Settings
General information
If enabled:
- We can improve your experience by tailoring the site and the content to things we think might be of interest
- We can better keep track of your preferences — like what language you prefer to use
- We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
- It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
- We won’t be able to remember you from session to session so the experience may not be tailored to your interests
- You’ll still have access to the content of the site but certain features that depend on cookies may not function
- You’ll still see ads, they just may not be as relevant to you
General information
If enabled:
- We can improve your experience by tailoring the site and the content to things we think might be of interest
- We can better keep track of your preferences — like what language you prefer to use
- We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
- It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
- We won’t be able to remember you from session to session so the experience may not be tailored to your interests
- We’ll still count your use of our site and services
- You’ll still have access to the content of the site but certain features that depend on cookies may not function
- You’ll still see ads, they just may not be as relevant to you
