ChatGPT直伝！Adobe Animateスクリプトアニメ全手順

かつてFlashでアニメーションを作っていた方なら、自分のアイデアが目論見通りに動いた時の高揚感を懐かしく感じるのではないでしょうか。

しかし、後継のAdobe Animateに同じ結果を望んでも、HTML5 CanvasのJavaScriptに馴染めず心が折れてしまうケースは少なくないと思います。（私がそうでした…）

私はWebデザイナーやサイト管理者として働く中で、Flash衰退後の15年以上、インタラクティブアニメーションを実現する新たな手段を探してきましたが、Flashのような手軽さと品質を併せ持つツールは見つかりませんでした。

ところが今回、Animateのコード生成をChatGPTに頼ってみたところ、これが大正解。
凧がランダムに舞うスムーズなアニメーションを実現できました。
ページトップのモーショングラフィックスがその成果です。

試行錯誤はありましたが、ノンプログラマの私がChatGPTを使うことで、JavaScriptの壁を乗り越えられたのです。
この記事を読めば誰でも、AnimateとChatGPTでコード制御のアニメーション表現が可能です。
「スクリプトなんて無理！」と諦めていた方でも、思い通りに動くアニメーションを手に入れる突破口がわかります。

このアニメーションを作るためのお膳立て

ここからは、記事トップに表示されている凧のアニメーションの制作工程をなぞって、誰でも同様の結果を得られるように解説していきます。

今回のアニメーションは、画像の動きを補完するトゥイーンのようなアニメーション作成機能を一切使わないで、スクリプトだけで凧をコントロールしています。そのため、この記事ではAnimateの機能を網羅的に紹介することはせずに、「凧のアニメーション」制作に関わる機能に絞って説明します。
Animateは歴史もある分、複雑なソフトなので割り切って解説しないと、むしろ分からなくなってしまうからでもあります。

新規ドキュメントの作成

では、始めましょう。
Animateの起動からです。チュートリアルのウィンドウが立ち上がるかもしれませんが、これはスキップします。

左上の目立つ［新規ファイル］のボタンを押すか、上部のメニューから[ファイル］＞［新規…]と選ぶかすると[新規ドキュメント]ボックスが開くので、幅を1280、高さを450に設定しました。次に、右下の[プラットフォームタイプ]で[HTML5 Canvas]を選んで[作成]ボタンを押します。

ここでは必ず[HTML5 Canvas]を選んでください。ここが違うと後で使うスクリプトが動きません。

画像を読込んでインスタンスにする（3分）

凧の画像を読み込み、空の背景を置き、凧糸をツールで描くまでが準備段階です。画像をスクリプト(JavaScript)で操作するために「インスタンス」というパーツにする作業を含みます。

次の動画で複数の画像データをまとめて読み込んだり、なるべく少ない手数でムービークリップやインスタンスを作成する手順を紹介します。

動画だけではわかりにくいと思うので、以下に作業別に補足を加えて説明します。

アセット、シンボル、インスタンスとは？

この後、普段使わないAnimate独自の用語が出てくるので、簡単に説明します。
ちょっとややこしい話なので、いったん飛ばして気になったら読んでいただくということでもいいと思います。

その用語は「アセット」「シンボル」「インスタンス」で、それぞれ異なる役割や性質を持つを持つオブジェクトの種類です。この関係性を知らないと、どんなにコードを直してもアニメーションが動かないという事態を招きかねません。
画像は見ただけでは、どれも見た目変わらないので厄介なんです。

ここで、なるべくわかりやすく説明します。

• アセット
  アセットとは、プロジェクトで使う素材全般のことです。画像、音声、動画、グラフィックなどが含まれており、ライブラリに保存しておけば、必要なときにいつでも使えます。
• シンボル
  アセットをベースに、繰り返し利用できる「シンボル」を作成します。 シンボルには「ムービークリップ」「グラフィック」「ボタン」の3種類があり、それぞれ用途や特性が異なります。複数のシーンで同じ素材を簡単に使い回したり、シンボルを編集するだけで、その変更をすべての使用箇所に反映できます。
• インスタンス
  シンボルが「原型」なら、インスタンスはその原型を使った「演者」と考えると分かりやすいかもしれません。インスタンスのサイズや位置などを調整できますが、元のシンボルには影響を与えません。また、インスタンスごとにスクリプトで個別に制御することも可能です。

まとめると：
アセット（素材）からシンボル（再利用可能なオブジェクト）を作成し、ステージ上にインスタンス（シンボルのコピー）として配置する流れです。スクリプトはインスタンス名に対して指示を出します。

SVG画像

凧の画像は、Adobe Illustratorで作りSVGファイルにしたデータを使用しました。メインのグラフィックはIllustratorで精度の高いデザインを行い、それをAnimateに読み込むことで、高品質な印象を与えるアニメーションをすばやく制作することが可能です。このワークフローは制作効率だけでなく、クオリティの維持や修正のしやすさにもつながります。

＊同じAdobe製なのでIllusuratorのaiデータはAnimateで問題なく読み込めるのですが、SVGデータの方が軽いしJavaScriptとの親和性も良さそうです。

ご利用上の注意

• 当サイトで提供するSVG画像は、個人および商用利用が可能です。
• ただし、以下の行為は禁止されています:
  • SVG画像をそのまま、または加工して販売する行為
  • 他サイトやプラットフォームでの再配布
• ダウンロードをもって、本注意事項に同意したものとみなします。
• 著作権は当サイト（カタチノ）に帰属します。

画像の読み込み

読み込みは[ファイル]>[読み込み]>[ライブラリに読み込み…]を選択して、目的のデータを選んで[開く]ボタンで画像データをライブラリに格納できます。この時、複数のファイルを一度に読み込むには、Macならcommandキーを押しながら、Windowsの場合はCtrlキーを押しながらファイルを選択すると便利です。

SVGファイルを読み込むと、レイヤーの扱いを選ぶボックスが開きますが、デフォルトの[すべてのパスを同じレイヤーとフレームに読み込む]でOKします。（ファイルを複数読み込むとそのファイルの数だけこのボックスが開きます）

ライブラリでムービークリップに変換

画像ファイルの読み込み後、Animateが初期設定の状態であれば、画面右上にグレーアウトした［ライブラリ］のタブがあると思うのでクリックしてください。すでに、パネル類のカスタマイズをしていたならトップメニューの[ウィンドウ]＞[ライブラリ]でライブラリのパネルが現れます。

ライブラリとはアニメーションに使用する画像、音声、動画などの素材をまとめて管理する場所で、言ってみればアニメーションという舞台に出演する役者や小道具の「控え室」のようなものです。

そのライブラリで先ほど読み込んだ画像ファイル名をクリックすると、画像イメージを確認することができます。

上はSVGファイルを読み込んだ当初のライブラリです。後で説明しますが、読み込んだばかりの画像は「アセット」というパーツです。[種別]を見ると[グラフィック]となっていますが、これが[ビットマップ]でもなんでも読み込んだばかりの時は「アセット」らしいです。

これらの３つのファイルを「ムービークリップ」という「シンボル」に変換します。
複数画像をまとめてムービークリップに変換するには、先ほどと同じように、Macならcommandキー、Windowsの場合はCtrlキーを併用して選択。そのままマウスを右クリックすると現れるプルダウンメニューから[プロパティ…]を選ぶと現れる[シンボルのプロパティ編集]で[ムービークリップ]を選び[種類]のチェックボックスをチェックし[OK]を押します。

このように[種別]が[ムービークリップ]に変わっています。

ステージに出してインスタンスに変換

ライブラリのムービークリップをステージに出します。動画では３つまとめてドラッグしていますが、１個ずつでも大した違いはないでしょう。
重要なのはライブラリから出してどこかに配置することで、初めてインスタンスとしての名前をつけることができることです。

外に出した凧の画像（ムービークリップ）を１個選択してください。
[プロパティ]を選ぶと、ムービークリップという表示の下にインスタンス名を入れる入力欄があるので、半角英数でスクリプトの中でわかりやすいような名称を記入します。
これを繰り返すことで、３つの画像がすべてインスタンスになります。

凧の画像はそれぞれ次のようにインスタンス名をつけました。
yakkoR_inst：赤い奴凧（やっこだこ）
geisyun_inst：迎春の字凧
eto_inst：巳の字凧

＊_instはインスタンスとわかるようにつけていますが、ルールというわけではありません
＊この記事で掲載しているスクリプトを試して見たい方は、上記のインスタンス名を使用してください

背景のグラデーションを作る（1分30秒）

ここでは、アニメーションの背景となる空を描きます。
具体的にはステージに四角いオブジェクトを配置し、グラデーションを施すことで空を表現します。
オブジェクトと背景の前後関係というレイヤー構成で基本的な位置関係に関わる内容です。

タイムラインのレイヤーの編集

凧の画像のあるレイヤーに名前をつけます。この後に糸の画像も入るので「凧と糸」というレイヤー名にしました。
タイムラインの左上にある＋マークを押してレイヤーを追加します。名前を「背景」として下側にドラッグして奥に下げます。

ステージをズームアウトし四角形を描く

背景をグラデーションにするステップです。

1. ステージ全体が見えるように、虫眼鏡ツールでoptionキーを押しながらクリックしてステージをズームアウト
2. 背景レイヤーが選択されていることを確認
3. 矩形ツールを選んでステージの左上を起点に、ステージより大きめに長方形でカバー
   （四角形の色はなんでもいいですが、輪郭線は不要なので気になる場合は透明にしておきましょう）
4. バケツツールを選択
5. トップメニューの[ウィンドウ]＞[カラー]のパネルで[線状グラデーション]を選択
6. カラーマップから良さそうな青色をクリックして塗りに使うグラデーションを設定
7. ステージの長方形の上で、shiftキーを押しながらバケツツールで上から下方にドラッグ

このステップで浮世絵のような、青から白のグラデーションの空が描けます。

Animateの描画ツールで糸を描く（2分30秒）

Adobe Animateもベジェ曲線も使えるユニークな描画機能があって、実際その特性がマッチする用途もありますが、今回の制作ではAnimateの描画機能は糸の描画にのみに使います。

ベジェ曲線でカーブを描く

描画に取り掛かる前に、間違ったレイヤーに書き込んでしまわないように「背景」レイヤーのカギマークをクリックしてロックします。そして「凧と糸」レイヤーをクリックしてアクティブにします。

ペンツールはIllustratorと同じようにベジェ曲線を描くツールです。ペンツールを選んだら、塗りを透明にして輪郭線に白を選びます。
凧糸の描線を描くために、まずステージの左上でクリックし、そのまま真下にドラッグします。そしてステージの右下でクリックし、今度は水平にドラッグすることで下に膨らむカーブを描きます。
ダイレクト選択ツールで左上の始点のポイントをクリックしてレバー下端をさらに下方向に引っぱっることでカーブの曲げを強めて凧糸の描画は終了です。

カーブをムービークリップに変換

カーブを選択した状態で、トップメニューの［修正］＞［シンボルに変換…］を選びます。
［種類］に［ムービークリップ］を選び、名前をつけます。ここでは「line」としました。
［ライブラリ］パネルを開くと、新たにムービークリップとして追加されているのが確認できます。

凧糸をインスタンスに設定

凧糸のムービークリップをステージで選択状態にして、［編集］＞［複製］を2回繰り返して、凧糸を３つに増やします。
ムービークリップを一つずつ選択しては［プロパティ］パネルで［インスタンス名］のフィールドに記入します。
先ほど作成した３つの凧のインスタンスに対応させるので、凧糸のインスタンスを以下のように名づけました。
line_yakkoR_inst：奴凧の糸
line_geisyun_inst：迎春の字凧の糸
line_eto_inst：巳の字凧の糸

シンボルとインスタンスを編集する（2分30秒）

シンボルの編集

シンボルの編集は［ライブラリ］でムービークリップを選んでから、右クリックからのプルダウンで［編集］を選択することで編集が可能になります。この状態で［プロパティ］を選ぶと、シンボルを編集できるパネルが開きます。
ここで例えばシンボルを構成する線の色や太さを変更すると、ステージ上のインスタンスに反映されます。

作例では糸の太さをこのパネル内で0.３に設定したのですが、スライドバーでは細かい指定ができないため、数字部分をクリックして直接数値の入力を行いました。

インスタンスの変形点を移動

ところが、シンボルで変更してもインスタンスに反映されないものもあります。それが変形点です。
変形点はインスタンスが作成されたときに、通常オブジェクトのど真ん中にあります。
場合によっては、そのままでは都合が悪いことがあって、今回の凧の糸の場合がまさにそれです。スクリプトでは凧の変形点と糸の変形点の座標を一致させることで繋げるので、糸の方の変形点をラインの先端に移動します。

やり方は［自由変形ツール］でインスタンスを選ぶと図形の中心にある変形点を移動できるようになるので、左上にドラッグして糸であるラインの先端に移動します。おおまかに移動できたら虫眼鏡ツールで拡大して、正確に線の端に変更点を重ねます。

ここまでで、インスタンスの配置ができたので事前準備は完了です。

スクリプトを配置とプレビュー

次はインスタンスを動かすスクリプトを配置してプレビューするまでの操作です。実際には、スクリプトが少しできてはプレビューするのを繰り返すわけですが、動画で流れを見てください。

スクリプトを配置して動きを見る（1分10秒）

スクリプトの設置とプレビューまでの流れを解説します。動画では完成したスクリプトを使っていますが、実際にゼロから作る場合は、アクションパネルとプレビューで試行しながら徐々に作りこむ感じになると思います。

タイムラインにスクリプト用のレイヤーを新設

まずタイムラインにレイヤーを追加します。レイヤーの名前は何でもいいですが、「スクリプト」としました。
ここまでの流れで、凧と糸のインスタンスがタイムラインの最初のセルにあります。これらのインスタンスをスクリプトで動かすので、「スクリプト」レイヤーの一番目のセルで右クリックしてメニューから［アクション］を選択、アクションパネルを出します。

スクリプトをアクションパネルに配置

アクションパネルにスクリプトを記入すると、インスタンスに指示を与えることができます。ChatGPTで作成したスクリプトをこのパネルにコピー＆ペーストしてください。結果を確認するには、トップメニューの［制御］>［プレビュー］を選択します。また、急いでいる場合は、画面右上にある丸に三角の［ムービープレビュー］ボタンをクリックすると、ワンアクションでプレビューが可能です。
凧のアニメーションと同じ動きをさせるには、次項の「完成したスクリプト」のJavaScriptコードをコピーしてアクションパネルにペーストしてください。

プレビュー

HTML5 Canvasの場合は、プレビューをAnimateの中では再生できないため、ブラウザが起動して表示されます。
これは、Flash時代から続いていてAnimate内部でプレビューできるAction Scriptと違うところです。

ChatGPTと実験しながらスクリプトを組んでいく

この項ではChatGPTを使ってスクリプトを組んでいく工程を紹介します。
プログラムを一気に完成させる、ということはなかなかノンプログラマにはできないので、ChatGPTと二人三脚でちょっとずつ進めていくイメージです。

ChatGPTとスクリプトを作成する基本フロー

ChatGPTを組み込んだコード作成では、次のような流れで進めました。

1. ChatGPTと会話してアニメーションの動きやタイミングに関するスクリプトを取得する
2. 提供されたコードをAdobe Animateの[アクション]パネルに貼り付ける
3. プレビュー機能を使ってアニメーションの動作を確認する
4. プレビューの結果に応じて、スクリプトを直接書き換えて、再度プレビューをする

１から４のこれを繰り返して満足できる動きになるまで繰り返します。
このサイクルがうまくいくと、スクリプトのエラーに何時間も悩むことなく、スムーズにアニメーションを作成できるはずです。
＊Animateにスクリプトを配置して動作を確認する具体的な操作は、前項「スクリプトを配置して動きを見る」を参考にしてください。

ChatGPTを使ってスクリプトを生成

スクリプトを使って自由自在にアニメーションを制御することは、Animateの最大の強みの一つです。しかし、ノンプログラマにとってはスクリプトの記述はなかなか敷居の高いものです。でもここにChatGPTを利用することで、このプロセスが劇的に簡単に、そして案外楽しいものになると思います。

私が今回試した方法は、プログラムが得意な人にお願いするように、ChatGPTにやってほしいことを伝えてスクリプトを生成してもらうことでした。たとえば、インスタンスに特定の動きや速度を追加したい場合、「凧を回転させたい」「ゆっくり動かしたい」など、希望を伝えるだけで、必要なスクリプトを提案してくれます。試行錯誤はありますが、それでも参考書と首っ引きでやるよりはるかに時間を節約しながら、より思い通りのアニメーション制御が可能です。

ChatGPTとのやりとり

実際の制作では、もっとずっと初歩的なところから質問しました。Animate を使わなくなって久しく、使い方を忘れてしまっていたのです。少し冗長になってしまいますが、Chat GPTとの会話を引用します。このやりとりから雰囲気や難易度をつかんでもらえればと思います。
なお、Chat GPTのチャットはなるべく手を加えないで引用しました。実際とは違う機能名称や記事本文の表記ルールとの違いがあっても、チャットの原文のまま掲載しています。

カタチノ

adobe animate でのインタラクティブなアニメーションの作り方を教えて。

ChatGPT

Adobe Animateを使用してインタラクティブなアニメーションを作成する方法は以下の手順に従います：

1.Adobe Animateファイルの設定：
Animateのスタート画面で「詳細設定／HTML5 Canvas」を選択し、Illustratorドキュメントと同じサイズを設定します。
2.インタラクティブ要素の追加：
Animateのコードスニペットパネルを使用して、インタラクティブ機能やオブジェクトのビヘイビアーを追加します。これにより、ユーザーのアクションに応じてアニメーションが反応するようになります。
3.アニメーションのデザイン：
ゲーム、アプリ、Web向けのインタラクティブなアニメーションをデザインします。この過程で、HTML5 Canvasを使用したアニメーションの作成方法を学びます。
4.HTML5向けのコンテンツの組み立て：
Flash Player向けと比較しながら、HTML5向けのインタラクティブなアニメーションコンテンツの組み立てを理解します。
5.アニメーションに生き生きとした効果を追加：
特にゲームやTV番組、Web向けのアニメーションにおいて、アニメーションやバナー広告に生き生きとした効果をもたらす技術を習得します。

これらの手順に従うことで、Adobe Animateを用いたインタラクティブなアニメーションの基本的な構築方法を理解できます。

となんだか、概念的な答えが返ってきたので、具体的な質問をします。

カタチノ

四角いオブジェクトと曲線のオブジェクトの２つを使って、ランダムに風に吹かれて上下する、凧揚げのアニメーションを作りたい。四角形が凧、曲線が糸。具体的に作り方を教えて。

ChatGPT

Adobe Animateを使用して、風に吹かれる凧のアニメーションを作成する方法は以下の通りです：

1.オブジェクトの描画：
凧と糸を描画します。凧は四角形のオブジェクトとして、糸は曲線のオブジェクトとして作成します。
2.フレームアニメーションの作成：
凧が風に吹かれて上下する動きを表現するために、フレームごとに凧の位置を微妙に変更します。これにより、風に吹かれているような動きを表現できます。
3.トゥイーンアニメーションの使用：
凧の動きには、クラシックトゥイーンまたはモーショントゥイーンを適用します。これにより、滑らかな動きと風のランダムな効果を生み出すことができます。
4.アニメーションの微調整：
凧の動きを自然に見せるために、フレームレートを調整し、動きの速度や範囲を微調整します。

これらの手順に従うことで、Adobe Animateを使用して風に吹かれる凧のアニメーションを作成できます。

今度は、「ランダムに動かして」という指示を無視して通常のトゥイーンアニメーションを提案してきました。やりたいのは、スクリプト制御のアニメーションなので、そのことをはっきり伝えます。

カタチノ

adobe animateでHTML５を使ってプログラミングされた凧の動きをコントロールするのは、どう操作すればいいか具体的に機能やメニューの名称を明示して、ステップバイステップで教えて。

ChatGPT

Adobe AnimateでHTML5を使用してプログラミングされた凧の動きをコントロールする方法は以下のようになります：

1.HTML5 Canvasドキュメントの作成：
Adobe Animateを開き、「ファイル」>「新規」を選択。
「新規ドキュメント」ダイアログボックスで「HTML5 Canvas」を選択。
2.凧の描画：
「ツールパネル」から描画ツール（例：線ツールや形状ツール）を選択し、凧を描きます。
3.シンボルへの変換：
描画した凧を選択し、右クリックメニューから「シンボルに変換」を選択し、シンボルとして保存。
4.アニメーションの設定：
「タイムライン」パネルで新しいレイヤーを追加し、凧の動きを表すキーフレームを設定。
キーフレーム間で凧の位置を変更し、モーションパスを作成。
5.コードの追加：
凧の動きに更なるコントロールを追加するために、アクションスクリプトを使用します。
「アクション」パネルを開き、凧のシンボルに対してカスタムコード（例：位置や動きのランダム化）を追加。
6.アニメーションのプレビューと調整：
「コントロール」メニューから「テストムービー」を選択してアニメーションをプレビュー。
必要に応じてアニメーションを微調整します。
7.出力と公開：
アニメーションが完成したら、「ファイル」>「公開設定」を開き、HTML5として出力。

これらのステップにより、Adobe AnimateでHTML5 Canvasを使用して凧のアニメーションをプログラム的にコントロールすることができます。

HTML5 Canvasを使うことを理解し、作業の流れも教えてくれました。
次にコードを要求します。

カタチノ

「アクション」パネルを開き、凧のシンボルに対してカスタムコードで位置や動きのランダムに動かすためのコードを教えて。

ChatGPT

Adobe Animateの「アクション」パネルを使用して、凧のシンボルをランダムに動かすカスタムコードを記述する手順は以下の通りです：
1.シンボルの準備：
凧のシンボルを作成し、タイムラインに配置します。
シンボルにインスタンス名を付けます（例：kiteInstance）。
2.アクションパネルの開始：
「ウィンドウ」メニューから「アクション」を選択してアクションパネルを開きます。
3.カスタムコードの記述：
以下のようなJavaScriptコードをアクションパネルに記述します：

javascript
this.kiteInstance.x = Math.random() * stage.canvas.width; this.kiteInstance.y = Math.random() * stage.canvas.height; createjs.Ticker.addEventListener("tick", handleTick.bind(this)); function handleTick(event) { this.kiteInstance.x += (Math.random() - 0.5) * 10; // X軸にランダムに動かす this.kiteInstance.y += (Math.random() - 0.5) * 10; // Y軸にランダムに動かす // ステージの境界を超えないように制限 this.kiteInstance.x = Math.max(0, Math.min(this.kiteInstance.x, stage.canvas.width)); this.kiteInstance.y = Math.max(0, Math.min(this.kiteInstance.y, stage.canvas.height)); }
このコードは、凧（kiteInstance）の位置をステージ内でランダムに動かします。createjs.Tickerは、フレームごとにhandleTick関数を呼び出し、凧の位置を更新します。

4.プレビューとテスト：
「コントロール」メニューから「テストムービー」を選択して、コードが正しく動作するかテストします。
この手順により、凧のシンボルをAdobe Animateの「アクション」パネルを使用してランダムに動かすことができます。

ここでやっとスクリプトを出してくれました。
Chat GPTに与えるプロンプトはもっと効率的な支持の仕方があるのだと思いますが…
それでもこんな泥縄式のやり方で一応結果が出るところが今の生成AIのスゴいところだと思います。
やりとりを披露するのはここまでにしますが、このような問答をくり返して完成に近づけていきます。

コードのミスや動作不具合のときも

コードにミスが発生したり、アニメーションが意図通りに動かない場合も、ChatGPTが役に立ちます。エラーメッセージや、どの部分が問題になっているかをChatGPTに伝えることで、適切な修正方法や新しいコードを提案してもらうことができます。

完成したスクリプト

ChatGPTの答えをプレビューして修正するという問答を繰り返した末に仕上がったのが、下のスクリプトです。
100行に満たないコードですが、これがタイムラインのひとつのセルだけに格納されていることを考えると、オブジェクトごとにコードを格納していた往年のFlashとは少し違った達成感がありました。

「スクリプトをアクションパネルに配置」で冒頭の凧のアニメーションを再現したい方はこのスクリプトをコピーして使ってください。ただし、ですが、私自身にプログラミングのスキルがあるわけでもなく、AIはご存知のように間違えることも多い存在です。これらのことを踏まえた上でご自身の判断でご使用ください。

// 初期設定
function initializeKite(kite_mc, line_yakkoR_inst) {
    // ランダムな位置を設定（凧がステージ全体にまんべんなく出るように調整）
    let kiteWidth = kite_mc.getBounds().width * kite_mc.scaleX;
    let kiteHeight = kite_mc.getBounds().height * kite_mc.scaleY;

    // ステージ全体にランダムに配置
    kite_mc.x = (Math.random() * 0.5 + 0.0) * (stage.canvas.width - kiteWidth) + kiteWidth / 2;
    kite_mc.y = (Math.random() * 0.8 + 0.1) * (stage.canvas.height - kiteHeight) + kiteHeight / 2;

    // ランダムなサイズを設定（0.5 から 2.0 の範囲で）
    let randomScale = Math.random() * 1.5 + 0.5; // 0.5 から 2.0 の範囲でサイズを設定
    kite_mc.scaleX = randomScale;
    kite_mc.scaleY = randomScale;

    // ラインの初期位置も凧に合わせる
    line_yakkoR_inst.x = kite_mc.x;
    line_yakkoR_inst.y = kite_mc.y;
}

// 初期化関数を呼び出し
initializeKite.call(this, this.yakkoR_inst, this.line_yakkoR_inst);
initializeKite.call(this, this.eto_inst, this.line_eto_inst);
initializeKite.call(this, this.geisyun_inst, this.line_geisyun_inst);

// 凧の初期位置の調整 - 少なくとも1つは中央付近に配置する
let kites = [this.yakkoR_inst, this.eto_inst, this.geisyun_inst];
let centralKite = kites[Math.floor(Math.random() * kites.length)];
centralKite.x = stage.canvas.width / 20;//この数字で画面のどこに出るか設定
centralKite.y = stage.canvas.height / 9;

// 確実に少なくとも1つの凧が表示されるように初期化
this.yakkoR_inst.visible = true;
this.eto_inst.visible = true;
this.geisyun_inst.visible = true;

// 回転の方向と角度、移動速度、移動方向を制御する変数
let rotationData = [
    { kite_mc: this.yakkoR_inst, line_yakkoR_inst: this.line_yakkoR_inst, rotationDirection: 1, rotationAngle: Math.random() * 25 + 5, tweenActive: false, speedX: Math.random() * 2 + 1, speedY: Math.random() * 1.5 + 0.5 },
    { kite_mc: this.eto_inst, line_yakkoR_inst: this.line_eto_inst, rotationDirection: 1, rotationAngle: Math.random() * 25 + 5, tweenActive: false, speedX: Math.random() * 2 + 1, speedY: Math.random() * 1.5 + 0.5 },
    { kite_mc: this.geisyun_inst, line_yakkoR_inst: this.line_geisyun_inst, rotationDirection: 1, rotationAngle: Math.random() * 25 + 5, tweenActive: false, speedX: Math.random() * 2 + 1, speedY: Math.random() * 1.5 + 0.5 }
];

// 毎フレームの更新
createjs.Ticker.addEventListener("tick", handleTick.bind(this));

function handleTick(event) {
    rotationData.forEach(data => {
        let kite_mc = data.kite_mc;
        let line_yakkoR_inst = data.line_yakkoR_inst;

        // 風によるランダムなX軸とY軸の動きを追加
        let windX = Math.sin(createjs.Ticker.getTime() / 2000) * data.speedX; // 個別の速度でX軸を調整
        let windY = (Math.random() - 0.5) * data.speedY; // 個別の速度でY軸を調整
        kite_mc.x += windX;
        kite_mc.y += windY;

        // ステージの境界を超えないように制限
        let kiteWidth = kite_mc.getBounds().width * kite_mc.scaleX;
        let kiteHeight = kite_mc.getBounds().height * kite_mc.scaleY;
        kite_mc.x = Math.max(kiteWidth / 2, Math.min(kite_mc.x, stage.canvas.width - kiteWidth / 2));
        kite_mc.y = Math.max(kiteHeight / 2, Math.min(kite_mc.y, stage.canvas.height - kiteHeight / 2));

        // Tweenがアクティブでなければ、新しい回転を設定
        if (!data.tweenActive) {
            data.tweenActive = true;

            // 次の目標回転角度を設定し、スムーズに移行
            data.rotationAngle = Math.random() * 25 + 5; // 各凧の回転角度をランダムに設定
            let targetRotation = data.rotationDirection * data.rotationAngle;
            createjs.Tween.get(kite_mc)
                .to({ rotation: targetRotation }, 2000, createjs.Ease.sineInOut)
                .call(() => {
                    // Tween終了後に方向を反転し、次の角度を設定
                    data.rotationDirection *= -1;
                    data.rotationAngle = Math.random() * 25 + 5; // 新たな5度から30度のランダム角度
                    data.tweenActive = false;
                });
        }

        // ラインの位置を凧に合わせて更新
        updateLinePosition.call(this, kite_mc, line_yakkoR_inst);
    });
    stage.update();
}

// ラインの位置を更新する関数
function updateLinePosition(kite_mc, line_yakkoR_inst) {
    line_yakkoR_inst.x = kite_mc.x;
    line_yakkoR_inst.y = kite_mc.y;
    // ラインの長さや方向の調整も必要に応じてここで行う
}

// ステージの更新
createjs.Ticker.addEventListener("tick", () => {
    stage.update();
});

アニメーションをデータとして書き出す

パブリッシュ（1分20秒）

Adobe Animateを使ってアニメーションを作成した後、HTML5 Canvas形式で書き出す手順を説明します。この操作をAnimateでは「パブリッシュ」と呼びますが、書き出したデータを使うことで作成したアニメーションをWebサイト上で動かすことができます。

パブリッシュのフロー

Adobe Animateで作成したHTML5 Canvasのアニメーションデータを書き出す基本的な流れは次の通りです。

1. パブリッシュ設定
   トップメニューの［ファイル］＞［パブリッシュ設定…］で［パブリッシュ設定］パネルを表示します。
   「パブリッシュ」とは、作成したアニメーションやプロジェクトを、特定の形式でエクスポートし、外部で使用できるようにすることです。今回のパブリッシュは、ウェブページでアニメーションを表示するために行います。
   
2. ［パブリッシュ設定］パネルの［パブリッシュ］の項目が［JavaScript/HTML］となっていることを確認します。
   
3. ［出力名］は半角英数の名前にします。これはWebサイトでデータを読み出す際に、ファイル名が半角英数であることで誤動作をあらかじめ避けるためです。作例では、その他の項目はデフォルトのままにしています。
   
4. ［パブリッシュ］ボタンをクリックしてデータを出力します。設定を保存する場合は［OK］ボタンをクリックします。
   
5. パブリッシュデータは、「凧アニメ」ファイルと同じ階層に書き出されています。
   HTML5 Canvas形式で書き出されたファイルとJavaScriptファイルが出力されます。

同じ階層にimagesフォルダが作られ、PNG画像が書き出されています。
パブリッシュした際に生成される「イメージアセット」としてのPNG画像は、アニメーションの構成要素として使用される画像ファイルです。これらのPNGファイルは、HTMLとJavaScriptが連携してアニメーションを表示する際に必要な素材として使われます。

データをサーバーにアップして公開

WordPressサイトに実装する手順

Adobe Animateで作成したHTML5 CanvasアニメーションをWordPressサイトに組み込む手順を、わかりやすく説明します。

必要なファイルの確認

Adobe Animateでアニメーションをパブリッシュすると、以下のファイルとフォルダが生成されます：

• HTMLファイル（例：kites_anime）
• JavaScriptファイル（例：kites_anime.js）
• 画像フォルダ（例：imagesフォルダ内にkites_anime_atlas_1.pngなど）
  
  ＊例は今回の作例によるもの

ファイルのアップロード

これらのファイルをWordPressのサーバーにアップロードします。

1. FTPソフトの準備：
   • FileZillaなどのFTPソフトを使用して、サーバーに接続します。
2. アップロード先の決定：
   • FTPツールを使用して、/wp-content/uploads/ディレクトリ内に新しいフォルダ（例：canvas）を作成し、その中にkites_anime.htmlとkites_anime.jsおよびimagesフォルダ（内部にkites_anime_atlas_1.png）をアップロードします。

表示するWebページに書くコード

WordPressサイトの投稿や固定ページにアニメーションを表示させるには、「投稿」または「固定ページ」のトップに「カスタムHTML」ブロックを使い次のようなコードを書きます。

<iframe src="https://your-site.com（あなたのサイトのURL）/wp-content/canvas/kites_anime.html" width="1280" height="450" frameborder="0" marginheight="0" marginwidth="0" scrolling="yes"></iframe>

公開

投稿や固定ページを公開し、サイト上でアニメーションが正しく表示されるか確認します。

最後に

最後まで読んでいただいてありがとうございます。

前に書いたように、私はプログラマでもコーダーでもありません。
ですので、ここに紹介したスクリプトは、見る人から見れば本当に拙い、もしかするとありえないレベルの勘違いが含まれているかもしれません。その意味では実に分不相応な記事だと思います。

AI自体もまだまだ間違えることが多いです。ハルシネーションというようですが、自信ありげに事実でないことを言ってくるので気をつけないといけないことはたくさんあります。

それでも今までなら、自分で相当勉強するかプロにお願いしないとできないようなことが、AIの進歩で気楽に挑戦できるようになったということを、この記事では伝えたいと思いました。AIはこれからもっともっとより使いやすくなっていくでしょうし、私たちの仕事の境界線はますます不明瞭になっていくのかもしれません。

Webデザイナーなら、サイトを彩るモーショングラフィックスや、動的な説明イラスト、より効果的なWeb広告などの可能性を考えることがあると思いますが、そのハードルが急速に下がりつつあるのです。
AIとの共同作業によって、見える風景が違ってくるのは明らかです。

お問い合わせなどありましたら、こちらからどうぞ。

お名前（必須） *

メールアドレス（必須） *

ご連絡やお問い合わせの内容（必須） *

送信