今さら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でいう複合パスね。


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

ではまた。

あなたのPhotoshopはいつから?

どうもどうも。
うちのPhotoshopは3.0.5からでした。ちょうどレイヤーが使えるようになったときですね。
レイヤーもどきの「フロート選択範囲」というものもまだギリギリありました。
PCが非力でクソデカ画像が満足に開けない時に、指定の一部領域だけを開いて編集保存できる「クイックエディット」なんて機能もありましたねえ。

元から多機能なアプリですが、今に比べるとぜんぜん機能が少ないので「メニューとパネルの項目を片っ端からぜんぶ試してやろう」が可能でしたね。時間も余裕があったので、納得いくまであれこれ試しては知識と経験をむさぼるようにむさぼりました。

そんなことはどうでもよくてさ(言いたかっただけだな)

DTP業界に参入する前年、Photoshop4.0がリリースされたんですよ。
アクションをはじめ、新機能がとても便利でした。長らく安定バージョンとして活躍してたような。
(うちは節操なく最新バージョンに飛びつく子でした)
それと、当時は自分でイースターエッグを見つけることにも熱心でした。
いろんなメニュー項目をキーボードの修飾キーを押しながら実行すると、なんか出るってやつ。
近年バージョンではツールバーにバナナが出せますね!

当のバージョン4.0には「Big Electric Cat」がいました。
でっかい電気ねこ!

ふつう、イースターエッグはただ画面がでてそれでおしまいなんですが、このねこには仕掛けがありました。
鼻をクリックすると鳴くんですよ。かわいいー。おもしろーい。大好きー。


うちは慢性的にゲームが作りたかった

話は変わり、うちはゲームが好きで。
作るのも好きだけど、作ったことなくて。典型的なむかしの小中学生だな。
作ったことはあるけど高校のポケコンでBASICで組んだ、本当に単純なやつだけ。
で、ふた昔ほど前、Flashで比較的手軽に作れるのを知り、いざ始め(ようとし)たんですよ。
つってもMacromediaのFlashじゃなく、AdobeのLiveMotionを買いました。
LiveMotionをものすごくかんたんにいうと、Flashつくる「Adobeの」アプリ。
なんで本家Flashにしなかったのって、根っからAdobeっ子だったから。
ホームページもGoLiveで作ってたし…

いざ公式テキストを買ってひととおり触れるようにはなったものの、
本のおしまいのあたりに書いてあるActionScriptはちょいハードルが高くて。ゲーム作るにはコレの習得が必要そうだった。
で、ヤル気の助走をつけてるうちにLiveMotionはバージョン2.0に。
それに合わせてActionScriptのバージョンも2.0に。べべ別物になっとるわー。
それでやや萎えて一旦距離を置くことに。

Flashが、「AdobeのFlash」に

DTP業務でExtendScriptを覚えだした頃、AdobeがMacromediaを買収。
え、じゃLiveMotionもう出ないの。
って知らぬ間にActionScriptは3.0になってて、まーたガラリと別物に…
前に比べればJavaScriptにも少し慣れてきたので、いっちょやるか、
とあちこちを見ながら学習して、いくらか動かせるようにはなりました。もう覚えてないけど。
でも、母体のアプリはというと、FlashがLiveMotionの記憶を呼び覚ましてくれないぐらいの別物に見えて、
まーたアプリ覚え直しかよ、というのでまたも疎遠になってしまい。
ExtendScriptで「何か作りたい欲」がそこそこ満たされてしまってたのもあり。

Big Electric Catを作りたい

なので、過去のLiveMotionスキルのことは一旦なかったことにして、
なにか単純なものから作り直そうと思ったんですね。
冒頭で紹介した電気ねこが適任でした。これならモチベも高い。
で、知人たちを頼って素材をかき集めました。自宅のはもう捨ててた…
さてー、さてさてー。

てとこでAnimate到来

まごまごしてたらAnimateが来ましたねえ…おれは時間をかけすぎた。
まーたまたゼロからですよ。
このひと、今でも笑っちゃうぐらいにラーニングコンテンツが整ってなくて。
ユーザーの大半は昔っからFlash使ってる人だと思うけど、すんなり移行できたのかな。
新規ユーザーなんてものは果たして実在するのかな…
ともかく、またまたまた助走のつけ直しになりました。

AfterEffectsおもしろいね

ところでAnimateの親戚みたいなUIのAfterEffects、以前からちろちろ気になってはいたんだけど
若い頃に3DCGアニメーションつくる人がたくさん輩出してるのを見かけていて、
これはああいう立派な動画を作るのに使うもので、自分のゴミみたいな絵を動かすのはちょっと恐れ多いな、みたいな意識があって敬遠気味にしてたんですわ。
でも何かを見て(何をだ)「自分のゴミみたいな絵を動かすのに使ってもいいんだ!」と気づき、
Adobeクリエイティブカレッジに参加して少しだけ使い方の流れを教わったです。
きっとUIがなんとなく似てるからAnimateにも有利なはず、などと根拠のない助走をつけました。

やっとやっとAnimate独習開始

おっそいな! 素材を取り揃えてから8年経ってたよ!
Animateのチュートリアルは、提供されたキャラクター素材を動かすだけのものばかり。
その素材の作り方を教えてくれよ、と叫ぶこと数回。
ステップごとに画面上でコーチングしてくれる実践チュートリアルは不具合があり、完遂できないものもいくつか。
でも、たかがBig Electric Catを作るだけなら、もういける気がするんよ。
しかし世の中、「たかが」と口にすると「されど」がもれなくついてくるもの。
されどでした。動くように作ったのに動かない。原因がわからない。ちんぷんかんぷん。
アプローチを変えたり、ファイル形式を変えてみたり、のべ5ヶ月の間ずっともちょもちょやってました。
ところが。

きましたAnimate終了の報

あー、ついにきたか、という感想だったかな。
他のアプリみんなバージョン2026がリリースされてるのにAnimateは2024で止まってたんだもの。
日本ではコミュニティフォーラムも静かなままだったし。
代替アプリはAfterEffectsやExpressでがんばれ、とアナウンスされていたけど、
そいつらでは用を足せないのを確認してからAnimateをさわり始めたんだよ。
そしたら他社の何かになるのか。また探すとこからか。
この数ヶ月悩んだのはなんだったのか(行動開始が遅いのがわるい)。
放心気味に溜息を吐くようにTwitterでぼやいた。ら。

それ、◯◯でできます

反応くれたのはあかつきさん
それ、InDesignでできます
いつかの勉強会のタイトルそのまんま使われたな…w うまいこと言われたなあw
InDesign、業務で毎日使ってるだけあって自分自身いまいちばん得意なアプリなんだけど
インタラクティブ系の機能はEPUBファイルの作成がいい感じにできないという話があちこちから聞こえてたので、業務が発生しないうちはハナからひとつも掘り下げてなかったのでした。
そうかー、やるだけやってみっかー、と普段しまいっぱなしの見たことないパネル類を出して、いじること、10分ぐらい。
できてしまった…
つい先日、InDesign25周年の配信でも最後にインタラカンタラやってたじゃんね。見てたのにね。
見直したぞInDesign。推しアプリじゃ。同担拒否じゃ。

Animateやめるのやめた の報

ユーザー数はともかく、Flah稼業の方たちが一斉に上げた声、うちの想像以上の大きさでした。
著名なアニメーターの方や、Flash全盛の頃にバズッた方も。
代わりになるものがない重要なアプリであることを再認識したような。シェアはともかく。
え、電気ねこ、せっかくできたけどAnimateで作りなおす…?
誰かに師事しないとこれ以上は無理だなあ。

以上とりあえず、この数日に起こったできごとを交えての振り返りでした。
InDesignで作った電気ねこ、実物に比べて少しラグはあるけど、動きます。
鼻をクリックしてみてね。スピーカー音量は最大にしてね。約束ね。
どうぞどうぞ。