凧の舞っている動きは、Adobe AnimateのHTML５ Canvasのスクリプトで制御しています。
読込みのたびに凧の位置がランダムに変わり、それぞれ回転、移動運動を行います。
たまに凧が一張も表示されないかもですが、大抵はスクロールすると見えてきますよ。
実は、もうずいぶん前に、Flash（フラッシュ）というソフトを気に入って、モーショングラフィックスやゲーム風味のアニメーションを作っていた時期もあったのですが、Flashが下火になり、私もいつしか使わなくなりました。
AdobeではFlashをAnimateと名前を変えて、アップデートを繰り返していたけど、Flash時代の制御言語のAction Scriptはもはやブラウザがサポートしていないので、作っても見せる場所がないわけです。
そんな頃、AnimateがHTML５ Canvasに対応するようになったと聞いて、チャレンジしました。
HTML５ Canvasというのは絵を描くスペースに例えられます←まさに「キャンバス」。
問題は、キャンバス上の絵を動かすためのJavaScriptというプログラミング言語を操るハードルが高いことです。
「Java Scriptならどんなブラウザでも動く」
「作品がきっといろんな人に見てもらえる」
「がんばってJava Scriptを習得する価値アリ」
そう勢い込んで試してみたものの、やっぱりプログラミングのカベは厚く、あえなく敗退。
Flashの時はなぜできていたのかと言うと、当時はWebデザイナーならFlashができて当然の時代。
参考になるスクリプトの見本がいくらでもあったので、それを少しアレンジするだけで済んだのです。
対してデザイン系のJavaScriptの参考資料はほとんどありませんでした。
そんな現実に阻まれて、結局「こりゃ歯が立たんな」と遠ざかっていました。
それがこれまでの経緯。
そして今回。
ChatGPTはプログラミングもできる、というので試してみたというわけです。
Adobe Animateで凧の動きを制御するプログラム（コード）をChatGPTに書いてもらったのです。
結果から言うと、予想以上にうまくいきました！
「こんな感じのアニメならすぐできる」と言いたいところですが、実際にはたったコレだけのアニメにけっこう試行錯誤しました。
でも、その都度ChatGPTに聞いたり、自分でも考えたりして、なんとか乗り切れたのです。
十何年来の悩みを突破できたんですから・・ChatGPT、やっぱりスゴいわー！
Adobe AnimateとChat GPTをどのように使ってJavaScriptで動かすアニメーションを作るのか、ステップ・バイ・ステップで説明しました。興味のある方は下の関連記事から確認してください。
