Animateでアニメーションを作成する方法：アニメーションの作り方

Adobe Animate（旧Adobe Flash Professional）は、ウェブ、テレビ、ビデオゲーム、その他のインタラクティブアプリケーション用のアニメーションを作成するための標準として、長い間使用されてきました。 Blue's Clues』、『My Little Pony』、『Metalocalypse』など、多くの有名アニメがアニメーション制作にFlash/Animateを使用している。 2010年代、Adobe Flash Playerはセキュリティ上の理由からインターネット上で使われなくなり、徐々にHTML5やWebGLといった他のフォーマットに取って代わられた。 2020年12月現在、アドビとすべての主要なウェブブラウザは、Flash Playerのサポートを正式に終了し、ダウンロードできなくなりました。 しかし、Adobe AnimateはAdobeのCreative Cloudスイートの一部です。 Adobe Animateを使用して、Flashやその他のさまざまな形式のアニメーションを作成することができます。 このWikiHowでは、Adobe FlashまたはAnimateでアニメーションを作成する方法の基本について説明します。

パート1

はじめに

1. Adobe AnimateまたはFlashをダウンロードしてインストールします。 Adobe Animateは、AdobeのCreative Cloudスイートの一部です。 Adobe AnimateソフトウェアまたはCreative Cloudのサブスクリプションが必要です。 旧バージョンのAdobe Flash Professionalをお持ちの場合は、それを使用することもできます。 Adobe Animateは、.NET Frameworkからダウンロードできます。
2. FlashまたはAnimateで新規プロジェクトを作成します。 Flashには、真ん中に「Fl」と書かれた赤い四角に似たアイコンがあります。 Adobe Animateには、真ん中に「An」と書かれた紫色のアイコンがあります。 アイコンをクリックして、Adobe FlashまたはAnimateを開きます。 次に、左側のメニューから「新規作成」をクリックします。 作成したいビデオアニメーションの高さと幅を入力するか、標準の解像度オプションのいずれかを選択します。 次に「Ok」または「Create」をクリックします。

   • Adobe AnimateまたはFlashでは、上部のメニューバーで「ファイル」をクリックし、次に「新規作成」をクリックすると、いつでも新しいプロジェクトを作成できます。
   • メニューやボタンなどのインタラクティブ要素をアニメーションに使用する場合は、スクリプト言語を選択する必要があります。 "プラットフォームタイプ" の下にあるドロップダウンメニューを使ってください。 Flashが使用していた古いスクリプト言語であるActionScript 3.0を選択するか、HTML5ドキュメントを作成するために "HTML Canvas "を選択することができます。
3. レイアウトを理解する Adobe AnimateまたはFlashで新規プロジェクトを作成すると、画面上に以下の項目が表示されます：

   • ツールバー： ツールバー： ツールバーには、オブジェクトの作成や操作に使用できるすべての描画ツールが含まれています。
     • 選択ツールは、オブジェクトの選択と移動に使用します。
     • 図形ツールは基本的な図形の作成に使用します。
     • ブラシツールと鉛筆ツールは、フリーハンドで図形を描くのに使用します。
     • ペンツールは、精密なベクターオブジェクトの作成に使用します。
     • 消しゴムツールは描いた絵を消すのに使い、テキストツールはアニメーションにテキストを追加するのに使います。
     • ツールバーにはストロークと塗りつぶしのカラーボックスがあり、オブジェクトの色を選択します。
     • ストロークカラーは図形の周りの輪郭の色で、塗りつぶしカラーは図形の内側の色です。
     • ツールバーはデフォルトでは左側にあります。 ツールバーが表示されていない場合は、上部のメニューバーでWindowsをクリックし、次にToolsをクリックしてください。
   • ステージ ステージは画面中央の白い部分です。 アニメーションをパブリッシュしたときに表示される領域です。 ステージ上にオブジェクトを配置することも、ステージの横にオブジェクトを配置することもできます。 ステージの横にあるオブジェクトは、アニメーションをパブリッシュしたときに表示されません。
   • タイムライン： タイムラインは、スクリーンの下にある横棒です。 ここでアニメーションの変化を作成します。 これは、各フレームを表す一連の長方形を含んでいます。タイムラインの上部には、5フレームごとに番号が振られています。 タイムラインは複数のレイヤーを持つことができ、それぞれが独立して動くことができる異なるオブジェクトを含んでいます。 また、赤または青の縦線が表示されます。 これが再生ヘッドです。 再生ヘッドをクリックしてドラッグすると、タイムラインを前後に動かすことができます。 タイムラインの下にある再生トライアングルをクリックすると、アニメーションをプレビューすることができます。
   • パネル Adobe Animate または Flash の左側には、さまざまなタブやパネルが表示されます。 ここには、ライブラリやプロパティパネルなどのパネルがあります。 また、色見本、モーションプリセット、コンポーネントなどのパネルもあります。

パート2

モーショントゥイーンの作成

1. トゥイーンの基本を理解しましょう。Flash/Animateでは、オブジェクトの始点と終点を設定できるトゥイーンと呼ばれる機能を使用します。 それぞれの始点と終点をキーフレームと呼びます。 Flash/Animateは、あるキーフレームから別のキーフレームへ、オブジェクトを自動的に移動・変形させます。 これは、各フレームでオブジェクトを手で動かす必要がある、従来のオブジェクトのアニメーション方法よりもはるかに簡単です。

   • トゥイーンを使って、オブジェクトをある位置から別の位置へ直線的に移動させたり、オブジェクトを回転させたり、オブジェクトを拡大・縮小させたり、あるいはこれらの動きを組み合わせたりできます。
   • トゥイーンと従来のフレーム単位のアニメーションを併用することもできます。
2. 最初のオブジェクトを作成しましょう。FlashやAnimateでオブジェクトを描くには、ツールバーのツールを使用します。 まずは、弾むボールなどの簡単なオブジェクトを作成しましょう。

   • 必要であれば、タイムラインの別レイヤーに背景画像を描くこともできます。 AnimateやFlashに画像を読み込んで背景として使うこともできます。
   • AnimateとFlashは、ベクターベースのグラフィックプログラムです。 ツールバーにある Flash/Animate 組み込みの描画ツールを使用するか、Inkscape などのベクター描画プログラムから画像をインポートすることを強くお勧めします。ベクター画像は歪みなく簡単に拡大縮小できますが、従来のラスター画像は拡大しようとするとぼやけたりピクシレーションしてしまいます。
   • 一度にトゥイーンできるオブジェクトは、タイムラインレイヤーごとに1つだけです。 そのため、複数の動く部分を持つオブジェクトを作りたい場合は、それぞれの動く部分を別々に描き、それぞれのレイヤーに置く必要があります。
3. オブジェクトをシンボルに変換する。オブジェクトをトゥイーンするには、それをシンボルに変換する必要があります。これは、FlashやAnimateがオブジェクトを操作するために使用するフォーマットです。シンボルに変換していないオブジェクトをトゥイーンさせようとすると、最初に変換するよう促されます。

   • イメージをシンボルに変換するには、オブジェクトを右クリックし、「シンボルに変換」をクリックします。Type "の隣にあるドロップダウンメニューで "Movie Clip "を選択します。そしてOkをクリックします。
   • シンボルに変換されたオブジェクトを編集するには、そのオブジェクトをダブルクリックします。 スクリーンの下に、選択したシンボル専用の空白のタイムラインが表示されます。 このタイムラインを使って、シンボルの中にシンボルを作り、それぞれ独立したアニメーションを作ることができます。
4. モーショントゥイーンを作成するために必要なフレームを挿入します。 モーショントゥイーンを終了させたいフレームを右クリックし、フレームの挿入をクリックします。 これにより、最初のフレームから始まり、フレームを挿入したフレームで終わる一連の空白フレームが挿入されます。
5. アニメーションの開始位置にオブジェクトを移動します。アニメーションを開始したいフレームをクリックします。次に選択ツール（黒いマウスカーソルのようなアイコンです）をクリックし、オブジェクトをアニメーションの開始位置にドラッグします。

   • オブジェクトはステージ上で始まったり止まったりする必要はありません。 例えば、あるオブジェクトをカメラの外から飛来させたい場合、ステージの外側、飛来させたい側からドラッグします。 そこがモーショントゥイーンの開始点になります。
6. モーションを停止または変更したい場所にキーフレームを挿入します。 キーフレームは、アニメーションの開始、停止、変更のタイミングを示すために使用します。 これには、移動方向の変更も含まれます。 キーフレームを挿入するには、キーフレームを挿入したいフレームを右クリックし、キーフレームの挿入をクリックします。これにより、フレーム内にドットが配置され、そのフレームがキーフレームであることを示します。
7. モーショントゥイーンを作成する。 モーショントゥイーンを作成するには、モーショントゥイーンを開始したいキーフレームを右クリックします。 次に「モーショントゥイーンを作成」をクリックします。 すべてのフレームが青または紫に変わります（FlashまたはAnimateのどちらを使用しているかによって異なります）。
8. 再生ヘッドをモーショントゥイーンの最後に移動します。 タイムラインのトゥイーンの最後のフレームをクリックします。
9. オブジェクトをトゥイーンの終了位置に移動します。 選択ツールを使って、オブジェクトをクリックし、モーショントゥイーンの最後の位置までドラッグします。 これにより、オブジェクトを移動したフレームに新しいキーフレームが自動的に作成されます。 FlashまたはAnimateは、最初のキーフレームと2番目のキーフレームの間の動きを自動的に計算します。 これが、FlashとAnimateでのモーショントゥイーンの基本です。

   • オブジェクトが動くたびに、またアニメーションが変化するたびに、個別のモーショントゥイーンを作成する必要があります。
   • また、モーショントゥイーンを使ってオブジェクトを動かすだけでなく、フリートランスフォームツールを使ってオブジェクトを回転させたり、サイズを変更することもできます。 自由変形ツールは、ボックスの上にマウスカーソルを置いたような形をしています。 ツールバーのこのオプションをクリックするか、"Q "を押して自由変形ツールを選択します。 オブジェクトの周りにバウンディングボックスが表示され、真ん中に白い点が表示されます。 白い点は、オブジェクトが回転するピボットポイントです。 白い点をクリックしてドラッグすると、ピボットポイントを移動できます。 バウンディングボックスの角や横にある小さなドットをクリックしてドラッグすると、オブジェクトのサイズを調整できます。 Shiftを押しながらドラッグすると、オブジェクトの形が比例したままになります。 オブジェクトを回転させるには、バウンディング・ボックスの隅にあるドットの外側をクリックしてドラッグします。
   • モーショントゥイーンのイーズを調整するには、右側のPropertiesメニューを使います。 イーズインにすると、モーションがゆっくり始まり、徐々に速くなります。 イージングアウトは、速く始まり、徐々に遅くなります。 Animateでは、ドロップダウンメニューから「イーズイン」または「イーズアウト」を選択し、グラフを使ってイーズを調整します。 Flashの場合は、プロパティパネルで「イーズ」を選択し、-100から-1の間の数値を入力するとイーズイン、1から100の間の数値を入力するとイーズアウトになります。
   • FlashやAnimateでは、シェイプトゥイーンを使ってオブジェクトの形を変えることもできます。

パート3

フレーム単位のFlashアニメーションを作る

1. フレーム・バイ・フレームのアニメーションの基本を理解しましょう。これは、アニメーションの「伝統的な」方法と考えられており、各フレームは同じ画像を持っていますが、わずかに変更されています。フレームを素早く分離して再生すると、画像が動いて見えます。これは、伝統的な手描きアニメーションと同じ基本的な手法で、トゥイーンよりも時間がかかります。

   • デフォルトでは、FlashとAnimateは24フレーム/秒（FPS）でアニメーションを作成します。つまり、1秒間のアニメーションは24フレームになりますが、すべてのフレームが異なる必要はありません。多くのFlashアニメーションでは12 FPSが使われていますが、24 FPSの方がより「滑らか」なアニメーションになります。
   • フレームごとのアニメーションは、モーション・トゥイーンと組み合わせて使うことができます。 例えば、キャラクターの脚の動きをアニメーション化するためにフレームバイフレームアニメーションを使いたいとします。 しかし、モーショントゥイーンを使って、脚をステージの端から端まで動かしたいと思うかもしれません。
2. アセットを作成する。フレームごとのアニメーションには、わずかな違いのある複数の画像が必要なため、これらのアセットはすべて手作業で作成する必要があります。始める前にすべて作成してもいいですし、ツールバーのツールを使いながら作ることもできます。

   • アセットを作成する際には、アニメーションの中で動く部分をすべて考慮してください。 タイムラインの別レイヤーに配置できるように、動くパーツはすべて別の画像を作成しましょう。 例えば、キャラクターが喋るアニメーションを作りたい場合、キャラクターの無表情な顔を作り、目と口を別のアセットとして作る方がずっと簡単です。 そうすれば、フレームごとにまったく新しいキャラクターを描く必要がなく、フレームごとに新しい口と目を描き直すだけで済みます。
3. 最初のフレームを作成します。FlashまたはAnimateを初めて起動すると、空白のレイヤーと空のタイムラインが表示されます。ツールバーの描画ツールを使ってアセットを描くか、あらかじめ描いた画像を最初のフレームにインポートします。

   • FlashまたはAnimateに画像をインポートするには、上部のメニューバーで「ファイル」をクリックします。 次に「インポート」をクリックし、続いて「ステージにインポート」をクリックします。 画像アセットを選択し、「開く」をクリックします。 また、すべてのアセットをライブラリにインポートすることもできます。 これを行うには、「ファイル」をクリックし、次に「インポート」をクリックします。 次に「ライブラリにインポート」をクリックし、すべてのアセットを選択します。 次に「開く」をクリックします。 右側の［ライブラリ］タブをクリックすると、ライブラリ内のすべてのアセットが表示されます。 使用する準備ができたら、ステージにドラッグ＆ドロップすることができます。
4. 画像をシンボルに変換します。 オブジェクトやドローイングをシンボルに変換することで、複数のフレームで再度使用することができます。 オブジェクトをシンボルに変換するには、それを選択します。 次にそれを右クリックし、「シンボルに変換」をクリックします。 シンボルに名前を付け、シンボルのタイプとして "クリップを移動 "を選択し、Okをクリックします。
5. アニメーションを変更したい次のフレームにキーフレームを挿入します。 キーフレームは、アニメーションの変更を示すために使用します。 これには、新しいアセットやインスタンスが使用される場合も含まれます。 新しいキーフレームを作成するには、新しいキーフレームを追加したいフレームを右クリックし、キーフレームの追加をクリックします。画像を含むキーフレームは、タイムラインフレームに黒い点が表示されます。 空白のキーフレームは、フレームの上に空洞の円が表示されます。

   • 各フレームに新しい画像を入れる必要はありません。一般的には、2フレームから4フレームごとにキーフレームがあると、良いアニメーションになります。
6. 新しいキーフレームをインポートするか、新しい描画を作成します。 作成したキーフレームをクリックします。 次に、ツールバーの描画ツールを使うか、そのキーフレームで新しい画像をステージにインポートします。 新しい画像は、前の描画と少し異なる程度にします。
7. 新しい図面をシンボルに変換します。 後で使用できるように、各アセットやインスタンスをシンボルに変換します。 新しい図面を右クリックし、シンボルに変換をクリックします。新しいシンボルに名前を付け、シンボルのタイプとして「ムービークリップ」を選択します。
8. この作業を繰り返します。フレームが変わるたびにキーフレームを追加し続けます。そして、新しいキーフレームごとに新しい描画を追加します。 アニメーションが終わるまで続けます。

   • 少しずつ変更する。キーフレームに非常に小さな変更を加えると、アニメーションはより滑らかに見えます。例えば、棒人間が腕を振る場合、2つ目のキーフレームを波の反対側にしてはいけません。その代わりに、波の始まりから終わりまで、いくつかのキーフレームを使って移行します。こうすることで、よりスムーズなアニメーションができます。

パート4

サウンドと音楽の追加

1. 効果音や音楽を録音したり、探したりしましょう。音はアニメーションをより魅力的にします。 音楽、効果音、ダイアログ用に、それぞれ異なるサウンドファイルを追加しましょう。Flash/Animateは、Adobe Sound、MP3、WAV、AIFF、OGGなど、さまざまなファイル形式に対応しています。

   • サウンドは、Adobe Auditionや、Pro Toolsなどのデジタルオーディオワークスペースで録音できます。
   • MP3は通常、ファイルサイズを最小限に抑えながら、完全に許容できる音質を提供します。WAVファイルはファイルサイズが大きいことが多いので、できるだけ避けてください。
2. サウンドファイルをライブラリにインポートします。以下の手順で、サウンドファイルをライブラリにインポートします：

   • 上部のメニューバーで「ファイル」をクリックします。
   • インポート」をクリックします。
   • ライブラリにインポート」をクリックします。
   • オーディオファイルを選択します。
   • 開くをクリックします。
3. サウンドタイプごとに新しいレイヤーを作成します。 音楽、効果音、ダイアログ用に別々のレイヤーを作成することもできます。 新しいレイヤーを作成するには、タイムラインの下部にあるページをめくるようなアイコンをクリックするか、次の手順で新しいレイヤーを挿入します：

   • 上部のメニューバーで［挿入］をクリックします。
   • タイムライン］をクリックします。
   • レイヤー］をクリックします。
4. サウンドを開始するキーフレームを作成します。タイムラインのサウンドレイヤーで、サウンドの再生を開始したいフレームを右クリックします。 次に「キーフレームを挿入」をクリックします。
5. サウンドまたは音楽ファイルを追加します。サウンドを開始させたいキーフレームが選択されていることを確認します。 次に、右側のメニューからプロパティタブをクリックし、プロパティパネルを表示します。 次に、"Sound "の隣にあるドロップダウンメニューを使って、再生を開始したいサウンドファイルを選択します。

   • プロパティ」パネルタブまたはパネルが表示されない場合は、上部のメニューバーで「ウィンドウ」をクリックします。 次に「プロパティ」をクリックします。
6. サウンドにエフェクトを追加する（オプション）。 サウンドにエフェクトを追加したい場合は、「エフェクト」の隣にあるドロップダウンメニューを使ってエフェクトを選択します。 選択できるエフェクトは以下の通りです：

   • 左チャンネル： 左のスピーカーのみでサウンドを再生します。
   • 右チャンネル： 右スピーカーからのみ音を再生します。
   • 右へフェード： 左スピーカーから再生し、徐々に右スピーカーに移行します。
   • 左へフェード： 右スピーカーから再生し、徐々に左スピーカーに移行します。
   • フェードイン 音量は 0 から始まり、徐々に大きくなります。
   • フェードアウト フルボリュームで開始し、徐々に静かにして無音にします。
   • カスタム このオプションでは、エンベロープを使用してフェードとチャンネルをカスタマイズできます。このオプションは、HTML5やWebGLプロジェクトではサポートされていません。
7. サウンドとアニメーションの同期方法を選択します。 Sync "の隣にあるドロップダウンメニューを使って、オーディオとアニメーションの同期方法を選択します。 選択肢は以下の通りです：

   • イベント： イベント：タイムラインでキーフレームがヒットした時に、オーディオの再生を開始します。 タイムラインや最終的なSWFファイルが終了しても、オーディオは再生され続けます。 サウンドのインスタンスが既に再生されていても、再度再生されます。
   • Start（開始）： すでにサウンドが再生されている場合は再生しません。
   • 「Stop: 既にサウンドが再生されている場合、そのサウンドを消音します。 再生中のサウンドを止めるには、別のキーフレームを使います。
   • Stream（ストリーム）： アニメーションがサウンドに追従するように強制します。 フレームが十分に速くレンダリングできない場合は、スキップされます。 イベント（Event）"サウンドとは異なり、"ストリーム（Stream）"サウンドは、アニメーションの再生が終わった後も再生し続けることはありません。

パート5

アニメーションを公開する

1. 作業を保存します。 Adobe FlashやAnimateで作業する場合は、頻繁に保存する必要があります。 作品を保存するには、[ファイル]、[保存]の順にクリックします。 保存したファイルの名前を変更するには、名前を付けて保存をクリックします。 プロジェクトの名前を入力し、保存をクリックします。
2. ファイル」をクリックします。 上部のメニューバーにあります。
3. パブリッシュ設定をクリックします。 ファイルメニューの中にあります。 パブリッシュ設定メニューが開き、パブリッシュするフォーマットを選択できます。
4. アニメーションをパブリッシュしたいフォーマットを選択します。 左側のチェックボックスを使用して、アニメーションを公開するフォーマットを選択します。 Flash/Animateが通常パブリッシュする標準的なSWF形式の他に、アニメーションを埋め込んだHTMLドキュメントをパブリッシュするHTMLラッパーや、GIF、JPEG、PNGも選択できます。 また、Windows ProjectorやMac Projectorを選択して、WindowsやMacのアプリケーションを作成することもできます。

   • パブリッシュされたSWFファイルを表示するには、Flash Playerが必要です。 AdobeはFlashをサポートしなくなったため、Flash Player Projector Content Debuggerを、.NETや.NETなどのサードパーティーのウェブサイトからダウンロードすることができます。
   • Adobe After Effectsで編集する場合は、"Optimize for Adobe After Effects "のチェックボックスをクリックしてください。
5. 最終ファイルのファイル名を入力します。 メニューの一番上にある「出力ファイル」の隣にあるボックスに、作品を公開する際にFlash/Animateが作成するファイル名を入力します。 さらに、フォルダアイコンをクリックして、アニメーションを公開する場所を選択することもできます。

   • 複数のファイル形式を選択している場合は、左側のメニューで形式の種類をクリックし、各形式の出力ファイル名にチェックを入れます。
6. Okをクリックします。 メニューの一番下にあります。 これでパブリッシュ設定が保存されます。
7. アニメーションを公開する 選択したパブリッシュ設定を使用してアニメーションをパブリッシュするには、次の手順を使用します：

   • 上部のメニューバーで File をクリックします。
   • パブリッシュをクリックします。

パート 6

アニメーションをエクスポートする

1. 上部のメニューバーの［ファイル］をクリックします。 Adobe が Flash Player をサポートしなくなったため、ムービーを他の人と共有したい場合は、他の人が見ることができる形式でエクスポートする必要があります。 ファイル］をクリックして［エクスポート］メニューにアクセスします。
2. エクスポートをクリックします。 ファイルメニューの一番下にあります。 フライアウト・メニューが表示されます。

   • または、Adobe Animateの新しいバージョンを使用している場合は、右上隅にある四角に矢印が付いたアイコンをクリックすることもできます。 公開]をクリックし、[ビデオ]の横にあるラジオオプションをクリックします。 パブリッシュをクリックして、アニメーションを MP4 ビデオファイルとしてパブリッシュします。
3. ムービーをエクスポートをクリックします。 "エクスポート "にカーソルを合わせると表示されるフライアウトメニューの中にあります。
4. アニメーションをエクスポートするファイル形式を選択します。 Save as type "の隣にあるドロップダウンメニューを使って、アニメーションを保存するファイル形式を選択します。 GIF、Quicktime (.mov)、Windows Media (.avi)、またはPNG、JPEG、PICT、Bitmapシーケンスとして保存できます。

   • アニメーションをPNG、JPEG、ビットマップ、PICTシーケンスとして保存すると、アニメーションの各フレームが個別の画像としてレンダリングされます。 これらの画像をPremiere ProやAfter Effectsのようなビデオエディタに画像シーケンスとして読み込み、アニメーションをビデオファイルとしてレンダリングすることができます。 この方法の便利な点は、アニメーションの公開中にFlashやAnimateがクラッシュしても、中断したところから再開できることです。
5. アニメーションのファイル名を入力します。

   • アニメーションを画像シーケンスとしてエクスポートする場合、各画像ファイル名には連番が付けられます。 画像シーケンスの画像は、別のフォルダに保存することをお勧めします。
6. 保存をクリックします。 選択したファイルにアニメーションが保存されます。

この記事は、" How to Create an Animation in Animate： この記事は、CC BY-NC-SAの下で公開されている "How to Create an Animation in Animate: From Getting Started to Publishing Your Animation " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。