今さらAnimate覚えたっていいじゃない:その3 アクション

前回は気軽なコピペ結果が場外ホームランで嗚咽でした。
また経典に沿って、今回はアクション(スクリプト)を書いていきます。
これActionScript3かと思ってたら違って、JavaScriptなんですって。
時代についていけてなかった。


Actionsを設定

…の前に、キーフレーム作成するんだったね。
え、8フレームめ?(アオリ検版開始)
自分の失敗ファイルはサウンドの終わりが18フレームめ。

フレームレート30.00で作ちゃてた。経典は12.00だ。

というわけでメニュー項目をしらみつぶしに眺めてー
修正 > ドキュメント
の「ドキュメント設定」で変更できました。
ふつうにプロパティからでもできた。

これでヘンな影響が、出なければいいな。
…出たな。

ここはレイヤーごとに余分なフレームを選択して削除(shift+F5)だけでどうにか。
実はこの時点でもう間違えてる。どこでしょう。

答えはアクションの挿入フレーム。「a」マーク。
2フレームめではなく1フレームめが正解。勇み足で書き込んだ this.stop(); をカット&ペーストで対処。


シーンのActionsを設定する

ええと。
ステージのウィンドウ左上から「←」をクリック

…して、シンボル編集を抜けました。
経典にないレイヤー「gep」は自分の失敗ファイルのもの。
のちのち消します。

ここからちょっと長いスクリプトを書くんだけど、どこに書くんだろ。
たぶ、たぶん鼻のフレームよね。鼻しかさわらないんだし。※1
よし。さて写経。

にしてもこのアクションウィンドウ内、非常に書きにくいづらい。
VSCodeで書いてペーストしよう。
ゎぁぃ copilotがこっちの思考を先回りしてお節介に「次これ書くんじゃろ?」してくれるよ。
いらーん。

というわけでまじめに写経したのでアクションパネルにペースト。
経典では音声ファイルは belchwav.mp3 だけど自分の失敗ファイルでは belch.wav なので
対応して引数の文字列を belch にしておいた。※2


プレビューとパプリッシュ

んじゃでは、どっきどきのムービープレビュー。Macなので ⌘ + return。
はい失敗
延々くちをぱくぱく。しかも無音。

原因:前述の「のちのち消します」としておいたgepレイヤーが残ってましたわ…

gepレイヤーを削除して再ちゃれ。
失敗。いくらクリックしても無反応。鼻が痛くなっちゃうよ。
あれ、わかんね。
経典のコードと差分とってみたけど問題なさそう(対策→攻撃 は素で間違えたけどコメントなのでおっけー)。

あ、はい、すいません…
原因:インスタンス名「nose」が未入力でした。

気を取り直して再々ちゃれ。
鼻クリック。クチひらいた! ゲップした! クチとじない!
自分も猫も、開いた口が塞がらない(言うと思ったと言うと思った)。

経典を先頭から見直したら、※1 先述の疑問点が氷解。
原因:アクション記述先を間違えてた(やっぱり! やっぱり!)。

再々々ちゃれ。
改善なし。
動きはするが元位置にこないということは、たぶん、あれのあれがなんかあれなんだろ。←わかってない
わ、わかんないけどコメントの「攻撃」は「対策」に直しておこう
い、いちおう案外それだけで直るか試しておこう(だめでした)。

冷静に。
サウンド再生が終わったら1フレームめに戻る設計。それでクチが閉じる。
しかし閉じない。つまり1フレームめに飛んでない。つまりサウンドが正常に再生終了していない。
つまり…なんだ、あれがあれなんだろう。
冷静にプレビューしてみるとゲプ音が半分ぐらいに短い。切れている。っぽい。
これ、直感ではフレームレートを変更した影響かも。そんな気してた。

しかし自力では限界が見えたので先生に助けを求めよう。
素直に最初から作り直せよ、と思うものの、ここでの目標は作品の完成よりもアプリの理解なので…

助けを求めた。現状データを見ていただいた。
※2 のアレンジがよくなかったみたい。ワハー。
ライブラリには音声ファイル「belch.wav」しか読み込んでいないのでそうしたんだけど、
どうもパブリッシュの際、かってにmp3に変換しちゃうらしくて、そしたらファイル名が「belchwav.mp3」になってしまうみたい。
つまり、あらかじめmp3を用意しておくのが得策みたい。
ともかく、理屈を理解しつつ挙動も改善したのでばんざい。

それに前後して
「Flash時代の癖でタイムラインを伸ばしたが、どうも不要なようだ」と別の改善点を授かったので反映。
symbolActionsレイヤーの最終フレームに記述したアクション「this.gotoAndStop(“idle”);」も削除で。
これだけで動いたみたい。うん動いた。ありがとうございます!

というわけで、InDesignで作ったやつよりサクサクとゲプゲプするやつ、どうぞどうぞ。
(先生記事にあるやつと何も変わらないのだが)

次回、また権利的に微妙なやつでアニメーションの練習をします。
先生を楽しくさせるお題、というとこだけは自信あるw

今さらAnimate覚えたっていいじゃない:その2 座標系

前回は「ブラシで猫の鼻が描けねえ」でつまずき、
転んでもタダでは起きないんだわよ、とブラシモードの理解を深めました。

経典に沿って次に進みます。


くち画像を配置

で、またつまずきました。はっや。
こんなの、ライブラリからポイするだけだろー、とお思いでしょうよ。
自分でもそうお思いだったよ。
今回、惜しくも満足に動作しなかった自作のファイルをベースにしていて、
極力それを活かそう(ほとんど無理なんだけど)としていたのでした。

あれっすよ、昭和の仮面ライダーでよくあった、あの
「ついにライダーを引っ捕らえました。いつでも処刑できます」
「まあ待て、すぐに頃してしまってはつまらない、時間をかけて愉しむとしよう」
と同じきもち。
あれって100%処刑失敗してるよね…うちも失敗したかったのかもしれないね。


経典ではここで初めてクチを配置してたんだけど、
手元には既にばっちりの位置に配置したクチがあったのです。
スクショの赤で示した箇所、次のテストに出るので覚えておくように。

これをコピーして、鼻シンボルの内部に「同じ位置にペースト」したら、
ぎゃあ。たしかに座標値は同じだけど、ぎゃあ。

これはつまり、座標値の基準点がステージだったものをコピーして
シンボル内パーツとしてペーストしたら、シンボルの基準点座標が基準点になっちゃったよ、
ということ。

なので、親の鼻シンボルの座標値を覚えてクチの座標値にマイナスしてやることで
元の位置に配置することができました。
(ほんとはそれでもちょっぴりズレてる気がして少し手で調整しました)
…だったら最初から新規配置すればよかったよ。
まあ、勉強勉強。経験経験。

フレームの挿入、サウンドの設定は問題ないちゃんでした。
自分でやったときは、なんかてきとうにサウンドをステージにポイしてました。
フレームが適切に選択できていれば、それでもいいっぽい。

次回、いよいよスクリプトをごちょごちょ書くとこです。めんどそー。

今さらAnimate覚えたっていいじゃない:その1 ブラシ

先ごろ、Animateの余命宣告と延命宣告が立て続けにありましたねえ。
うちは、なんでこんなナンバリングの途絶えたアプリを今になって覚えようとしているんでしょうね…
でもFlashっぽいことしようと思ったら他に思いつかなかったんだよ。
あるていどおぼついていろいろ見えてきたら次へ進もうかな、なんて。


独学大失敗おじさん

つい先日まで足掛け5ヶ月、Animateの独習をたくらみました。しかし、あまりにも非効率でした。
Adobeのアプリって、いくらかは他のアプリの知識だけでなんとかなる(ことがある)んですよ。
実際いくつか成功体験ありますし。
しかも昔、Adobe LiveMotionという(「という」が必要なほどのアプリなんですが)Flashコンテンツ作成アプリはばっちり覚えたんですよ。20年以上経って完璧に忘れちゃってたけど。20年て。すごいな。

日本語の参考書籍が極端に少ないのもネックでした。YouTubeにはいくらかあるけど動画だと覚えられない世代なんだ。顔出して喋ってると顔ばっかり気になって作成が目に入らなくなるんだ。


拾う神あり…がとうございますっ

今回、お題をたそがれさんに拾っていただき、わかりやすくまとめていただきました。
お題がチャーミングだったのが救い。ほんとによかった…ありがたすぎますよ。

で、ざっと拝見したところ、「おお、わかりやすい! …わかんないとこは…よし、ないな!」といった印象で、
次回習作の参考にさせていただこう、で済ませかけたんですが、自分をこよなく知る者としては
絶対にいま実際やってみたほうがいい、という結論に(あたりまえすぎるだろう)。
そしたら案の定、出だしからつまずきまくりました。
これ、CEP覚えた時とおなじ流れじゃんね…学習の姿勢が1ミリも成長してない。

というわけで、PhotoshopとIllustratorが知識の基準となっている同胞たちのために、
自分がけつまずいたところを記録していこうと思います。かわいい後輩たちへ(いなそう)。
わしゃAnimateでかわいく動くもん作ってモテたいんじゃー。


まずは先述の、たそがれさん謹製チュートリアル
https://hws123.com/technology-production/2026/02/05/3464/
こちらに沿って進めていくので、あわせてお読みくだされば。

・新規ドキュメント作成
・素材の追加
・レイヤーの作成

…は、まあ、さすがに、うん。今のところ問題ないでした。
あとで問題でたらだいぶかっこわるいなw


シンボルを設定

クラシックブラシツールで、ねこの鼻の形のオブジェクトを作成

いきなり派手につまずきました。
まず、ブラシツールが鉛筆ツールも入れると4種もあるのを知らなかった。
4種の違いについては機会を改めるとして、クラシックブラシ。
塗っても塗っても塗れなかった。まいった。

先に結論だけ出すと、いざ描画、の前に、へんなとこさわっちゃってました。
ブラシモード。ここは「標準」が正解。なんでいらんことした…

へんなとこさわった理由は、独りで直感作業していたときに、長方形を作成したら塗りと線が別オブジェクトになっちゃったのがイヤだった(というかその時の用途に合わなかった)ので、ココを見つけたときに「おっ」とか言って事前にいじっちゃってたのでした。

(ちょっと脱線)これはこれでこのほうがいい局面もあるんですが、IllustratorのパスやPhotoshopのシェイプのように塗り&線で1オブジェクトとしたい場合は、ツールバーのカラーのすぐ下にある「オブジェクトの描画」ボタンを押してハイライト。
もしくはプロパティ > ツール > オブジェクト描画モード をハイライトさせてから描画すると期待通りに。

で、クラシックブラシツールの描画でもこれがあったらイヤだわー、というのでうっかりさわっちゃってたらしいでした。本来まったく別の機能でした。
よくよく思えば他アプリだってブラシツールで描画したパスは塗りか線どっちかしか生きないもんなあ。


この機会に、ブラシの挙動を確認したのでまとめておきます。どっか上手で詳しいところのほうがわかりやすいんだろうけど、書くと自分で覚えやすいもので…
あと認識違いを指摘してもらえる(迷惑だー)。

オブジェクト描画モード-オン

先述のボタンをハイライトさせておくと、1ストロークごとに独立したオブジェクトになる。
オブジェクト操作はパス主体で行う。


オブジェクト描画モード-オフ

オブジェクト描画オンで描画したオブジェクトと重なる場合、(なぜか)背面に新規作成される。
描画後に部分的な範囲選択をすると、オブジェクト全体ではなく選択に含まれた領域だけが操作対象となる。
分離した領域は、ちょっとでもつながっていれば同一オブジェクトとなるが完全に分離した場合は別オブジェクトとして生きてゆくこととなる。

オブジェクト描画オフで描画したオブジェクトと重なる場合、同色オブジェクトとは同化する。ここはPhotoshopの同一レイヤー上の描画と同じと思ってよし。
異色の場合は前面に描画され、背面オブジェクトはカットアウトされる。ここはPhotoshopの同一レイヤー上の描画と同じと思ってだめ。むしろ印刷の版ズレの説明に使えるんじゃねえか、ぐらい清々しい。


ブラシモード-標準

割愛。ふつうだから。


ブラシモード-塗りのみをペイント

既存の塗りオブジェクトの領域内だけに描画。よって、何もない領域への描画は無効となる。
オブジェクト描画オン-オフに関わらず、塗り重ねられたオブジェクトの種類に依存する。
オブジェクト描画オン-オフのものを並べて一気に串刺し描画した場合は挙動がまちまちだったので、しないことを推奨。

ブラシモード-背面をペイント

選択した時点でオブジェクト描画は設定に関わらずオフで描画される。
塗り重ねたオブジェクトがオブジェクト描画オフの場合、同色なら同化、異色なら背面描画してカットアウト。
オンの場合、背面にオブジェクト作成。カットアウトはされない。

ブラシモード-選択範囲をペイント

選択した時点でオブジェクト描画は設定に関わらずオフで描画される。
ブラシモード-塗りのみをペイント に似た場面もあるが、選択範囲内しか塗られない。
Photoshopのクリッピングマスクと選択範囲をいっぺんに使ったかんじ。


ブラシモード-内側にペイント

選択した時点でオブジェクト描画は設定に関わらずオフで描画される。
ブラシモード-背面をペイントと似ているが、塗り重ねられたオブジェクトの中マドの内外を通過した描画は無視される。貫通後は描画される。
中マドってIllustratorでいう複合パスね。


はぁ、以上でクラシックブラシツールは完璧に覚えた!…かどうかはわからんですが、
少なくとも通常用途で困らないぐらいは覚えたよね…
この調子で遅々として進めていきます。念入りに味わいすぎる性格をしています。

ではまた。