１．事の発端はとても気になるエントリから
私のPhotoshopは5.0から！と思いながら記事を開くと、うわさには聞いていた猫のイースターが！！！
そしてAnimate(旧Flash)でお悩みということで、これは元フラ職人の血が騒ぐ…
というわけでどんなふうにお悩みなのかなとワクワクしながら、とりあえずswfでまずは再現
そう、クリックで音が鳴るだけならFlashでの再現はめちゃくちゃ簡単。
ASの記述すらいらない。
この時点では口が開くということは知らなかったのであくまで音が鳴るだけ
かつローカルで楽しみたいだけかな？と思っていたのですが、
公開を前提とのことでそれならHTML5ですなということで仕切り直し。
（そもそも作ったものを公開もせずローカルで一人で楽しむのはきっと私くらいな予感）
素材を貸していただいてこちらで再現してみました。
２．Animateで作成してみよう
Animateの起動と新規ドキュメント設定
新規作成を選択
プリセットはどれでも大丈夫ですが、プラットフォームタイプを[ActionScript 3.0]から[HTML5 Canvas]にします
（ワークスペースはアニメーションを元にしています）
素材の追加
ファイル＞ライブラリに読み込み
Shiftを押しながら両方選択（closeは今回使用しないので選択しません）
猫が出すゲッ〇音も同様に読み込みます
次にそれぞれの素材をタイムラインに配置するためのレイヤーを用意します
新規レイヤー
をクリックしてActions用と鼻用のレイヤーを追加します
それぞれのレイヤーにわかりやすいように名称を付けました
ちなみにタイムライン右上の三本線を押すとタイムラインの見え方を変更できますので、
作業しやすいようにぜひ変えてみてください。
では、まずは猫の画像をシーンに追加していきます。
対象となるレイヤーを選択したら、猫の画像をライブラリからドラッグアンドドロップでシーンに入れます
シンボルを設定
次にはなをクリックした際に口が開いて、音がするという仕様なので鼻となるオブジェクトをつくります。
クラシックブラシツールで鼻をなぞるように塗ります。
(液体ブラシを使用しても問題ありませんが、液体ブラシはGPUが使用できる環境のみで動作しますのでご注意ください)
この鼻の位置をクリックすると口が開き、音声が流れるようにしたいのでシンボル化します
右クリックするとシンボルに変換が出てきます
今回はクリックした後にアニメーションするため、
種類はムービークリップを選択します
基準点は真ん中を指定します
設定が完了すると、鼻の周りに青い枠線が付きます。
選択ツール（V）に持ち替え、この鼻をダブルクリックします
ダブルクリックするとシンボル内の編集画面に入れます
（Aiのグループ化、Prのネスト、Aeのプリコン、それぞれの中身の編集と同じような概念です）
Actions用のレイヤー、口のアニメーションと音用のレイヤーを追加します
現在noseのレイヤー内のオブジェクトには色がついていますが、実際には見えていない状態にしたいので
カラーとスタイルの塗りの不透明度を0%にします。
基本的鼻は見えている必要がないため、その隣を右クリックして空白キーフレームを追加します
口をドラッグアンドドロップで追加します
画面が小さくて位置調整が難しい場合は、画面表示を拡大します（虫眼鏡アイコンかCtrl+マウスホイールor Ctrl+＋）
フレームの挿入はタイムライン上で対象のフレームを選択してF5、キーフレームへの変換はF6でできます
ちなみにタイムラインの何もない場所をクリックして、F5を押すとその地点までフレームを伸ばしてくれます
F6の場合はその地点に空白キーフレームを追加し、かつその1つ手前のフレームまで元のフレームを伸ばしてくれます
口を開いたときに音声を流したいので、プロパティ＞フレーム＞サウンド
ここで、素材として事前に読み込んだ「belchwav.mp3」を設定します
するとタイムライン上にも波形が表示されますので、F5を押して波形の終わりが見えるまでキーフレームを広げます
次にフレームラベルを設定していきます
ラベル名を設定したいフレームを選択し、プロパティ＞フレーム＞ラベルで名称を設定します
ここでは1フレーム目に「idle」と設定し、2フレーム目を「open」としました
タイムライン上でも設定したラベル名が表示されます。
Actionsを設定
ではここからActionsの設定です。個人的にActions用にレイヤーを分けるのをお勧めしています。
別に分けなくても設定可能なのですが、どこに設定したかわかりにくくならないように別レイヤーで持つのをお勧めしています。
このアクションいらないやってなったときも、フレームの削除だけで対応できます。
最初のフレームと、音声が流れ終わった最終フレームでActionsを発火させたいので、
2フレーム目と8フレーム目でそれぞれF6をクリックしてフレームを追加します
1フレーム目には this.stop(); をアクションパネルに入力します
音声が終わったら最初[idle]のフレームの位置に戻りたいので
8フレーム目では this.gotoAndStop("idle"); を入力します
Actionsが設定されているフレームには小さくaというマークがつきます
これでシンボルの設定は完了です
シーンのActionsを設定する
シーンにも同様にActionsを設定していきます
// hitArea（不透明度0でもクリックさせる）
const clickArea = new createjs.Shape();
clickArea.graphics.beginFill("#000").drawRect(-20, -15, 40, 30);
this.nose.hitArea = clickArea;
this.nose.cursor = "pointer";
this.nose.mouseEnabled = true;
let isPlaying = false;
let currentSound = null;
this.nose.addEventListener("click", () => {
// 連打対策（再生中は無視）
if (isPlaying) return;
isPlaying = true;
// 口を開く（openフレームに切り替え）
this.nose.gotoAndStop("open");
// 音を再生（リンクIDは belchwav）
currentSound = createjs.Sound.play("belchwav");
// 再生失敗
if (!currentSound) {
this.nose.gotoAndStop("idle");
isPlaying = false;
return;
}
// 音が終わったら口を閉じる
currentSound.on("complete", () => {
this.nose.gotoAndStop("idle");
isPlaying = false;
currentSound = null;
});
});
コード内でコメントも入れていますが、不透明度0にするとクリックイベントが正常に発火しないので
不透明度0に設定した場合でも問題なくクリックイベントを発火させるために
クリックできる範囲として、clickAreaで判定を作っています
次に連打でオゲゲゲってなってもかわいそうなので、連打を無効にするため再生中はクリックを無視するようにします
そしてクリックで口を開き、音声を流すためにここでもそのための記述を行います
注意点としては、音声の指定に拡張子を書かない所です。
音声がうまく読み込めず再生失敗した場合に口がポカーンとあきっぱなしになってもかわいそうなので
失敗した場合も必ず最初のフレームに戻すようにします
もしうまくいかない場合、シンボルのインスタンス名が正しく設定されているか確認してみてください
上記コード内でのnoseはここのインスタンス名に依存しています。
ではここまで設定できたら正しく機能するかテストしてみましょう
プレビューとパプリッシュ
制御＞プレビュー（Ctrl+Enter）でテストできます
ここで問題なく想定した挙動になっていれば、
ファイル＞パブリッシュからファイルを出力していきます
パブリッシュできたらサーバーにアップしてみましょう
実際にパブリッシュしたデータです。ぜひ音が聞こえる環境で鼻を押してみてください。
埋め込みが表示されない方はこちらへ
・・・。
イースターがいろいろ仕込まれているといううわさは聞いていて、
Aeはエラー音の時に出るメェ～という羊の声がエフェクトコントロール上でShiftと左クリックで鳴く
Prには馬の鳴き声、Psには猫の鳴き声、イラレは犬らしいとかって噂を聞いていたのですが
まさか猫の鳴き声じゃなくて〇ップとは夢にも思いませんでした。
噂の正体を知ることができてとてもうれしいです！
ちなみにこれはAnを使用しなくても実装可能ですが、位置の情報をコードだけでやるのかなりしんどいです。
Animateが今後新規DLすらできなくなるという情報が最初出た時どうなるかと思いましたが、
アップデートはなくなるものの今後もDLできるということで少し安心しました。
Web屋的にもアニメーター的にも優秀なソフトなのでぜひとも今後も生き残ってほしいソフトです。
（ちなみに私はmacromedia時代のFlashMX2004からのスタートなので本当に思い入れのあるソフトです）
記事内の誤りや、誤表記等を見つけた場合はぜひ教えていただけますと嬉しいです。
また、他にもこんな方法があるよ、このほうが簡単だよなどもあればいつでも情報お待ちしております◎