Adobe Animate でHTML5 Canvasのアニメーションアセットを作成する - Animate

Adobe Animate でアニメーションアセットを作成する手順を紹介します。

手順

Adobe Animateを起動します。


Adobe Animateのウィンドウが表示されます。


[ファイル]メニューの[新規]メニューをクリックします。


[新規ドキュメント]のウィンドウが表示されます。


今回は左側の[種類]のリストから"HTML5 Canvas"をクリックして選択します。右側のエリアでキャンバスの幅や高さを指定します。設定後ウィンドウ右下の[OK]ボタンをクリックします。


キャンバスが作成されます。


右側のツールパレットから[テキストツール]のボタンをクリックします。



テキストツールが選択された状態で、キャンバスをクリックします。テキストエリアが配置され、テキスト編集状態になります。


文字列を入力します。今回は"Hello World!!" の文字列を入力しました。


マウスでキャンバスの別の場所をクリックすると、テキストエリアのフォーカスが外れ、編集内容が確定されます。


メニューの[制御]の[プレビュー]をクリックします。


Webブラウザが起動し、キャンバスの内容が表示されます。HTML5で作成されているため、FlashがインストールされていないWebブラウザでも表示されます。


以上の手順でHTML5 Canvasのアニメーションアセットを作成できました。