シンプルなインタラクティブコンテンツのデザイン

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ではこのような簡単なコードから 複雑なものまで対応しています