« イケダム in ハロウィン | メイン | イケダム in 生誕祭り2018 »

イケダム in Animate

イケダム in Animateイケダムです。

サイトタイトル部分のアニメが Adobe Flash で作られていて、
長らく、最近のブラウザで見ると警告が出たりちゃんと表示されなかったり、
スマホでみると静止画が表示されなかったり…という状態になっていました。

Flash の置き換えになるものがなかったのと、
ミニダムがお気に入りだったので長らくそのまま放置していたのですが、
最近、Adobe Flash の後継の Adobe Animate を使うと Flash のコンテンツを
HTML5 に移せるらしい!ということを知って試してみました。

ということで、めでたく最近のブラウザやスマホでも動くようになりました。
Adobe Flash は、1 フレームにここに置いたキャラクターを 20 フレーム目までに
ここに移動して…みたいな感じでアニメを作るソフトなのですが、
Adobe Animate はそのアニメ作成の感覚はそのままに、最終的なアウトプットが
HTML5 の Canvas + JavaScript になるというスグレモノです。
JavaScriptで頑張ればアニメーションが作れるというのはわかっていましたが、
手間がかかりすぎてやらなかったものの、Adobe Animate なら手軽に作れそうです。
Adobe はいい仕事をしていますね。

また、Flash と同様にクリックに反応した動作なども実現できるので、
Flash の頃と同様、歩いているミニダムをクリックして新しい動きを
させることができますし、HTML5 なので、スマホでタップしても
ミニダムがアクションしてくれます。

Flash のスクリプト自体は自動移行してくれず、コメントアウトした状態で
対応する場所に配置されるので、細かい記述を Adobe Animate 用に書き換えて
手動で対応する必要があるのがやや大変です。
座標周りの動作に微妙に Flash と互換性がないバグと思わせる挙動があったり、
生成される HTML・JavaScript コードが古臭かったりと、まだ発展途上の様子が
あります。

また、Adobe の製品は月額課金になってしまったので、使いたいときには
一か月分だけ支払って使う方式になるのが残念なところです。